gray
radius
Overview

Example

One screen built out of the whole library. Turn a dial in the bar above and judge the result here, where things sit next to each other, rather than on a page that shows one component at a time.

MH

style-tokens

Passingv1.0.0

Color, spacing, type, shadow and motion, in four consumption formats from one source.

Every surface here reads the tokens the dials rewrite

Nothing on this page paints itself. Change the accent, the gray, the radius or the theme and everything below follows.

Bundle

18.4 KB

gzipped, all four formats

Components

23

one stylesheet each

Contrast

AA

measured, not chosen

What changed

Three entries since 1.0.0.

The group that names a level was called surface, which is also what a card is. Every reference moves to background, and fill keeps the panels that are not levels.