Design System
Component Gallery
Every primitive variant and token the current skin exposes. Swap the skin to see this entire page re-theme.
Buttons
variant="primary"
variant="accent"
variant="dark"
variant="outline"
variant="outline-white"
variant="outline-light"
variant="ghost"
variant="phone"
variant="on-accent"
Badges
primary primary-soft accent success gray muted dark white outline secondary inverse
Icons
phone
check
check-circle
clock
shield-check
arrow-right
chevron-right
star
lightning
document
beaker
map-pin
mail
menu
close
sun
moon
Cards (variants)
variant="base"
Sample card body — replace with real content.
variant="elevated"
Sample card body — replace with real content.
variant="featured"
Sample card body — replace with real content.
variant="glass"
Sample card body — replace with real content.
variant="dark"
Sample card body — replace with real content.
Cards (radius × padding)
radius="md"
radius="lg"
radius="xl"
radius="2xl"
radius="3xl"
padding="none"
padding="sm"
padding="md"
padding="lg"
padding="xl"
Color tokens
--color-primary --color-primary-500 --color-primary-700 --color-secondary --color-accent --color-accent-dark --color-success --skin-panel-bg --skin-panel-border --skin-link --skin-footer-bg Radius tokens
--th-radius-sm --th-radius-md --th-radius-lg --th-radius-xl --th-radius-2xl --th-radius-3xl --th-radius-full Shadow tokens
--th-shadow-xs --th-shadow-sm --th-shadow-md --th-shadow-lg --th-shadow-xl --th-shadow-2xl Typography
Display LG — hero headline
Display MD
Display SM
H2 section title
H3 card title
Body text — the quick brown fox jumps over the lazy dog.
Small / caption — supporting copy.