The quick brown fox — Body text
--foreground / --background
—
Theme Preview
Logo and brand tokens in light mode.
Buttons
WCAG contrast check
0 fail0 below AAA13 AAA
The quick brown fox — Muted text on background
--muted-foreground / --background
—
The quick brown fox — Card text
--card-foreground / --card
—
The quick brown fox — Muted text on card
--muted-foreground / --card
—
The quick brown fox — Accent
--accent-foreground / --accent
—
The quick brown fox — Success
--success-foreground / --success
—
The quick brown fox — Ring on background (UI)
--ring / --background
—
The quick brown fox — Border on background (UI)
--border / --background
—
WCAG AA requires 4.5:1 for normal text, 3:1 for large text (18pt+/14pt bold) and UI components. AAA requires 7:1 / 4.5:1. Applied fixes preview live via inline :root overrides — copy into src/styles.css to persist.
Color tokens
Aa
background
var(--background)
Aa
foreground
var(--foreground)
Aa
card
var(--card)
Aa
card-foreground
var(--card-foreground)
Aa
primary
var(--primary)
Aa
primary-foreground
var(--primary-foreground)
Aa
secondary
var(--secondary)
Aa
secondary-foreground
var(--secondary-foreground)
Aa
muted
var(--muted)
Aa
muted-foreground
var(--muted-foreground)
Aa
accent
var(--accent)
Aa
accent-foreground
var(--accent-foreground)
Aa
saffron
var(--saffron)
Aa
saffron-foreground
var(--saffron-foreground)
Aa
success
var(--success)
Aa
success-foreground
var(--success-foreground)
Aa
destructive
var(--destructive)
Aa
destructive-foreground
var(--destructive-foreground)
Aa
border
var(--border)
Aa
input
var(--input)
Aa
ring
var(--ring)
Sample card
Featured listing
Spice Garden Restaurant
A taste of authentic flavors with modern presentation. Trusted by thousands.