Styleguide
Design tokens, typography scale, color palette, and UI element reference. Not a deployable page — for development reference only.
Type Scale
.title-1 — 52px/62px bold (lg)
The quick brown fox
.title-2 — 42px/50px bold (lg)
The quick brown fox
.title-3 — 30px/38px bold (lg)
The quick brown fox
.title-4 — 24px/32px semibold
The quick brown fox
body — 16px/1.2 normal
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
text-sm
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
text-xs
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Color Palette
Brand — Primary
primary
#007a97
primary-light
#0097b9
primary-dark
#005a75
Brand — Secondary
secondary
#ff820a
secondary-light
#ff9e3a
secondary-dark
#e67200
Accent
accent
#f59e0b
accent-light
#fbbf24
accent-dark
#d97706
Neutrals
white
#ffffff
surface
#f8fafc
light-gray
#e8eff6
medium-gray
#99a1af
dark-gray
#1e2939
black
#000000
Semantic
success
#16a34a
warning
#ea580c
error
#dc2626
info
#0284c7
Eyebrow Labels
default
.eyebrow
primary
--primary
primary-light
--primary-light
primary-dark
--primary-dark
secondary
--secondary
secondary-light
--secondary-light
secondary-dark
--secondary-dark
accent
--accent
success
--success
warning
--warning
error
--error
info
--info
medium-gray
--medium-gray
dark-gray
--dark-gray
white
--white
black
--black
Buttons — Solid
Brand
Brand variants
Semantic
Buttons — Outline
Brand
Semantic
Neutral
Button Sizes & Icons
Sizes
With icon — left (default)
With icon — right (data-icon-position="right")
Icon Colors
icon--primary
icon--secondary
icon--accent
icon--success
icon--warning
icon--error
icon--info
icon--medium-gray
icon--dark-gray
icon--white
icon--black
icon--light-gray