Visual reference for all colours, typography, and components. Tell me what you'd like to change and I'll update it.
background
bg-background
foreground
bg-foreground
card
bg-card
primary
bg-primary
primary-foreground
bg-primary-foreground
secondary
bg-secondary
muted
bg-muted
muted-foreground
bg-muted-foreground
accent
bg-accent
accent-foreground
bg-accent-foreground
destructive
bg-destructive
border
bg-border
input
bg-input
ring
bg-ring
chart-1
bg-chart-1
chart-2
bg-chart-2
chart-3
bg-chart-3
chart-4
bg-chart-4
chart-5
bg-chart-5
text-4xl font-bold — H1
text-3xl font-bold — H2
text-2xl font-semibold — H3
text-xl font-semibold — H4
text-base — Body
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
text-sm — Small
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
text-xs — Extra Small
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
text-xs tracking-widest uppercase — Label
Section Label
font-mono — Monospace
--accent: 40 56% 55%;
Wowzer
font-normal
400 Regular
Wowzer
font-medium
500 Medium
Wowzer
font-semibold
600 Semibold
Wowzer
font-bold
700 Bold
rounded-sm
sm
rounded-md
md
rounded-lg
lg
rounded-xl
xl
rounded-full
full
Card content goes here. This is how a standard card looks.
A card with accent border styling applied.