OKLCH design tokens

Color that stays calm in light and dark — an OKLCH design system where semantic aliases drive the UI, and CSS custom properties carry the contract.

Why OKLCH for a design system

OKLCH is a perceptual color space: lightness, chroma, and hue map more closely to how we see. That matters when you ship glass surfaces and soft accents — small lightness shifts stay even, and theme flips feel intentional instead of washed or neon.

Caustica Design encodes primitives and semantic tokens as OKLCH (and color-mix in OKLab where layers meet). There is no separate theme runtime inventing colors — you override aliases; components keep resolving through the same chain.

Three layers at a glance

Like many modern token setups, Caustica separates raw scales from purpose and from component locals:

  • Primitives — ramps and scales (--ca-blue-500, space, radius)
  • Semantic — what UI consumes (--color-fg, --glass-border, --accent)
  • Component — local APIs on a class (--btn-bg, --panel-radius)

Theme by remapping semantic aliases under html[data-theme]. Leave primitives stable. Full tables, DTCG JSON paths, and override recipes live on the Tokens deep guide; pair with Theming for the data-theme contract.

OKLCH custom properties

After importing caustica-design/css or foundation, semantic color looks like this — values are illustrative of the shape, not a full dump of the package. 

/* After caustica-design/css or foundation */
:root,
html[data-theme="dark"] {
  --color-system-blue: oklch(0.58 0.17 264);
  --color-accent: var(--color-system-blue);
  --accent: var(--color-system-blue);
  --color-fg: oklch(0.93 0.01 264);
  --glass-border: oklch(1 0 0 / 0.14);
}

html[data-theme="light"] {
  --color-system-blue: oklch(0.48 0.19 264);
  --color-accent: var(--color-system-blue);
  --accent: var(--color-system-blue);
  --color-fg: oklch(0.28 0.02 264);
  --glass-border: oklch(0.35 0.02 264 / 0.18);
}

Next steps