Style Guide

This is a set of guidelines and strategies to help you build Webflow websites.

Colors

Manage recurring text and background colors.

Base Colors

Color 01
#826EFF
Color 02
#6a56e8
Color 03
#ff759e
Color 04
#ed637f
Neutral 01
#7d8a91
Neutral 02
#56626f

Semantic Colors

Text 01
#000000
Text 02
#4b5765
Text 03
#9ea4ad
Text 04
#dbdee4
BG 01
#ffffff
BG 02
#e7eaf0
BG 03
#dbdfe3
BG 04
#dadce3
Border 01
#dbdde3
Border 02
#a1adb5
Border 03
#dadce3
Border 04
#dadce3

State Colors

Success BG
#f1fffb
Success Border
#46a98d
Info BG
#e0f4ff
Info Border
#3fb3e8
Warning BG
#fffae4
Warning Border
#ff7500
Danger BG
#fff5f6
Danger Border
#ff365e

Typography

HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.

Heading 1

Sample text helps you understand how real text may look

Heading 2

Sample text helps you understand how real text may look

Heading 3

Sample text helps you understand how real text may look

Heading 4

Sample text helps you understand how real text may look

Heading 5
Sample text helps you understand how real text may look
Heading 6
Sample text helps you understand how real text may look
Paragraph

Sample text helps you understand how real text may look

Link
Link
Blockquote
Sample text helps you understand how real text may look
Ordered List
  1. Item list
  2. Item list
  3. Item list
Unordered List
  • Item list
  • Item list
  • Item list

Sizing

Manage recurring text and background colors.

Spacing

Spacing 2
Spacing 4
Spacing 6
Spacing 8
Spacing 12
Spacing 16
Spacing 20
Spacing 24
Spacing 32
Spacing 40
Spacing 48
Spacing 64
Spacing 80
Spacing 96
Spacing 120

Buttons

...

Buttons

Button LargeButton LargeButton SmallButton Small

Ticker

A ticker is used to present quick updates, announcements, or highlights without interrupting the main content flow.

Your form has been submitted successfully.
Your form has been submitted successfully.
Please review the information before continuing.
Something didn’t work as expected. Try again later or contact support if the issue persists.

Empty State

Appears when there is no data or content to display. Its purpose is to inform the user, reduce confusion, and provide guidance on what will happen next or what action to take.

Nothing here yet

Content will show up here once they’re published.