Colors

Primary Colors

Yellow #f1ef17

Charcoal #2f2c2c

Light Greige #f7f4ed

Creige #ece8e1

Dark Greige #dad5ce

Beige- #b4ab9e

Tan #c9c5bf

Forrest Green #96957c

Earth Blue #88969b

Purple #9f99a4

Secondary Colors

Yellow 100 #f1f06c

Yellow 200 #f1f054

Yellow 300 #f1ef3c

Charcoal 100 #464545

Charcoal 200 #4f4e4e

Charcoal 300 #3f3d3d

White #ffffff

White 100 #ebeae9

White 200 #e2e1e0

White 300 #dad9d8

Greige 100 #dfdcd0

Greige-200 #d8d4c7

Greige 300 #d2cebf

Greige 400 #b3ab9f

Greige 500 #5c5651

Neutral 100 #dddad4

Neutral 200 #d5d1cb

Neutral 300 #cccac4

Neutral 400 #c8c5bf

Neutral 500 #7a7774

Grayscale Colors

Greyscale 900 #454242

Greyscale 800 #454242

Greyscale 700 #454242

Greyscale 600 #454242

Greyscale 500 #454242

Greyscale 400 #454242

Greyscale 300 #454242

Greyscale 200 #454242

Greyscale 00 #454242

Utility Colors

Error #dc1e34

Success #288328

Focus #3f3d3d


Fonts

font family
font weight name
font weight

Degular

Black

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789!@#$%^&*()_+

800


Suisse Int'l

Bold

ABCDEFGHIJKLMNOPQRSTUVWXY abcdefghijklmnopqrstuvwxyz 0123456789!@#$%^&*()_+

700


Suisse Int'l

Book

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!@#$%^&*()_+

450



Typography

Headlines
Desktop
Mobile

D1

Size 78px Line Height 85% Character Spacing 1.5px

D1

Size 54px Line Height 19.6px Character Spacing .5px


H1

Size 64px Line Height 19.6px Character Spacing 1.5px

H1

Size 48px Line Height 19.6px Character Spacing .5px


H2

Size 48px Line Height 19.6px Character Spacing 1px

H2

Size 40px Line Height 19.6px Character Spacing .4px


H3

Size 40px Line Height 19.6px Character Spacing 1px

H3

Size 32px Line Height 19.6px Character Spacing .3px


H4 Strong

Size 28px Line Height 19.6px Character Spacing 0px

H4 Strong

Size 26px Line Height 19.6px Character Spacing 0.25px


H4 Lean

Size 28px Line Height 19.6px Character Spacing 0px

H4 Lean

Size 26px Line Height 19.6px Character Spacing 0px


H5 Strong

Size 24px Line Height 19.6px Character Spacing 0.5px

H5 Strong

Size 24px Line Height 19.6px Character Spacing 0.2px


H5 Lean

Size 24px Line Height 19.6px Character Spacing 0px

H5 Lean

Size 24px Line Height 19.6px Character Spacing 0px


H6

Size 20px Line Height 19.6px Character Spacing 0px

H6

Size 20px Line Height 19.6px Character Spacing .4px


Eyebrow

Size 14px Line Height 80% Character Spacing .3px

Eyebrow

Size 13px Line Height 80% Character Spacing .25px



Body Copy
Desktop & MOBILE

Body Large

Size 20px Line Height 28px Character Spacing 0px


Body Large Bold

Size 20px Line Height 28px Character Spacing 0px


Body Base

Size 20px Line Height 22px Character Spacing 0px


Body Base Bold

Size 14px Line Height 22px Character Spacing 0px


Body Small

Size 14px Line Height 20px Character Spacing 0px


Body Small Bold

Size 14px Line Height 20px Character Spacing 0px


Body X-Small

Size 12px Line Height 17px Character Spacing 0px


Body X-Small Bold

Size 12px Line Height 17px Character Spacing 0px


Buttons, Links, & Badges

Buttons

BUTTON LIGHT

Primary Filled

Default

Hover

Focus

Pressed

Disabled

Primary Outlined

Default

Hover

Focus

Pressed

Disabled

Primary flat

Default

Hover

Focus

Pressed

Disabled

BUTTON DARK

Secondary Filled

Default

Hover

Focus

Pressed

Disabled

Secondary Outline

Default

Hover

Focus

Pressed

Disabled

Secondary flat

Default

Hover

Focus

Pressed

Disabled

LINKS

Link LIGHT

View All

Default

View All

Hover

View All

Focus

View All

Pressed

View All

Disabled

Link dark

View All

Default

View All

Hover

View All

Focus

View All

Pressed

View All

Disabled

Badges

Primary

New

Out of Stock

Out of Stock

Small Badges

Primary

New

Out of Stock

Out of Stock

Form Elements

Input field 18px Padding Between Forms

Supporting text

Disabled

Error



Checkbox & Radial Buttons

checkbox select

radial select


Arrows

Default

Hover

Focus

Active

Disabled

Default

Hover

Focus

Active

Disabled

Default

Hover

Focus

Active

Disabled

Default

Hover

Focus

Active

Disabled

Default

Hover

Focus

Active

Disabled

Utility Icons


Pagination

Page Numbers
Quantity Selector

1

Mobile carousel dots