Visual language and component reference. A warm aesthetic built on serif headings, cream-and-gold tones, and refined motion.
Warm, sophisticated palette
Creams
Light backgrounds and surfaces
cream
#fdfbf7
cream-dark
#faf7f0
cream-darker
#f0ebe0
Charcoals
Text and primary dark tones
charcoal
#1a1814
charcoal-body
#4a453d
charcoal-muted
#8a8070
charcoal-faint
#b0a898
Golds
Accent highlights
gold-600
#8b7340
gold-500
#b8963e
gold-400
#c5a55a
gold-300
#d4bc7b
gold-100
#f5f0e0
Navy
Footer and dark accent surfaces
navy-900
#0f1d32
navy-700
#1e3a5f
navy-500
#3b6b9c
navy-100
#d6e2f0
navy-50
#eef2f7
Borders
Dividers and boundaries
border-warm
#e8e2d8
border-subtle
#f0ebe0
border-dark
#2a3a52
Serif headings, clean body text
Heading font — Cormorant Garamond
Hero heading
Your Project Name
Page title
Page Title
Section heading
Section Heading
Card heading
Card Heading
Body font — Inter
Body
Body text for main content.
Small
Smaller body text for descriptions.
Label
Label Text
Consistent rhythm and proportions
Container
Max-width: max-w-[80rem] (1280px) with px-6 padding.
Section spacing
py-24 lg:py-3296px / 128pxpt-16 pb-2464px / 96pxpy-1664pxContent presentation patterns
Category
Category
Category
Inputs, selects, and controls
Refined, purposeful transitions
Timing functions
cubic-bezier(0.25, 1, 0.5, 1)Default for most interactions.cubic-bezier(0.16, 1, 0.3, 1)Scroll-triggered reveals.cubic-bezier(0.76, 0, 0.24, 1)Symmetric, bidirectional.Scroll reveal demo