Themes

Dark is the same ramp read backwards: the page becomes the deep backdrop, panels lift above it, and every token keeps its name. Both columns on this page render live from the contract — the switch is one attribute on the root.

Pairing

One markup, two resolutions. The miniature below is rendered twice — the right copy sits under the dark scope, and no line of it changes.

light — the default scope

dark — [data-theme="dark"] on a wrapper

Surfaces

The same semantic names, resolved twice — light values and dark values, side by side, straight from the tokens.

Surfaces

--page-background

--component-background

--section-background

--nested-background

Ink & lines

--text-primary

--text-secondary

--border-default

Left chip resolves in the light scope, right chip in the dark — the pairs are the contract; features pick a name, never a value.