Design System

Design and build
visually.

A clean canvas with professional builder aesthetics. Bright backgrounds, confident blue accents, and crisp Inter typography for the modern web creator.

16 color tokens 12 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Light neutrals with a confident blue primary. 16 tokens across surfaces, text hierarchy, interaction states, and semantic feedback colors.

Canvas White
#ffffff
Primary page background
Off White
#f7f7f7
Secondary sections
Light Gray
#efefef
Borders, dividers
Medium Gray
#d1d5db
Disabled states
Dark Gray
#6b7280
Secondary text
Charcoal
#374151
Body text, labels
Deep Charcoal
#1f1f1f
Primary headings
Webflow Blue
#146ef5
Primary interactive
Blue Hover
#1259cc
Hover state
Blue Light
#dbeafe
Focus rings, selection
Blue Pale
#eff6ff
Active nav background
Success Green
#057a55
Published, success
Warning Amber
#d97706
Drafts, warnings
Error Red
#dc2626
Errors, destructive
Purple Accent
#7c3aed
CMS, premium features
Typography

Type Scale

Inter as the sole typeface. Clean geometric forms with careful weight and size variations for clear hierarchy across the builder interface.

Display-lg Design visually 60px / 1.1 / -0.025em
Display Build faster 48px / 1.2 / -0.025em
Heading Section heading 24px / 1.3 / -0.02px
Heading-sm Panel title 20px / 1.4 / 0.01px
Subheading Card subtitle 18px / 1.5 / 0.01px
Body Default body text for readable content 14px / 1.5 / 0.01px
Body-sm Secondary text, table cells 13px / 1.5 / 0.01px
Caption Meta info · Timestamps · Labels 11px / 1.5 / 0.05px

Font Stack

Primary Inter 400-700 · 11-20px
Mono ui-monospace / SFMono 400-700 · 12-24px · Code only
Fallback system-ui, -apple-system System default sans-serif
Layout

Spacing & Shapes

Base unit 4px. Comfortable density with generous breathing room. 12-step spacing scale, 6 border radius values.

Spacing Scale (4px base)

14px
28px
416px
624px
832px
1248px
1664px
2496px

Border Radius

sm 4px
default 6px
md 8px
lg 12px
xl 16px
full 9999px
Elevation

Surface System

Border-based elevation over shadows. Clean white surfaces with subtle gray borders for visual hierarchy.

Canvas White #ffffff
Off White #f7f7f7
Pure White #ffffff + border
Light Gray #efefef
Components

Button Variants

Primary action (Webflow Blue), secondary (outlined), and ghost variants for different interaction hierarchies in the builder.

Primary Button
Main call to action — publish, save, confirm
.btn-primary
Webflow Blue (#146ef5) background, white text, 6px radius. Use for the primary action in each context.
Secondary Button
Secondary actions, cancel, back
.btn-secondary
White background, Light Gray border, Deep Charcoal text. For less prominent actions.
Ghost Button
Tertiary actions, toolbar options
.btn-ghost
Webflow Blue text, no border. Hover adds Blue Pale background. For inline actions and toolbar items.
Input Field
Text input, form fields
.input
White background, Light Gray border, 6px radius. Focus uses Webflow Blue border with Blue Light ring.
Toolbar Button
Canvas tools, design panel actions
.btn-toolbar
T B I
4px radius, compact 32x32 size. Active state uses Blue Pale background with Webflow Blue text.
Guidelines

Do's & Don'ts

Do — Embrace
  • Canvas White (#ffffff) as primary background
  • Webflow Blue (#146ef5) for all interactive elements
  • Deep Charcoal (#1f1f1f) for headings and emphasis
  • 6px radius for buttons, 8px for cards and panels
  • 4px-based spacing with generous breathing room
  • Border-based elevation over heavy shadows
  • Inter for all text, system fallbacks only
Don't — Avoid
  • Webflow Blue for large background fills
  • Colors outside the defined palette for states
  • Text smaller than 11px for any content
  • Heavy drop shadows or decorative effects
  • Dense layouts without proper spacing
  • Error Red for non-error/destructive uses
  • Decorative or display fonts