Design System

Design tokens & theming

Styling is driven entirely by CSS custom properties defined in app/globals.css and exposed to Tailwind v4 via @theme. The palette is the "Molten Forge" identity — dark forged-steel surfaces with a molten-orange accent:

--base: #0c0a09;          /* forged-steel background */
--ink: #f0e9e2;           /* primary text */
--ink-dim: #a3978c;       /* secondary text */
--line: rgba(255,180,120,0.09);   /* hairline borders */
--phosphor: #ff5a1f;      /* primary accent (molten orange) */
--amber: #ffb429;         /* spark / warning */

Because everything reads from these tokens, re-theming is a token change — adjust --phosphor and the accent cascades across buttons, links, charts, diagram connectors and the docs. Components reference Tailwind classes mapped to the tokens (text-ink, border-line, text-primary, …), never hard-coded colours.

Fonts are loaded with next/font: Geist for body (--font-sans) and JetBrains Mono for code and labels (--font-mono).

UI primitives

The app/shared/ui/ folder is the component vocabulary. A selection:

Compose with the cn() helper (clsx + tailwind-merge) so class overrides merge predictably:

import { cn } from '@/lib/utils';
<div className={cn('rounded-lg border border-line', active && 'border-primary')} />

Next: Internationalisation.