Brand Palette

Colors

The following colors and shades are available for this project.

Primary

Secondary

Accent

Neutral

Headings & Text

Typography

The quick brown fox jumps over the lazy dog

h1

The quick brown fox jumps over the lazy dog

h2

The quick brown fox jumps over the lazy dog

h3

The quick brown fox jumps over the lazy dog

h4

The quick brown fox jumps over the lazy dog

h5

The quick brown fox jumps over the lazy dog

h6

The quick brown fox jumps over the lazy dog

h1 & L

This is large placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

The quick brown fox jumps over the lazy dog

h2 & m

This is default placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

The quick brown fox jumps over the lazy dog

h3 & s

This is small placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

Content Width & Spacing

General Spacing

Content Width

Grid Gap

Card Gap

Content Gap

Default Section Padding

Container Gap

Color Relationships

Text

Aa

Dark

Aa

Dark Muted

Aa

Light

Aa

Light Muted

Auto Color Relationships

Sample heading

This is what text will look like on ultra light background areas. You can also control link color relationships and there's an example button below.

Button

Sample heading

This is what text will look like on light background areas. You can also control link color relationships and there's an example button below.

Button

Sample heading

This is what text will look like on dark background areas. You can also control link color relationships and there's an example button below.

Button

Sample heading

This is what text will look like on ultra dark background areas. You can also control link color relationships and there's an example button below.

Button

Section Padding

Padding for sections is responsive and based on a multiplier of the core spacing system.

None

XS

S

M

L

XL

XXL

Widths

There are six values you can use to control element width. They're automatically responsive.

--width-xs

--width-s

--width-m

--width-l

--width-xl

--width-xxl

Shadows

There are three multi-layer box shadows to choose from.

Box shadow M

Box shadow L

Box shadow XL