Styleguide

Brand Colors

DESERT
#DCD8D1
BLACK 7
#3D3936
ACCENT
#C6B784
DESERT-100
#FAF9F8

Desert Tints

DESERT-900
#E0DCD6
DESERT-800
#E3E0DA
DESERT-500
#ECEAE6
DESERT-300
#F2F1EE
DESERT-200
#F6F4F3

Greyscale Tints (Black 7)

GREYSCALE-900
#504D4A
GREYSCALE-800
#64615E
GREYSCALE-700
#777472
GREYSCALE-600
#8B8886
GREYSCALE-500
#9E9C9B
GREYSCALE-400
#B1B0AF
GREYSCALE-300
#C5C4C3
GREYSCALE-200
#D8D7D7
GREYSCALE-100
#ECEBEB

Accent Tint

ACCENT-100
#F9F8F3

Utility

WHITE
#FFFFFF
TRUE BLACK
#000000
ERROR
#D02E2E
SUCCESS
#56AD6A

Fonts

Slussen Compressed
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+
Chakra Petch
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+
Gotham Book
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+
Gotham Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+

Typography

H1 Slussen Compressed

H2 Slussen Compressed

H3 Slussen Compressed

H4 Chakra Petch

H5 Chakra Petch
H6 Chakra Petch

Subheading

Body - Large

Body - Base

Body - Small

Body - Tiny

Link - Base
Link - Small
Link - Tiny
Link - Disabled

Buttons

Primary Primary Primary
Primary - Disabled Primary - Disabled Primary - Disabled
Secondary Secondary Secondary
Secondary - Disabled Secondary - Disabled Secondary - Disabled
Tertiary Tertiary Tertiary
Tertiary - Disabled Tertiary - Disabled Tertiary - Disabled
Variant Variant Variant
Variant - Active Variant - Active Variant - Active
Variant - Disabled Variant - Disabled Variant - Disabled

Icons

Liquid error (templates/page.styleguide line 316): Could not find asset snippets/icon-arrow-solid-left.liquid

Forms

Input Fields

This is some help text.

This is some help text.

This is some help text.

Not a valid email

=

Dropdowns

Checkbox

Radio

Quantity Selector

Note: Go to a PDP to view the quantity number adjust on click of +/-

Product Badges

Top Smeller
Sale
New!
Out of Stock

Accordion

Note: Go to a PDP like /products/big-ass-brick-of-soap-trophy-game-1

Pagination

Note: Go to /collections/all to see the pagination.

Reviews

Note: This review stars' style is for reference only. We would be customizing/styling Yotpo to match these styles.