Style Guide

Colors Buttons Links Heading Styles Text Styles Rich Text Text Utilities Utilities Forms

Colors

Primary

Hex:

#f6b638

Class:

Color Brand Primary

BG Class:

Background Color Primary

Primary Light

Hex:

#fff9f2

Class:

Color Primary Light

BG Class:

Background Color Primary Light

Secondary

Hex:

#dd6c43

Class:

Color Secondary

BG Class:

Background Color Secondary

Accent 1

Hex:

#e1604d

Class:

Color Secondary

BG Class:

Background Color Secondary

Accent 2

Hex:

#7cc6d6

Class:

Color Secondary

BG Class:

Background Color Secondary

Accent 3

Hex:

#3a8888

Class:

Color Secondary

BG Class:

Background Color Secondary

Accent 4

Hex:

#ab9aec

Class:

Color Secondary

BG Class:

Background Color Secondary

Black

Hex:

#141313

Class:

Color Black

BG Class:

Background Color Black

Gray 1

Hex:

#222222

Class:

Color Gray 1

BG Class:

Background Color Gray 1

Gray 2

Hex:

#717171

Class:

Color Gray 2

BG Class:

Background Color Gray 2

Gray 3

Hex:

#a0a0a0

Class:

Color Gray 3

BG Class:

Background Color Gray 3

Gray 4

Hex:

#d0d0d0

Class:

Color Gray 4

BG Class:

Background Color Gray 4

Gray 5

Hex:

#eeeeee

Class:

Color Gray 5

BG Class:

Background Color Gray 5

White

Hex:

#ffffff

Class:

Color White

BG Class:

Background Color White

Buttons

Primary Large Secondary Large Primary Regular Secondary Regular Primary Small Primary Small

Links

Primary Link

Inline Text Link

Heading Styles

Heading XXL

Heading XL

Heading 1 (Large)

Heading 2 (Medium)

Heading 3 (Small)

Heading 4 (XSmall)

Heading 5 (Tiny)

Heading 6 (All Caps)

Text Styles

Text Large – Lorem ipsum dolor sit amet, consectetur adipiscing

Text Medium – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Base – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Small – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Tiny – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Rich Text

What’s a Rich Text element?

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

Bold Text

Italicized text

A Rich Text Link

Unordered list 1
Unordered list 2

Ordered List 1
Ordered List 2

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.