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 displayed on the main accent |
| --border | Outlines and hard-shadow color |
#Shape and depth
--radius-basecontrols the shared component corner radius.--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.
--font-weight-baseand--font-weight-headingkeep body and heading weight consistent.
#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.
#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.