Documentation

Theming

A theme is four attributes on the document element. Tokens resolve against them, so a product changes its whole look without overriding a single component.

The four attributes

<html
  lang="en"
  className="dark"
  data-theme="dark"
  data-palette="aurora"
  data-typeface="inter-tight"
  data-personality="precise"
>

data-theme
dark or light — the reference is dark.
data-palette
The brand palette the accent tokens resolve against.
data-typeface
The type voice used by display and body text.
data-personality
Radius, depth and motion character, as one choice.

Dark mode is the reference, not a filter over the light theme: depth comes from the token luminance step and a hairline border rather than from shadow alone.

Where the values come from

The palette, type face and personality registries live in the Showcase's appearance module, and the foundations pages render them so you can judge them next to real components.

Themes Colors Typography Motion

Motion and reduced motion

Every primitive reads the reduced-motion preference. If you compose your own animation, honour it too: the Showcase's motion control exists so the difference can be seen rather than argued about.