Search for a command to run...
Sand for neutral, Tangerine for brand. Semantic tokens wrap the right step at the right tier so app code rarely reaches for a raw scale number.
Radix Colors' warm-neutral palette. 12-step scale that auto-inverts in dark mode.
Brand color. Use sparingly, a tangerine button or icon signifies this is the thing that matters most on this surface.
Raw scale values like bg-sand-9 should rarely be used directly. Instead, use the semantic
token to document intent and allow the system to re-theme easily across all applications.
Some tokens like surface-primary and bg-overlay map to different parts of the scale depending on the system theme.
Never use background or text values with opacity.
Opacities are used for components like buttons where a subtle background needs to maintain contrast in a
surface agnostic way, and animate appropriately. sand-9 is the canonical step for low-emphasis interactive surfaces.
Radix bold scales back the status and accent tokens. Each scale's dark-mode
value is chroma-reduced automatically, and step 9 stays the "solid accent"
in both modes — use it for solid fills (bg-success, status dots), never for
text. Status text on a tint reads from step 11 via
text-fg-{success,warning,info} (and text-fg-error at step 10); step 9 is
low-contrast as text.
Two layers + an overlay token. Named by elevation, not physical element.
| Token | Light | Dark | When |
|---|---|---|---|
bg-surface-primary | white | #1e1e1d | page bg, cards, content areas (brightest) |
bg-surface-secondary | sand-2 | sand-2 | sidebars, sticky headers, sub-panels, insets |
bg-overlay | white | #1e1e1d | popovers, dropdowns, menus, tooltips (floats above) |
Three contrast tiers + inverted + error.
| Token | Step | Contrast | Use for |
|---|---|---|---|
text-fg-high | sand-12 | WCAG AAA | headings, primary labels, key values |
text-fg-mid | sand-11 | WCAG AA | body text, descriptions |
text-fg-low | sand-10 | sub-AA | captions, timestamps, placeholders |
text-fg-inverted | white / black | — | text on control.solid |
text-fg-error | red-10 | WCAG AA | inline form errors |
text-fg-success | green-11 | WCAG AA | success text on a bg-success tint |
text-fg-warning | amber-11 | WCAG AA | warning text on a bg-warning tint |
text-fg-info | blue-11 | WCAG AA | info text on a bg-info tint |
text-fg-low is intentionally sub-AA — only use it for non-critical info.
Two weights, composable with direction utilities. Both are sand-9 at 12%
(subtle) or 20% (loud) opacity.
Tangerine for icons and accents:
brand-accent maps to tangerine-9 in light mode and tangerine-11
(chroma-reduced) in dark.
Interactive surfaces use bundled tokens — see Button for the full set. Each variant pairs a surface treatment with hover / active states and text color:
control.* lives in TypeScript because hover, active, and blur can't be
expressed as a single CSS variable. Everything else is a Tailwind utility
class.
Reach for semantic tokens (text-fg-high, bg-surface-secondary, border-subtle) before raw
scale references.
text-fg-low only for non-critical info. It's intentionally sub-AA.Use Tangerine at most once per surface. The accent loses meaning when multiple things compete for attention.
Hand-pick hex codes. If a color isn't expressible in the system, add it to the system first.
Use raw bg-sand-N in app code. Semantic tokens exist so the system can re-theme without
find/replace.