Colors
Clay's colour tokens. Each swatch resolves through CSS light-dark(), the same variable adapts to the active mode.
Chrome tokens
The docs site’s own surfaces, canvas, elevated surfaces, borders, and text.
clay-canvas Page background. The lowest surface.
clay-elevated Cards, dialogs, preview panes, one level above canvas.
clay-base Code blocks, inline chips, subtly-raised UI.
clay-control Button backgrounds, hover states.
clay-hairline Border between every structural block.
clay-brand The terracotta accent, use sparingly.
Text
text-clay-default Body text.
text-clay-strong Headings and emphasis.
text-clay-subtle Secondary copy and metadata.
text-clay-inactive Disabled states.
text-clay-link Hyperlinks.
text-clay-brand Brand highlights.
Component tokens
The semantic scale every Clay component is tokenised against. Each variable is defined by the active theme and adapts to light/dark mode automatically, override one in your own CSS and every component using it follows.
background Default app background.
foreground Default app text.
primary Primary action fill.
primary-foreground Text on primary fill.
secondary Secondary action fill.
destructive Destructive action.
muted De-emphasised surfaces.
muted-foreground Text on muted surfaces.
accent Hover / active surfaces.
border Default component border.
input Input border.
ring Focus ring.
card Card surface.
How it works
Every token is defined with CSS light-dark():
--color-clay-canvas: light-dark(oklch(98.75% 0 0), oklch(10% 0 0));The active value tracks color-scheme on <html>. The ThemeToggle sets data-mode="dark" or "light", which flips the page’s color-scheme, which flips every light-dark() call atomically. One token, two values, no class-based overrides per component.