Playground

Adjust controls. See live output. Copy the CSS.

Card Builder

Controls

Color Surface level Shadow level Heading step Body contrast Muted contrast

Card Heading

Body text at the configured contrast level. Adjust the sliders to see how surfaces, shadows, and contrast interact.

Muted secondary text for captions and metadata.

Button Builder

Controls

Fill level Border radius

Surface Explorer

All surfaces with auto-contrast text at different amounts.

surface(-1) .90 .50

surface(0) .90 .50

surface(1) .90 .50

surface(2) .90 .50

surface(3) .90 .50

Type Scale

Step -1 · Small text for captions Step 0 · Base body text Step 1 · Subheading Step 2 · Section heading Step 3 · Large heading Step 4 · Display Step 5 · Hero

Space Scale

Resize the viewport or toggle density to see the scale respond.

-2

-1

0

1

2

3

4

5

Experiments

Code Editor

Live CSS editing with themed syntax highlighting. Uses the CSS Custom Highlight API — no DOM mutation, no extra elements. Type below.

Size

Caret color from --fill() · Token colors rotate with --_color hue · Light/dark adapts via --_dark