School Red-900
#C80016
School Red-800
#D4091D
School Red-700
#E61C23
School Red-600
#F42A22
School Red-500
#F14241
School Red-400
#E86868
School Red-300
#F29392
School Red-200
#FFC9CE
School Red-100
#FFE9EC
Vivid Sky Blue-900
#007BC2
Vivid Sky Blue-800
#0093DF
Vivid Sky Blue-700
#00A6F2
Vivid Sky Blue-600
#00B4FF
Vivid Sky Blue-500
#00C0FF
Vivid Sky Blue-400
#33CCFF
Vivid Sky Blue-300
#78DBFF
Vivid Sky Blue-200
#B0E9FE
Vivid Sky Blue-100
#F5FDFF
Android Green--900
#596521
Android Green--800
#94993A
Android Green--700
#A5B041
Android Green--600
#B5C649
Android Green--500
#C2D850
Pink Sherbet-400
#E90C43
Pink Sherbet-300
#F75F84
Pink Sherbet-200
#FDBACA
Pink Sherbet-100
#FEE4EA
Greyscale-900
#000000
Greyscale-800
#333232
Greyscale-700
#4D4C4B
Greyscale-600
#666564
Greyscale-500
#807E7D
Greyscale-400
#999796
Greyscale-300
#B3B0AF
Greyscale-200
#CCCAC8
Greyscale-100
#E6E3E1
Utility-Red-900
#D43333
Utility-Green-900
#239242
Utility-Yellow-900
#E8D638
Utility-White-900
#FFFFFF
This Is Display
This Is Text H1
This Is Text H2
This Is Text H3
This Is Text H4
This Is Text H5
This Is Text H6
Body (Large)
Body (Large)
Body (Base)
Body (Base)
Body (Small)
Body (Small)
Body (X-Small)
Body (X-Small)
Button Text
Button Text
This Is Display
This Is Text H1
This Is Text H2
This Is Text H3
This Is Text H4
This Is Text H5
This Is Text H6
Body (Large)
Body (Large)
Body (Base)
Body (Base)
Body (Small)
Body (Small)
Body (X-Small)
Body (X-Small)
Button Text
Button Text
State Descriptors
Large - Primary
Medium - Primary
Small - Primary
X-Small - Primary
State Descriptors
Large - Secondary
Medium - Secondary
Small - Secondary
X-Small - Secondary
State Descriptors
Large - Tertiary
Medium - Tertiary
Small - Tertiary
X-Small - Tertiary
Class Descriptors
Large
Medium
Small
X-Small
Link - Primary
Class Descriptors
Large
Medium
Small
X-Small
Link - Secondary
Class Descriptors
Large
Medium
Small
X-Small
Arrow Link Primary
Class Descriptors
Large
Medium
Small
X-Small
Arrow Link Secondary
Class Descriptors
Large
Medium
Small
X-Small
State Descriptors
Small – 44px Height
Large – 48px Height
Checkbox
Default
Hover
Selected
Focused
Disabled
Radio
Default
Hover
Selected
Disabled
Focus
Toggle
Default
Hover
Selected
Focused
Disabled
QTY Selector
QTY Dropdown
Sale
Sale
Out of Stock
Best Seller
Bundle
Sale
Sale
Out of Stock
Best Seller
Bundle
Sale
Sale
Out of Stock
Best Seller
Bundle
Bedazzled Blue-900
Blue Jeans - 800
Greyscale - 900
Spanish Orange - 300
Dark Corn Flower - 800
Default
Warning
Danger
Success
Hovered
Default
Warning
Danger
Success
Hovered
Default
Warning
Danger
Success
Hovered
Dark
Dark Corn Flower Blue - 900
Medium - Dark
Dark Corn Flower Blue - 800
Medium - Light
Tertiary Grey - 700
Light
Tertiary Grey - 600
Default
Greyscale - 300
Active/Hovered
Greyscale - 900
Disabled
Greyscale - 700
Danger
Utility-Red-900
Icons compile using Gulp. You can find all icon files in
src/THEME_FOLDER/icons/*.svg
. Icons are injected into
src/THEME_FOLDER/icon-store.liquid
which is rendered in
src/THEME_FOLDER/shopify/layout/theme.liquid
.
Circle Check
18
24
32
40
Right Arrow
18
24
32
40
Left Arrow
18
24
32
40
Plus
18
24
32
40
Minus
18
24
32
40
X
18
24
32
40
Check
18
24
32
40
Chevron Down
18
24
32
40
Chevron Right
18
24
32
40
Chevron Left
18
24
32
40
Chevron Up
18
24
32
40
Search
18
24
32
40
Account Figure
18
24
32
40
Heart
18
24
32
40
Shopping Bag
18
24
32
40
Circle Question
18
24
32
40
Community
18
24
32
40
Tv Screen
18
24
32
40
Box Puller
18
24
32
40
Review Star - Border
18
24
32
40
Review Star Half
18
24
32
40
Review Star Full
18
24
32
40
Backlash
18
24
32
40
Placeholder
18
24
32
40
Hamburger
18
24
32
40
Filter
18
24
32
40
Trash
18
24
32
40
Thumbs Down
18
24
32
40
thumbs up
18
24
32
40
Comment
18
24
32
40
Continuous Arrows
18
24
32
40
18
24
32
40
18
24
32
40
18
24
32
40
Spotify
18
24
32
40