Primary

Jade-900

#065937

Jade-800

#09784C

Jade-700

#01955D

Jade-600

#0DA86A

Jade-500

#4AC38A

Jade-400

#6FCE9E

Jade-300

#9BDBBA

Jade-200

#C2E9D4

Jade-100

#FBFFFD

Secondary

Denim-900

#004D87

Denim-800

#006CA8

Denim-700

#007DBC

Denim-600

#009CDD

Denim-500

#29ABE2

Denim-400

#4DB9E6

Denim-300

#7ECCEE

Denim-200

#B0E1F5

Denim-100

#E0F3FB

Tertiary

Dusk-900

#28222B

Dusk-800

#49434D

Dusk-700

#69626D

Dusk-600

#7D7681

Dusk-500

#A79FAB

Bright Yellow-400

#C77E00

>Bright Yellow-300

#FBB13B

Bright Yellow-200

#FEDEAC

Bright Yellow-100

#FFFDF9

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