Style Guide

Color

Brand Colors

Color Primary

$color-primary
var(--color-primary)

          

Color Primary ADA

$color-primary-ada
var(--color-primary-ada)

          

Color Secondary Blue

$color-secondary-blue
var(--color-secondary-blue)

          

Color Secondary Green

$color-secondary-green
var(--color-secondary-green)

          

Color Secondary Yellow

$color-secondary-yellow
var(--color-secondary-yellow)

          

Color Primary Light

$color-primary-light
var(--color-primary-light)

          

Color Warm White

$color-warm-white
var(--color-warm-white)

          

Gray Scale

Black

$color-black
var(--color-black)

          

Gray 500

$color-gray-500
var(--color-gray-500)

          

Gray 400

$color-gray-400
var(--color-gray-400)

          

Gray 300

$color-gray-300
var(--color-gray-300)

          

Gray 200

$color-gray-200
var(--color-gray-200)

          

Gray 100

$color-gray-100
var(--color-gray-100)

          

White

$color-white
var(--color-white)

          

Ulitity Gray Scale

Utility Gray 600

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

          

Utility Gray 500

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

          

Utility Gray 400

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

          

Utility Gray 300

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

          

Utility Gray 200

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

          

Utility Gray 100

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

          

Typography Colors

Color Typography Base | Color Text Dark

$color-typography-base
var(--color-typography-base)
$color-text-dark
var(--color-text-dark)

          

Color Typography Inverse | Color Text Light

$color-typography-inverse
var(--color-typography-inverse)
$color-text-light
var(--color-text-light)

          

Color Text Medium

$color-text-medium
var(--color-text-medium)

          

Color Link

$color-link
var(--color-link)

          

Color Link Hover

$color-link-hover
var(--color-link-hover)

          

Backgrounds - Solid Color (No Texture)

Color Background Base | Color Background 100

$color-background-base
var(--color-background-base)
$color-background-100
var(--color-background-100)

          

Color Background Gray | Color Background 200

$color-background-gray
var(--color-background-gray)
$color-background-200
var(--color-background-200)

          

Color Background 300

$color-background-300
var(--color-background-300)

          

Color Background Inverse | Color Background 400

$color-background-inverse
var(--color-background-inverse)
$color-background-400
var(--color-background-400)

          

Texture Backgrounds

Texture Background 100

.theme-texture-100

Texture Background 200

.theme-texture-200

Texture Background 300

.theme-texture-300

Texture Background 400

.theme-texture-400

Texture Background 500

.theme-texture-500

Texture Background 600

.theme-texture-600

Component Colors

Color Border

$color-border
var(--color-border)

          

Color Input Border

$color-input-border
var(--color-input-border)

          

Support Colors

Color Success 300

$color-success-300
var(--color-success-300)

          

Color Success 200

$color-success-200
var(--color-success-200)

          

Color Success 100

$color-success-100
var(--color-success-100)

          

Color Warning 300

$color-warning-300
var(--color-warning-300)

          

Color Warning 200

$color-warning-200
var(--color-warning-200)

          

Color Warning 100

$color-warning-100
var(--color-warning-100)

          

Color Alert 300

$color-alert-300
var(--color-alert-300)

          

Color Alert 200

$color-alert-200
var(--color-alert-200)

          

Color Alert 100

$color-alert-100
var(--color-alert-100)

          

Color Error

$color-error
var(--color-error)

          

Color Focus

$color-focus
var(--color-focus)

          

Color Focus Inverse

$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

Museo Slab

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&

$font-family-headings

museo-slab, sans-serif;

Proxima Nova Extra Condensed

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&

$font-family-headings-alt

proxima-nova-extra-condensed, sans-serif;

Proxima Nova

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&

$font-family-body

proxima-nova, serif;


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

.theme-dark

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.



.theme-gray

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.



.theme-light-gray

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.



.theme-light

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.



.theme-texture-600

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.



.theme-texture-500

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.



.theme-texture-400

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.



.theme-texture-300

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.



.theme-texture-200

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.



.theme-texture-100

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.



Forms

This field is required.
Radio Buttons

Alerts

Default Alert

Error Alert

Additional Error Content

Success Alert

Iconography

Snippet usage:

{ % render 'icon-account' % }

If in a loop:

{ % include 'icon-account' % }

Brand Icons

Social Icons

General Icons

Container & Spacing

Container Full

.container-full

Container Large

.container-large

Container Regular

.container

Container Form

.container-xs

Scalable Containers

.container-large.scalable
.container.scalable
.container-small.scalable

Spaced Section

.spaced-section

Another Spaced Section

.spaced-section

Spaced Section w/ Rough Edges

Add rough edge textures to top or bottom of sections

.rough-edge-top
.rough-edge-bottom

Another Spaced Section w/ Rough Edges

Add rough edge textures to top or bottom of sections

.rough-edge-top
.rough-edge-bottom

Stacked Spaced Sections, Same Theme

.spaced-section

This section has no padding-top

.spaced-section + .spaced-section