Quarterly report
A standard content card with a title, metadata, body copy, and a pair of actions along the bottom edge.
Test 53
Theme Lab
A fixed shell of placeholder components for trying design themes and design systems. The markup never changes — every look you can switch to above is a single stylesheet restyling exactly this page.
Typography
The full text scale, from display to caption.
Display — The quick brown fox
Title 1 — Jumps over the lazy dog
Title 2 — Pack my box with five dozen jugs
Title 3 — Sphinx of black quartz
Body — Design systems live or die on their body text. This paragraph
exists so every theme has a real reading measure to tune: size, leading, color, and the
relationship between text and its ground. It includes a standard link,
some bold text, some emphasis, and inline
code_tokens() to keep things honest.
Secondary — supporting text that sits one level down from body copy.
Caption — timestamps, footnotes, and fine print live here.
Blockquote — “Styles come and go. Good design is a language, not a style.” — Massimo Vignelli
Color roles
Each swatch is a role, not a hex — themes fill them in.
Background
Surface
Accent
Text
Muted
Positive
Negative
Buttons
Forms
As it appears on your profile.
Enter a valid email address.
Stat tiles
1,284Active users+12.4%
98.2%Uptime+0.3%
412msP95 latency−8ms
$8,940MRR−2.1%
Cards
Storage almost full
Cards should also survive being boring. This one carries a single secondary action and slightly less content than its neighbor.
Data table
| Project | Owner | Status | Tasks | Updated |
|---|---|---|---|---|
| Aurora | M. Chen | Live | 24 | Jul 18 |
| Basalt | J. Okafor | In review | 7 | Jul 17 |
| Cinder | R. Alvarez | Blocked | 31 | Jul 15 |
| Dunes | T. Nguyen | Failing | 12 | Jul 12 |
| Ember | K. Sato | Draft | 3 | Jul 09 |
Tabs
The overview panel. Switching tabs should feel instant, and the active tab should be unmistakable without relying on color alone.
The activity panel — a different pane of content proving the tabs actually switch.
The settings panel. Three is enough to establish rhythm.
Badges & alerts
Default
Info
Success
Warning
Danger
Heads up. An informational alert with a link inside it.
Saved. Your changes are live.
Careful. This bucket is shared with the whole team.
Failed. The export could not be completed.
List group
- Design tokensEdited yesterday
- Component inventoryEdited 3 days ago
- Accessibility notesEdited last week
Modal & toast
Empty state
No themes yet
When you add a stylesheet to themes/ and register it, it appears in the switcher.