Design tokens (YAML front matter)

name: Webflow
colors:
  ink: '#080808'
  primary: '#146ef5'
  blue-400: '#3b89ff'
  blue-300: '#006acc'
  button-hover: '#0055d4'
  purple: '#7a3dff'
  pink: '#ed52cb'
  green: '#00d722'
  orange: '#ff6b00'
  yellow: '#ffae13'
  red: '#ee1d36'
  gray-800: '#222222'
  gray-700: '#363636'
  gray-500: '#5a5a5a'
  gray-300: '#ababab'
  border: '#d8d8d8'
  border-hover: '#898989'
typography:
  display-hero:
    fontSize: 80px
    fontWeight: 600
    lineHeight: 1.04
    letterSpacing: '-0.8px'
    use: Hero headline
  section:
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.04
    use: Section heading
  subheading:
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.3
    use: Sub-heading
  feature-title:
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
    use: Feature title
  body:
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    use: Body text
  body-standard:
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: '-0.16px'
    use: Standard body
  button:
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: '-0.16px'
    use: Button label
  uppercase-label:
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 1.5px
    use: Uppercase label
  caption:
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    use: Caption
  badge:
    fontSize: 12px
    fontWeight: 550
    lineHeight: 1.2
    use: Badge uppercase
  micro:
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 1px
    use: Micro uppercase
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  full: 9999px
spacing:
  xs: 4
  sm: 8
  md: 12
  base: 16
  lg: 24
  xl: 32
components:
  button-primary:
    type: button
    backgroundColor: '#146ef5'
    textColor: '#ffffff'
    rounded: 4px
    padding: 8px 16px
    typography: 16px/550 WF Visual Sans Variable
    use: Primary CTA, Webflow Blue
  button-transparent:
    type: button
    textColor: '#080808'
    rounded: 4px
    padding: 8px 16px
    typography: 16px/550 WF Visual Sans Variable
    use: Text button, hover translate 6px
  button-circle:
    type: button
    backgroundColor: '#ffffff'
    textColor: '#080808'
    rounded: 9999px
    padding: 12px
    use: Circular icon button
  input-default:
    type: input
    backgroundColor: '#ffffff'
    textColor: '#080808'
    rounded: 4px
    padding: 8px 12px
    typography: 16px/500 WF Visual Sans Variable
    use: 'Form input, 1px #d8d8d8, focus #146ef5'
  card-standard:
    type: card
    backgroundColor: '#ffffff'
    rounded: 8px
    padding: 24px
    use: 'Content card, 1px #d8d8d8 border'
  card-compact:
    type: card
    backgroundColor: '#ffffff'
    rounded: 4px
    padding: 16px
    use: 'Smaller utility container, 1px #d8d8d8'
  badge-blue:
    type: badge
    backgroundColor: '#146ef5'
    textColor: '#ffffff'
    rounded: 4px
    padding: 2px 8px
    typography: 12px/550 WF Visual Sans Variable
    use: Solid blue badge
  badge-tinted:
    type: badge
    textColor: '#146ef5'
    rounded: 4px
    padding: 2px 8px
    typography: 12px/550 WF Visual Sans Variable
    use: Subtle tinted badge, 10% blue bg
  badge-micro:
    type: badge
    textColor: '#080808'
    rounded: 4px
    padding: 2px 6px
    typography: 10px/600 WF Visual Sans Variable
    use: Uppercase micro-label, +1px tracking
fonts:
  roles:
    sans: WF Visual Sans Variable
    mono: Inconsolata

Design System Inspiration of Webflow

Overview

Visual Theme & Atmosphere

