Project Set Up
*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
Trap
Global Font Styles
Jumbo H
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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.
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.
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.
Block Quote
- This is a dog
- This is a dog
- This is a dog
- This is a dog
- This is a dog
- This is a dog
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.
Global Background Classes
Primary / Navy
Secondary / Soft Yellow
Secondary / Purple
Secondary / Blue
Neutrals
States Colors
Text Colors
Global Text Colors
Back-end of third quarter pushback.
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.
Neutral Text Colors
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Brand Text Colors
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Buttons
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.
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.
Paddings
Margins
Bottom Margins
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Top Margins
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Left
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Right
Back-end of
Back-end of
Back-end of
Back-end of
Back-end of
Max Width
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.
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.
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.
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.
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. It's all the damn same to me mate. Tomato, tomato. Potato, potato. All gravy, baby.
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. It's all the damn same to me mate. Tomato, tomato. Potato, potato. All gravy, baby.
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. It's all the damn same to me mate. Tomato, tomato. Potato, potato. All gravy, baby.
Text Alignment
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. It's all the damn same to me mate. Tomato, tomato. Potato, potato. All gravy, baby.
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. It's all the damn same to me mate. Tomato, tomato. Potato, potato. All gravy, baby.
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. It's all the damn same to me mate. Tomato, tomato. Potato, potato. All gravy, baby.
Container
Flex Overrides
Global Classes
*Note: Figma set up has Desktop, Tablet and Mobile side by side. On Webflow we need to adjust Fonts on specific brakepoints.
Column
Button Wrapper
Example of the column class
Pretty handy for positioning in the grid.