Colors
Warm ink on paper and a single yellow. Every value is a token; light and dark differ only in the token layer.
Scales
Yellow has four steps and warm ink ten, all hue 22–48. Select a swatch to copy its variable.
Yellow
Warm ink
Surfaces and text
Components use these names, never a scale step directly.
The page: warm paper, or warm near-black in dark mode.
Body text and headings.
Solid surfaces: panels, windows and mock product UI.
Wells, hover fills and inline code.
Leads, captions and secondary labels.
Hairlines between cells and around cards.
Brand
Yellow appears once per screen: the primary action, a focus ring, or a scene's result.
The one primary action.
Text on the primary action.
A quiet yellow wash for a selected or highlighted row.
Text on the accent wash.
Keyboard focus ring.
Status
Only for real outcomes, and always next to an icon or words.
Completed, saved, connected.
Destructive actions and errors.
Neutral notices and links inside notices.
Substrate
An always-dark backstage behind demos and code. It stays dark in both modes, and its tint tokens dress chips on photographs.
Rules
- 1Write semantic utilities: bg-background, text-muted-foreground, border-border.
- 2No physical colors in components: no #fff, no zinc-500, no bg-white.
- 3No dark: branches in components. Dark mode is the .dark class and the token layer.
- 4Shadows are warm and two-layered, keyed off ink-900. Never neutral black, never colored.
- 5No gradient text, gradient borders or color washes.