Style Guide

This style guide page contains styles and components used through the website.

Colors

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.
Preview
Primary 500
Primary 400
Secondary 500
Neutral 500
Neutral 300
White
# Code
#3A1DF5
#011F32
#002B31
#E0E5E6
#F5F4F3
#FFFFFF
Usage
Hover States
Links, Buttons
Heading, Text, Icons
Borders
Background
--

Typography

You'll see that some typography elements don't have classes. That's because on this page, we want to edit the styles after selecting "All H1 Headings" for example, so that it will effect all the elements on the site. To do this, select the H1 below, click where it says "Select a Class or Tag" and select "All H1 Headings" at the bottom of the list.
Class or ElementDesktopTabletLandscapeMobile
Display Heading
4rem3rem2.75rem
All H1 Headings
3rem2.75rem2.25rem
All H2 Headings
2.25rem2rem1.75rem
All H3 Headings
1.5rem
All H4 Headings
1.25rem
All H5 Headings
1.125rem
All H6 Headings
1rem
Text Extra Large
1.5rem
All Paragraphs
1rem
Text Block
1rem
Text Small

0.875rem

Text Extra Small

0.75rem

Display Heading

Keep your face toward the sunshine and shadows will fall behind you

All H1 Headings

Keep your face toward the sunshine and shadows will fall behind you

All H2 Headings

Keep your face toward the sunshine and shadows will fall behind you

All H3 Headings

Keep your face toward the sunshine and shadows will fall behind you

All H4 Headings

Keep your face toward the sunshine and shadows will fall behind you

All H5 Headings
Keep your face toward the sunshine and shadows will fall behind you
All H6 Headings
Keep your face toward the sunshine and shadows will fall behind you
Text Large
Need help with a template customization? Meet our Template Subscription. Get unlimited help with design tasks and revisions for a fixed monthly fee. Scale your project while maintaining consistency with our "cancel anytime" policy and fast turnarounds.
All Paragraphs

Need help with a template customization? Meet our Template Subscription. Get unlimited help with design tasks and revisions for a fixed monthly fee. Scale your project while maintaining consistency with our "cancel anytime" policy and fast turnarounds.

Text Small
Need help with a template customization? Meet our Template Subscription. Get unlimited help with design tasks and revisions for a fixed monthly fee. Scale your project while maintaining consistency with our "cancel anytime" policy and fast turnarounds.
Text Extra Small
Need help with a template customization? Meet our Template Subscription. Get unlimited help with design tasks and revisions for a fixed monthly fee. Scale your project while maintaining consistency with our "cancel anytime" policy and fast turnarounds.
Text Block
This is some text inside of a div block.
Eyebrow
This is a eyebrow
All Unordered Lists
  • Consist various constructs with varying degree of parallelism.
  • Although high performance in concurrent tasks.
  • Your tasks are a big part of life. Stay always be motivated.
All Ordered Lists
  1. Consist various constructs with varying degree of parallelism.
  2. Although high performance in concurrent tasks.
  3. Your tasks are a big part of life. Stay always be motivated.
All Block Quotes
"AI in design is less a threat, more an ally, catalyzing a fusion of human creativity and machine efficiency."
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.

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.

A rich text element (RTE) is the perfect element for creating long-form content like blog posts, about pages, biographies — you name it. Instead of adding individual heading, paragraph, list, or image elements, you can double-click into a rich text element to create these different content elements directly.

Styled example for Rich Text elements

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way.

  • This however showed weasel
  • Well uncritical so misled
  • Goodness much until that fluid owl

According a funnily until pre-set or arrogant well cheerful

But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.

"My vision is a world of healthy minds"

According a funnily until pre-set or arrogant well cheerful

  1. So baboon this
  2. Mounted militant weasel gregariously admonishingly straightly hey
  3. Dear foresaw hungry and much some overhung
  4. Rash opossum less because less some amid besides

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.

Silent delightfully including because before one up barring chameleon

But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again.

According a funnily until pre-set or arrogant well cheerful

But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again.

This is a caption

Buttons

These are all the buttons that are used in this project. Editing them will reflect the changes on all the other buttons of the project too.

Primary Button

Standard

Icon Only

Button
Icon Only
Button
Icon Only
Small

Secondary Button

Standard

Button
Secondary
Secondary Button
Button
Secondary
Small
Secondary Button

Icon Only

Button
Secondary
Icon Only
Button
Secondary
Icon Only
Small

Outline Button

Standard

Button
Outline
Outline Button
Button
Outline
Small
Outline Button

Icon Only

Button
Outline
Icon Only
Button
Outline
Icon Only
Small

Link Button

Standard

Button
Link
Link Button
Button
Link
Small
Link Button

Icon Only

Button
Link
Icon Only
Button
Link
Icon Only
Small

Ghost Button

Standard

Button
Ghost
Ghost Button
Button
Ghost
Small
Ghost Button

Icon Only

Button
Ghost
Icon Only
Button
Ghost
Icon Only
Small

Spacing System

1280px and Up

Max-width: 1184px
24px
24px

1279px to 992px

Max-width: 992px
24px
24px

991px

Max-width: 100%
24px
24px

767px and Down

Max-width: 100%
16px
16px