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

var(--color-primary)

$color-primary-200

var(--color-primary-200)

$color-primary-300

var(--color-primary-300)

$color-primary-400

var(--color-primary-400)

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-primary

.theme-gray

.theme-light

Buttons

Button Regular

.btn-primary

.btn-secondary

.btn-primary.disabled

.btn-cta

Button Small

.btn-primary.btn-sm

.btn-secondary.btn-sm

.btn-secondary.btn-small.disabled

.btn-cta.btn-sm

Button Full

.btn-primary.btn-full

Disabled Buttons

.btn-primary[disabled]

.btn-secondary[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

Headlines Secondary

.heading-secondary-lg

.heading-secondary-md

.heading-secondary-sm

Product Name

.product-name-lg

.product-name-sm

Paragraph Styles

blockquote

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

Caption

Subtitle

.subtitle-lg

.subtitle-sm

Theming

Forms

Alerts

Iconography

Snippet usage:

{ % render 'icon-user' % }

If in a loop:

{ % include 'icon-user' % }

Social Icons

General Icons

Brand Icons