Style Guide

Sample Text 300 Regular
Sample Text 300 Italic
Sample Text 400 Regular
Sample Text 400 Italic
Sample Text 500 Regular
Sample Text 500 Italic
Sample Text 600 Regular
Sample Text 600 Italic
Sample Text 700 Regular
Sample Text 700 Italic

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