Style Guide

Colors

Color names with #(X) = color names with opacity set to (X)%.

Primary
Space Blue
Han Purple
Sea Green
Others
Midnight Blue
Cyan Blue
Powder Blue
Red
Orange
Lemon Chiffon
White
Headings

Pick the Heading(n) according to the content hierarchy and add one of the .classes below to set the size.

Heading Huge

.Heading Huge

Heading XLarge

.Heading XLarge

Heading Large

.Heading Large

Heading Medium

.Heading Medium
Heading Small
.Heading Small
Heading Tiny
.Heading Tiny
Text Sizes

To change text weights or styles, add a second class that tells what happens. Ex:

.Text Bold
.Text Italic
.Special Link
.Is Something
.For Something

Lorem ipsum dolor sit amet.

.Text Huge

Lorem ipsum dolor sit amet.

.Text XLarge

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat leo eget accumsan placerat. Aliquam ultrices turpis nec varius suscipit.

.Text Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat leo eget accumsan placerat. Aliquam ultrices turpis nec varius suscipit. Fusce porttitor non velit sed mollis. Praesent gravida dui metus, eget ultrices massa tempor quis. Ut sodales faucibus justo.

.Text Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat leo eget accumsan placerat. Aliquam ultrices turpis nec varius suscipit. Fusce porttitor non velit sed mollis. Praesent gravida dui metus, eget ultrices massa tempor quis. Ut sodales faucibus justo.

.Text Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat leo eget accumsan placerat. Aliquam ultrices turpis nec varius suscipit. Fusce porttitor non velit sed mollis. Praesent gravida dui metus, eget ultrices massa tempor quis. Ut sodales faucibus justo.

.Text Tiny
.Text Link

Lorem ipsum dolor sit amet.

.Uppercase Large

Lorem ipsum dolor sit amet

.Uppercase
Rich Text

Note: H1 and H2 get the same styling — you can skip the H1 and start with the H2. These elements are styled separately when nested under the following RTE class:

.Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph... The rich text element allows you to create and format headings, paragraphs, block quotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

"This is a block quote."

This is a link inside of the rich text element.

This is an italic text inside of the rich text element.

This is a bold text inside of the rich text element.

This is a paragraph... The rich text element allows you to create and format headings, paragraphs, block quotes, images, and video all in one place instead of having to add and format them individually. A link here, an italic here, a bold text here.

  • List item 1
  • List item 2
  • List item 3
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
This is an image caption

This is a paragraph... The rich text element allows you to create and format headings, paragraphs, block quotes, images, and video all in one place instead of having to add and format them individually. A link here, an italic here, a bold text here.