Style Guide
Navy
Orange
Green
Gray 100
Gray 200
Gray 300
Gray 400
Gray 500
Gray 600
Gray 700
Gray 800
Gray 900
Assets Icons
Usage:
{{- 'icon-account.svg' | inline_asset_content -}}
icon-account
icon-add-to-cart
icon-arrow
icon-available
icon-caret
icon-cart
icon-checkmark
icon-chevron-left
icon-chevron-right
icon-close
icon-delete
icon-discount
icon-error
icon-external
icon-filter
icon-filters-close
icon-grid-default
icon-grid-dense
icon-inventory
icon-menu
icon-minus
icon-one-col-mobile
icon-orders
icon-pause
icon-play
icon-plus
icon-reset
icon-search
icon-shopify
icon-unavailable
Shopify Icons
Usage:
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
class="icon"
viewBox="0 0 20 20"
>
{% render 'icon', icon: 'account' %}
</svg>
apple
banana
bottle
bluesky
box
caret
double-sided-caret
carrot
chat_bubble
check_box
clipboard
dairy
dairy_free
discord
dryer
error
eye
fire
gluten_free
heart
iron
leaf
leather
lightning_bolt
linkedin
lipstick
lock
map_pin
nut_free
pants
paw_print
pepper
perfume
plane
plant
price_tag
question_mark
recycle
return
ruler
serving_dish
shirt
shoe
silhouette
snowflake
star
stopwatch
truck
washing
arrow
tiktok
youtube
instagram
x
twitter
facebook
pinterest
tumblr
vimeo
snapchat
spotify
next
previous
threads
whatsapp
3d-model
mastodon
reddit
telegram
twitch
Input Fields
Default
Checkboxes & Radio Buttons
Heading H1
font-size: 28px
line-height: 28px
font-size: 20px
line-height: 28px
Heading H2
font-size: 24px
line-height: 32px
font-size: 24px
line-height: 32px
Heading H3
font-size: 20px
line-height: 24px
font-size: 20px
line-height: 24px
Heading H4
font-size: 18px
line-height: 22px
font-size: 18px
line-height: 22px
Heading H5
font-size: 18px
line-height: 22px
font-size: 18px
line-height: 22px
Heading H6
font-size: 16px
line-height: 16px
font-size: 16px
line-height: 16px
Body/Large/Regular
Body/Large/Medium
Body/Large/SemiBold
font-size: 14px
line-height: 24px
Small text example
font-size: 12px
line-height: 20px