Live preview of the selected theme.
Interfaces that read well, for everyone.
A platform-first CSS framework. Every color pair on this page is checked against WCAG 2.2 AA at build time, in light and dark, for every scheme.
Type scale
Body copy
Good typography is invisible. The reader notices the ideas, not the letters — yet every decision about measure, leading and rhythm shapes how long they stay. “Hanging” punctuation, balanced headings and pretty wrapping keep ragged edges calm.
Small print: 1Il0O — distinguishable glyphs matter in forms and codes.
Code & numbers
const total = items.reduce((sum, i) => sum + i.price, 0); // 1,000.00| Month | Revenue |
|---|---|
| August | $11,111.10 |
| September | $98,040.87 |
Color ramps
Twelve steps, each with one job: 1–2 backgrounds, 3–5 fills, 6–8 borders, 9–10 solid fills, 11–12 text.
Components
Enter an email address in the format name@example.com
Active users
12,847
▲ 8.2% vs last month
What changed?
Onboarding emails now use plain language.
How is this measured?
Unique sign-ins in a rolling 30 days.
Contrast proof
Checks for the current scheme and mode. WCAG 2 ratio is enforced at build; APCA Lc (WCAG 3 draft) is shown for reference.
| Pair | Sample | WCAG | Needs | APCA Lc | Result |
|---|