Admin — Design System (matiz)

canonical · designer · updated 2026-06-28 · source

The App-surface design system for the Admin (apps/admin) — the internal "notebook" that visualizes the app's AI-wise state: Plans · Roadmap · Decisions. It is a per-surface matiz of the Aurea core (see brand.md §5), deliberately differentiated from the warm brand pieces and the user-facing apps. Decided with José, 2026-06-08 (issue #159).

Source of truth for the visuals: Paper file 01KS9HJRSXFAP5FART7R5Y07CM, page 3-0, 5 artboards (Colors · Typography · Components · Navigation & Sidebars · Main Layout), built following the 5-0 reference structure.

---

1. Concept & register

The Admin is an instrument, not a marketing surface and not a daily consumer app. It reads the state of the system at a glance — counts, status, milestones, decisions. The register is technical notebook / terminal: light, dense, mono-labelled, calm. Restraint over ornament; the data is loud, the chrome is quiet.

It still honors Aurea — same seed-head mark, same Tinta ink — but cooled into a tool. Warmth here comes from typography and precision, not from the warm brand palette.

2. The matiz in one line

Light Lino + Tinta that carries weight + a spark of Cian. Never Azafrán.

• The near-black Tinta carries the contrast (active nav, primary buttons, headers, big numbers). "Make it weigh."
• Cian is the single accent, used sparingly — links, live data, active counter, focus ring, the breadcrumb cursor.
• Azafrán is reserved to the brand and never appears in the Admin.

3. Color tokens (Tailwind v4 @theme)

Semantic roles only — reference the role, never a hue. Light is :root; dark is .dark via @custom-variant.

@theme {
  /* Surfaces — light */
  --color-background: #F7F7F5; /* Lino — canvas (NOT Pergamino) */
  --color-card:       #FFFFFF;
  --color-popover:    #FFFFFF;
  --color-muted:      #F0F0EE;

  /* Text */
  --color-foreground:        #0F0E0C; /* Tinta */
  --color-muted-foreground:  #6E6960; /* Piedra */
  --color-subtle-foreground: #A8A097; /* Polvo — lines/decorative */

  /* Interactive — Tinta carries the contrast, Cian is the accent */
  --color-primary:            #0F0E0C;
  --color-primary-foreground: #FFFFFF;
  --color-accent:             #0891B2; /* Cian */
  --color-accent-soft:        #E2F2F6;
  --color-ring:               #0891B2;

  /* Border */
  --color-border:        #DEDEDA;
  --color-border-subtle: #ECECE9;
  --color-input:         #D8D8D4;

  /* Status */
  --color-success:     #15803D;
  --color-warning:     #B45309;
  --color-destructive: #C0322B;
  --color-info:        #0891B2; /* = accent (Cian) */
}

.dark {
  --color-background: #0F0E0C;
  --color-card:       #1A1916;
  --color-popover:    #201E1A;
  --color-muted:      #242220;
  --color-foreground:        #F5F4F1;
  --color-muted-foreground:  #A8A29A;
  --color-subtle-foreground: #6E6960;
  --color-primary:            #F5F4F1;
  --color-primary-foreground: #0F0E0C;
  --color-accent:             #22A7C9;
  --color-accent-soft:        #0B2D36;
  --color-ring:               #22A7C9;
  --color-border:        #2A2723;
  --color-border-subtle: #1F1D1A;
  --color-input:         #34302B;
  --color-success:     #22C55E;
  --color-warning:     #F59E0B;
  --color-destructive: #EF4444;
  --color-info:        #22A7C9;
}

Light vs. dark is a matiz choice, not a fixed "dark-default". Contrast floor stays WCAG AA in both.

4. Typography

Geist for display/body; Geist Mono is the notebook voice — nav labels, eyebrows, metrics, breadcrumbs in UPPERCASE mono. Numbers always tabular-nums.

Token	Spec	Use
--text-display	Geist 52 / 600 / -0.03em	Notebook hero
--text-hero	Geist 36 / 600 / -0.025em	Main screen
--text-section	Geist 26 / 600 / -0.02em	Section title
--text-h1	Geist 20 / 600 / -0.01em	Subsection
--text-h2	Geist 16 / 600	Card title
--text-label	Geist Mono 11 / 600 / 0.08em UP	Nav / button label
--text-body	Geist 15 / 400 / 1.6	Body
--text-small	Geist 14 / 400 / 1.55	Tables, dense lists
--text-meta	Geist Mono 12 / 500 / 0.14em UP	Meta labels
--text-mono	Geist Mono 13 / 500 / tabular	Data, IDs, timestamps

5. Components (summary)

Full specs in the Paper Components artboard. Key rules:

• Buttons: primary = Tinta; secondary = white + border; accent = Cian (rare); ghost; danger. Radius 8, press scale(0.97).
• Inputs: border --color-input; focus = Cian border + ring.
• Badges/Status: soft bg + colored text + 8px status dot. For plan/PR/decision state.
• Cards: white, --color-border, radius 12, no shadow at rest. MetricCard (overview) + DecisionRow (feed).
• Overlays: Command palette (⌘K, mounts instantly, no animation — Raycast rule), toasts. Active row in --color-accent-soft.

6. Layout — the rail + notebook

• Left rail: 248px expanded / 68px collapsed. Brand row (seed-head + ADMIN), mono nav grouped (OVERVIEW · PLANS · ROADMAP · DECISIONS · AGENTS · STATUS), RECIENTES, profile row at bottom. Active item = Tinta pill; counter = Cian. ⌘1–6 jump, ⌘B collapse.
• Topbar: terminal breadcrumb (ADMIN / ROADMAP █, cursor in Cian), search (⌘K), primary action (Tinta).
• Content: metric cards row → data panels (roadmap timeline, decisions feed). Density per the heavy-data reference.

7. Boundaries

Surface	Palette / register
Brand	Warm "Botánica Restrained" + Azafrán (brand.md)
Admin (this doc)	Lino + Tinta + Cian, technical notebook
App (apps/desktop)	Aurea-derived app matiz — user-focused (TBD, tedos-design-system.md)

All three trace back to the one Aurea core; matices differ in density, contrast, and emphasis — never in a different brand.

8. Open / next

• Implement these tokens as the admin app theme in apps/admin (@theme above).
• Voice/copy for the Admin: admin-tone.md.