Camping design system

Live preview of the camping-web token vocabulary, the five themes, and the base components. Switch the theme and text size from the header — every combination meets WCAG 2.1 AA, enforced by yarn validate:contrast.

Color tokens

--bg
--surface
--surface-raised
--surface-hover
--text
--text-secondary
--text-muted
--border
--accent
--accent-hover
--on-accent
--success
--on-success
--warning
--danger
--on-danger
--focus-ring

Type, spacing, radius, elevation

Type scale (rem-based)

--font-size-xs0.75rem
Quiet nights under tall pines
--font-size-sm0.875rem
Quiet nights under tall pines
--font-size-md1rem
Quiet nights under tall pines
--font-size-lg1.125rem
Quiet nights under tall pines
--font-size-xl1.375rem
Quiet nights under tall pines
--font-size-2xl1.75rem
Quiet nights under tall pines
--font-size-3xl2.25rem
Quiet nights under tall pines

Spacing (4px grid)

--space-10.25rem
--space-20.5rem
--space-30.75rem
--space-41rem
--space-51.25rem
--space-61.5rem
--space-72rem
--space-82.5rem
--space-93rem
--space-104rem

Radius

--radius-sm
--radius-md
--radius-lg
--radius-xl
--radius-pill

Elevation

--shadow-1
--shadow-2
--shadow-3

Components

Buttons

Inputs

Email address

Email address (error state)

Enter a valid email address.

Card

Site 214 · Maple Loop

Riverfront · deep shade · fits 35 ft

AvailableElectrical 30A

$96 total · 2 nights

Badges

Tent siteAvailable2 sites leftClosed for season

Skeleton loading

The shimmer pauses automatically when your system asks for reduced motion.