Color. Zinc neutrals, one accent.
Primitives are the atoms. Components consume only the semantic tokens below, never a primitive or a hex. The brand shifts per theme. Everything else is shared.
Cards sit on --bg-card, a hair above the canvas and defined by their border. Anything that covers the page, and code, sits on --bg-overlay. Fields sit on --bg-field. A zinc-900 area reads as a field of gray, so no component paints one.
Every surface has the same finish: near black underneath, the .sheen class for a brand glow in the top-left corner, and --edge-light, a line of light on the top edge, which --shadow-card and --shadow-overlay already carry. Put both on a surface of your own.
Every theme sets the brand and its two inks. The rest is mixed from --fg-brand with color-mix, so it follows any theme on its own. Switch the theme with the button in the corner and these repaint.
Each ink on what it actually sits on, measured for the theme and mode you are in. The floors are what the contrast test enforces in all twelve combinations.
| sample | ink | on | ratio | floor |
|---|---|---|---|---|
| Aa 12px | --fg-on-brand | --fg-brand | - | 4.5: text on a brand fill |
| Aa 12px | --fg-brand-text | --bg-canvas | - | 4.5: brand text on the page |
| Aa 12px | --fg-brand-text | --bg-card | - | 4.5: brand text on a card |
| Aa 12px | --fg-brand-text | --bg-surface-brand over --bg-canvas | - | 5: brand text on the tint |
| Aa 12px | --fg-primary | --bg-canvas | - | 4.5: body text |
| Aa 12px | --fg-secondary | --bg-card | - | 4.5: secondary text on a card |
| Aa 12px | --fg-muted | --bg-canvas | - | 4.5: metadata on the page |
| Aa 12px | --fg-muted | --bg-card | - | 4.5: metadata on a card |
| Aa 12px | --fg-muted | --bg-overlay | - | 4.5: metadata in a dialog |
| Aa 12px | --status-success-fg | --status-success-soft over --bg-canvas | - | 4.5: a soft success badge |
| Aa 12px | --status-error-fg | --bg-card | - | 4.5: a field error on a card |
No fixed color. Each series is the brand's hue, turned in steps of 45°, at one lightness per mode that clears 3:1 on a card. Switch the theme and the palette follows. A result above or below zero uses the status colors and a sign instead.