style guide / classes

Project Set Up

*Note: Figma set up has Desktop, Tablet and Mobile side by side.
In Webflow we need to adjust Fonts for specific breakpoints.

Project set up

Global Font Styles

Jumbo

Jumbo H

All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings

Heading 5

All H6 Headings

Heading 6

All Paragraphs

At length one of them called out in a clear, polite, smooth dialect, not unlike...

Text Big

At length one of them called out in a clear, polite, smooth dialect, not unlike...

Text Small

At length one of them called out in a clear, polite, smooth dialect, not unlike...

All Quotes

Block Quote

Label Small

This is some text inside of a div block.

Label

This is some text inside of a div block.

Label Big

This is some text inside of a div block.

All Links

Text Link

All Unordered Lists

This is a dog
This is a dog
This is a dog

All Ordered Lists

This is a dog
This is a dog
This is a dog

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.

‍

This is a link

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.

Lexer employees at a team event in Australia

Project set up

Global Background Classes

Pods

Pod Large

60px border radius, 80px padding

Pod Small

30 px border radius, 40px padding

Cards

Card

Add the shadow, background and padding separately using utility classes.

Card Two

Card

Add the shadow, background and padding separately using utility classes.

Primary / Teal

BG Teal

Change the parent class color

BG Dark Teal

Change the parent class color

BG Bright Teal

Change the parent class color

Primary / Grey

BG Dark Grey

Change the parent class color

BG Light Grey

Change the parent class color

Primary / Fawn

BG Dark Fawn

Change the parent class color

BG Fawn

Change the parent class color

BG Light Fawn

Change the parent class color

Primary / Blue

BG Bright Blue

Change the parent class color

BG Royal Blue

Change the parent class color

Primary / Green

BG Mint

Change the parent class color

BG Lime

Change the parent class color

BG Neon Green

Change the parent class color

Secondary / Blue

BG Blue 100

Change the parent class color

BG Blue 300

Change the parent class color

BG Blue 500

Change the parent class color

Secondary / Mauve

BG Mauve 100

Change the parent class color

BG Mauve 300

Change the parent class color

BG Mauve 500

Change the parent class color

Neutrals

BG Neutral

Change the parent class color

BG Neutral 100

Change the parent class color

BG Neutral 200

Change the parent class color

BG Neutral 300

Change the parent class color

BG Neutral 400

Change the parent class color

BG Neutral 500

Change the parent class color

BG Neutral 600

Change the parent class color

States Colors

BG Error State

Change the parent class color

BG Success State

Change the parent class color

BG Warning State

Change the parent class color

Shadows

Shadow Primary

Change the parent class color

Shadow Card

Change the parent class color

Project set up

Text Colors

Global Text Colors

Body

Back-end of third quarter pushback.

All Paragraphs

We try your eye, but can you change everything? in an ideal world nor can we try some other colours maybe just do what you think.

All Links

Text Link

Neutral Text Colors

Text Neutral

Your trusted CDP partner

Text Neutral 200

Your trusted CDP partner

Text Neutral 400

Your trusted CDP partner

Text Neutral 600

Your trusted CDP partner

Brand Text Colors

Text Dark Grey

Your trusted CDP partner

Text Teal

Your trusted CDP partner

Text Mauve 300

Your trusted CDP partner

Text Bright Blue

Your trusted CDP partner

Project set up

Buttons

Button

Button Small

Button Variant

Button Variant Light

Button Variant Small

Button Variant Light Small

Touch me

Slider Button Left

Slider Button Right

Button Link

Text Link

blog-social-btn

twitter

Project set up

Interactions

Hover Scale

Project set up

Inputs

Note, please copy the code from Page Settings only on the pages that will include forms in order to have all custom forms working properly.

Input-custom

Email Input Label

Input-custom

Name Input Label

Input-custom

Phone Input Label

Input-custom

Select Input

Country Input Label

Input-custom

Text Area

Checkbox Field

Radio Button

Radio

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Project Set Up

Container

Project Set Up

Section

Example Set Up for a Default Section

Combo Classes

*Note: Figma set up has Desktop, Tablet and Mobile side by side. For Webflow we need to adjust Fonts for specific break points.

Combo Classes