This is a Title
I'm not thinking about anything when I'm climbing.
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 Notification Modal Tabs Content Tiles Product TilesPrimary
Indigo Highway-900
#0D737A
Indigo Highway-800
#22828B
Indigo Highway-700
#48AFB9
Indigo Highwaymary-600
#6EC6CE
Indigo Highway-500
#94D6DC
Indigo Highway-400
#AAE0E5
Indigo Highway-300
#CCF0F4
Indigo Highway-200
#DCF6F9
Indigo Highway-100
#F2FDFE
Secondary
Olive Branch-900
#635C3A
Olive Branch-800
#877628
Olive Branch-700
#9E8B35
Olive Branch-600
#B4A35E
Olive Branch-500
#C1B16D
Olive Branch-400
#DFD093
Olive Branch-300
#EDE4C2
Olive Branch-200
#F8F3DF
Olive Branch-100
#FCFBF8
Tertiary
Golden Rod-900
#4A3700
Golden Rod-800
#7C6110
Golden Rod-700
#FFBF00
Golden Rod-600
#FFCF40
Golden Rod-500
#FFDC73
Spanish Orange-400
#C65209
Spanish Orange-300
#ED7022
Spanish Orange-200
#F4A675
Spanish Orange-100
#FDEDE3
Greyscale
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
Utils
Red
#DC2D2D
Green
#239242
Yellow
#DECA18
White
#FFFFFF
Typography
Desktop
Displays / Headlines
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
This Is Text H7
Body Copy
Body (Large)
Body (Large)
Body (Base)
Body (Base)
Body (Small)
Body (Small)
Body (X-Small)
Body (X-Small)
Button Text
Button Text
Button Text
Main Navigation
Link List Header
Link List Item
Mobile
Displays / Headlines
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
This Is Text H7
Body Copy
Body (Large)
Body (Large)
Body (Base)
Body (Base)
Body (Small)
Body (Small)
Body (X-Small)
Body (X-Small)
Button Text
Button Text
Button Text
Main Navigation
Mobile Link List Item
Mobile Link List Item
Standard Buttons
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
Split Buttons
Class Descriptors
Large
Medium
Small
X-Small
Primary
Secondary
Tertiary
Icon Buttons
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
Simple Form Inputs
State Descriptors
Small - 44px Height
Large - 48px Height
Default
Hover
Active
Disabled
Focus
Selection controls
Checkbox
Default
Hover
Selected
Focused
Disabled
Radio
Default
Hover
Selected
Disabled
Focus
Toggle
Default
Hover
Selected
Focused
Disabled
QTY Selector
QTY Dropdown
Base Badges
Base
Sale
Sale
New
New
Out Of Stock
Out Of Stock
Best Seller
Best Seller
Bundle
Bundle
Leading Icon
Sale
New
Out Of Stock
Best Seller
Bundle
Trailing Icon
Sale
New
Out Of Stock
Best Seller
Bundle
Notify Badges
Number - Large
2
Secondary - 900
2
Primary - 800
2
Greyscale - 900
2
Tertiary - 400
2
White & Greyscale - 900
Icon - Large
Default
Warning
Danger
Success
Hovered
Number - Medium
2
Default
2
Warning
2
Danger
2
Success
2
Hovered
Icon - Medium
Default
Warning
Danger
Success
Hovered
Utility
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
Tag
18
24
32
40
Curly Opening Quote
18
24
32
40
Curly Closing Quote
18
24
32
40
Lock
18
24
32
40
Social
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
Notification
Account Notification
Modal
Tabs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in massa a mi vestibulum mattis. Donec tincidunt urna sed mauris pharetra fringilla. Nunc id dui imperdiet, viverra turpis vel, feugiat elit. Mauris commodo commodo turpis, vel dapibus velit feugiat vitae.
Nullam in sapien euismod, sagittis nisl id, tincidunt sapien. Duis rhoncus est a sapien bibendum tempus. Etiam fermentum euismod nibh, id elementum nulla pharetra vel. Praesent auctor vel libero ac tristique. Sed in nisl lorem. Proin commodo erat ac nisi rutrum, eget lacinia lectus vestibulum.
Nunc eget lacus eu libero vehicula sollicitudin quis nec elit. Nunc at augue mollis, euismod quam vitae, congue turpis. Proin tempor eros eu turpis aliquet, vitae vehicula velit rhoncus. Aliquam vel enim quis ante feugiat hendrerit. Aenean nec ligula consectetur, rutrum ante sed, hendrerit augue. Donec ac metus nec sem ullamcorper auctor ac ut orci. Vestibulum sit amet erat eu erat venenatis rutrum. Aliquam sed tempus mi, ut finibus ipsum. Morbi vel lobortis lacus. Proin volutpat justo ac mauris laoreet, sit amet molestie mi vulputate. Etiam eu mollis velit.