Note: Change the colors through the swatches panel. This will change all locations where the color is used on the website. You can also import your colors directly from Figma and into Webflow

Neutral

This is our neutral color palette and forms the foundation of many UI elements. Gray is most commonly used across typography, dividers and backgrounds. We use 10 weights to cover various scenarios, you can customise these below.

#HEX

Main

This is our neutral color palette and forms the foundation of many UI elements. Gray is most commonly used across typography, dividers and backgrounds. We use 10 weights to cover various scenarios, you can customise these below.

#HEX

Typography

Note: Change the typography by setting the global styles for paragraphs and H1 - H6.

Typography - Sub Headings

Sub Heading / Large

Medium

Size: X px

Line - Height: X px

Letter - Spacing: X px

The quick brown fox jumps over the lazy dog

Sub Heading / Regular

Medium

Size: X px

Line - Height: X px

Letter - Spacing: X px

The quick brown fox jumps over the lazy dog

Sub Heading / Small

Medium

Size: X px

Line - Height: X px

Letter - Spacing: X px

The quick brown fox jumps over the lazy dog

Typography - Paragraph

Paragraph / Large

Normal

Size: X px

Line - Height: X px

Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Paragraph / Regular

Normal

Size: X px

Line - Height: X px

Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Paragraph / Small

Normal

Size: X px

Line - Height: X px

Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Typography - Label

Label / Large

Normal

Size: X px

Line - Height: X px

Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Label / Regular

Normal

Size: X px

Line - Height: X px

Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Label / Small

Normal

Size: X px

Line - Height: X px

Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Buttons

Note: You can change the hover and on pressed styles using the class selector

Small Buttons:

Rich Text Field

Note: Make sure you are changing styles when nested inside the rich text class. Otherwise your changes will apply globally.

Rich Text by Flowbase

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

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

Example List
Example List
Example List
Example List
Example List
Example List
Example List

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

Containers

Note: Containers are used to give your website a consistent width

Container / X Large

1440px Container

Container / Large

1280px Container

Container / Regular

1140px Container

Container / Small

960px Container

Container / X Small

740px Container

Sections

Note: Change the colors through the swatches panel. This will change all locations where the color is used on the website. You can learn more about global swatches on the Webflow University.

Section / X Large

144px Vertical Padding

Section / Large

120px Vertical Padding

Section / Regular

92px Vertical Padding

Section / Small

64px Vertical Padding

Section / XSmall

48px Vertical Padding

Text Weights

Note: Note: Text Weights are typically used as a combo class on text elements

Text Weight Black

Text Weight Bold

Text Weight Semi Bold

Text Weight Medium

Text Weight Normal

Text Weight Light

Text Weight Thin

Spacing

Note: These classes allow us to give elements different spacing without creating a new class

Margin Bottom / 4

4px on Bottom

Margin Bottom / 8

8px on Bottom

Margin Bottom / 12

12px on Bottom

Margin Bottom / 16

16px on Bottom

Margin Bottom / 20

20px on Bottom

Margin Bottom / 24

24px on Bottom

Margin Bottom / 28

28px on Bottom

Margin Bottom / 32

32px on Bottom

Margin Bottom / 36

36px on Bottom

Margin Bottom / 40

40px on Bottom

Margin Bottom / 44

44px on Bottom

Margin Bottom / 48

48px on Bottom

Margin Bottom / 56

56px on Bottom

Margin Bottom / 64

64px on Bottom

Margin Bottom / 72

72px on Bottom

Margin Bottom / 80

80px on Bottom

Margin Bottom / 88

88px on Bottom

Margin Bottom / 96

96px on Bottom

Interactions

Note: Change the colors through the swatches panel. This will change all locations where the color is used on the website. You can learn more about global swatches on the Webflow University.

Style Guide and License

Neutral

Main

Typography

H1 Heading

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

H2 Heading