Colors
Primary
#1C1F2E
Gold
#C9A96E
Terracotta
#E8816A
Linen
#F2EBE0
Light bg
#FAF8F5
Muted
#8C8880
To rebrand this template: open the Styles panel → update each color style. Never edit hex values on individual components.
Typography
All types use Outfit and Host Grotesk. Bind to Framer text styles — never hardcode sizes.
Display / H1
Outfit Semi-Bold · 42px · line-height 1.2 Em
Heading H2
Outfit 500 · 32px · line-height 1.2 Em
Heading H3
Outfit Semi-bold· 28px · line-height 1.2 Em
Subheading
Host Grotesk Medium· 18px · line-height 1.2 Em
Body
Host Grotesk Regular 16px · line-height 1.6 Em
Eyebrow label
Outfit Medium 16px · line-height 1.2 Em
To rebrand this template: open the Styles panel → update each color style. Never edit hex values on individual components.
Buttons
All types use Outfit and Host Grotesk. Bind to Framer text styles — never hardcode sizes.
Hover: primary → Terraccota bg · secondary → charcoal fill · ghost → Gold bg.
Navigation
Desktop and mobile nav components. Visibility controlled per breakpoint.
Desktop (top) · Mobile (bottom) — toggle visibility per breakpoint in Framer
Footer
Desktop and mobile nav components. Visibility controlled per breakpoint.
Desktop (top) · Mobile (bottom) — toggle visibility per breakpoint in Framer