Style Guide.

Typography

Neue Machina

Neue Machina

Abcdefghijklm

Roobert

Roobert

Abcdefghijklm

Headings & Paragraphs

Heading XLarge
(Not in use)

Heading Xlarge

Heading Large

Heading large

Heading Medium

Heading medium

Heading Medium Alt

Heading medium alt

Heading Regular

Heading regular

Heading Small

Heading small

Title Tag Large

Title Tag Large

Title Tag

Title Tag

Main paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Split

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Rich Text

What’s a Rich Text element?

Heading

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor.

Image caption. At eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.
Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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! External link ›

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.

Utilities

Text Alignment

Text Center

Text Left

Text Right

Buttons

Color Swatch

Primary Colors
Dark Blue
#1C355E
Mid Blue
#426DB1
Light Blue
#7AB9FE
Dark Green
#355B56
Mid Green
#51A89C
Light Green
#96CBC4
Dark Orange
#FF4A05
Mid Orange
#FF755B
Light Orange
#F8BBA1
Dark Purple
#6B516E
Mid Purple
#985A8C
Light Purple
#D0BFDD
Gold
#E3A536
Light Yellow
#EEC986
Neutral Colors
Dark Grey
#2D2D2D
Mid Grey
#464646
Light Grey
#a5a5a5
Smoke Grey
#e9e8e8
Off-white
#F5F1E5
Gradients
Dark Orange to Light Blue
#2D2D2D
Background Textures
Dot Grid
Dot Grid on Off-white