Style Guide
BRAND COLORS: PRIMARY
Black
#222222
Beige
#F4EEE5
Dark Beige
#E9E4DB
Green
#7E836D
BRAND COLORS: SECONDARY
East Africa Red
#BD6158
Latin America Blue
#A9C9E1
Indopacific Purple
#A686B1
Streetlevel Blue
#5E99C2
Buena Vista Red
#DA8464
Bronson Green
#bronsonGreen
1950 Grey
#D2C6C3
Seabright Yellow
#EEB426
Vancouver Orange
#F98A3C
Sermon Pink
#D4A1A6
Chocolate
#C47D30
BRAND COLORS: Single Origin pdp backgrounds
East Africa Red Tint
#EADAD8
Latin America Blue Tint
#DEE1E4
Indopacific Purple Tint
#DED8E0
FONTS
TypeWRITER
SANS JNL
SANS JNL
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789!@#$%^&*()_+
0123456789!@#$%^&*()_+
Akkurat Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+
PRIMER BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789!@#$%^&*()_+
0123456789!@#$%^&*()_+
DIN Next LT Pro
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789!@#$%^&*()_+
0123456789!@#$%^&*()_+
TYPOGRAPHY
H1 Typewriter Sans
Size 48 Line Height 110% Character Spacing 6% ALL-CAPS
Mobile H1 Typewriter Sans
Size 30 Line Height 130% Character Spacing -1% ALL-CAPS
H2 Typewriter Sans
Size 30 Line Height 130% Character Spacing 6% ALL-CAPS
Mobile H2 Typewriter Sans
Size 26 Line Height 130% Character Spacing -1% ALL-CAPS
H3 Typewriter Sans
Size 24 Line Height 110% Character Spacing 6% ALL-CAPS
Mobile H3 Typewriter Sans
Size 22 Line Height 100% Character Spacing -1% ALL-CAPS
H4 Typewriter Sans
Size 20 Line Height 120% Character Spacing 6% ALL-CAPS
Mobile H4 Typewriter Sans
Size 16 Line Height 110% Character Spacing -1% ALL-CAPS
H5 Typewriter Sans
Size 18.5 Line Height 130% Character Spacing 6% ALL-CAPS
Mobile H5 DIN Next LT Pro
Size 16 Line Height 140% Character Spacing 0% ALL-CAPS
H6 DIN Next LT Pro
Size 13 Line Height 140% Character Spacing 15% ALL-CAPS
Mobile H6 DIN Next LT Pro
Size 10 Line Height 140% Character Spacing 0% ALL-CAPS
P1 Akkurat Regular
Size 17 Line Height 160% Character Spacing 3%
Mobile P1 Akkurat Regular
Size 14 Line Height 140% Character Spacing 2%
P2 Akkurat Regular
Size 14.5 Line Height 150% Character Spacing 0%
Mobile P2 Akkurat Regular
Size ?? Line Height ?? Character Spacing ??
BOTH DESKTOP & MOBILE
“CTA TEXT” DIN NEXT LT
Size 13 Line Height 140% Character Spacing 22% ALL-CAPS
“PRODUCT PRICE” PRIMER BOLD
Size 18 Line Height 110% Character Spacing 4% ALL-CAPS
“Didactics” DIN Next LT Pro
Size 12 Line Height 140% Character Spacing 12% ALL-CAPS
“MEDIUM PRODUCT PRICE” PRIMER BOLD
Size 25 Line Height 80% Character Spacing 5% ALL-CAPS
“Medium Quote” Akkurat Regular
Size 22 Line Height 130% Character Spacing 3% ALL-CAPS
“LARGE PRODUCT PRICE” PRIMER BOLD
Size 36 Line Height 70% Character Spacing 2% ALL-CAPS
“Big Quote” Akkurat Regular
Size 28 Line Height 130% Character Spacing 3% ALL-CAPS
UI ELEMENTS
Input Field: Contact Form
Height 40px Width TBD
Input Field: Contact Form
Height 40px Width TBD
Input Field: Contact Form
Height 40px Width TBD
Input Field: Contact Form
Height 40px Width TBD
Drop Down: Filter
Drop Down: Filter Disabled
Carousel Arrows
Quantity Selector
1
Video Player
Carousel Arrows with Pagination
1/4
PDP Reviews
16 Reviews
Pencil Banner
In CMS, can choose background from Secondary Color Palette
Other Elements
Checkbox
Icon Button Filter
Icon Button Close
ICONS + ETC
Logos
Primary Logo
Footer Logo
Mobile Nav Icons
Over black background only
Social Icons & Footer
Misc. Icons
1.5 px, Rounded
Favicon