Theme builder
Every colour in the library resolves through one token layer, so a theme is a handful of CSS declarations rather than a fork. Change them here and the whole site follows — this page, the sidebar, the header. When it looks right, copy the CSS out.
Intents
Six meanings. Each base colour drives a whole derived ramp — hover, border, badge, callout.
--primary--primary-foreground--secondary--secondary-foreground--success--success-foreground--error--error-foreground--warning--warning-foreground--info--info-foregroundSurfaces
Backgrounds in depth order. `background` is the page, `surface` sits on it, `surface-raised` on that.
--background--surface--surface-raised--surface-overlay--surface-sunken--surface-inset--muted--muted-foregroundText
Foreground colours by emphasis, not by shade.
--foreground--foreground-muted--foreground-subtle--foreground-on-emphasisBorders
Divider and outline colours.
--border--border-muted--border-strongInteraction
The focus ring and links. The hover and selection overlays are alpha mixes — edit those by hand.
--focus--link--link-hoverData visualisation
Eight categorical slots in a fixed order. The order is the colour-blind-safety mechanism — re-hue them if you must, but keep adjacent slots far apart.
--chart-1--chart-2--chart-3--chart-4--chart-5--chart-6--chart-7--chart-8Density
One scale for everything you click or type into, so a button, an input and a date field on the same row line up. Declared once — a control is not a different height in the dark.
18px24px32px2px4px6pxPreview
Intents
Control scale
Labels
Feedback
Deploy queued
Check the contrast
Form
Surfaces
Background
Surface
Surface raised
Muted copy on it
Subtle copy on it
Table
Chart series
Contrast
Measured against what is on screen in the theme you are editing, derived steps included. WCAG 2.2 asks for 4.5 on body text and 3 on anything non-text, like a border or the focus ring.
Measured in the browser — nothing to report while rendering on the server.
Your theme
Nothing changed yet