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 100
(Primary Brand Color)
$color-primary-100
var(--color-primary-100)
$color-primary
var(--color-primary)
Color Primary 200
$color-primary-200
var(--color-primary-200)
Color Primary 300
$color-primary-300
var(--color-primary-300)
Color Primary 400
$color-primary-400
var(--color-primary-400)
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-primary
.theme-gray
.theme-light
Typography
Fonts
Nimbus Sans Black Extended
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&
$font-family-heading
"nimbus-sans-black-extended", Gill Sans, Gill Sans MT, Arial Black, sans-serif;
Nimbus Sans Bold Extended
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&
$font-family-heading-secondary
"nimbus-sans-bold-extended", Gill Sans, Gill Sans MT, Arial, sans-serif;
Antarctica VAR
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&
$font-family-base
"antarctica-var", sans-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
Headlines Secondary
.heading-secondary-lg
.heading-secondary-md
.heading-secondary-sm
Product Name
.product-name-lg
.product-name-sm
Paragraph Styles
Paragraph X-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 Medium
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 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.
blockquote
Remember, if you don't do it this year, you'll be one year older when you do.
Subtitle
.subtitle-lg
.subtitle-sm
Theming
.theme-primary
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-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-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.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.
LinkForms
Alerts
Additional Error Content
Iconography
Snippet usage:
{ % render 'icon-user' % }
If in a loop:
{ % include 'icon-user' % }