Legionis Design System Specification v1.0

1.1 CSS Custom Properties (globals.css Replacement)

The entire globals.css file must be replaced. The current file uses Geist font variables and a simple light/dark toggle. The new file establishes the full brand token system.

@import "tailwindcss";
/* ============================================
   LEGIONIS DESIGN TOKENS
   Brand Guide v2.1 — Dark Mode Primary
   ============================================ */
:root {
  / ── Color: Stone Scale (Background/Surface) ── /
  --color-stone-950: #0c0a09;
  --color-stone-900: #1c1917;
  --color-stone-800: #292524;
  --color-stone-700: #44403c;
  --color-stone-600: #57534e;
  --color-stone-500: #78716c;
  --color-stone-400: #a8a29e;
  --color-stone-300: #d6d3d1;
  --color-stone-200: #e7e5e4;
  --color-stone-100: #f5f5f4;
  --color-stone-50:  #fafaf9;
  / ── Color: Amber/Gold Accent ── /
  --color-amber:       #d97706;
  --color-amber-deep:  #b45309;
  --color-amber-light: #f59e0b;
  --color-gold:        #f59e0b;
  --color-gold-light:  #fbbf24;
  / ── Color: Semantic ── /
  --color-success: #22c55e;
  --color-error:   #ef4444;
  --color-info:    #3b82f6;
  / ── Semantic Aliases ── /
  --background:       var(--color-stone-900);
  --background-deep:  var(--color-stone-950);
  --surface:          var(--color-stone-800);
  --surface-elevated: var(--color-stone-700);
  --border:           var(--color-stone-700);
  --border-subtle:    var(--color-stone-800);
  --text-primary:   var(--color-stone-100);
  --text-secondary: var(--color-stone-400);
  --text-muted:     var(--color-stone-500);
  --text-disabled:  var(--color-stone-600);
  --text-headline:  var(--color-stone-50);
  --accent:       var(--color-amber);
  --accent-hover: var(--color-amber-deep);
  --accent-soft:  var(--color-gold);
  --accent-glow:  var(--color-gold-light);
  --foreground: var(--text-primary);
  / ── Font Family ── /
  --font-display: var(--font-space-grotesk), 'Space Grotesk', system-ui, sans-serif;
  --font-sans:    var(--font-inter), 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    var(--font-jetbrains-mono), 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}
/ ── Tailwind v4 Theme Tokens ── /
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-surface: var(--surface);
  --color-surface-elevated: var(--surface-elevated);
  --color-border: var(--border);
  --color-border-subtle: var(--border-subtle);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-soft: var(--accent-soft);
  --color-accent-glow: var(--accent-glow);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-text-disabled: var(--text-disabled);
  --color-text-headline: var(--text-headline);
  --color-success: var(--color-success);
  --color-error: var(--color-error);
  --color-info: var(--color-info);
  --font-display: var(--font-display);
  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
}
/ ── Base Styles ── /
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/ ── Scrollbar Styling ── /
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-stone-700);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-stone-600);
}/ ── Selection ── /
::selection {
  background: rgba(217, 119, 6, 0.3);
  color: var(--color-stone-50);
}

1.2 Font Loading (layout.tsx)

Replace Geist/Geist_Mono with Space Grotesk, Inter, and JetBrains Mono.

import { Space_Grotesk, Inter, JetBrains_Mono } from "next/font/google";
const spaceGrotesk = Space_Grotesk({
  variable: "--font-space-grotesk",
  subsets: ["latin"],
  weight: ["600", "700"],
  display: "swap",
});
const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
  weight: ["400", "500", "600"],
  display: "swap",
});const jetbrainsMono = JetBrains_Mono({
  variable: "--font-jetbrains-mono",
  subsets: ["latin"],
  weight: ["400", "500"],
  display: "swap",
});

HTML element class:


  ${spaceGrotesk.variable} ${inter.variable} ${jetbrainsMono.variable} antialiased bg-stone-900 text-stone-100}
  >

1.3 Tailwind Token Reference (Quick Lookup)

Since Tailwind v4 uses the stone scale natively, most token mappings are direct:

Brand Token	Tailwind Class	Hex
Primary background	`bg-stone-900`	#1c1917
Surface / cards	`bg-stone-800`	#292524
Border	`border-stone-700`	#44403c
Disabled text	`text-stone-600`	#57534e
Secondary text	`text-stone-500`	#78716c
Body text	`text-stone-400`	#a8a29e
Emphasized body	`text-stone-300`	#d6d3d1
High emphasis	`text-stone-200`	#e7e5e4
Headlines	`text-stone-100`	#f5f5f4
Max contrast	`text-stone-50`	#fafaf9
Amber accent	`bg-amber-600` / `text-amber-600`	#d97706
Amber hover	`bg-amber-700`	#b45309
Gold accent	`bg-amber-500` / `text-amber-500`	#f59e0b
Gold light	`text-amber-400`	#fbbf24
Success	`text-green-500`	#22c55e
Error	`text-red-500`	#ef4444
Info	`text-blue-500`	#3b82f6

Note on amber mapping: Tailwind's amber-600 = #d97706 which exactly matches the brand amber. Tailwind's amber-700 = #b45309 which exactly matches amber-deep. Tailwind's amber-500 = #f59e0b which matches the brand gold. This means we can use native Tailwind amber classes directly without custom config.

1.4 Typography Classes

Element	Classes
Page title	`font-display text-2xl font-bold text-stone-50` (24-32px)
Section heading	`font-display text-lg font-semibold text-stone-100` (18-24px)
Card title	`font-display text-sm font-semibold text-stone-200` (14-16px)
Body text	`font-sans text-sm text-stone-400` (14px)
Body emphasis	`font-sans text-sm font-medium text-stone-300` (14px)
UI label	`font-sans text-xs font-medium text-stone-500` (12-13px)
Code/mono	`font-mono text-xs text-stone-400` (12-14px)
Badge/tag	`font-mono text-[10px] font-medium` (10-11px)

Where font-display maps to Space Grotesk, font-sans to Inter, font-mono to JetBrains Mono.

2. Component Migration Register

Every zinc- and teal- token in the codebase mapped to its brand replacement.

2.1 `src/app/globals.css`

Complete replacement -- see Section 1.1 above. The entire file content changes.

REPLACE ENTIRE FILE with Section 1.1 content.
OLD: --background: #ffffff / #0a0a0a
NEW: --background: #1c1917 (stone-900)
OLD: --foreground: #171717 / #ededed
NEW: --foreground: #f5f5f4 (stone-100)
OLD: --font-sans: var(--font-geist-sans)
NEW: --font-sans: var(--font-inter)
OLD: --font-mono: var(--font-geist-mono)
NEW: --font-mono: var(--font-jetbrains-mono)
OLD: font-family: Arial, Helvetica, sans-serif
NEW: font-family: var(--font-sans)OLD: @media (prefers-color-scheme: dark) { ... }
NEW: (removed -- dark mode is the only mode)

2.2 `src/app/layout.tsx`

File: src/app/layout.tsx
─────────────────────────────────────────
OLD: import { Geist, Geist_Mono } from "next/font/google";
NEW: import { Space_Grotesk, Inter, JetBrains_Mono } from "next/font/google";
OLD: const geistSans = Geist({
       variable: "--font-geist-sans",
       subsets: ["latin"],
     });
