Design System

Matcha-dark, terminal-tinged, calm.

Palette

Defined in src/styles.css using OKLCH. Never hardcode hex in components — use semantic tokens.

Token	Role
--background	App background (matcha-dark)
--foreground	Default text
--primary / --primary-foreground	Jade green CTA
--jade	Brand accent
--terminal	Terminal-green for mono labels
--border	Subtle dividers
--input	Form fields

Typography

• Display: serif for headings and gradient text
• Mono: for agent labels, stage names, terminal prompts ($ brew.new())
• Body: sans-serif

Motion

• steam — slow rising blur for background ambience
• flicker — subtle terminal glow
• glow-soft, glow-terminal — utility classes for selected/active surfaces

Surfaces

• .panel — bordered card
• .panel-hover — interactive hover state
• .gradient-text — jade → terminal gradient on display headings

Rules

1. Tokens only — bg-primary, not bg-[#1f7a4d]
2. Dark by default — there is no light mode
3. Calm motion — animations should feel like steam, never like notifications