Style Guide

Color

Neutral / Gray Scale

Black

$color-black

var(--color-black)

Neutral 900

$color-neutral-900

var(--color-neutral-900)

Neutral 800

$color-neutral-800

var(--color-neutral-800)

Neutral 700

$color-neutral-700

var(--color-neutral-700)

Neutral 600

$color-neutral-600

var(--color-neutral-600)

Neutral 500

$color-neutral-500

var(--color-neutral-500)

Neutral 400

$color-neutral-400

var(--color-neutral-400)

Neutral 300

$color-neutral-300

var(--color-neutral-300)

Neutral 200

$color-neutral-200

var(--color-neutral-200)

Neutral 100

$color-neutral-100

var(--color-neutral-100)

White

$color-white

var(--color-white)

Primary Colors

Color Primary 600

$color-primary-600

var(--color-primary-600)

Color Primary 500

(Primary Brand Color)

$color-primary-500

$color-primary

var(--color-primary-500)

var(--color-primary)

Color Primary 400

$color-primary-400

var(--color-primary-400)

Color Primary 300

$color-primary-300

var(--color-primary-300)

Color Primary 200

$color-primary-200

var(--color-primary-200)

Color Primary 100

$color-primary-100

var(--color-primary-100)

Secondary Colors

Brand Secondary 600

$color-brand-secondary-600

var(--color-brand-secondary-600)

Brand Secondary 500

$color-brand-secondary-500

var(--color-brand-secondary-500)

data-color-value

Brand Secondary 400

$color-brand-secondary-400

var(--color-brand-secondary-400)

data-color-value

Brand Secondary 300

$color-brand-secondary-300

var(--color-brand-secondary-300)

data-color-value

Brand Secondary 200

$color-brand-secondary-200

var(--color-brand-secondary-200)

data-color-value

Brand Secondary 100

$color-brand-secondary-100

var(--color-brand-secondary-100)

data-color-value

Typography Colors

Text Primary

$color-text-primary

var(--text-primary)

Layout + Component Colors

Border

$color-border

var(--color-border)

Support + Utility Colors

Success 400

$color-success-400

var(--color-success-400)

Success 300

$color-success-300

$color-success

var(--color-success-300)

var(--color-success)

Success 200

$color-success-200

var(--color-success-200)

Success 100

$color-success-100

var(--color-success-100)

Warning 400

$color-warning-400

var(--color-warning-400)

Warning 300

$color-warning-300

var(--color-warning-300)

Warning 200

$color-warning-200

$color-warning

var(--color-warning-200)

var(--color-warning)

Warning 100

$color-warning-100

var(--color-warning-100)

Error 400

$color-error-400

var(--color-error-400)

Error 300

$color-error-300

$color-error

var(--color-error-300)

var(--color-error)

Error 200

$color-error-200

var(--color-error-200)

Error 100

$color-error-100

var(--color-error-100)

Focus

$color-focus

var(--color-focus)

Focus Inverse

$color-focus-negative

var(--color-focus-negative)

Background Themes

.theme-light

.theme-dark

.theme-gray

.theme-dark-transparent

Buttons

Button Regular

.btn-primary

.btn-secondary

.btn-tertiary

.btn-cta

Button Large

.btn-primary.btn-lg

.btn-secondary.btn-lg

.btn-tertiary.btn-lg

.btn-cta.btn-lg

Button Full

.btn-primary.btn-full

Disabled Buttons

.btn-primary[disabled]

.btn-secondary[disabled]

.btn-tertiary[disabled]

.btn-cta[disabled]

Icon Buttons

There is a button snippet to make including buttons with icons easier

{ % render 'button', class: 'btn-secondary btn-sm', btn_text: 'Learn More', has_icon: true, icon_name: 'caret-right', button_link: 'https://google.com/' % }

Primary

Secondary Caret

Tertiary Icon Left

CTA Button

Typography

Fonts

