Design Demo
Your design system, visualised. Tweak a color token, adjust a font weight, change a border radius — then watch everything update here. It's like a mirror for your CSS, but more useful.
Why this page exists
Design systems are living things. This page helps you validate changes at a glance, catch regressions before they ship, and honestly? It's just satisfying to see everything in one place.
Semantic Colors
The core palette. These tokens define your brand and UI hierarchy.
Primary
--color-primary
Secondary
--color-secondary
Muted
--color-muted
Accent
--color-accent
Status Colors
Feedback and state. Use sparingly for maximum impact.
Destructive
destructive
Success
emerald-500
Warning
amber-500
Info
sky-500
Surfaces
Backgrounds, cards, and borders. The canvas your UI lives on.
Background
--color-background
Foreground
--color-foreground
Card
--color-card
Border
--color-border
Gradient Callouts
Our signature callout style. Subtle gradients that feel premium.
Info / Neutral
Tips, notes, general information
Success / Positive
Confirmations, completed actions
Warning / Caution
Important notices, proceed carefully
Feature / Highlight
New features, special content
Design system healthy
If everything on this page looks good, your design system is in great shape. Now go build something beautiful.