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
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789!@#$%^&*()_+
Akkurat Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+
PRIMER BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789!@#$%^&*()_+
DIN Next LT Pro
ABCDEFGHIJKLMNOPQRSTUVWXYZ
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

Primary Desktop & Mobile Button

Height 40px, Width TBD

Shop Now

Primary Desktop Button: Hover

Fill: #FFF, Text: #222

Shop Now

PDP Button, Desktop & Mobile

Height 40px Width TBD
Bottom Corners 2.5px Radius

Add To Cart

PDP Button: Hover

Height 40px Width TBD
Bottom Corners 2.5px Radius

Add To Cart

Desktop Text Link

Underline 1.5px, #222, Rounded

Shop Now

Desktop Text Link: Small

Underline 1.5px, #222, Rounded

Shop Now

Mobile Text Link

Underline 1.5px, #222, Rounded

Shop Now

Mobile Text Link: Small

Underline 1.5px, #222, Rounded

Shop Now

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

Lorem ipsum — Learn more

order ahead

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