Cards & Icons

Light Cards

Icon Card

This is just 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.

Text link

Media Card

Here goes your text ... Select any part of your text to access the formatting toolbar.

Call to action

Avatar Card

Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready.

dark cards

Icon Card

This is just 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.

Text link

Media Card

Here goes your text ... Select any part of your text to access the formatting toolbar.

Call to action

Avatar Card

Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready.

Large Icons

Medium Icons

small Icons

Icon List

  • This is a list item.
  • This is a list item.
  • This is a list item.
  • This is a list item.
  • This is a list item.

Buttons & Links

Action elements

Primary
Button

Primary

Button

Primary Outline

Button

Primary Light

Button

Primary Light Outline

Button

Primary Dark

Button

Primary Dark Outline

SEcondary
Button

Secondary

Button

Secondary Outline

Button

Secondary Light

Button

Secondary Light Outline

Button

Secondary Dark

Button

Secondary Dark Outline

Tertiary
Button

Tertiary

Button

Tertiary Outline

Button

Tertiary Light

Button

Tertiary Light Outline

Button

Tertiary Dark

Button

Tertiary Dark Outline

Accent
Button

Accent

Button

Accent Outline

Button

Accent Light

Button

Accent Light Outline

Button

Accent Dark

Button

Accent Dark Outline

Base
Button

Base

Button

Base Outline

Button

Base Light

Button

Base Light Outline

Button

Base Dark

Button

Base Dark Outline

Neutral
Button

Neutral

Button

Neutral Outline

Button

Neutral Light

Button

Neutral Light Outline

Button

Neutral Dark

Button

Neutral Dark Outline

Content Width & Spacing

General Spacing

Content Width

Grid Gap

Card Gap

Content Gap

Default Section Padding

Container Gap

Brand Palette

Colors

The following colors and shades are available for this project.

Primary

Secondary

Tertiary

Accent

Base

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.

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