FiveNine Optics Style Guide
Typography
Heading 1 (H1)
The quick brown fox jumps over the lazy dog
Font Family:
proxima-nova
Font Size:
clamp(1.8rem, 5vw, 3.15rem)
Font Weight:
300 (Light)
Line Height:
1.3
Heading 2 (H2)
The quick brown fox jumps over the lazy dog
Font Size:
1.3125rem (21px)
Font Weight:
500 (Medium)
Section Paragraph - Large
The quick brown fox jumps over the lazy dog.
Font Size:
1.8375rem (29.4px)
Font Weight:
300 (Light)
Color Palette
Brand Colors
Cyan / Teal (Home)
#51F4EF
Hero features, navigation active
Blue (Products)
#4B80EA
Products page, team section
Purple (Markets)
#A105E2
Markets page headings
Orange (Resources)
#F88015
Resources page, Our Story
Yellow (Contact)
#eff923
Contact page accents
Neutral Colors
Black
#000000
Primary text, backgrounds
Text Dark
#333333
Body text
White
#ffffff
Backgrounds, text on dark
Spacing Scale
--spacing-xs
0.5rem (8px)
--spacing-sm
1rem (16px)
--spacing-md
2rem (32px)
--spacing-lg
3rem (48px)
--spacing-xl
4rem (64px)
Font Weights
Light (300) - The quick brown fox
Regular (400) - The quick brown fox
Medium (500) - The quick brown fox
Semibold (600) - The quick brown fox
Bold (700) - The quick brown fox
Layout
Container
Max Width:
1200px
Padding:
0 1.5rem (24px)