Style Guide

This style guide provides a central location to make stylistic changes to your site.
New to webflow? Check out our getting started guide.

Colors

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

Typography

Note: Change the typography by setting the global styles for paragraphs and H1 - H6.
H1 Heading
Bold
Size: X px
Line Height: X px
Letter Spacing: X px

The quick brown fox jumps over the lazy dog

H2 Heading
Bold
Size: X px
Line - Height: X px
Letter - Spacing: X px

The quick brown fox jumps over the lazy dog

H3 Heading
Normal
Size: X px
Line - Height: X px
Letter - Spacing: X px

The quick brown fox jumps over the lazy dog

H4 Heading
Normal
Size: X px
Line Height: X px
Letter - Spacing: X px

The quick brown fox jumps over the lazy dog

H5 Heading
Normal
Size: X px
Line Height: X px
Letter - Spacing: X px
The quick brown fox jumps over the lazy dog
H6 Heading
Normal
Size: X px
Line Height: X px
Letter - Spacing: X px
The quick brown fox jumps over the lazy dog
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 - Heading Detail
Detail / 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.

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

Detail / 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 - Subtitle
Subtitle
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

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam dui, malesuada non faucibus hendrerit.
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

Don't miss out

A project by Nawras Ganim.

Copyright © 2024 Income. All Rights Reserved.