Webflow’s website is a visually rich, tool-forward platform that communicates “design without code” through clean white surfaces, the signature Webflow Blue (#146ef5), and a rich secondary color palette (purple, pink, green, orange, yellow, red). The custom WF Visual Sans Variable font creates a confident, precise typographic system with weight 600 for display and 500 for body.

Key Characteristics:

White canvas with near-black (#080808) text
Webflow Blue (#146ef5) as primary brand + interactive color
WF Visual Sans Variable — custom variable font with weight 500–600
Rich secondary palette: purple #7a3dff, pink #ed52cb, green #00d722, orange #ff6b00, yellow #ffae13, red #ee1d36
Conservative 4px–8px border-radius — sharp, not rounded
Multi-layer shadow stacks (5-layer cascading shadows)
Uppercase labels: 10px–15px, weight 500–600, wide letter-spacing (0.6px–1.5px)
translate(6px) hover animation on buttons

Primary tasks

Design a site on a canvas instead of writing code
Start a new project from the template gallery
Publish a project and open its live URL

Brand Narrative

Webflow was founded 2013 in San Francisco by Vlad Magdalin (CEO) + younger brother Sergie Magdalin + ex-Intuit colleague Bryant Chou (Webflow — Wikipedia, Acquired Podcast — Building Webflow w/ Vlad Magdalin). Vlad quit Intuit in 2012; Sergie + Chou joined that same year. Famously rejected by Y Combinator November 2012, then published working prototype on Hacker News March 2013 → 10,000+ beta sign-ups, eventually graduating from YC’s accelerator in 2013 (Webflow blog — How Webflow got into Y Combinator, Strixus — $4B Turnaround Webflow YC). Visual web design tool that competed with WordPress for marketing-site builders. Series C $120M (March 2022) at $4B valuation with Khosla Ventures, Y Combinator, Tim Draper, Accel, CapitalG, Silversmith Capital Partners, Draper Associates — total ~$334.9M raised as of October 2023 (Contrary Research — Webflow, Tracxn — Webflow). The 2024-2025 pivot to “agentic web platform” positions Webflow for the AI-driven web era while preserving the canvas-first design DNA — confirmed via live <title> “Webflow: The agentic web platform for modern businesses” 2026-05.

Principles

Designer-first canvas. UI implication: canvas + properties layout, not code-only.
Moderate radius (8-16px). UI implication: sit between geometric (Vercel) and rounded (Mintlify).
WF Visual Sans Variable. weight 600 / 500 / 400. UI implication: don’t substitute.
Agentic positioning. UI implication: AI features first-class in nav.
Real customer sites as proof. UI implication: lead with customer showcases.

Personas

Personas are fictional archetypes informed by Webflow user segments (independent designers, agency owners, marketing teams), not individual people.

Sofia Russo, 33, Milan. Indie designer. Webflow for client marketing sites.

Henrik Sondergaard, 41, Copenhagen. Agency founder. Multi-client Webflow projects.

Marcus Chen, 38, San Francisco. Marketing lead at SaaS. Webflow for landing pages without engineering.

Colors

Primary

Near Black (#080808): Primary text
Webflow Blue (#146ef5): --_color---primary--webflow-blue, primary CTA and links
Blue 400 (#3b89ff): --_color---primary--blue-400, lighter interactive blue
Blue 300 (#006acc): --_color---blue-300, darker blue variant
Button Hover Blue (#0055d4): --mkto-embed-color-button-hover

Secondary Accents

Purple (#7a3dff): --_color---secondary--purple
Pink (#ed52cb): --_color---secondary--pink
Green (#00d722): --_color---secondary--green
Orange (#ff6b00): --_color---secondary--orange
Yellow (#ffae13): --_color---secondary--yellow
Red (#ee1d36): --_color---secondary--red

Neutral

Gray 800 (#222222): Dark secondary text
Gray 700 (#363636): Mid text
Gray 300 (#ababab): Muted text, placeholder
Mid Gray (#5a5a5a): Link text
Border Gray (#d8d8d8): Borders, dividers
Border Hover (#898989): Hover border

Shadows

5-layer cascade: rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px

Typography

Font: `WF Visual Sans Variable`, fallback: `Arial`

Role	Size	Weight	Line Height	Letter Spacing	Notes
Display Hero	80px	600	1.04	-0.8px
Section Heading	56px	600	1.04	normal
Sub-heading	32px	500	1.30	normal
Feature Title	24px	500–600	1.30	normal
Body	20px	400–500	1.40–1.50	normal
Body Standard	16px	400–500	1.60	-0.16px
Button	16px	500	1.60	-0.16px
Uppercase Label	15px	500	1.30	1.5px	uppercase
Caption	14px	400–500	1.40–1.60	normal
Badge Uppercase	12.8px	550	1.20	normal	uppercase
Micro Uppercase	10px	500–600	1.30	1px	uppercase
Code: Inconsolata (companion monospace font)

Layout

Spacing: fractional scale (1px, 2.4px, 3.2px, 4px, 5.6px, 6px, 7.2px, 8px, 9.6px, 12px, 16px, 24px)
Radius: 2px, 4px, 8px, 50% — conservative, sharp
Breakpoints: 479px, 768px, 992px

Responsive: 479px, 768px, 992px

Elevation & Depth

Depth: 5-layer cascading shadow system

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

shadow.cascade: rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px

Motion & Easing

No motion duration or easing token is promoted. The capture bundle for this reference records no transition or animation property, and no official source consulted publishes a motion scale. The behaviour described below was observed; treat any exact duration or curve as a local extension until a component-level official source verifies it.

Standard cubic-bezier. prefers-reduced-motion: reduce removes hover transitions.

Components

Buttons

Transparent

Background: transparent
Text: #080808
Radius: 4px
Padding: 8px 16px
Font: 16px / 550 / WF Visual Sans Variable
Hover: translate(6px)
Use: Default text-style button — signature horizontal nudge on hover

Blue Primary

Background: #146ef5
Text: #ffffff
Radius: 4px
Padding: 8px 16px
Font: 16px / 550 / WF Visual Sans Variable
Use: Primary CTA — Webflow Blue

White Circle

Background: #ffffff
Text: #080808
Radius: 50%
Padding: 12px (icon button)
Use: Circular icon button

Inputs

Default

Background: #ffffff
Text: #080808
Border: 1px solid #d8d8d8
Radius: 4px
Padding: 8px 12px
Font: 16px / 500 / WF Visual Sans Variable
Focus: border #146ef5
Use: Inferred from §1-§2 baseline (no explicit DS variant in source).

Cards

Standard

Background: #ffffff
Border: 1px solid #d8d8d8
Radius: 8px
Padding: 24px
Use: Default content card — conservative sharp radius

Compact

Background: #ffffff
Border: 1px solid #d8d8d8
Radius: 4px
Padding: 16px
Use: Smaller utility container

Badges

Blue Badge

Background: #146ef5
Text: #ffffff
Radius: 4px
Padding: 2px 8px
Font: 12.8px / 550 / WF Visual Sans Variable
Use: Solid blue badge

Tinted

Background: rgba(20, 110, 245, 0.1) (Blue-tinted at 10%)
Text: #146ef5
Radius: 4px
Padding: 2px 8px
Font: 12.8px / 550 / WF Visual Sans Variable
Use: Subtle tinted badge

Uppercase Micro

Background: transparent
Text: #080808
Radius: 4px
Padding: 2px 6px
Font: 10px / 500-600 / WF Visual Sans Variable, uppercase, +1px tracking
Use: Micro-label uppercase badge

States

State	Treatment
Empty (no projects)	“Create new project” + template gallery
Empty (canvas)	“Add a section” CTA
Loading (project opening)	Skeleton canvas
Loading (publishing)	Build progress with status
Error (publish)	Specific cause + retry
Error (CMS)	Field-level inline message
Success (published)	Live URL + analytics preview
Success (saved)	Implicit
Skeleton (project list)	8-16px placeholders
Disabled (free plan limit)	Upgrade link
Loading (long task)	Persistent progress

Do’s and Don’ts

Do

Set WF Visual Sans Variable as the type face, using weight 600 for headlines (e.g. the 80px / -0.8px Display Hero), 500 for buttons, and 400 for body
Reserve Webflow Blue (#146ef5) for the primary CTA, links, and focus borders on a white (#ffffff) canvas with near-black (#080808) text
Keep border-radius conservative and sharp on the 2px / 4px / 8px scale — 4px for buttons, inputs, and badges, 8px for standard cards
Apply the signature translate(6px) horizontal nudge on button hover, timed with motion-fast (150ms)
Deploy purple (#7a3dff), pink (#ed52cb), and green (#00d722) together as a SET for category coding and tier comparison — e.g. a 4px top-edge color bar on feature cards
Build depth with the 5-layer cascading shadow stack rather than a single flat drop shadow

Don’t

Round functional elements beyond 8px, or make them pill-shaped or fully square — radius stays moderate between geometric and rounded
Use the secondary accents (purple #7a3dff, pink #ed52cb, green #00d722, etc.) on primary CTAs — those stay Webflow Blue #146ef5
Use a single secondary accent in isolation; the purple/pink/green trio only reads correctly when used together as category coding
Render the marketing surface in dark mode — keep it bright and airy on white (#ffffff)
Substitute another typeface for WF Visual Sans Variable or drift off its 400/500/600 weights
Write copy like “Revolutionary no-code” or aggressive Wix-comparison framing — both are forbidden under the agentic-web-platform voice

Voice & Tone

Webflow’s voice is agentic-web-platform and design-tool-confident. “The agentic web platform for modern businesses” — recently pivoted from “no-code design tool” to “agentic web platform” positioning. Marketing copy emphasizes professional designers + business outcomes.

Context	Tone
CTA	Verb. “Get started for free”, “Talk to sales”, “Try Webflow”
Marketing	Customer-quote-driven. Real customer sites as social proof
Documentation	Visual-heavy, screenshot-driven
Error	Specific. “Element constraints conflict. Adjust width or layout.”

Voice samples

Marketing tagline: “The agentic web platform for modern businesses”

Forbidden phrases. “Revolutionary no-code”. Aggressive Wix-comparison framing.

Agent Prompt Guide

Quick Color Reference

Primary CTA: Webflow Blue (#146ef5)
Heading / body text: Near Black (#080808)
Muted text: ~#666666 (estimated)
Page background: White (#ffffff)
Border default: #d8d8d8
Secondary accent: Purple (#7a3dff), Pink (#ed52cb), Green (#00d722)
These three secondary accents are used for category coding (e.g., feature cards, plan tiers) — never as primary CTAs.

Example Component Prompts

“Build a Webflow primary button: bg #146ef5, white text, ~8px border-radius, 12px 24px padding, WF Visual Sans Variable weight 600 16px. Hover: bg darkens ~10%.”
“Create a feature card with category accent: white bg, 1px solid #d8d8d8 border, 16px radius. Use the secondary palette (purple #7a3dff / pink #ed52cb / green #00d722) as a top-edge color bar (4px tall) to indicate category. Title 20px weight 600 #080808, body 14px weight 400.”
“Design a navigation header: white sticky bar, Webflow logo left, link nav (14px weight 500 #080808, hover to #146ef5), Webflow Blue ‘Sign up’ CTA right. Subtle 1px bottom border on scroll.”
“Create a plan tier comparison: 3 columns, each card with white bg, 16px radius. The ‘recommended’ tier gets a colored top border (#146ef5 for default, #7a3dff for premium) and a ‘Most Popular’ badge using that same color.”

Iteration Guide

Use Webflow Blue #146ef5 only as the primary CTA color — secondary accents handle visual variety and category coding.
The three secondary colors (purple/pink/green) work as a SET — use them together for tier comparisons or feature categories, not in isolation.
Keep components on white — Webflow’s marketing aesthetic is bright and airy, never dark mode for the marketing surface.
Border-radius stays moderate (8-16px) — never pill or fully square. Webflow sits between the geometric (Vercel/Linear) and rounded (Mintlify) ends of the spectrum.
Use WF Visual Sans Variable weight 600 for headlines and weight 500 for buttons. Body uses weight 400.

Palette

At a glance

Design System · Webflow