Theme builder
Pick a seed colour, see how it maps across surfaces / accents / borders / text, and copy the CSS variables to drop into your project. Pure client-side — the URL hash carries your theme.
Elevated card
Body text on accent-derived surface. The buttons below show your accent role plus its WCAG-aware on-accent text.
Surface 2
A muted container holding secondary content — typically a section, sub-card, or a list row that doesn't need the full elevation.
Display sample 32
Headline sample 22
Body sample 15 — verify legibility at the small sizes too; this is where contrast bugs hide.
Caption muted 12