Bebas Neue Pro

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&

$font-family-heading

"Bebas Neue Pro", "Arial Black", "Arial Bold", Gadget, sans-serif;

Avenir Next

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&

$font-family-paragraph

"Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;

Courier Prime

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&

$font-family-secondary

"Courier Prime", "Arial Black", "Arial Bold", Gadget, sans-serif;

Header Styles

H1 Display-1 style

.heading-1.display-1

H1 Header style

.heading-1

H2 Header style

.heading-2

H3 Header style

.heading-3

H4 Header style

.heading-4

H5 Header style

.heading-5

H6 Header Style

.heading-6

Scalable Header Styles

H1 Scalable

.heading-1.scalable

H2 Scalable

.heading-2.scalable

H3 Scalable

.heading-3.scalable

H4 Scalable

.heading-4.scalable

H5 Scalable

.heading-5.scalable

H6 Scalable

.heading-6.scalable

Action

Action SM

Action MD

Action Lg

Eyebrow

Navigation

Input

Label

Value Medium

Value Small

Paragraph Styles

Paragraph Default

Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

Link inside body copy should look like this.

Paragraph Default

Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

Link inside body copy should look like this.

Paragraph Small

Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

Paragraph Small

Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

Paragraph Large

Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

Paragraph Large

Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

blockquote

Remember, if you don't do it this year, you'll be one year older when you do.

Caption

Theming

.theme-light

paragraph: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

Link
Underlined Link

.theme-dark

paragraph: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

Link
Underlined Link

.theme-gray

paragraph: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

Link
Underlined Link

.theme-dark-transparent

paragraph: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

Link
Underlined Link

Forms

Name

Email This field is required.

Phone number

Comment

Select Dropdown

Checkbox

Checkbox Checked

Checkbox Alert

Checkbox Disabled

Checkbox Active Disabled

Radio Buttons

Radio Button

Radio Button Checked

Radio Button Disabled

Radio Button Disabled Checked

Radio Button Error This field is required.

Field with Button

Alerts

Default Alert

Error Alert

Additional Error Content

Success Alert

Forms

Name

Email This field is required.

Phone number

Comment

Select Dropdown

Checkbox

Checkbox Checked

Checkbox Alert

Checkbox Disabled

Checkbox Active Disabled

Radio Buttons

Radio Button

Radio Button Checked

Radio Button Disabled

Radio Button Disabled Checked

Radio Button Error This field is required.

Field with Button

Alerts

Default Alert

Error Alert

Additional Error Content

Success Alert

Iconography

Snippet usage:

{ % render 'icon-user' % }

If in a loop:

{ % include 'icon-user' % }

Shop by Category

Shop by Layer

Shop by Category

Shop by Layer

Shop by Accessories

Shop by Category

Shop by Layer

Shop by Category

Shop by Layer

Shop by Accessories

Style Guide

Color

Neutral / Gray Scale

Primary Colors

Secondary Colors

Typography Colors

Layout + Component Colors

Support + Utility Colors

Background Themes

Buttons

Button Regular

Button Large

Button Full

Disabled Buttons

Icon Buttons

Typography

Fonts

Header Styles

H1 Display-1 style

H1 Header style

H2 Header style

H3 Header style

H4 Header style

H5 Header style

H6 Header Style

Scalable Header Styles

H1 Scalable

H2 Scalable

H3 Scalable

H4 Scalable

H5 Scalable

H6 Scalable

Action

Eyebrow

Navigation

Input

Paragraph Styles

Paragraph Default

Paragraph Default

Paragraph Small

Paragraph Small

Paragraph Large

Paragraph Large

blockquote

Theming

.theme-light

.theme-dark

.theme-gray

.theme-dark-transparent

Forms

Alerts

Forms

Alerts

Badges & Tags

Iconography

General Icons - 24px

UI Icons - 24px

Social Icons - 24px

Info Icons - 16px

Player Icons - 32px

Customer Support Icons

Logos