Limitless Style Guide

Sections

Colors

Primary
Hex:
#ed7a07
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:
#b34219
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

Display Large

Display Small

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text Styles

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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.

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 Light (300)

Weight Regular (400)

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 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.

Modes

Light Mode

By default everything on the site is in Light Mode. Background colors are white and text is black.

Dark Mode

Apply "Dark" class to a page or element to make it dark mode. Dark class changes the background and text color. Not all text or backgrounds will inherit colors from the "Dark" class. For example, when making a section with a form dark, you must apply the "Dark" class to both the form field and the form field label.