Style Guide

Sections

Colors

Primary

Hex:
#eba177
Class:
Color Brand Primary
BG Class:
Background Color Primary

Primary Light

Hex:
#ffe8c9
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:
#2d6a6a
Class:
Color Secondary
BG Class:
Background Color Secondary

Accent 3

Hex:
#ab9aec
Class:
Color Secondary
BG Class:
Background Color Secondary

Black

Hex:
#121212
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 LargeSecondary LargePrimary RegularSecondary RegularPrimary SmallPrimary Small

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

  1. Ordered List 1
  2. 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.

Text Utilities

Text Style Underlined

Text Style All Caps

Weight Regular (400)

Weight Medium (500)

Weight Bold (700)

Text Align Left

Text Align Center

Text Align Right

Utilities

Padding

No Padding
No Vertical Padding
No Horizontal Padding

Margin

No Margin
No Vertical Margin
No Horizontal Margin
Margin Auto

Max Width

Max Width 380px
Max Width 520px
Max Width 820px
Max Width 1040px
Max Width 1440px

Forms

Thank you! Your submission has been received!
Oops, that didn't work! Sorry, please try again.
Thank you! Your submission has been received!
Oops, that didn't work! Sorry, please try again.
View All Pages
Close
Get this Template