UI Kit Navigation
Colors Typography Standard Buttons Split Buttons Icon Buttons Link Buttons Arrow Buttons Form Inputs Selection Controls Breadcrumbs Badges Dividers Icons Icon Tile Modal Tabs Content Tiles Product TilesPrimary-900
#E88D61
Primary-800
#ECA97F
Primary-700
#516C81
Primary-600
#C4C4C4
Primary-500
#C4C4C4
Primary-400
#C4C4C4
Primary-300
#C4C4C4
Primary-200
#C4C4C4
Primary-100
#C4C4C4
Secondary-900
#8C7C6C
Secondary-800
#96A394
Secondary-700
#E0B26E
Secondary-600
#364575
Secondary-500
#5E6A90
Secondary-400
#D7DAE3
Secondary-300
#C4C4C4
Secondary-200
#C4C4C4
Secondary-100
#C4C4C4
Tertiary-900
#444142
Tertiary-800
#E5D3CA
Tertiary-700
#E4E5E4
Tertiary-600
#C4C4C4
Tertiary-500
#C4C4C4
Tertiary-400
#C4C4C4
Tertiary-300
#C4C4C4
Tertiary-200
#C4C4C4
Tertiary-100
#C4C4C4
Greyscale-900
#4D4D4D
Greyscale-800
#808080
Greyscale-700
#999999
Greyscale-600
#B3B3B3
Greyscale-500
#CCCCCC
Greyscale-400
#D9D9D9
Greyscale-300
#E6E6E6
Greyscale-200
#F3F3F3
Greyscale-100
#F9F9F9
Utility-Black
#000000
Utility-White
#FFFFFF
Utility-Red
#DA582F
Utility-Yellow
#F9E531
Utility-Green
#88A747
Utility-Purple
#AD5EEB
Typography
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) - Bold
Body (Base)
Body (Base) - Bold
Body (Small)
Body (Small) - Bold
Body (X-Small)
Body (X-Small) - Bold
Button Text
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
Standard Buttons
State Descriptors
Large - Primary
Medium - Primary
Small - Primary
State Descriptors
Large - Secondary
Medium - Secondary
Small - Secondary
State Descriptors
Large - Tertiary
Medium - Tertiary
Small - Tertiary
Split Buttons
Class Descriptors
Large
Medium
Small
Icon Buttons
Link - Primary
Class Descriptors
Large
Medium
Small
Link - Secondary
Class Descriptors
Large
Medium
Small
Arrow Link Primary
Class Descriptors
Large
Medium
Small
Arrow Link Secondary
Class Descriptors
Large
Medium
Small
State Descriptors
Base - 48px Height
Checkbox
Default
Hover
Selected
Focused
Disabled
Radio
Default
Hover
Selected
Disabled
Focus
Toggle
Default
Hover
Selected
Focused
Disabled
QTY Selector
Dropdowns
QTY Dropdown
Primary
Secondary
Tertiary
Success
Warning
Danger
Primary
Secondary
Tertiary
Success
Warning
Danger
Primary
Secondary
Tertiary
Success
Warning
Danger
Primary - 900
Secondary - 800
Greyscale - 900
Tertiary - 300
Tertiary - 800
Default
Warning
Danger
Success
Hovered
Default
Warning
Danger
Success
Hovered
Default
Warning
Danger
Success
Hovered
Dark
Tertiary - 900
Medium - Dark
Tertiary - 800
Medium - Light
Tertiary - 700
Light
Tertiary - 600
Default
Greyscale - 300
Active/Hovered
Greyscale - 900
Disabled
Greyscale - 700
Danger
Utility - Red
Icons compile using Gulp. You can find all icon files in
src/THEME_FOLDER/icons/*.svg. Icons are injected into
src/THEME_FOLDER/layout-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
Tag
18
24
32
40
Curly Opening Quote
18
24
32
40
Curly Closing Quote
18
24
32
40
Lock
18
24
32
40
18
24
32
40
18
24
32
40
18
24
32
40
Spotify
18
24
32
40
Scrollable
- One
- Two
- Three
- Four
- Five
- Six
Icon Tile
This is a Title
I'm not thinking about anything when I'm climbing.
