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
Primary-900
primary-900
#191919
Primary-800
primary-800
#FFF5ED
Primary-700
primary-700
#FFFFFF
Secondary
Secondary-900
secondary-900
#191919
Secondary-800
secondary-800
#CCCCCC
Secondary-700
secondary-700
#FFFFFF
Tertiary
Tertiary-900
tertiary-900
#FFF5ED
Greyscale
Greyscale-900
grey-900
#3C3939
Greyscale-800
grey-800
#727272
Greyscale-700
grey-700
#999999
Greyscale-600
grey-600
#B3B3B3
Greyscale-500
grey-500
#CCCCCC
Greyscale-400
grey-400
#D9D9D9
Greyscale-300
grey-300
#E6E6E6
Greyscale-200
grey-200
#F3F3F3
Greyscale-100
grey-100
#F9F9F9
Utils
Utility-Black
util-black
#000000
Utility-White
util-white
#FFFFFF
Utility-Transparent
util-transparent
transparent
Utility-Red
util-white
#B51200
Utility-Yellow
util-yellow
#F9E531
Utility-Grey
util-yellow
#717960
Utility-Blue
util-yellow
#1A22DF
Typography
Desktop
Displays / Headlines
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 (Base)
Body (Small)
Body (X-Small)
Button Text
Main Navigation
Link List Header
Link List Item
Mobile
Displays / Headlines
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 (Base)
Body (Small)
Body (X-Small)
Button Text
Main Navigation
Mobile Link List Item
Mobile Link List Item
Standard Buttons
State Descriptors
Large - Primary
Medium - Primary
Small - Primary
State Descriptors
Large - Primary Ghost
Medium - Primary Ghost
Small - Primary Ghost
State Descriptors
Large - Secondary
Medium - Secondary
Small - Secondary
State Descriptors
Large - Tertiary
Medium - Tertiary
Small - Tertiary
Split Buttons
Class Descriptors
Large
Medium
Small
Primary
Secondary
Tertiary
Icon Buttons
Link - Primary
Class Descriptors
Large
Small
Arrow Link Primary
Class Descriptors
Large
Medium
Simple Form Inputs
State Descriptors
Base - 48px Height
Default
Hover
Active
Disabled
Focus
Selection controls
Checkbox
Default
Hover
Selected
Disabled
Radio
Default
Hover
Selected
Disabled
Toggle
Default
Hover
Selected
Disabled
Dropdowns
QTY Dropdown
Base Badges
Base
Badge text
Primary
Badge text
Secondary
Badge text
Tertiary
Badge text
Danger
Notify Badges
Number - Large
2
Primary
2
Secondary
2
Tertiary
Icon - Large
Default
secondary
tertiary
Number - Medium
2
Default
2
secondary
2
tertiary
Icon - Medium
Default
secondary
tertiary
Dividers
Dark
Tertiary - 900
Medium - Dark
Tertiary - 800
Medium - Light
Tertiary - 700
Light
Tertiary - 600
Borders
Default
Greyscale - 300
Active/Hovered
Greyscale - 900
Disabled
Greyscale - 700
Danger
Utility - Red
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
16
24
32
40
Right Arrow
16
24
32
40
Left Arrow
16
24
32
40
Plus
8
16
24
32
40
Minus
16
24
32
40
X
8
16
24
32
40
Check
16
24
32
40
Check Circle
16
24
32
40
Chevron Down
16
24
32
40
Chevron Right
16
24
32
40
Chevron Left
16
24
32
40
Chevron Up
16
24
32
40
Search
16
24
32
40
Account Figure
16
24
32
40
Heart
16
24
32
40
Heart Fill
16
24
32
40
Shopping Bag
16
24
32
40
Circle Question
16
24
32
40
Community
16
24
32
40
Tv Screen
16
24
32
40
Box Puller
16
24
32
40
Review Star - Border
16
24
32
40
Review Star Half
16
24
32
40
Review Star Full
16
24
32
40
Backlash
16
24
32
40
Placeholder
16
24
32
40
Hamburger
16
24
32
40
Filter
16
24
32
40
Trash
16
24
32
40
Thumbs Down
16
24
32
40
thumbs up
16
24
32
40
Comment
16
24
32
40
Continuous Arrows
16
24
32
40
Tag
16
24
32
40
Curly Opening Quote
16
24
32
40
Curly Closing Quote
16
24
32
40
Lock
16
24
32
40
Social
16
24
32
40
16
24
32
40
16
24
32
40
Spotify
16
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.
Content Tiles
I'm not thinking about anything when I'm climbing.
Content Tile Overlay
I'm not thinking about anything when I'm climbing.
I'm not thinking about anything when I'm climbing.
Content Tile Text After
I'm not thinking about anything when I'm climbing.
Two CTA's
Content Tile Text Before
Two CTA's
Options for 1, 2 or no CTA's
Content Tile w/ Video
Options for 1, 2 or no CTA's
