Webflow

Overview

Webflow is the agentic web platform that democratizes professional web creation for modern businesses, designers, and developers. The brand embodies a 'Technical Clarity' aesthetic—combining the precision of enterprise software with the accessibility of a visual builder. The interface prioritizes information density without cognitive overload, using a clean white canvas (rgb(255, 255, 255)) anchored by a vibrant Webflow Blue primary accent (rgb(20, 110, 245)) that signals actionability and trust. The emotional response is one of empowerment: users feel capable of building enterprise-grade websites without traditional development bottlenecks.

Webflow's voice is confident, direct, and solution-oriented. The brand speaks in active verbs and concrete outcomes: 'Build your brand. Rank in AI search. Drive real revenue.' Vocabulary favors business impact over technical jargon—'growth engine' over 'optimization framework,' 'AEO' (AI-Enabled Optimization) as a branded capability. The tone is never breathless or hyperbolic; instead, it grounds claims in tangible features (CMS, hosting, analytics) and customer proof points. Example sentence in brand voice: 'With Webflow, we've significantly improved organic traffic, SEO, and conversions—from CMO to designer, everyone wins.'

Colors

The Webflow color system operates on a 'Accent-Driven Minimalism' model: a predominantly neutral surface stack (white, grays from #f0f0f0 to #080808) is punctuated by a single, unmissable primary accent—Webflow Blue (#146ef5, rgb(20, 110, 245))—that appears on all CTAs, focus states, and brand-critical interactions. This blue is the signature of the platform; it must never be diluted or replaced in core UI patterns.

Primary (#146ef5) is deployed on 'Start for free' buttons, navigation highlights, input focus rings (0 0 0 3px rgba(20, 110, 245, 0.15)), and active states. Secondary colors (Purple #7a3dff for advanced features, Orange #ff6b00 for warnings/urgency, Green #00d722 for success) are used sparingly in feature cards, badges, and status indicators—never competing with primary for at

Typography

Webflow's type system uses WF Visual Sans Variable (a proprietary variable font optimized for screen legibility) across all scales, creating a unified, modern aesthetic. The hierarchy is steep and intentional: Display (74px, 600 weight, -0.02em tracking) commands hero sections; Headline-lg (40px, 600 weight) anchors major sections; Body-md (16px, 400 weight, 24px line-height) is the default reading size for all descriptive copy. The 600-weight is reserved for headings and labels; body copy is always 400-weight to maintain readability at small sizes. Letter-spacing is negative only at display scales (tightening large text for visual impact) and slightly positive at label scales (0.01em to 0.05em) to aid scanning. When small labels (12px) appear over busy backgrounds or gradient overlays, ap

Layout

Webflow uses a 12-column fluid grid with a maximum container width of 1280px (matching the CSS variable --_layout---grid--gap-main). The page rhythm is built on a 24px gutter (md spacing) between columns and 40px (lg spacing) between major sections. The hero section spans full-width with a light blue background gradient (from #fafcff to #e8eaed) that provides visual separation without harsh contrast. White space is generous: section padding is consistently lg (40px) on desktop, reducing to md (24px) on tablet. Cards and containers use md (24px) internal padding with 12px (sm) gaps between nested elements. The grid is responsive: at tablet breakpoints (768px), gutter reduces to 16px; at mobile (< 480px), gutter becomes 12px and container padding reduces to sm (12px). All text content mainta

Elevation & Depth

Webflow employs a subtle shadow system to create depth without visual heaviness, reflecting the brand's 'Technical Clarity' aesthetic. Elevation is achieved through two primary shadow values: md (0 4px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08)) for standard cards and interactive elements, and lg (0 16px 40px rgba(0,0,0,0.12)) for modals and elevated overlays. The base surface (white, #ffffff) has no shadow; cards and containers at surface-container-lowest (#f0f0f0) receive md shadow to lift them 1 level. On hover, cards transition to surface-container-high (#d8d8d8) and receive lg shad

Shapes

Webflow's shape philosophy is 'Soft-Technical'—rounded corners are present but restrained, signaling approachability without sacrificing professional credibility. Buttons use 4px border-radius (0.25rem, DEFAULT), creating a subtle softness that feels modern without being playful. Cards and containers use 8px (lg, 1rem), providing enough rounding to feel contemporary while maintaining clear geometry. Input fields use 6px (md, 0.75rem), slightly more rounded than buttons to indicate they are receptive surfaces. Chips and badges use full (9999px) border-radius for their pill-shaped affordance, ma

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use backgroundColor: {colors.primary} (#146ef5), textColor: white, padding: 12px 24px, height: 48px, rounded: 4px, and typography: label-md (14px, 500 weight). On hover, backgroundColor transitions to {colors.primary-fixed-dim} (#0055d4) with a 150ms ease transition. On active/pressed, apply box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) to create a pressed effect. Secondary buttons (button-secondary) use transparent backgroundColor, textColor: {colors.primary}, a 1px border at outline-variant (#ababab), and the same padding/height. On hover, backgroundColor becomes surface-container-high (#d8d8d8). Ghost buttons (for tertiary actions) use backgroundColor: rgba(20, 110, 245, 0.08) and textColor:

Do's and Don'ts

**Do**

• Do use Webflow Blue (#146ef5) exclusively for primary CTAs, focus rings, and brand-critical interactions—it is the signature of the platform.
• Do maintain strict neutral surfaces (white #ffffff, grays #f0f0f0–#d8d8d8) to ensure the primary accent stands out and reduces cognitive load.
• Do apply the md shadow (0 4px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08)) to all cards and containers to create subtle depth without visual clutter.
• Do use 24px (md spacing) as the default gutter and section separator; this rhythm is the backbone of the layout system.
• Do pair 600-weight headlines with 400-weight body copy; never use 600-weight for body text, as it reduces readability and increases visual noise.

**Don't**

• Don't use secondary colors (purple, orange, green) on primary CTAs or focus states—these are reserved for feature badges, status indicators, and supporting UI only.
• Don't apply shadows to input fields; use a 1px border and focus ring instead to maintain clarity and reduce visual weight.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii break the cohesive aesthetic.
• Don't reduce line-height below 1.2 for headlines or 1.5 for body copy; tighter leading reduces readability and creates visual tension.
• Don't mix WF Visual Sans Variable with system fonts or fallbacks in component definitions; always specify the full font stack to ensure consistency across browsers.