Style Guide
Path:
snippets/colors.liquid
primary
#211F20
red-500
#FF4141
green-100
#83DBCB
purple-100
#6743FF
pink-100
#FFD5E0
beige-10
#F2F0E9
beige-100
#FFBF00
gray-75
#FAFAFA
gray-100
#F7F7F7
gray-200
#EFEFEF
gray-300
#E4E4E4
gray-400
#CECECE
gray-500
#ACACAC
gray-600
#7F7F7F
gray-700
#565656
gray-800
#383838
gray-900
#211F20
Path:
snippets/icon.liquid
Usage:
{% render 'icon', icon: 'not-bleach', class: '!h-10 !w-10' %}
not-bleach
not-tumble-dry
not-dry-clean
iron-max
star-full
star
search
heart
heart-full
account
newsletter
bag
plus
plus-bold
minus
minus-bold
chevron-left
chevron-right
chevron-down
chevron-up
chevron-long-left
chevron-long-right
cross
cross-small
cross-bold
plus-circle
cross-circle
info-circle
info-circle-v2
question-circle
warning-circle
error-circle
success-circle
calendar
store-delivery
home-delivery
secure-payment
country
t-shirt
returns-left
returns-right
percent
note
card
upload-arrow
chat-full
chat
tiktok-circle
youtube-circle
facebook-circle
instagram
grid-4
grid-4-full
grid-2
grid-single
grid-single-full
filter
arrow-left
arrow-right
checkmark
checkmark-thin
hamburger
bell
share
ruler
mail
shield
thumb-up
thumb-down
eye
pencil
lock
log-out
quote
trash
reset
phone
Use this class to reset button styles:
.button-reset-styles
button, .button
button, .button.small
.button.secondary
.button.secondary.small
.button.tertiary
.button.tertiary.small
.button:disabled
.button.small:disabled
Use this class to reset input styles:
.input-reset-styles
Default
Default with icon
Disabled
Error
Select
Textarea
Heading H1
font-size: 40px
line-height: 44px
Heading H2
font-size: 36px
line-height: 40px
Heading H3
font-size: 32px
line-height: 36px
Heading H4
font-size: 24px
line-height: 28px
Heading H5
font-size: 20px
line-height: 24px