The base registry item defines the visual contract used by every component. Tokens are plain CSS variables, so they can be changed without replacing component source.
#Core colors
| Token | Purpose |
|---|---|
| --background | Page and canvas background |
| --secondary-background | Inputs, panels, and contrasting surfaces |
| --foreground | Default text and icon color |
| --main | Primary accent and selected state |
| --main-foreground | Content and current-item indicators on the main accent |
| --border | Structural outlines and hard-shadow color |
| --input | Empty checkbox boundaries on secondary surfaces |
Keep structural borders separate from controls and state indicators.
An unchecked Checkbox uses --input; Command and Select use --main-foreground for the
current item on a --main surface. Custom palettes must keep these indicators at least 3:1
against their adjacent backgrounds in both modes. Changing --border globally is not
necessary to make these states visible.
#Shape and depth
--radiuscontrols the shared component corner radius; the--radius-*theme tokens derive from it.--box-shadow-xand--box-shadow-ycontrol hard-shadow direction and depth.--shadowcombines those values into the standard raised surface shadow.- Pressed controls translate by the shadow distance and reduce the shadow to its final edge.
--base-font-weightand--heading-font-weightcontrol body and heading weight. The--font-weight-baseand--font-weight-headingtheme tokens map to these variables for thefont-baseandfont-headingutilities; customize the original variables.
#Extended tokens
The base item also defines chart colors, sidebar colors, destructive states, focus rings, and light and dark theme values. Components consume semantic names instead of hard-coded palette values.
--ring controls the keyboard focus indicator. --error controls error-message text on page
and panel surfaces; it is separate from the filled-action --destructive color and its
--destructive-foreground content color. The text-error utility uses the shared error token.
Installed templates inherit these tokens. Documentation template previews use explicitly labeled gallery presets that are not included in the installed source.
#Customize
Use the Styling tool to change the palette, radius, and shadow direction and copy the generated CSS into your project.
#Design handoff
The registry CSS is the current source of truth. A design kit will be linked only when it mirrors the shipped tokens and is maintained alongside component changes.