Branding Style Guide

The Default context assumes a default, white background and uses the dark primary color for text:

The Primary context sets a primary background and uses white color for text:

The Secondary context sets a secondary background and uses the dark primary color for text:

The Accent context sets a accent background and uses white for text:

The Neutral context sets a light neutral background and uses the dark neutral for text:

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 6 with small

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This paragraph contains a strong, an italic in it, and a inline link in it.

This paragraph has changes in size: when it comes to smalls or fine print in it.

subThis paragraph has both subs and sups around it.sup

This paragraph with success, warning, danger, and info spans.

Buttons

Default Button Outline Button Accent Button

Forms

Single line Signup

Multi line Signup

Colors

Brand Colors

Primary
secondary
accent
neutral-dark
neutral-light

Utility Colors

success
warning
danger
info

Full Palette

red
orange
yellow
green
teal
cyan
blue
purple
indigo
pink