Primary

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

Secondary

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

Tertiary

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

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

Utility-Red-900

#D43333

Utility-Green-900

#239242

Utility-Yellow-900

#E8D638

Utility-White-900

#FFFFFF


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
Square - Primary

Class Descriptors

Large

Medium

Small

X-Small

Default
Hover
Focus
Disabled
Circle - Primary

Class Descriptors

Large

Medium

Small

X-Small

Default
Hover
Focus
Disabled
Square - Secondary

Class Descriptors

Large

Medium

Small

X-Small

Default
Hover
Focus
Disabled
Circle - Secondary

Class Descriptors

Large

Medium

Small

X-Small

Default
Hover
Focus
Disabled
Square - Tertiary

Class Descriptors

Large

Medium

Small

X-Small

Default
Hover
Focus
Disabled
Circle - Tertiary

Class Descriptors

Large

Medium

Small

X-Small

Default
Hover
Focus
Disabled

Link Buttons
Link - Primary

Class Descriptors

Large

Medium

Small

X-Small

Link - Secondary

Class Descriptors

Large

Medium

Small

X-Small


Arrow Buttons
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
Fix Error *
Fix Error *
Success
Success

Selection controls

Checkbox

Default


Hover


Selected


Focused


Disabled

Radio

Default


Hover


Selected


Disabled


Focus

Toggle

Default


Hover


Selected


Focused


Disabled

QTY Selector

QTY Dropdown


Breadcrumbs

Base Badges
Base
Sale

Sale

New

Sale

Out Of Stock

Out of Stock

Best Seller

Best Seller

Bundle

Bundle

Leading Icon
Sale

Sale

New

Sale

Out Of Stock

Out of Stock

Best Seller

Best Seller

Bundle

Bundle

Trailing Icon
Sale

Sale

New

Sale

Out Of Stock

Out of Stock

Best Seller

Best Seller

Bundle

Bundle

Notify Badges
Number Large
2

Bedazzled Blue-900

2

Blue Jeans - 800

2

Greyscale - 900

2

Spanish Orange - 300

2

Dark Corn Flower - 800

Icon - Large

Default

Warning

Danger

Success

Hovered

Icon - Medium
2

Default

2

Warning

2

Danger

2

Success

2

Hovered

Icon - Medium

Default

Warning

Danger

Success

Hovered


Dividers

Dark


Dark Corn Flower Blue - 900

Medium - Dark


Dark Corn Flower Blue - 800

Medium - Light


Tertiary Grey - 700

Light


Tertiary Grey - 600

Borders

Default

Greyscale - 300

Active/Hovered


Greyscale - 900

Disabled


Greyscale - 700

Danger


Utility-Red-900


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

Social

Twitter

18

24

32

40

Facebook

18

24

32

40

Instagram

18

24

32

40

Spotify

18

24

32

40