Style Guide

Color

Neutral / Gray Scale

$color-black

var(--color-black)

$color-neutral-900

var(--color-neutral-900)

$color-neutral-800

var(--color-neutral-800)

$color-neutral-700

var(--color-neutral-700)

$color-neutral-600

var(--color-neutral-600)

$color-neutral-500

var(--color-neutral-500)

$color-neutral-400

var(--color-neutral-400)

$color-neutral-300

var(--color-neutral-300)

$color-neutral-200

var(--color-neutral-200)

$color-neutral-100

var(--color-neutral-100)

$color-white

var(--color-white)

Primary Colors

$color-primary-100

var(--color-primary-100)

$color-primary-200

var(--color-primary-200)

$color-primary-300

var(--color-primary-300)

$color-primary-400

var(--color-primary-400)

$color-primary-500

$color-primary

var(--color-primary-500)

var(--color-primary)

$color-primary-600

var(--color-primary-600)

Secondary Colors

$color-secondary-100

var(--color-secondary-100)

$color-secondary-200

var(--color-secondary-200)

$color-secondary-300

var(--color-secondary-300)

Typography Colors

$color-text-primary

var(--text-primary)

Layout + Component Colors

$color-border

var(--color-border)

Support + Utility Colors

$color-success-400

var(--color-success-400)

$color-success-300

$color-success

var(--color-success-300)

var(--color-success)

$color-success-200

var(--color-success-200)

$color-success-100

var(--color-success-100)

$color-warning-400

var(--color-warning-400)

$color-warning-300

var(--color-warning-300)

$color-warning-200

$color-warning

var(--color-warning-200)

var(--color-warning)

$color-warning-100

var(--color-warning-100)

$color-error-400

var(--color-error-400)

$color-error-300

$color-error

var(--color-error-300)

var(--color-error)

$color-error-200

var(--color-error-200)

$color-error-100

var(--color-error-100)

$color-focus

var(--color-focus)

$color-focus-negative

var(--color-focus-negative)

Background Themes

.theme-dark

.theme-green

.theme-green-secondary

.theme-light-green

.theme-tan

.theme-neutral

.theme-blue-secondary

.theme-light

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

Typography

Fonts

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

blockquote

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

Subtitle

subtitle

subtitle small

Theming

Blurb

Forms

Alerts

Iconography

Snippet usage:

{ % render 'icon-user' % }

If in a loop:

{ % include 'icon-user' % }

Social Icons

Brand Icons

General Icons

Alert Icons