--- 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 `` "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` | 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"* <!-- verified: webflow.com homepage 2026-05 --> **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.