NEW: const spaceGrotesk = Space_Grotesk({
       variable: "--font-space-grotesk",
       subsets: ["latin"],
       weight: ["600", "700"],
       display: "swap",
     });
     const inter = Inter({
       variable: "--font-inter",
       subsets: ["latin"],
       weight: ["400", "500", "600"],
       display: "swap",
     });
OLD: const geistMono = Geist_Mono({
       variable: "--font-geist-mono",
       subsets: ["latin"],
     });
NEW: const jetbrainsMono = JetBrains_Mono({
       variable: "--font-jetbrains-mono",
       subsets: ["latin"],
       weight: ["400", "500"],
       display: "swap",
     });OLD: className={${geistSans.variable} ${geistMono.variable} antialiased bg-zinc-950 text-zinc-100}
NEW: className={${spaceGrotesk.variable} ${inter.variable} ${jetbrainsMono.variable} antialiased bg-stone-900 text-stone-100}

2.3 `src/app/dashboard/layout.tsx`

File: src/app/dashboard/layout.tsx ─────────────────────────────────────────

OLD: bg-zinc-950 text-zinc-100 NEW: bg-stone-900 text-stone-100

2.4 `src/components/shared/sidebar.tsx`

File: src/components/shared/sidebar.tsx ───────────────────────────────────────── LINE 19 — aside container: OLD: border-zinc-800 bg-zinc-900 NEW: border-stone-700 bg-stone-800 LINE 21 — header: OLD: border-b border-zinc-800 NEW: border-b border-stone-700 LINE 23 — logo text: OLD: text-zinc-100 NEW: text-stone-100 font-display LINE 24 — beta badge: OLD: bg-teal-500/10 text-teal-400 NEW: bg-amber-600/10 text-amber-500 LINE 38 — workspace section border: OLD: border-b border-zinc-800 NEW: border-b border-stone-700 LINE 46 — new conversation button: OLD: bg-teal-600 ... text-white ... hover:bg-teal-500 NEW: bg-amber-600 ... text-white ... hover:bg-amber-700 LINE 55 — conversations label: OLD: text-zinc-500 NEW: text-stone-500 LINE 63 — empty state text: OLD: text-zinc-600 NEW: text-stone-600 LINE 73 — scrollbar thumb: OLD: bg-zinc-700 NEW: bg-stone-700 LINE 79 — bottom nav border: OLD: border-t border-zinc-800 NEW: border-t border-stone-700 LINE 101 — workspace selector button: OLD: border-zinc-700 bg-zinc-800 ... text-zinc-300 ... hover:border-zinc-600 hover:bg-zinc-750 NEW: border-stone-700 bg-stone-800 ... text-stone-300 ... hover:border-stone-600 hover:bg-stone-700 LINE 103 — workspace icon: OLD: bg-teal-600 text-xs font-bold text-white NEW: bg-amber-600 text-xs font-bold text-white LINE 108 — chevron: OLD: text-zinc-500 NEW: text-stone-500 LINE 114 — dropdown content: OLD: border-zinc-700 bg-zinc-800 NEW: border-stone-700 bg-stone-800 LINE 118 — dropdown item: OLD: text-zinc-300 ... hover:bg-zinc-700 NEW: text-stone-300 ... hover:bg-stone-700 LINE 119 — dropdown workspace icon: OLD: bg-teal-600 NEW: bg-amber-600 LINE 124 — dropdown separator: OLD: bg-zinc-700 NEW: bg-stone-700 LINE 125 — create workspace item: OLD: text-zinc-400 ... hover:bg-zinc-700 NEW: text-stone-400 ... hover:bg-stone-700 LINE 149 — disabled link: OLD: text-zinc-600 NEW: text-stone-600 LINE 152 — "Soon" badge: OLD: text-zinc-700 NEW: text-stone-600 LINE 162 — active link: OLD: bg-zinc-800 text-zinc-100 NEW: bg-stone-700 text-stone-100

LINE 163 — inactive link: OLD: text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200 NEW: text-stone-400 hover:bg-stone-700 hover:text-stone-200

2.5 `src/components/chat/chat-container.tsx`

