Colors
Semantic color tokens, surface steps, and the exact light and dark values exposed by the Basel Standard theme.
Copy a concise page brief or the full MDX source without digging through the docs shell.
Color is used as signal, not atmosphere. The system is mostly neutral, with the accent reserved for emphasis, selection, and editorial punctuation rather than constant decoration.
How To Read The Tokens
- Token names map to CSS variables such as
--backgroundand--accent. - Tailwind utility aliases expose those variables as classes like
bg-background,text-muted-foreground, andborder-border-strong. - Surface steps are derived from the accent with
color-mix(), which keeps the neutral field connected to the signal color without flooding the interface.
Token Reference
Base
The main semantic tokens for page, panel, field, and text surfaces.
background
Default page background.
foreground
Default text and primary ink.
card
Raised neutral surfaces and framed specimens.
card-foreground
Ink on `card` surfaces.
panel
Subtle neutral containers, docs code rails, and quieter panel fills.
panel-foreground
Ink on `panel` surfaces.
field
Inputs and lighter inset controls.
field-foreground
Ink on form fields and inset controls.
popover
Overlay panels such as menus, popovers, and dialogs.
popover-foreground
Ink on overlay surfaces.
Signal
Hierarchy, emphasis, muted support, and destructive states.
primary
Primary action fill or strongest contrast block.
primary-foreground
Ink placed on primary fills.
secondary
Lower-emphasis fills and secondary controls.
secondary-foreground
Ink placed on secondary fills.
muted
Quiet fills and low-contrast utility surfaces.
muted-foreground
Secondary text and labels.
accent
Rare signal color for selection, editorial emphasis, and highlighted actions.
accent-foreground
Ink on accent surfaces.
destructive
Confirmed destructive actions.
destructive-foreground
Ink on destructive surfaces.
Structure
Rules, overlays, and interaction markers that give the system its architectural feel.
border
Default divider and border color.
border-strong
Major separators and high-contrast structural rules.
overlay
Backdrop layer behind dialogs, sheets, and transient UI.
input
Default input border token.
ring
Focus treatment and ring-based emphasis.
Surface Scale
Numbered neutral surfaces built from the background and ink ramps. Step 1 stays closest to the canvas. Step 11 is the strongest structural neutral.
surface-1
Closest to the page canvas. Useful for the quietest stepped fill.
surface-2
Soft wash for broad sections and low-pressure grouping.
surface-3
Light grouping surface with more visible separation.
surface-4
Low-contrast inset or utility backdrop.
surface-5
Muted panel step for denser internal structure.
surface-6
Inset field-like fill with clearer presence.
surface-7
Standard raised panel step when the layer should read immediately.
surface-8
Frame-level separation and stronger neutral bands.
surface-9
High-contrast neutral step for badges, chips, and selected regions.
surface-10
Strong emphasis fill that still reads inside the neutral family.
surface-11
The strongest neutral surface before the system needs direct accent color.
Ink Scale
Numbered foreground ramp for quieter labels through to the main ink. Step 11 maps to the default foreground.
ink-1
Faintest readable ink for low-priority chrome and quiet separators.
ink-2
Very soft support text.
ink-3
Low-emphasis labels and secondary metadata.
ink-4
Support copy where contrast should stay restrained.
ink-5
Muted foreground and default secondary text.
ink-6
Middle-weight copy and darker metadata.
ink-7
Compact headings, controls, and stronger copy.
ink-8
Firm text on stepped surfaces and stronger UI labels.
ink-9
High-contrast controls and structure-heavy titles.
ink-10
Near-primary ink for strong emphasis without going all the way to the deepest step.
ink-11
Primary ink. Maps to the system foreground.
Sidebar
Dedicated navigation tokens so the application rail can diverge from the main canvas when needed.
sidebar
Sidebar background.
sidebar-foreground
Default text inside the sidebar shell.
sidebar-primary
Primary action or selected emphasis in side navigation.
sidebar-primary-foreground
Ink on sidebar primary fills.
sidebar-accent
Secondary sidebar fill and hover state.
sidebar-accent-foreground
Ink on sidebar accent fills.
sidebar-border
Sidebar dividers and edge rules.
sidebar-ring
Focus ring or active emphasis inside sidebar contexts.
Guidance
Start With Semantic Tokens
Use background, foreground, panel, field, border, and muted-foreground first. Those tokens carry most application surfaces without needing custom color choices.
Reserve Accent For Meaning
accent should mark selection, editorial emphasis, or a single highlighted action. If every element takes the accent, hierarchy collapses quickly.
Use Surface Steps Instead Of Shadows
The surface-* tokens are the preferred way to create depth. They preserve the hard-edged, architectural character of the system.
Keep Destructive Meaning Separate
destructive and danger should stay tied to harmful actions or risky state. They should not double as generic feature emphasis.