Design System
Fathercraft Style Guide
A living reference for the typography, colour, and component conventions used across the Fathercraft platform. Use it to keep new pages on-brand.
Typography Scale
Mobile-first responsive sizes. Copy the class string on the right.
Headings — Playfair Display
Hero H1
Every dad deserves to feel ready.
text-4xl sm:text-5xl md:text-6xl lg:text-7xlPage H1
About Fathercraft
text-3xl sm:text-4xl md:text-5xlSection H2
Why we built Father's Ed
text-2xl sm:text-3xl md:text-4xl lg:text-5xlSub-section H3
Five-Star Fathers Framework
text-xl sm:text-2xl md:text-3xlCard title H4
Forever Free
text-lg sm:text-xlButtons & CTAs
font-heebo font-medium text-base sm:text-lgSpecial — Brushstroke Highlight
Make it feel ready.
<span className="brushstroke-highlight">word</span>Font Families
Display
Playfair
Aa Bb Cc 0123
font-playfair · 400 / 500 / 600 / 700
Body
Roboto
Aa Bb Cc 0123
font-roboto · 300 / 400 / 500 / 600
Labels & UI
Heebo
Aa Bb Cc 0123
font-heebo · 800 / 900
Colour Palette
Brand
primary
bg-primary
hsl(210 100% 12.4%)
secondary
bg-secondary
hsl(218 21% 53%)
accent
bg-accent
hsl(40 100% 50%)
justparent-orange
bg-justparent
hsl(16 100% 59%)
Surfaces
background
bg-background
hsl(0 0% 100%)
card
bg-card
hsl(0 0% 100%)
hero-bg
bg-hero-bg
hsl(210 17% 93%)
content-bg
bg-content-bg
hsl(210 20% 98%)
muted
bg-muted
hsl(210 11% 85%)
UI & Feedback
foreground
bg-foreground
hsl(0 0% 0%)
border
bg-border
hsl(210 11% 85%)
ring
bg-ring
hsl(40 100% 50%)
destructive
bg-destructive
hsl(0 84% 60%)
Components in Context
Badges
Default
Secondary
Outline
Destructive
Sample card
Forever Free
Father's Ed is completely free and always will be. No subscriptions, no hidden costs.
Inverted surface
Stay in the loop
Used for newsletter, hero overlays, and footer surfaces.