Style Guide

Colors

primary #001F3D
sky-50 #F5FAFF
sky-100 #C2E1FF
sky-200 #5CAFFF
sky-300 #007EF5
sky-400 #0063C2
dark-blue-100 #00498F
dark-blue-200 #003C75
dark-blue-300 #002C57
brown-50 #EFE6DC
brown-400 #C19D71
brown-700 #8F6B3F
beige-25 #F9F8F5
beige-50 #EEE9E2
beige-400 #C7B6A2
beige-700 #A18563
red-50 #FFCCCC
red-400 #FF9999
red-700 #FF3131
red-900 #E21212
orange-50 #FCE8D9
orange-400 #F5AD7A
orange-700 #EE7219

Icons

location
checkmark
circle-checkmark
headphones
search
account
bag
bag-quick
chevron-down
chevron-left
chevron-right
arrow-up
arrow-left
arrow-right
instagram
facebook
pinterest
twitter
youtube
tiktok
snapchat
tumblr
vimeo
ideal
paypal-big
mastercard
visa
bancontact
american-express
fashion-cheque
logo
burger
cross
filters
qr
play
pause
zoom
reset
plus
minus
trash
error
success
finger
heart
log-out
discount
share
clipboard
info
tick

Buttons

Primary

button
.button
button:disabled
.button:disabled
button.transparent
.button.transparent
button.white.transparent
.button.white.transparent
button.orange.transparent
.button.orange.transparent

Forms

Typography

font-size: 40px
line-height: 48px
letter-spacing: 0.8px
h1, .h1

Heading H1

font-size: 36px
line-height: 44px
letter-spacing: 0.72px
h2, .h2

Heading H2

font-size: 32px
line-height: 40px
letter-spacing: 0.64px
h3, .h3

Heading H3

font-size: 28px
line-height: 36px
letter-spacing: 0.56px
h4, .h4

Heading H4

font-size: 24px
line-height: 32px
letter-spacing: 0.48px
h5, .h5
Heading H5
font-size: 20px
line-height: 28px
letter-spacing: 0.4px
h6, .h6
Heading H6
font-size: 18px
line-height: 28px
letter-spacing: -0.36px
.paragraph-lg
Paragraph Large
font-size: 16px
line-height: 24px
letter-spacing: -0.32px
.paragraph
Paragraph Base
* Body tag uses these font styles.
font-size: 14px
line-height: 20px
letter-spacing: -0.28px
.paragraph-sm
Paragraph Small
font-size: 12px
line-height: 20px
letter-spacing: -0.24px
.paragraph-xs
Paragraph XSmall
font-size: 10px
line-height: 14px
letter-spacing: -0.2px
.paragraph-2xs
Paragraph 2XSmall

Sections

Please, use offset.liquid for every section to add indents between sections on mobile and desktop devices.
* You can find an example of using the section Style Guide