01 / Colors

Color Palette

Primary
Near Black
#080808
Webflow Blue
#146ef5
Blue 400
#3b89ff
Secondary
Purple
#7a3dff
Pink
#ed52cb
Green
#00d722
Orange
#ff6b00
Yellow
#ffae13
Red
#ee1d36
Neutral
Gray 800
#222222
Gray 700
#363636
Mid Gray
#5a5a5a
Gray 300
#ababab
Border
#d8d8d8
02 / Typography

Typography

Display Hero
WF Visual Sans — 80px / 600 / 1.04 / -0.8px
Sub-heading
WF Visual Sans — 32px / 500 / 1.30
Body — Smarter sites start here. Build your next project with the web platform.
WF Visual Sans — 20px / 400 / 1.50
Button Label
WF Visual Sans — 16px / 500 / 1.60 / -0.16px
UPPERCASE LABEL
WF Visual Sans — 15px / 500 / uppercase / +1.5px
MICRO LABEL
WF Visual Sans — 10px / 600 / uppercase / +1px
03 / Buttons

Buttons

Get started
Primary Blue
Contact
Outlined
NEW
Badge

Hover to see translate(6px).

04 / Cards

Cards

Design

Build visually with a flexible canvas and production-ready code output.

CMS

Create dynamic content with a powerful content management system.

Interactions

Craft complex animations without writing a single line of code.

05 / Forms

Forms

Default
Focus (blue ring)
Error
06 / Spacing

Spacing

4
8
12
16
24
07 / Radius

Radius

2px
4px
8px
50%
08 / Elevation

Depth

Flat
Border only
5-Layer
Cascading shadow stack