Every color, spacing value, radius, and shadow in the app is a CSS custom property defined once in
app/globals.css — there is no hardcoded color anywhere in the UI (that's a hard rule, not just a
convention; see below). Change a token there and it updates everywhere it's used.

app/globals.css defines them inside an @theme inline block (Tailwind v4's token syntax). The
real current values (Design System v4 — charcoal dark, blue-cyan brand):

--color-background:  #1a1a1a;   /* main canvas */
--color-surface:     #222222;   /* sidebar / panel */
--color-surface-2:   #2a2a2a;   /* card / input background */
--color-surface-3:   #323232;   /* hover / code block */

--color-border:      #333333;
--color-text:        #efefef;   /* primary text */
--color-text-secondary: #aaaaaa;
--color-muted:       #666666;

--color-brand:       #38BDF8;   /* sky-blue cyan — the one accent color */
--color-brand-hover: #7DD3FC;

--color-green: #6bcb8b;  --color-red: #e06b6b;  --color-yellow: #e8b84a;  --color-blue: #5aaad8;

Plus a 4px spacing scale (--sp-1 through --sp-16), radii (--radius-xs through
--radius-full), and shadow tokens (--shadow-sm through --shadow-xl).

Dark is the default (the values above). [data-theme="light"] in the same file overrides the
surface/border/text tokens for light mode — the brand color and semantic colors stay the same
across both. A component should never check the theme directly; it just uses
var(--color-surface) etc. and both themes fall out automatically.

<div style={{
  background: "var(--color-surface)",
  border: "1px solid var(--color-border)",
  color: "var(--color-text)",
  borderRadius: "var(--radius-lg)",
}}>

Most of the app uses inline style with these variables rather than Tailwind color utility
classes, specifically so nothing hardcodes a color — grep the codebase for a raw hex value outside
globals.css and you've found a bug, not a pattern to copy.

This is a hard constraint, not a style preference: no emojis anywhere in the UI — no decorative
icon noise in headings, buttons, or copy. Use the lucide-react icon set (already a dependency,
already used everywhere) for anything that needs a visual marker. This keeps the product reading as
a calm, professional tool rather than a consumer chat app — it's enforced in code review, not just
documented.

Change --color-brand (and its -hover/-dim/-muted/-glow variants) in globals.css —
every button, active state, and highlight in the app reads from it, so a single edit re-themes the
whole product. Don't add a second accent color without a strong reason; the design system is
deliberately one accent + neutral surfaces, not a multi-color palette.

• Key files map
• Architecture overview