Style Guide

Colors

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

Primary
Black
Red
White
Others
Black #80
Black #50
Black #20
Black #10
Black #05
Red #20
Red #10
Red #05
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

text huge

.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

Lorem ipsum dolor sit amet

.Uppercase

Lorem ipsum dolor sit amet

.Uppercase Small
.Text Link
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
Pellentesque tristique molestie felis vitae volutpat. Ut sed maximus neque. Nulla fringilla, neque ut tempor eleifend, lacus neque egestas sem, in tincidunt ligula sem sed arcu:

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.