Style Guide
Color
Neutral / Neutral 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)
Accent Colors
Color Accent Berry 400
$color-accent-berry-400
var(--color-accent-berry-400)
Color Accent Berry 300
$color-accent-berry-300
var(--color-accent-berry-300)
Color Accent Berry 200
$color-accent-berry-200
var(--color-accent-berry-200)
Color Accent Berry 100
$color-accent-berry-100
var(--color-accent-berry-100)
Color Accent Blue 400
$color-accent-blue-400
var(--color-accent-blue-400)
Color Accent Blue 300
$color-accent-blue-300
var(--color-accent-blue-300)
Color Accent Blue 200
$color-accent-blue-200
var(--color-accent-blue-200)
Color Accent Blue 100
$color-accent-blue-100
var(--color-accent-blue-100)
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-dark
.theme-berry
.theme-blue
.theme-neutral
.theme-light-neutral
.theme-light
Typography
Georgia Pro
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&
$font-family-heading
"Georgia Pro", serif;
Georgia Pro - Semi Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&
$font-weight-bold
"Georgia Pro", serif;
Area Variable (base)
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&
$font-family-base
"area-variable", Helvetica, Arial, sans-serif;
The Seasons
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&
$font-family-display
"the-seasons", 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
Display Headings
display small
.display-sm
display large
.display-lg
Paragraph Styles
Paragraph X-Small
Paragraph X-Small Bold
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
Paragraph Small Bold
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 Medium
Paragraph Medium Bold
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 Large
Paragraph Large Bold
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.
Subtitle
subtitle small
subtitle large
Action
Action Small
Action Medium
Action Large
Theming
.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.theme-berry
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.theme-blue
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.theme-neutral
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.theme-light-neutral
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.
LinkBlurb
Eyebrow
This is a headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Forms
Alerts
Additional Error Content
Forms - Theme Dark
Alerts
Additional Error Content
Forms - Theme Blue
Forms - Theme Neutral
Iconography
Snippet usage:
{ % render 'icon-user' % }
If in a loop:
{ % include 'icon-user' % }
Social Icons-
-
-
-
-
-
Brand Icons
General Icons-
-
-
-
-
-
-
-
-
-
-
-
-
Alert Icons-
-
-
General Icons-
-
-
-
-
-
-
-
-
-
-
-
-
Alert Icons-
-
-
Container & Spacing
Container Full
.container
Container Large
.container-lg
Container Medium
.container-lg
Container Small
.container-lg
Scalable Containers
.container-lg.scalable
.container-lg.scalable
.container-lg.scalable
Spaced Section
.stacked-component
Another Spaced Section, Medium Spacing
.stacked-component.spacing-md
Stacked Spaced Sections, Spacing Small, Same Theme
.stacked-component.spacing-sm
This section has no padding-top
.stacked-component.spacing-sm + .stacked-component.spacing-sm