Styling Guide
Colors, typography, and design tokens from the Classic Homes brand
Brand Colors
Primary brand reds used for logos and key accents
Red 1 (Logo)
#e02726
Red 2 (Primary)
#a91c22
Core Colors
Primary accent palette for UI elements
Core 1 - Teal
#3ba4a7
Core 2 - Navy
#002e3f
Core 3 - Plum
#5e2c41
Core 4 - Sage
#969a82
Collection Colors
Extended palette for variety and visual interest
Stone
#676d69
Forest
#6aa275
Lavender
#695a75
Sky
#5f91b8
Deep Teal
#306966
Charcoal
#292424
Status Colors
Semantic colors for feedback and notifications
Success
#10b981
Warning
#f59e0b
Error
#ef4444
Info
#3b82f6
Gray Scale
Neutral colors for text, backgrounds, and borders
50
100
200
300
400
500
600
700
800
900
Typography
Figtree (sans-serif) and Spectral (serif) font families
Font Families
Sans (Figtree)
The quick brown fox jumps over the lazy dog
Serif (Spectral)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Mono
const theme = 'classic';
Font Weights
Font Sizes
Spacing
Consistent spacing scale based on 4px increments
1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
Border Radius
Rounded corners following brand aesthetic
none
0px
sm
2px
default
8px
lg
12px
xl
16px
full
9999px