design-tokens

Framework-agnostic primitive and semantic design tokens, authored in DTCG JSON and shipped as CSS custom properties.

Overview

The three-layer token architecture, how to install the package, and where the sources and the generated CSS live.

Naming

The naming grammar for semantic and component tokens, the rules that keep it consistent, and the scales in use.

Colors

The OKLCH color space, the 19-hue primitive palette, the semantic color roles, and WCAG guidance for using them.

Dark mode

How the dark theme overlays 13 semantic tokens, how a page opts out, and why there is no forced-dark selector.

Customizing

The two override strategies, CSS layer override and JSON plus build, and when each one is the right tool.

Reference

Every token in the package, generated from the JSON sources so it can never drift from the shipped CSS.

DTCG format

The Design Tokens Community Group JSON format, its keys, types and naming conventions as used in this package.

Style Dictionary

How the JSON token sources are compiled into CSS custom properties, including the dark theme pass.

Fluid scales

The Utopia method behind the fluid font-size and spacing tokens, and when to reach for them.