Styleguide

Typography

*Note: Figma set up has Desktop, Tablet and Mobile side by side.
On Webflow we need to adjust Fonts on specific brakepoints.

Upload & Apply Fonts

Body (All Pages)

Trap

Global Styles

Jumbo

Jumbo H

All H1 Headings

Heading 1

Heading XXL

All H2 Headings

Heading 2

Heading XL

All H3 Headings

Heading 3

Heading L

All H4 Headings

Heading 4

Heading XS

All H5 Headings

Heading 5

Heading XXS

All H6 Headings

Heading 6

Heading 3XS

Text XL Bold

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.

Text XL

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

Text Regular - Bold

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.

Text S

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.

Text XS

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 Quotes

Block Quote

Label XS

This is some text inside of a div block.

Label

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

Body Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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.

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..”

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Heading

Global Background Classes

Primary / Navy

Change the parent class color

BG Primary Blue

Change the parent class color

BG Secondary Pink

Change the parent class color

BG Navy 300

Secondary / Blue

Change the parent class color

BG Blue 100

Change the parent class color

BG Blue 200

Change the parent class color

BG Blue 300

Neutrals

Change the parent class color

BG Neutral

Change the parent class color

BG Gray 50

Change the parent class color

BG Gray 100

Change the parent class color

BG Gray 200

Change the parent class color

BG Gray 300

Change the parent class color

BG Gray 400

Change the parent class color

BG Gray 500

Change the parent class color

BG Gray 600

Change the parent class color

BG Gray 700

Change the parent class color

BG Gray 800

Change the parent class color

BG Gray 900

States Colors

Change the parent class color

BG Error State

Change the parent class color

BG Success State

Change the parent class color

BG Neutral 600

Card Colors

Change the parent class color

BG Error State

Change the parent class color

BG Success State

Change the parent class color

BG Neutral 600

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

Back-end of third quarter pushback.

Text Neutral 50

Back-end of third quarter pushback.

Text Neutral 100

Back-end of third quarter pushback.

Text Neutral 200

Back-end of third quarter pushback.

Text Neutral 300

Back-end of third quarter pushback.

Text Neutral 400

Back-end of third quarter pushback.

Text Neutral 500

Back-end of third quarter pushback.

Text Neutral 600

Back-end of third quarter pushback.

Text Neutral 700

Back-end of third quarter pushback.

Brand Text Colors

Text Navy 100

Back-end of third quarter pushback.

Text Navy 200

Back-end of third quarter pushback.

Text Navy 300

Back-end of third quarter pushback.

Buttons

Button

Touch me

Button

Touch me

Button

Free Preview

Button

Products

Container

Section

Example Set Up for a Default Section

Combo Classes

*Note: Figma set up has Desktop, Tablet and Mobile side by side. On Webflow we need to adjust Fonts on specific brakepoints.

Combo Classes

Paddings

Padding XXS

Change the parent class padding

Padding XS

Change the parent class padding

Padding S

Change the parent class padding

Padding M

Change the parent class padding

Padding L

Change the parent class padding

Padding XL

Change the parent class padding

Padding XXL

Change the parent class padding

Padding 3XL

Change the parent class padding

No Padding

Change the parent class padding

Combo Classes

Margins

Margin XXS

Back-end of third quarter pushback.

Margin XS

Back-end of third quarter pushback.

Margin S

Back-end of third quarter pushback.

Margin M

Back-end of third quarter pushback.

Margin L

Back-end of third quarter pushback.

Margin XL

Back-end of third quarter pushback.

Margin XXL

Back-end of third quarter pushback.

Margin 3XL

Back-end of third quarter pushback.

No Margin

Back-end of third quarter pushback.

Combo Classes

Text Alignment

Text Left

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.

Text Center

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.

Text Right

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.

Combo Classes

Container

Grid

Change the Container Grid class Grid settings

Combo Classes

Flex Overrides

Flex Center

Flex Left

Flex Right

Flex Stretch

Flex Space Between

Flex Space Around

Global Classes

*Note: Figma set up has Desktop, Tablet and Mobile side by side. On Webflow we need to adjust Fonts on specific brakepoints.

Global Classes

Column

Example of the column class

Pretty handy for positioning in the grid.

Touch me

Column

Example of the column class

Pretty handy for positioning in the grid.

Touch me

Column

Example of the column class

Pretty handy for positioning in the grid.

Touch me

Global Classes

Button Wrapper

Example of the column class

Pretty handy for positioning in the grid.

Button Wrapper

Touch me Touch me

Global Classes

Main Wrapper

Global Classes

Icons

Icon S

Icon M

Icon L

Global Classes

Swiper

{Component Name} Swiper

Swiper Wrapper

{Component Name} List

Swiper Slide

{Component Name} Item

No items found.

Global Classes

CMS Collections Set Up

No items found.

Global Classes

Overflow Hidden

Global Classes

Relative

Global Classes

Z 99

Global Classes

Z 99

What’s a Rich Text element?

sadasdasd
asdasdasd
asdas

Static and dynamic content editing

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.

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.

What’s a Rich Text element?

<p class="notes-wrapper">💡 TIP: 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.</p>

Static and dynamic content editing

A rich text element can <span class="zoom-in-only-icon">.</span> 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!

"safafagag

‍

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.

Beginners

What you will get: