Foundations
The design-system reference. Every value resolves live fromglobal.css throughuseCssTokens — flip the theme and this page follows. Write semantic tokens (bg-card), never raw hues.
Surface ramp
Seven evenly spaced warm-neutral steps per theme. Surfaces climb TOWARD white as panels nest, so --background is the darkest step in light mode and the ramp reads inverted against stock ShadCN.
Surface aliases
Named entry points onto the ramp: --input and --sidebar are --card, --accent is --muted, --accent-active is --secondary. --popover owns its own rung, one step above a card.
Ink
Text colors paired to the surfaces above.
Brand & primary
--brand is the one non-neutral hue in the chrome; it drives --ring and chart slot 1. --primary is the solid-button fill, and its states mix toward white rather than stepping the ramp.
Edges
--border draws divider rules and panel edges. --control-border is for checkbox / radio / switch only, where the border IS the affordance and has to clear 3:1 on every surface step.
Overlays
Translucent white washes for controls that must keep the color behind them, sized per theme so each lifts about one ramp step.
Status
Polaris red and green, lifted in dark.
Record tones
The DAM, tickets, and select chips pick from these.
Chart series
8 categorical hues, fixed order. Consumers assign in order and never cycle past 8.
Contrast
Live WCAG ratios in the current theme. Text rows judge 4.5:1; edge rows the 3:1 non-text rule.
Type
One sans stack, one mono stack. Mono marks machine text.
Spacing & radius
Every gap is a multiple of --spacing. --radius is 0rem in this theme, so small radii read square.