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
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
Alerts
Additional Error Content
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