Design Tokens

The shared palette, shape, and type of every immit surface — parsed live from the code.

Source of truth: Figma variables ("light - dark") → packages/ui/src/styles/globals.css. These tables are parsed from that file at render time — the "Figma variable" column comes from each declaration's comment, so auditing sync means reading this page against the Figma variable panel. Semantics: architecture/design-system.md. The extension hand-mirrors the blocks (shadow root); a parity test guards it.

Page & panels

Page, cards, floating panels, hover rows.

Token	Light	Dark	Figma variable
`--background` bg-background	white	stone-950	BG/base
`--card` bg-card · text-card-foreground	Aa white on stone-900	Aa stone-950 on stone-100	BG/base
`--popover` bg-popover · text-popover-foreground	Aa white on stone-900	Aa stone-800 on stone-100	BG/panel
`--muted` bg-muted · text-muted-foreground	Aa stone-100 on stone-600	Aa stone-900 on stone-400	BG/subtle
`--faint` bg-faint	stone-50	stone-900	BG/extra-subtle
`--accent` bg-accent · text-accent-foreground	Aa stone-200 on stone-900	Aa stone-700 on stone-100	—
`--tooltip` bg-tooltip · text-tooltip-foreground	Aa stone-700 on white	Aa stone-700 on white	Border strong

Text

Default ink, then stepped-down emphasis; link is the inline-link violet.

Token	Light	Dark	Figma variable
`--foreground` bg-foreground	stone-900	stone-100	Font/primary
`--muted-foreground` bg-muted-foreground	stone-600	stone-400	Font/secondary
`--placeholder` bg-placeholder	stone-400	stone-600	Font/muted
`--link` bg-link	violet-500	violet-300	Font/link

Actions

Button fills. secondary is the pill for tinted surfaces (not shadcn’s gray workhorse — that is the muted button variant).

Token	Light	Dark	Figma variable
`--primary` bg-primary · text-primary-foreground	Aa violet-500 on white	Aa violet-500 on white	Button/brand
`--inverse` bg-inverse · text-inverse-foreground	Aa stone-900 on white	Aa white on stone-900	Button/primary
`--secondary` bg-secondary · text-secondary-foreground	Aa white on stone-900	Aa stone-900 on stone-100	Button/secondary
`--soft` bg-soft · text-soft-foreground	Aa violet-50 on violet-500	Aa ink-brand-deep on violet-300	BG/brand-extra-subtle
`--destructive` bg-destructive · text-destructive-foreground	Aa red-500 on white	Aa red-700 on white	Button/destructive
`--success` bg-success · text-success-foreground	Aa emerald-500 on white	Aa emerald-500 on white	Button/success
`--warning` bg-warning · text-warning-foreground	Aa amber-400 on stone-900	Aa amber-300 on stone-900	Button/accent

Marketing surfaces

Tinted section bands and cards; the dark inks have no Tailwind ramp counterpart.

Token	Light	Dark	Figma variable
`--surface-warm` bg-surface-warm	amber-50	indigo-950	BG/warm
`--surface-brand` bg-surface-brand	violet-200	ink-brand	BG/brand-subtle
`--surface-accent` bg-surface-accent	amber-100	ink-brand	BG/accent
`--surface-emerald` bg-surface-emerald	emerald-50	ink-brand-deep	BG/green-extra-subtle
`--surface-dark` bg-surface-dark · text-surface-dark-foreground	Aa violet-900 on white	Aa violet-800 on white	BG/dark

Borders & focus

Hairlines, input strokes, focus ring.

Token	Light	Dark	Figma variable
`--border` bg-border	stone-200	stone-700	Border
`--border-strong` bg-border-strong	stone-300	stone-600	Border strong
`--input` bg-input	stone-200	stone-700	Border
`--ring` bg-ring	violet-500	violet-500	Icon active

Icons

Icon-only affordances.

Token	Light	Dark	Figma variable
`--icon` bg-icon	stone-500	stone-600	Icon default
`--icon-active` bg-icon-active	violet-500	violet-400	Icon active
`--icon-accent` bg-icon-accent	amber-500	amber-400	Icon accent

Shape

--radius: 0.5rem — Tailwind's stock radius scale, unchanged.

rounded-sm

menu rows

rounded-md

buttons

rounded-lg

inputs, panels, app cards

rounded-3xl

marketing cards

rounded-4xl

large marketing frames

rounded-full

marketing pills, badges

Type

SF Pro via the system font-sans stack — nothing is loaded.

Hero 60 / black

Section h2 48 / semibold

Card title 36 / regular

Body 18 / 28

Label 16 / 24 medium

Meta 14 / 20