Close

Style Guide

Colors

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

Primary
Black
Purple
White
Opacity
Black #70
Black #60
Black #50
Black #20
Black #10
Black #04
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 Large

.Heading Large

Heading Medium

.Heading Medium

Heading Small

.Heading Small
Heading Tiny
.Heading Tiny
Heading Micro
.Heading Micro
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, consectetur adipiscing elit suspendisse volutpat.

.Text XLarge

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat leo eget accumsan placerat.

.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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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