Webflow DESIGN.md

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

1. Designer-first canvas. UI implication: canvas + properties layout, not code-only.
2. Moderate radius (8-16px). UI implication: sit between geometric (Vercel) and rounded (Mintlify).
3. WF Visual Sans Variable. weight 600 / 500 / 400. UI implication: don't substitute.
4. Agentic positioning. UI implication: AI features first-class in nav.
5. 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

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.

---

Verified: 2026-05-08 (omd:migrate run 63 — Apple-tier) Tier 1 sources: https://webflow.com home + /pricing (live DOM via playwright — Primary #146ef5 Webflow Blue + #fff text 4px / 51px / 16×24 / 16px·500 + A11y skip-nav 8px / 36px + Top banner 0px Blue strip + Made-in-Webflow credit pill 1440px + body #080808 Webflow Ink ultra-dark warm-cast near-black). Tier 2 sources: styles.refero.design / getdesign.md — no record. Tier 2 (Philosophy/founders/YC): Wikipedia (Webflow), Acquired Podcast (Vlad Magdalin), Webflow blog (How Webflow got into YC after Nov 2012 rejection), Strixus, Contrary Research, Tracxn, Frederick AI. Style ref: notion. Conflicts unresolved: none. Earlier addition: Webflow Blue #146ef5 + Webflow Ink #080808 body + 1440px credit-pill + 8px A11y sub-tier missed by prior 3px-nav-only pass.

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

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.

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

1. Use Webflow Blue #146ef5 only as the primary CTA color — secondary accents handle visual variety and category coding.
2. The three secondary colors (purple/pink/green) work as a SET — use them together for tier comparisons or feature categories, not in isolation.
3. Keep components on white — Webflow's marketing aesthetic is bright and airy, never dark mode for the marketing surface.
4. 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.
5. Use WF Visual Sans Variable weight 600 for headlines and weight 500 for buttons. Body uses weight 400.