09 • Patterns · Color palettes

Color palette system

CSS-only color inheritance. Add data-palette="name" to any ancestor; all descendants that consume var(--bg) / var(--fg) / var(--border) / var(--accent) adapt automatically.

The 6 palettes

Snow (lightest)
data-palette="snow"

App background, default page surface

Paper (lighter)
data-palette="paper"

Panels, inset regions

Bone (light)
data-palette="bone"

Dividers, quiet emphasis zones

Ink (dark)
data-palette="ink"

Hero surfaces, system UI, focused state

Ink elevated (darker)
data-palette="ink-elevated"

Cards over ink page, raised panels

Ink hover (darkest)
data-palette="ink-hover"

Hover/active on ink surfaces

Nested composition

Palettes nest. A data-palette="paper" section containing a data-palette="ink" card: the card flips to dark without affecting the parent.

Parent palette: paper (lighter surface)

Nested: ink palette

All descendants inherit dark surface + light fg automatically. No component refactor needed.

Usage

<section data-palette="ink-elevated">
  <Card>Automatically uses --bg = ink-2, --fg = white</Card>
  <Button variant="outline">Border inherits --border palette override</Button>
</section>

Tokens overridden per palette

  • --bg — surface background (cards, panels)
  • --fg — primary text color
  • --fg-2 — secondary text (labels, helpers)
  • --fg-3 — tertiary text (captions, eyebrows)
  • --border — hairline borders
  • --accent — primary action color (red on light, red-soft on dark)