← Site home

Color

Semantic tokens for surfaces, text, and accents. Prefer variables over raw hex in new UI.

Palette

Preview

--color-background

--color-foreground

--color-muted

--color-accent

--color-accent-fg

Use the theme switcher in the sidebar to preview these tokens across all themes.

CSS variables
/* Semantic tokens for components */
--color-background: var(--theme-bg);
--color-foreground: var(--theme-fg);
--color-muted: var(--theme-muted);
--color-accent: var(--theme-accent);
--color-accent-fg: var(--theme-accent-fg);
--color-border: var(--theme-border);

/* Theme source tokens (set per [data-theme]) */
--theme-bg
--theme-fg
--theme-muted
--theme-accent
--theme-accent-fg
--theme-border