File: src/components/chat/chat-container.tsx ───────────────────────────────────────── LINE 109 — thinking indicator: OLD: bg-zinc-800 ... text-zinc-400 NEW: bg-stone-800 ... text-stone-400 LINE 121 — error border: OLD: border-red-500/30 bg-red-500/10 text-red-400 NEW: (keep — red-500 matches brand error #ef4444) LINE 172 — EmptyState heading: OLD: text-zinc-100 NEW: text-stone-50 font-display LINE 173 — EmptyState subtitle: OLD: text-zinc-400 NEW: text-stone-400 LINE 213 — HintCard border: OLD: border-zinc-800 NEW: border-stone-700 LINE 214 — HintCard title: OLD: text-zinc-200 NEW: text-stone-200 LINE 215 — HintCard description: OLD: text-zinc-500 NEW: text-stone-500

LINE 216 — HintCard example: OLD: font-mono text-xs text-zinc-600 NEW: font-mono text-xs text-stone-600

2.6 `src/components/chat/message.tsx`

File: src/components/chat/message.tsx ───────────────────────────────────────── LINE 18 — user message bubble: OLD: bg-teal-600 ... text-white NEW: bg-amber-600 ... text-white

(Keep rounded-2xl rounded-br-sm — the shape is fine)

Note: The assistant message in this file has no explicit background styling (it delegates to ). The tool-indicator is a separate component. No other zinc/teal tokens in this file.

2.7 `src/components/chat/chat-input.tsx`

File: src/components/chat/chat-input.tsx ───────────────────────────────────────── LINE 99 — input container border: OLD: border-zinc-700 bg-zinc-800/50 ... focus-within:border-zinc-500 NEW: border-stone-700 bg-stone-800/50 ... focus-within:border-amber-600/50 LINE 112 — textarea text/placeholder: OLD: text-zinc-100 placeholder-zinc-500 NEW: text-stone-100 placeholder-stone-500

LINE 117 — send button: OLD: bg-teal-600 text-white ... hover:bg-teal-500 ... disabled:hover:bg-teal-600 NEW: bg-amber-600 text-white ... hover:bg-amber-700 ... disabled:hover:bg-amber-600

2.8 `src/components/chat/skill-palette.tsx`

File: src/components/chat/skill-palette.tsx ───────────────────────────────────────── LINE 84 — empty state: OLD: border-zinc-700 bg-zinc-800 ... text-zinc-500 NEW: border-stone-700 bg-stone-800 ... text-stone-500 LINE 101 — outer container: OLD: border-zinc-700 bg-zinc-800 NEW: border-stone-700 bg-stone-800 LINE 105 — category header: OLD: bg-zinc-800 ... text-zinc-500 NEW: bg-stone-800 ... text-stone-500 LINE 116 — selected item: OLD: bg-teal-600/20 text-teal-300 NEW: bg-amber-600/20 text-amber-400 LINE 117 — unselected item: OLD: text-zinc-300 hover:bg-zinc-700/50 NEW: text-stone-300 hover:bg-stone-700/50 LINE 120 — skill id text: OLD: text-zinc-500 NEW: text-stone-500

LINE 122 — skill description: OLD: text-zinc-400 NEW: text-stone-400

2.9 `src/components/chat/agent-selector.tsx`

File: src/components/chat/agent-selector.tsx ───────────────────────────────────────── LINE 98 — empty state: OLD: border-zinc-700 bg-zinc-800 ... text-zinc-500 NEW: border-stone-700 bg-stone-800 ... text-stone-500 LINE 115 — outer container: OLD: border-zinc-700 bg-zinc-800 NEW: border-stone-700 bg-stone-800 LINE 119 — team header: OLD: bg-zinc-800 ... text-zinc-500 NEW: bg-stone-800 ... text-stone-500 LINE 130 — selected agent: OLD: bg-teal-600/20 text-teal-300 NEW: bg-amber-600/20 text-amber-400 LINE 131 — unselected agent: OLD: text-zinc-300 hover:bg-zinc-700/50 NEW: text-stone-300 hover:bg-stone-700/50

LINE 136 — agent description: OLD: text-zinc-500 NEW: text-stone-500

2.10 `src/components/chat/markdown.tsx`

File: src/components/chat/markdown.tsx ───────────────────────────────────────── LINE 8 — pre (code block): OLD: border-zinc-700 bg-zinc-900 NEW: border-stone-700 bg-stone-900 LINE 17 — inline code: OLD: bg-zinc-800 ... text-teal-300 NEW: bg-stone-800 ... text-amber-400 LINE 33 — table header: OLD: border-zinc-700 bg-zinc-800 ... text-zinc-300 NEW: border-stone-700 bg-stone-800 ... text-stone-300 LINE 40 — table cell: OLD: border-zinc-700 ... text-zinc-400 NEW: border-stone-700 ... text-stone-400 LINE 51 — link: OLD: text-teal-400 ... hover:text-teal-300 NEW: text-amber-500 ... hover:text-amber-400 LINE 66 — list item: OLD: text-zinc-300 NEW: text-stone-300 LINE 71 — h1: OLD: text-zinc-100 NEW: text-stone-50 font-display LINE 78 — h2: OLD: text-zinc-100 NEW: text-stone-100 font-display LINE 84 — h3: OLD: text-zinc-200 NEW: text-stone-200 font-display LINE 90 — paragraph: OLD: text-zinc-300 NEW: text-stone-300 LINE 94 — blockquote: OLD: border-teal-500/50 ... text-zinc-400 NEW: border-amber-600/50 ... text-stone-400 LINE 100 — hr: OLD: border-zinc-700 NEW: border-stone-700

LINE 103 — strong: OLD: text-zinc-100 NEW: text-stone-100

2.11 `src/components/chat/tool-indicator.tsx`

File: src/components/chat/tool-indicator.tsx ───────────────────────────────────────── LINE 37 — tool button: OLD: border-zinc-700/50 bg-zinc-800/50 ... text-zinc-400 ... hover:border-zinc-600 hover:text-zinc-300 NEW: border-stone-700/50 bg-stone-800/50 ... text-stone-400 ... hover:border-stone-600 hover:text-stone-300 LINE 47 — calling indicator: OLD: text-teal-400 NEW: text-amber-500 LINE 50 — done indicator: OLD: text-zinc-500 NEW: text-stone-500 LINE 57 — args label: OLD: text-zinc-500 NEW: text-stone-500 LINE 58 — args pre: OLD: bg-zinc-900 ... text-zinc-400 NEW: bg-stone-900 ... text-stone-400 LINE 65 — result label: OLD: text-zinc-500 NEW: text-stone-500

LINE 66 — result pre: OLD: bg-zinc-900 ... text-zinc-400 NEW: bg-stone-900 ... text-stone-400

2.12 `src/app/dashboard/settings/layout.tsx`

File: src/app/dashboard/settings/layout.tsx ───────────────────────────────────────── LINE 23 — page heading: OLD: text-zinc-100 NEW: text-stone-50 font-display LINE 25 — page subtitle: OLD: text-zinc-500 NEW: text-stone-500 LINE 29 — tab nav border: OLD: border-b border-zinc-800 NEW: border-b border-stone-700 LINE 42 — active tab: OLD: border-teal-500 text-zinc-100 NEW: border-amber-600 text-stone-100

LINE 43 — inactive tab: OLD: text-zinc-500 hover:text-zinc-300 NEW: text-stone-500 hover:text-stone-300

2.13 `src/app/dashboard/settings/page.tsx` (Profile)

File: src/app/dashboard/settings/page.tsx ───────────────────────────────────────── LINE 9 — heading: OLD: text-zinc-100 NEW: text-stone-100 LINE 11 — description: OLD: text-zinc-500 NEW: text-stone-500 LINE 15 — card: OLD: border-zinc-800 bg-zinc-900 NEW: border-stone-700 bg-stone-800 LINE 18 — dt labels: OLD: text-zinc-500 NEW: text-stone-500 LINE 21 — dd values: OLD: text-zinc-200 NEW: text-stone-200

LINE 37 — user ID: OLD: font-mono text-xs text-zinc-500 NEW: font-mono text-xs text-stone-500

2.14 `src/app/dashboard/settings/billing/billing-client.tsx`

File: src/app/dashboard/settings/billing/billing-client.tsx ───────────────────────────────────────── LINE 53 — heading: OLD: text-zinc-100 NEW: text-stone-100 LINE 55 — description: OLD: text-zinc-500 NEW: text-stone-500 LINE 61 — subscription card: OLD: border-zinc-800 bg-zinc-900 NEW: border-stone-700 bg-stone-800 LINE 64 — label: OLD: text-zinc-500 NEW: text-stone-500 LINE 67 — plan name: OLD: text-zinc-100 NEW: text-stone-100 LINE 71 — status label: OLD: text-zinc-400 NEW: text-stone-400 LINE 76 — trial text: OLD: text-zinc-500 NEW: text-stone-500 LINE 82 — period text: OLD: text-zinc-600 NEW: text-stone-600 LINE 92 — manage button: OLD: bg-zinc-800 ... text-zinc-300 ... hover:bg-zinc-700 NEW: bg-stone-700 ... text-stone-300 ... hover:bg-stone-600 LINE 99 — no sub card: OLD: border-zinc-800 bg-zinc-900 NEW: border-stone-700 bg-stone-800 LINE 100,103,107 — no sub text: OLD: text-zinc-500, text-zinc-100, text-zinc-500 NEW: text-stone-500, text-stone-100, text-stone-500 LINE 177 — BYOT note: OLD: text-zinc-600 NEW: text-stone-600 StatusBadge component (LINE 186-201): OLD: bg-green-500/10 text-green-400 (active) NEW: (keep — matches brand success) OLD: bg-teal-500/10 text-teal-400 (trialing) NEW: bg-amber-500/10 text-amber-500 OLD: bg-amber-500/10 text-amber-400 (past_due) NEW: bg-amber-600/10 text-amber-400 (slight adjustment for differentiation) OLD: bg-red-500/10 text-red-400 (canceled) NEW: (keep — matches brand error) OLD: bg-zinc-800 text-zinc-400 (default) NEW: bg-stone-700 text-stone-400 PlanCard component (LINE 227-275): OLD: border-teal-600 bg-teal-950/20 (highlighted) NEW: border-amber-600 bg-amber-950/20 OLD: border-zinc-800 bg-zinc-900 (default) NEW: border-stone-700 bg-stone-800 OLD: text-zinc-200 (card title) NEW: text-stone-200 OLD: text-zinc-100 (price) NEW: text-stone-100 OLD: text-zinc-500 (period) NEW: text-stone-500 OLD: text-zinc-400 (features) NEW: text-stone-400 OLD: text-teal-500 (checkmark) NEW: text-amber-500 OLD: bg-teal-600/20 ... text-teal-400 (current plan badge) NEW: bg-amber-600/20 ... text-amber-500 OLD: bg-zinc-800 ... text-zinc-500 (addon disabled) NEW: bg-stone-700 ... text-stone-500 OLD: bg-teal-600 text-white hover:bg-teal-500 (highlighted CTA) NEW: bg-amber-600 text-white hover:bg-amber-700

OLD: bg-zinc-800 text-zinc-300 hover:bg-zinc-700 (default CTA) NEW: bg-stone-700 text-stone-300 hover:bg-stone-600

2.15 `src/app/dashboard/settings/api-keys/page.tsx`

File: src/app/dashboard/settings/api-keys/page.tsx ───────────────────────────────────────── LINE 35 — heading: OLD: text-zinc-100 NEW: text-stone-100 LINE 37 — description: OLD: text-zinc-500 NEW: text-stone-500 LINE 141 — card: OLD: border-zinc-800 bg-zinc-900 NEW: border-stone-700 bg-stone-800 LINE 144 — card title: OLD: text-zinc-200 NEW: text-stone-200 LINE 147 — optional badge: OLD: text-zinc-600 NEW: text-stone-600 LINE 150 — card description: OLD: text-zinc-500 NEW: text-stone-500 LINE 153 — loading badge: OLD: bg-zinc-800 ... text-zinc-500 NEW: bg-stone-700 ... text-stone-500 LINE 157 — configured badge: OLD: bg-teal-500/10 ... text-teal-400 NEW: bg-amber-600/10 ... text-amber-500 LINE 161 — not configured badge: OLD: bg-zinc-800 ... text-zinc-500 NEW: bg-stone-700 ... text-stone-500 LINE 170 — masked key display: OLD: border-zinc-700 bg-zinc-800 ... text-zinc-400 NEW: border-stone-700 bg-stone-800 ... text-stone-400 LINE 176 — remove button: OLD: border-zinc-700 ... text-zinc-300 ... hover:border-red-500/50 hover:text-red-400 NEW: border-stone-700 ... text-stone-300 ... hover:border-red-500/50 hover:text-red-400 LINE 191 — key input: OLD: border-zinc-700 bg-zinc-800 ... text-zinc-300 placeholder-zinc-600 focus:border-teal-500 NEW: border-stone-700 bg-stone-800 ... text-stone-300 placeholder-stone-600 focus:border-amber-600 LINE 196 — save button: OLD: bg-teal-600 ... text-white ... hover:bg-teal-500 NEW: bg-amber-600 ... text-white ... hover:bg-amber-700 LINE 202 — error text: OLD: text-red-400 NEW: (keep — matches brand error) LINE 205 — help link: OLD: text-zinc-600 NEW: text-stone-600

LINE 209 — console link: OLD: text-teal-500 hover:text-teal-400 NEW: text-amber-500 hover:text-amber-400

2.16 `src/app/dashboard/settings/storage/page.tsx`

File: src/app/dashboard/settings/storage/page.tsx ───────────────────────────────────────── LINE 112 — heading: OLD: text-zinc-100 NEW: text-stone-100 LINE 114 — description: OLD: text-zinc-500 NEW: text-stone-500 LINE 120 — error banner: OLD: border-red-500/30 bg-red-500/10 ... text-red-400 NEW: (keep — matches brand error) LINE 132 — success banner: OLD: border-teal-500/30 bg-teal-500/10 ... text-teal-400 NEW: border-amber-600/30 bg-amber-600/10 ... text-amber-500 LINE 139 — connection card: OLD: border-zinc-800 bg-zinc-900 NEW: border-stone-700 bg-stone-800 LINE 144 — drive icon container (connected): OLD: bg-teal-500/10 NEW: bg-amber-600/10 LINE 144 — drive icon container (not connected): OLD: bg-zinc-800 NEW: bg-stone-700 LINE 148 — drive icon (connected): OLD: text-teal-400 NEW: text-amber-500 LINE 148 — drive icon (not connected): OLD: text-zinc-500 NEW: text-stone-500 LINE 152 — label: OLD: text-zinc-500 NEW: text-stone-500 LINE 156 — checking text: OLD: text-zinc-500 NEW: text-stone-500 LINE 159 — connected text: OLD: text-teal-400 NEW: text-amber-500 LINE 162 — folder name: OLD: text-zinc-500 NEW: text-stone-500 LINE 167 — not connected text: OLD: text-zinc-400 NEW: text-stone-400 LINE 177 — select folder button: OLD: bg-teal-600 ... text-white ... hover:bg-teal-500 NEW: bg-amber-600 ... text-white ... hover:bg-amber-700 LINE 184 — disconnect button: OLD: border-zinc-700 ... text-zinc-400 ... hover:border-zinc-600 hover:text-zinc-300 NEW: border-stone-700 ... text-stone-400 ... hover:border-stone-600 hover:text-stone-300 LINE 192 — connect drive link: OLD: bg-teal-600 ... text-white ... hover:bg-teal-500 NEW: bg-amber-600 ... text-white ... hover:bg-amber-700 LINE 203 — folder picker card: OLD: border-zinc-800 bg-zinc-900 NEW: border-stone-700 bg-stone-800 LINE 204 — picker title: OLD: text-zinc-200 NEW: text-stone-200 LINE 208 — picker description: OLD: text-zinc-500 NEW: text-stone-500 LINE 217 — folder input: OLD: border-zinc-700 bg-zinc-800 ... text-zinc-200 focus:border-teal-500 NEW: border-stone-700 bg-stone-800 ... text-stone-200 focus:border-amber-600 LINE 223 — create button: OLD: bg-teal-600 ... text-white ... hover:bg-teal-500 NEW: bg-amber-600 ... text-white ... hover:bg-amber-700 LINE 237 — folder list label: OLD: text-zinc-500 NEW: text-stone-500 LINE 246 — folder item: OLD: text-zinc-300 ... hover:bg-zinc-800 NEW: text-stone-300 ... hover:bg-stone-700 LINE 248 — folder icon: OLD: text-zinc-500 NEW: text-stone-500 LINE 259 — "How workspaces work" card: OLD: border-zinc-800 bg-zinc-900 NEW: border-stone-700 bg-stone-800 LINE 261 — card title: OLD: text-zinc-200 NEW: text-stone-200 LINE 264 — card body: OLD: text-zinc-400 NEW: text-stone-400 LINE 268 — code block: OLD: bg-zinc-800 ... font-mono ... text-zinc-400 NEW: bg-stone-900 ... font-mono ... text-stone-400

LINE 293 — loading spinner: OLD: text-zinc-500 NEW: text-stone-500

2.17 `src/components/explorer/file-tree.tsx`

File: src/components/explorer/file-tree.tsx ───────────────────────────────────────── LINE 28 — header label: OLD: text-zinc-500 NEW: text-stone-500 LINE 108 — tree node button: OLD: hover:bg-zinc-800 NEW: hover:bg-stone-700 LINE 110 — selected state: OLD: bg-zinc-800 text-zinc-100 NEW: bg-stone-700 text-stone-100 LINE 111 — unselected state: OLD: text-zinc-400 hover:text-zinc-200 NEW: text-stone-400 hover:text-stone-200 LINE 117-119 — chevron icons: OLD: text-zinc-600 NEW: text-stone-600 LINE 126 — directory icon color: OLD: text-teal-400 NEW: text-amber-500 LINE 126 — file icon color: OLD: text-zinc-500 NEW: text-stone-500 LINE 138 — loading text: OLD: text-zinc-600 NEW: text-stone-600

LINE 162 — empty text: OLD: text-zinc-700 NEW: text-stone-600

2.18 `src/components/explorer/file-preview.tsx`

File: src/components/explorer/file-preview.tsx ───────────────────────────────────────── LINE 54 — empty state icon: OLD: text-zinc-700 NEW: text-stone-600 LINE 56 — empty state text: OLD: text-zinc-500 NEW: text-stone-500 LINE 66 — breadcrumb border: OLD: border-b border-zinc-800 NEW: border-b border-stone-700 LINE 67 — breadcrumb icon: OLD: text-zinc-500 NEW: text-stone-500 LINE 71 — breadcrumb separator: OLD: text-zinc-700 NEW: text-stone-600 LINE 75 — breadcrumb final segment: OLD: text-zinc-200 NEW: text-stone-200 LINE 77 — breadcrumb parent segments: OLD: text-zinc-500 NEW: text-stone-500 LINE 90 — loading spinner: OLD: text-zinc-500 NEW: text-stone-500 LINE 95 — error: OLD: border-red-500/30 bg-red-500/10 text-red-400 NEW: (keep — matches brand error)

LINE 105 — pre code block: OLD: border-zinc-700 bg-zinc-900 ... text-zinc-300 NEW: border-stone-700 bg-stone-900 ... text-stone-300

2.19 `src/app/dashboard/explorer/page.tsx`

File: src/app/dashboard/explorer/page.tsx ───────────────────────────────────────── LINE 29 — loading spinner: OLD: text-zinc-500 NEW: text-stone-500 LINE 38 — no workspace icon: OLD: text-zinc-700 NEW: text-stone-600 LINE 39 — heading: OLD: text-zinc-200 NEW: text-stone-200 font-display LINE 43 — description: OLD: text-zinc-500 NEW: text-stone-500 LINE 48 — connect button: OLD: bg-teal-600 ... text-white ... hover:bg-teal-500 NEW: bg-amber-600 ... text-white ... hover:bg-amber-700 LINE 60 — file tree sidebar: OLD: border-r border-zinc-800 NEW: border-r border-stone-700 LINE 63 — explorer icon: OLD: text-teal-400 NEW: text-amber-500 LINE 64 — explorer label: OLD: text-zinc-200 NEW: text-stone-200

LINE 68 — refresh button: OLD: text-zinc-500 ... hover:bg-zinc-800 hover:text-zinc-300 NEW: text-stone-500 ... hover:bg-stone-700 hover:text-stone-300

2.20 Migration Summary Table

File	zinc tokens	teal tokens	Total changes
`globals.css`	3	0	Full rewrite
`layout.tsx`	1	0	Font + bg swap
`dashboard/layout.tsx`	1	0	1
`sidebar.tsx`	~22	~6	28
`chat-container.tsx`	6	0	6
`message.tsx`	0	1	1
`chat-input.tsx`	4	2	6
`skill-palette.tsx`	7	1	8
`agent-selector.tsx`	6	1	7
`markdown.tsx`	14	3	17
`tool-indicator.tsx`	8	1	9
`settings/layout.tsx`	4	1	5
`settings/page.tsx`	5	0	5
`billing-client.tsx`	~20	~10	30
`api-keys/page.tsx`	~14	~4	18
`storage/page.tsx`	~22	~8	30
`file-tree.tsx`	~8	1	9
`file-preview.tsx`	7	0	7
`explorer/page.tsx`	6	2	8
TOTAL	~158	~41	~199 token swaps

3. New Component Specifications

3.1 Context Panel (Right Sidebar)

A collapsible right panel showing the active V2V context for the current conversation.

Layout:

┌──────────────────────────────────────────────┐
│  Context                              [< ×]  │  ← Header: h-10, border-b border-stone-700
├──────────────────────────────────────────────┤
│  ▼ Active Decisions (3)                      │  ← Collapsible section
│    DR-2026-003: API pricing        Accepted  │
│    DR-2026-005: Auth provider      Pending   │
│    DR-2026-007: Free tier limits   Accepted  │
├──────────────────────────────────────────────┤
│  ▼ Active Bets (1)                           │
│    SB-2026-001: Enterprise mkt    In Progress│
├──────────────────────────────────────────────┤
│  ▼ Recent Feedback (2)                       │
│    FB-2026-012: Usage-based billing          │
│    FB-2026-015: SSO requirement              │
├──────────────────────────────────────────────┤
│  ▼ Session ROI                               │
│    ⏱️ 4.5 hrs saved | 12 operations          │
│    ▕██████████████░░░░░░▏ 75% of typical     │
└──────────────────────────────────────────────┘

Dimensions:

Width: 320px (desktop), hidden on mobile
Full height of viewport below header
Scrollable independently

Token Usage:

Panel container:    w-80 border-l border-stone-700 bg-stone-800
Header:             h-10 px-4 flex items-center justify-between border-b border-stone-700
Header text:        font-display text-sm font-semibold text-stone-200
Toggle button:      text-stone-500 hover:text-stone-300
Section header:     px-4 py-2 text-xs font-medium uppercase tracking-wider text-stone-500
Section count:      ml-auto font-mono text-xs text-amber-500
Item row:           px-4 py-1.5 text-sm text-stone-400 hover:bg-stone-700/50
Item ID:            font-mono text-xs text-stone-500
Item status badge:  See badge pattern (Section 4.2)
ROI bar bg:         h-1.5 rounded-full bg-stone-700
ROI bar fill:       h-1.5 rounded-full bg-amber-600
ROI text:           text-sm text-stone-400
ROI number:         font-mono text-amber-500

Interactive States:

Default: bg-stone-800
Hover on item: bg-stone-700/50
Active/selected item: bg-stone-700 border-l-2 border-amber-600
Collapsed section: chevron rotated, children hidden
Loading: animate-pulse on content area, stone-700 skeleton blocks
Panel collapsed: width 0, border hidden, toggle button persists at edge

Responsive:

Desktop (1280px+): always visible
Tablet (768-1279px): hidden, toggle button in top bar
Mobile (<768px): full-screen overlay when opened

3.2 Conversation List (Sidebar Enhancement)

Replaces the "No conversations yet" placeholder in the sidebar.

Layout:

┌──────────────────────────────────────────┐
│  CONVERSATIONS                    [+ New]│  ← Section header
├──────────────────────────────────────────┤
│  ● Draft PRD for auth...        2m ago   │  ← Active conversation (dot = active)
│    📝 PM · 12 messages                   │
├──────────────────────────────────────────┤
│  Pricing strategy review        1h ago   │
│    🧮 BizOps · 8 messages                │
├──────────────────────────────────────────┤
│  API architecture discussion    3h ago   │
│    🏗️ Chief Architect · 24 msgs          │
├──────────────────────────────────────────┤
│  ─── Yesterday ───                       │  ← Date separator
│  Competitive landscape          1d ago   │
│    🔭 CI · 6 messages                    │
└──────────────────────────────────────────┘

Token Usage:

List container:         flex-1 overflow-y-auto
Item wrapper:           px-2 py-2 rounded-md cursor-pointer
Item (default):         text-stone-400 hover:bg-stone-700/50
Item (active):          bg-stone-700 text-stone-100
Item title:             text-sm font-medium truncate
Item timestamp:         text-xs text-stone-600 ml-auto shrink-0
Item meta line:         text-xs text-stone-500
Agent emoji:            inline
Message count:          font-mono text-xs text-stone-600
Active dot:             w-1.5 h-1.5 rounded-full bg-amber-500 shrink-0
Date separator:         px-2 py-1.5 text-xs font-medium text-stone-600 uppercase tracking-wider

Interactive States:

Default: transparent background
Hover: bg-stone-700/50
Active conversation: bg-stone-700 text-stone-100, amber dot visible
Right-click context menu: border-stone-700 bg-stone-800 dropdown with Rename, Delete, Archive
Loading (skeleton): 3 rows of bg-stone-700 animate-pulse rounded blocks
Empty state: centered text "Start a conversation", text-stone-600

3.3 Enhanced Agent Selector (Team-Based Grouping)

Extends the current agent-selector.tsx with richer team grouping, search, and visual hierarchy.

Layout:

┌──────────────────────────────────────────────┐
│  🔍 Search agents...                         │  ← Search input
├──────────────────────────────────────────────┤
│  PRODUCT ORG (13)                    ▼       │  ← Team header with count
│    📝 Product Manager                        │
│    📈 VP Product                             │
│    📋 Dir Product Management                 │
│    ...                                       │
├──────────────────────────────────────────────┤
│  DESIGN TEAM (7)                     ▼       │
│    🎨 Director of Design                     │
│    🖼️ UI Designer                            │
│    ...                                       │
├──────────────────────────────────────────────┤
│  ... (7 more teams)                          │
└──────────────────────────────────────────────┘

Token Usage:

Container:              max-h-96 overflow-y-auto rounded-lg border border-stone-700 bg-stone-800 shadow-lg
Search input:           w-full px-3 py-2 bg-stone-900 border-b border-stone-700
                        text-sm text-stone-200 placeholder-stone-500
                        focus:outline-none
Team header:            sticky top-0 bg-stone-800 px-3 py-2 flex items-center justify-between
Team label:             text-xs font-medium uppercase tracking-wider text-stone-500
Team count:             font-mono text-xs text-stone-600
Agent row (default):    px-3 py-2 flex items-center gap-2 text-sm text-stone-300 hover:bg-stone-700/50
Agent row (selected):   bg-amber-600/15 text-amber-400
Agent row (keyboard):   ring-1 ring-amber-600/30
Agent emoji:            text-base flex-shrink-0
Agent name:             font-medium
Agent desc:             truncate text-xs text-stone-500
Team badge:             ml-auto px-1.5 py-0.5 rounded text-[10px] font-mono
                        bg-stone-700 text-stone-500

Interactive States:

Keyboard navigation: up/down arrows, highlighted with ring-1 ring-amber-600/30
Enter: selects agent
Escape: dismisses
Search filtering: real-time, matches agent name, ID, or description
Empty search result: "No agents match" in text-stone-500
Team collapse/expand: click team header to toggle
Loading: skeleton state with animate-pulse

Responsive:

Desktop: 400px max width, positioned above input
Mobile: full-width overlay from bottom (sheet pattern)

3.4 Token Count Display (Status Bar)

A persistent status bar at the bottom of the chat area showing token usage.

Layout:

┌────────────────────────────────────────────────────────────────┐
│  📝 PM · Anthropic Haiku    IN: 2,847 tokens   OUT: 1,203    │
│                             ▕████████░░░░░░░░░░▏ 4,050 / ∞   │
└────────────────────────────────────────────────────────────────┘

Dimensions:

Full width of chat area
Height: h-8 (32px)
Fixed to bottom, above the input

Token Usage:

Container:          h-8 px-4 flex items-center gap-4 border-t border-stone-700/50 bg-stone-800/50
                    text-xs backdrop-blur-sm
Agent indicator:    text-stone-400
Agent name:         font-medium text-stone-300
Provider label:     text-stone-600
Token label:        text-stone-500
Token count:        font-mono text-stone-400
Progress bar bg:    h-1 w-24 rounded-full bg-stone-700
Progress bar fill:  h-1 rounded-full bg-amber-600/50
Total:              font-mono text-stone-500
Separator:          text-stone-700 mx-1

Interactive States:

Default: semi-transparent background
Streaming: token count animates with increment, text-amber-500 during active stream
Idle: dim state, text-stone-600
No BYOT key: "Configure API key in Settings", text-amber-500 link

4. Shared Design Patterns

4.1 Card Pattern

The universal card container used across Settings, Billing, Context Panel, etc.

Default Card: rounded-lg border border-stone-700 bg-stone-800 p-6 Elevated Card (dialogs, dropdowns): rounded-lg border border-stone-700 bg-stone-800 p-6 shadow-lg Subtle Card (inline cards, hint cards): rounded-lg border border-stone-700 p-4 Interactive Card (clickable): rounded-lg border border-stone-700 bg-stone-800 p-4 hover:border-stone-600 hover:bg-stone-700/50 transition-colors cursor-pointer Card Header: text-sm font-medium text-stone-200 (or font-display for major cards) Card Body: text-sm text-stone-400

Card Footer: border-t border-stone-700 pt-4 mt-4

4.2 Badge Pattern

Status Badges:

Active/Success:   bg-green-500/10 text-green-500 rounded-full px-2 py-0.5 text-xs font-medium
Trialing/Info:    bg-blue-500/10 text-blue-500 rounded-full px-2 py-0.5 text-xs font-medium
Warning:          bg-amber-500/10 text-amber-500 rounded-full px-2 py-0.5 text-xs font-medium
Error/Canceled:   bg-red-500/10 text-red-500 rounded-full px-2 py-0.5 text-xs font-medium
Neutral:          bg-stone-700 text-stone-400 rounded-full px-2 py-0.5 text-xs font-medium

Beta / Feature Badges:

Beta:             bg-amber-600/10 text-amber-500 rounded px-1.5 py-0.5 text-xs
New:              bg-green-500/10 text-green-500 rounded px-1.5 py-0.5 text-xs
Soon:             text-stone-600 text-xs

Team Badges (for agent selector):

Product Org:      bg-stone-700 text-stone-400 rounded px-1.5 py-0.5 text-[10px] font-mono
Design:           bg-stone-700 text-stone-400 rounded px-1.5 py-0.5 text-[10px] font-mono
Architecture:     bg-stone-700 text-stone-400 rounded px-1.5 py-0.5 text-[10px] font-mono
(All teams use the same subtle treatment — differentiation via emoji, not badge color)

Tier Badges (billing):

Individual:       bg-stone-700 text-stone-300 rounded-full px-2.5 py-0.5 text-xs font-medium
Team:             bg-amber-600/10 text-amber-500 rounded-full px-2.5 py-0.5 text-xs font-medium
Full Org:         bg-amber-600/15 text-amber-400 rounded-full px-2.5 py-0.5 text-xs font-medium
                  ring-1 ring-amber-600/20

4.3 Button Variants

Primary (Amber CTA):

bg-amber-600 text-white font-medium rounded-md px-4 py-2 text-sm
hover:bg-amber-700
active:bg-amber-800
disabled:opacity-50 disabled:cursor-not-allowed
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-600/50 focus-visible:ring-offset-2 focus-visible:ring-offset-stone-900
transition-colors

Secondary (Stone):

bg-stone-700 text-stone-300 font-medium rounded-md px-4 py-2 text-sm
hover:bg-stone-600 hover:text-stone-200
active:bg-stone-600
disabled:opacity-50
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-500/50 focus-visible:ring-offset-2 focus-visible:ring-offset-stone-900
transition-colors

Ghost (Transparent):

text-stone-400 font-medium rounded-md px-4 py-2 text-sm
hover:bg-stone-700/50 hover:text-stone-300
active:bg-stone-700
disabled:opacity-50
transition-colors

Destructive (Red):

bg-red-500/10 text-red-400 font-medium rounded-md px-4 py-2 text-sm
border border-red-500/20
hover:bg-red-500/20 hover:text-red-300
active:bg-red-500/30
disabled:opacity-50
transition-colors

Icon Button (Small):

p-2 rounded-md text-stone-500
hover:bg-stone-700 hover:text-stone-300
transition-colors

4.4 Input Field Pattern

Text Input:

w-full rounded-md border border-stone-700 bg-stone-800 px-3 py-2
text-sm text-stone-200 placeholder-stone-600
focus:border-amber-600 focus:outline-none focus:ring-1 focus:ring-amber-600/30
disabled:opacity-50 disabled:cursor-not-allowed
transition-colors

Search Input (with icon):

Container: relative
Icon:      absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-stone-500
Input:     pl-9 (+ standard input tokens above)

Textarea (Chat Input):

min-h-[36px] max-h-[200px] resize-none
bg-transparent px-2 py-1 text-sm text-stone-100 placeholder-stone-500
outline-none disabled:opacity-50

Input Container (Chat):

flex items-end gap-2 rounded-xl border border-stone-700 bg-stone-800/50 p-2
focus-within:border-amber-600/50
transition-colors

4.5 Modal / Dialog Pattern

Overlay: fixed inset-0 bg-stone-950/80 backdrop-blur-sm z-50 animate-in fade-in Dialog: fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md rounded-lg border border-stone-700 bg-stone-800 p-6 shadow-xl z-50 animate-in zoom-in-95

Title: font-display text-lg font-semibold text-stone-100 Description: mt-2 text-sm text-stone-400 Footer: mt-6 flex justify-end gap-3 Close button: absolute right-4 top-4 text-stone-500 hover:text-stone-300

4.6 Tooltip Pattern

Container:       rounded-md bg-stone-900 border border-stone-700 px-2.5 py-1.5 shadow-lg
Text:            text-xs text-stone-300
Arrow:           fill-stone-900 stroke-stone-700

4.7 Dropdown / Context Menu Pattern

Container:       min-w-[200px] rounded-md border border-stone-700 bg-stone-800 p-1 shadow-lg z-50
Item:            flex items-center gap-2 rounded px-2 py-1.5 text-sm text-stone-300
                 hover:bg-stone-700 outline-none cursor-pointer
Item (danger):   text-red-400 hover:bg-red-500/10
Separator:       my-1 h-px bg-stone-700
Label:           px-2 py-1.5 text-xs font-medium text-stone-500

4.8 Skeleton / Loading Pattern

Line skeleton:   h-4 w-[60%] rounded bg-stone-700 animate-pulse
Card skeleton:   rounded-lg border border-stone-700 bg-stone-800 p-6
                 [inner]: space-y-3, each line h-3 rounded bg-stone-700 animate-pulse
Avatar skeleton: h-8 w-8 rounded-full bg-stone-700 animate-pulse

4.9 Empty State Pattern

Container:       flex h-full flex-col items-center justify-center p-8 text-center
Icon:            h-12 w-12 text-stone-600 mx-auto
Title:           mt-4 font-display text-lg font-semibold text-stone-200
Description:     mt-2 text-sm text-stone-500 max-w-sm
CTA:             mt-6 (primary button pattern)

5. Implementation Priority

P0: Day 0 (Blocks Everything)

Files to change:

src/app/globals.css -- Full rewrite (Section 1.1)

src/app/layout.tsx -- Font imports + body class (Section 2.2)

src/app/dashboard/layout.tsx -- bg/text class (Section 2.3)

What this achieves: The app renders with correct background, fonts, and base text color. Everything downstream inherits these foundations.

Verification: App loads with stone-900 background, Space Grotesk headings render, Inter body text renders, JetBrains Mono appears in code blocks.

P1: Days 1-2 (Core UI Migration)

Day 1 -- Sidebar + Chat:

src/components/shared/sidebar.tsx (Section 2.4) -- 28 swaps

src/components/chat/message.tsx (Section 2.6) -- 1 swap

src/components/chat/chat-input.tsx (Section 2.7) -- 6 swaps

src/components/chat/chat-container.tsx (Section 2.5) -- 6 swaps

Day 2 -- Palettes, Markdown, Tools:

src/components/chat/skill-palette.tsx (Section 2.8) -- 8 swaps

src/components/chat/agent-selector.tsx (Section 2.9) -- 7 swaps

src/components/chat/markdown.tsx (Section 2.10) -- 17 swaps

src/components/chat/tool-indicator.tsx (Section 2.11) -- 9 swaps

What this achieves: The main user-facing interface (sidebar + chat) is fully on-brand. Users see the amber accent, stone backgrounds, and correct typography in conversations.

P2: Days 3-4 (Settings + New Components)

Day 3 -- Settings pages:

src/app/dashboard/settings/layout.tsx (Section 2.12)

src/app/dashboard/settings/page.tsx (Section 2.13)

src/app/dashboard/settings/billing/billing-client.tsx (Section 2.14)

src/app/dashboard/settings/api-keys/page.tsx (Section 2.15)

src/app/dashboard/settings/storage/page.tsx (Section 2.16)

src/components/explorer/file-tree.tsx (Section 2.17)

src/components/explorer/file-preview.tsx (Section 2.18)

src/app/dashboard/explorer/page.tsx (Section 2.19)

Day 4 -- New components (scaffold):

Context Panel component (Section 3.1) -- scaffold with static data

Conversation List enhancement (Section 3.2) -- integrate with conversation API

Token Count Display (Section 3.4) -- status bar

P3: Day 5 (Polish)

Enhanced Agent Selector upgrade (Section 3.3) -- team collapse, search UX

Animation pass: add transition-all duration-150 to interactive elements

Focus ring audit: ensure all interactive elements have focus-visible rings

Mobile responsive pass: verify sidebar collapse, context panel behavior

Scrollbar styling verification across browsers

Dark mode only cleanup: remove any remaining @media (prefers-color-scheme) references

Typography audit: verify font-display (Space Grotesk) is used on all headings

Migration Execution Checklist

For each file migration:

☐ Apply all token swaps from the register
☐ Run visual diff in browser (side-by-side before/after)
☐ Verify no remaining zinc- tokens (grep: grep -r "zinc" src/)
☐ Verify no remaining teal- tokens (grep: grep -r "teal" src/)
☐ Verify no remaining geist references (grep: grep -r "geist" src/)
☐ Check WCAG contrast ratios on text elements
☐ Verify interactive states (hover, focus, active, disabled)
☐ Test in Chrome, Firefox, Safari (Webkit)

Post-Migration Verification

After all files migrated:

Should return 0 results:
grep -r "zinc-" src/components/ src/app/
grep -r "teal-" src/components/ src/app/
grep -r "geist" src/components/ src/app/
grep -r "Geist" src/components/ src/app/

Appendix A: Token Mapping Quick Reference

Old Token (zinc/teal)	New Token (stone/amber)	Context
`zinc-950`	`stone-900`	App background
`zinc-900`	`stone-800`	Sidebar bg, cards
`zinc-800`	`stone-700`	Active states, elevated surfaces, borders
`zinc-700`	`stone-700`	Borders, dividers
`zinc-600`	`stone-600`	Disabled text, subtle elements
`zinc-500`	`stone-500`	Labels, captions, secondary text
`zinc-400`	`stone-400`	Body text, inactive links
`zinc-300`	`stone-300`	Emphasized text, dropdown items
`zinc-200`	`stone-200`	High emphasis text, card titles
`zinc-100`	`stone-100`	Headlines, primary text
`zinc-50`	`stone-50`	Maximum contrast (page titles)
`teal-600`	`amber-600`	Primary CTA, buttons, user bubbles
`teal-500`	`amber-700`	CTA hover (darker = hover in amber)
`teal-500/10`	`amber-600/10`	Soft badge backgrounds
`teal-400`	`amber-500`	Accent text (links, active states, indicators)
`teal-300`	`amber-400`	Selected palette items, inline code
`teal-600/20`	`amber-600/20`	Current plan indicator, selected items
`teal-500/50`	`amber-600/50`	Blockquote borders, focus rings
`teal-950/20`	`amber-950/20`	Highlighted card backgrounds
`teal-500/30`	`amber-600/30`	Success banners (Drive connected)

Important note on hover direction: With teal, hover went lighter (teal-600 -> teal-500). With amber, hover goes darker (amber-600 -> amber-700) because amber-500 is the "gold/light" accent, and darkening on hover gives better contrast and a more premium feel on dark backgrounds.

Appendix B: Font Import Comparison

Before	After
`Geist` (variable)	`Space_Grotesk` (600, 700)
`Geist_Mono` (variable)	`JetBrains_Mono` (400, 500)
(none)	`Inter` (400, 500, 600)
CSS var: `--font-geist-sans`	CSS var: `--font-space-grotesk`, `--font-inter`
CSS var: `--font-geist-mono`	CSS var: `--font-jetbrains-mono`

Appendix C: Tailwind v4 Considerations

Legionis uses Tailwind CSS v4 with the @tailwindcss/postcss plugin. There is no tailwind.config.js file. Key implications:

Theme tokens are defined via @theme inline {} in globals.css (not a JS config file)

Stone colors are built into Tailwind v4 natively (bg-stone-900, etc.)

Amber colors are built into Tailwind v4 natively (bg-amber-600, etc.)

Custom font families are exposed via @theme inline { --font-display: ... } and used as font-display class

No separate tailwind config needed -- all customization is in globals.css

This means the migration requires zero config file changes. All work is in globals.css (token definitions) and component files (class name swaps).

Document Owner: UI Designer (Design Team) Review Cycle: Update with each design iteration Distribution: Engineering, Design, Product

Legionis Design System Specification v1.0

Table of Contents

1. Design Token System

1.1 CSS Custom Properties (globals.css Replacement)

1.2 Font Loading (layout.tsx)

1.3 Tailwind Token Reference (Quick Lookup)

1.4 Typography Classes

2. Component Migration Register

2.1 src/app/globals.css

2.2 src/app/layout.tsx

2.3 src/app/dashboard/layout.tsx

2.4 src/components/shared/sidebar.tsx

2.5 src/components/chat/chat-container.tsx

2.6 src/components/chat/message.tsx

2.7 src/components/chat/chat-input.tsx

2.8 src/components/chat/skill-palette.tsx

2.9 src/components/chat/agent-selector.tsx

2.10 src/components/chat/markdown.tsx

2.11 src/components/chat/tool-indicator.tsx

2.12 src/app/dashboard/settings/layout.tsx

2.13 src/app/dashboard/settings/page.tsx (Profile)

2.14 src/app/dashboard/settings/billing/billing-client.tsx

2.15 src/app/dashboard/settings/api-keys/page.tsx

2.16 src/app/dashboard/settings/storage/page.tsx

2.17 src/components/explorer/file-tree.tsx

2.18 src/components/explorer/file-preview.tsx

2.19 src/app/dashboard/explorer/page.tsx

2.20 Migration Summary Table

3. New Component Specifications

3.1 Context Panel (Right Sidebar)

3.2 Conversation List (Sidebar Enhancement)

3.3 Enhanced Agent Selector (Team-Based Grouping)

3.4 Token Count Display (Status Bar)

4. Shared Design Patterns

4.1 Card Pattern

4.2 Badge Pattern

4.3 Button Variants

4.4 Input Field Pattern

4.5 Modal / Dialog Pattern

4.6 Tooltip Pattern

4.7 Dropdown / Context Menu Pattern

4.8 Skeleton / Loading Pattern

4.9 Empty State Pattern

5. Implementation Priority

P0: Day 0 (Blocks Everything)

P1: Days 1-2 (Core UI Migration)

P2: Days 3-4 (Settings + New Components)

P3: Day 5 (Polish)

Migration Execution Checklist

Post-Migration Verification

Should return 0 results:

Appendix A: Token Mapping Quick Reference

Appendix B: Font Import Comparison

Appendix C: Tailwind v4 Considerations

2.1 `src/app/globals.css`

2.2 `src/app/layout.tsx`

2.3 `src/app/dashboard/layout.tsx`

2.4 `src/components/shared/sidebar.tsx`

2.5 `src/components/chat/chat-container.tsx`

2.6 `src/components/chat/message.tsx`

2.7 `src/components/chat/chat-input.tsx`

2.8 `src/components/chat/skill-palette.tsx`

2.9 `src/components/chat/agent-selector.tsx`

2.10 `src/components/chat/markdown.tsx`

2.11 `src/components/chat/tool-indicator.tsx`

2.12 `src/app/dashboard/settings/layout.tsx`

2.13 `src/app/dashboard/settings/page.tsx` (Profile)

2.14 `src/app/dashboard/settings/billing/billing-client.tsx`

2.15 `src/app/dashboard/settings/api-keys/page.tsx`

2.16 `src/app/dashboard/settings/storage/page.tsx`

2.17 `src/components/explorer/file-tree.tsx`

2.18 `src/components/explorer/file-preview.tsx`

2.19 `src/app/dashboard/explorer/page.tsx`