Your tokens, tuned live

CUSTOMIZER

Every control below rewrites the system's CSS custom properties on the preview. When it looks right, copy the snippet and the theme is yours.

Controls

Typeface

Base size —

Scale ratio

Heading weight

Weights the chosen face doesn't ship are disabled.

Tracking —

Line height —

Border width —

Invert ink & paper

Preview

Specimen · live

MONOCHROME

Constraint is the brief.

Set the scale once; spend it everywhere.

Strip away color and what remains is the design itself. This paragraph tracks your base size, leading, and tracking — read a few lines and trust your eyes over the numbers.

Secondary text steps down once and drops to gray. Captions and metadata step down twice.

Input

Borders follow your border-width token.

Token	Role
--step-0	Body
--step-3	Headings

Take it home

Paste the fonts link in your <head>, the tokens in your CSS, and — if you use the Tailwind CDN — the config after the CDN script.