Color palette
Each color has a 300→700 ramp. ★ = a Kat-approved brand value.
Burgundy — primary: headers, buttons, wordmark
300#9A565A
400#762A2F
500 ★#4E0207
600#3A0205
700#260103
Teal — secondary/accent: icons, fills, footers, links
300#82C6CA
400 ★#069296
500 ★#15878E
600#0F666B
700#093F43
Pink — playful pop: tags, highlights, accents
300#F8A6C6
400 ★#F1438E
500 ★#EA4487
600#C22E6B
700#951F50
Sunbeam — sparkle: stars, badges, dividers (always dark text)
300#FFE08C
400#FFD45E
500 ★#FFC83D
600#E3A924
700#B7831A
Neutrals
Paper — page bg#FFFBF1
Cream — cards#FEECDC
Ink — text#1A1A1A
Typography
Display
Fraunces
Aa Bb Cc 123
Headings, quirky vintage serif.
Body
Hanken Grotesk
Aa Bb Cc 123 — the quick brown fox.
Body & UI, clean and friendly.
Script accent
Pacifico
a Happier You!
Wordmark feel, short lines only.
Motifs & components
✦✦
Sparkles & sunburst
Gold-yellow ✦ on dark fields, with radiating sunburst behind heroes.
Buttons & badges
Primary
Accent
Sunbeam
Pink
✓
Dark text on sunbeam/pink-light; white on burgundy/teal-600/pink-600.
Do
- ✓ Warm cream backgrounds — never stark white
- ✓ Burgundy + teal as the structure; pink + sunbeam as pops
- ✓ Dark text on pink/sunbeam; white on burgundy/teal-600
- ✓ Sparkles used sparingly for delight
- ✓ One display face (Fraunces); script for short lines only
Don't
- ✗ Pure-white page backgrounds
- ✗ Navy/red as primaries (that was the old pamphlet)
- ✗ White text on pink-500/teal-500/sunbeam at body size
- ✗ Light-on-light (pink/sunbeam text on cream)
- ✗ More than one display typeface
See the live homepage concept in this palette: Mock #12 →