Style Guide

Color

Brand Colors

$color-primary

var(--color-primary)

$color-primary-ada

var(--color-primary-ada)

$color-secondary-blue

var(--color-secondary-blue)

$color-secondary-green

var(--color-secondary-green)

$color-secondary-yellow

var(--color-secondary-yellow)

$color-primary-light

var(--color-primary-light)

$color-warm-white

var(--color-warm-white)

Gray Scale

$color-black

var(--color-black)

$color-gray-500

var(--color-gray-500)

$color-gray-400

var(--color-gray-400)

$color-gray-300

var(--color-gray-300)

$color-gray-200

var(--color-gray-200)

$color-gray-100

var(--color-gray-100)

$color-white

var(--color-white)

Ulitity Gray Scale

$color-utility-gray-600

var(--color-utility-gray-600)

$color-utility-gray-500

var(--color-utility-gray-500)

$color-utility-gray-400

var(--color-utility-gray-400)

$color-utility-gray-300

var(--color-utility-gray-300)

$color-utility-gray-200

var(--color-utility-gray-200)

$color-utility-gray-100

var(--color-utility-gray-100)

Typography Colors

$color-typography-base

var(--color-typography-base)

$color-text-dark

var(--color-text-dark)

$color-typography-inverse

var(--color-typography-inverse)

$color-text-light

var(--color-text-light)

$color-text-medium

var(--color-text-medium)

$color-link

var(--color-link)

$color-link-hover

var(--color-link-hover)

Backgrounds - Solid Color (No Texture)

$color-background-base

var(--color-background-base)

$color-background-100

var(--color-background-100)

$color-background-gray

var(--color-background-gray)

$color-background-200

var(--color-background-200)

$color-background-300

var(--color-background-300)

$color-background-inverse

var(--color-background-inverse)

$color-background-400

var(--color-background-400)

Texture Backgrounds

.theme-texture-100

.theme-texture-200

.theme-texture-300

.theme-texture-400

.theme-texture-500

.theme-texture-600

Component Colors

$color-border

var(--color-border)

$color-input-border

var(--color-input-border)

Support Colors

$color-success-300

var(--color-success-300)

$color-success-200

var(--color-success-200)

$color-success-100

var(--color-success-100)

$color-warning-300

var(--color-warning-300)

$color-warning-200

var(--color-warning-200)

$color-warning-100

var(--color-warning-100)

$color-alert-300

var(--color-alert-300)

$color-alert-200

var(--color-alert-200)

$color-alert-100

var(--color-alert-100)

$color-error

var(--color-error)

$color-focus

var(--color-focus)

$color-focus-inverse

var(--color-focus-inverse)

Background Themes

.theme-dark

.theme-gray

.theme-light-gray

.theme-light

.theme-texture-600

.theme-texture-500

.theme-texture-400

.theme-texture-300

.theme-texture-200

.theme-texture-100

Buttons

Button Regular

.btn-primary

.btn-secondary

.btn-tertiary

.btn-cta

Button Small

.btn-primary.btn-sm

.btn-secondary.btn-sm

.btn-tertiary.btn-sm

.btn-cta.btn-sm

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, button_link: 'https://google.com/' % }

Button Regular

Button Large

Typography

Fonts

$font-family-headings

$font-family-headings-alt

$font-family-body

Header Styles

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

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 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.

Blockquote

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

Labels

.label.slab

.label.sans-bold

.label.sans-regular

.label.sans-condensed

Theming

Forms

Alerts

Iconography

Snippet usage:

{ % render 'icon-account' % }

If in a loop:

{ % include 'icon-account' % }

Brand Icons

Social Icons

General Icons