Primary

Primary-900

primary-900

#131E0F

Primary-800

primary-800

#F9F9F2

Primary-700

primary-700

#F1EBE4

Primary-600

N/A

rgba(0,0,0,0)

Primary-500

N/A

rgba(0,0,0,0)

Primary-400

N/A

rgba(0,0,0,0)

Primary-300

N/A

rgba(0,0,0,0)

Primary-200

N/A

rgba(0,0,0,0)

Primary-100

N/A

rgba(0,0,0,0)

Secondary

Secondary-900

secondary-900

#DBD0BA

Secondary-800

secondary-800

#DEDECF

Secondary-700

secondary-700

#D8E4E0

Secondary-600

N/A

rgba(0,0,0,0)

Secondary-500

N/A

rgba(0,0,0,0)

Secondary-400

N/A

rgba(0,0,0,0)

Secondary-300

N/A

rgba(0,0,0,0)

Secondary-200

N/A

rgba(0,0,0,0)

Secondary-100

N/A

rgba(0,0,0,0)

Tertiary

Tertiary-900

tertiary-900

#534D4D

Tertiary-800

custom-1

#C4C4C4

Tertiary-700

custom-2

#C4C4C4

Tertiary-600

custom-3

#C4C4C4

Tertiary-500

custom-4

#C4C4C4

Tertiary-400

custom-5

#C4C4C4

Tertiary-300

custom-6

#C4C4C4

Tertiary-200

N/A

#C4C4C4

Tertiary-100

N/A

#C4C4C4

Greyscale

Greyscale-950

grey-950

#273024

Greyscale-900

grey-900

#484A47

Greyscale-800

grey-800

#787A77

Greyscale-700

grey-700

#979896

Greyscale-600

grey-600

#B3B3B3

Greyscale-500

grey-500

#D1D1D1

Greyscale-400

grey-400

#E1E0DE

Greyscale-300

grey-300

#EEEDEC

Greyscale-200

grey-200

#F3F3F3

Greyscale-100

grey-100

#F9F9F9

Utils

Utility-Red-900

util-red

#DA442F

Utility-Green-900

util-green

#3E7237

Utility-Yellow-900

util-yellow

#F9E531

Utility-White-900

util-white

#FFFFFF

Utility-Black-900

util-black

#000000


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 This size not used/updated

Small - Primary

Disabled

State Descriptors

Large - Secondary

Medium - Secondary This size not used/updated

Small - Secondary

Disabled

State Descriptors

Large - Tertiary

Medium - Tertiary This size not used/updated

Small - Tertiary

Disabled

Split Buttons

Not used/updated

Class Descriptors

Large

Medium

Small

Primary
Secondary
Tertiary

Icon Buttons

Square - Primary

Class Descriptors

Large

Medium

Small

Default
Hover
Focus
Disabled
Circle - Primary

Class Descriptors

Large

Medium

Small

Default
Hover
Focus
Disabled
Square - Secondary

Class Descriptors

Large

Medium

Small

Default
Hover
Focus
Disabled
Circle - Secondary

Class Descriptors

Large

Medium

Small

Default
Hover
Focus
Disabled
Square - Tertiary

Class Descriptors

Large

Medium

Small

Default
Hover
Focus
Disabled
Circle - Tertiary

Class Descriptors

Large

Medium

Small

Default
Hover
Focus
Disabled

Link - Primary

Class Descriptors

Large

Medium

Small

Link - Secondary
Not used/updated

Class Descriptors

Large

Medium

Small


Arrow Buttons
Arrow Link Primary

Class Descriptors

Large

Medium

Small

Arrow Link Secondary
Not used/updated

Class Descriptors

Large

Medium

Small


Simple Form Inputs

State Descriptors

Base - 48px Height

Default
Hover
Active
Disabled
Focus
Fix Error *
Success

Selection controls

Checkbox

Default


Hover


Selected


Focused


Disabled

Radio

Default


Hover


Selected


Focused


Disabled

Toggle

Default


Hover


Selected


Focused


Disabled

QTY Selector

Dropdowns

QTY Dropdown



Base Badges
Base
Sale

Primary

New

Secondary

Out Of Stock

Tertiary

Best Seller

Success

Bundle

Warning

Leading Icon
Not used
Sale

Primary

New

Secondary

Out Of Stock

Tertiary

Best Seller

Success

Bundle

Warning

Trailing Icon
Not used
Sale

Primary

New

Secondary

Out Of Stock

Tertiary

Best Seller

Success

Bundle

Warning

Notify Badges
Number - Large
2

Tertiary - 900

2

Primary - 900

2

Primary - 800

2

Tertiary - 300

2

Tertiary - 800

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


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

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 (Outline)

18

24

32

40

Heart (Filled)

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

Gift Cards

18

24

32

40

Refer

18

24

32

40

Video Play

18

24

32

40

Hurry

18

24

32

40

Save for Later

18

24

32

40

Social

Twitter

18

24

32

40

Facebook

18

24

32

40

Instagram

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.

This is a Title

I'm not thinking about anything when I'm climbing.

Notification

Account Notification
My account notification.

Send
open 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

Content Tile Overlay

I'm not thinking about anything when I'm climbing.

Content Tile Text After

I'm not thinking about anything when I'm climbing.

Content Tile Text Before

Two CTA's

Content Tile w/ Video

Options for 1, 2 or no CTA's

Product Tiles

1 style

1 style