<!-- Generated by ExtractVibe — https://extractvibe.com/brand/webflow.com -->
<!-- Extracted: 2026-05-03T16:51:09.512Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Webflow"
description: "Webflow projects a professional, engineering-forward aesthetic that bridges the gap between design and development. The brand feels precise, modern, and authoritative, emphasizing control and technical capability without sacrificing visual elegance. It targets users who value clean code and custom solutions over generic templates."
colors:
  primary: "#146ef5"
  secondary: "#7a3dff"
  tertiary: "#7a3dff"
  neutral: "#898989"
  surface: "#ffffff"
  on-surface: "#080808"
  border: "#ababab"
  surface-dark: "#080808"
typography:
  display-lg:
    fontFamily: "WF Visual Sans Variable"
    fontSize: "80px"
    fontWeight: "600"
    lineHeight: "83.2px"
    letterSpacing: "-0.8px"
  headline-lg:
    fontFamily: "WF Visual Sans Variable"
    fontSize: "24px"
    fontWeight: "500"
    lineHeight: "31.2px"
  headline-md:
    fontFamily: "WF Visual Sans Variable"
    fontSize: "20px"
    fontWeight: "600"
    lineHeight: "28px"
  body-md:
    fontFamily: "WF Visual Sans Variable"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "25.6px"
rounded:
  md: "8px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#146ef5"
    textColor: "#ffffff"
    rounded: "0px"
    padding: "12px 0px"
    fontSize: "14px"
    fontWeight: "500"
    borderColor: "#ffffff"
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 100px inset"
  button-outline:
    textColor: "#080808"
    rounded: "0px"
    padding: "20.775px 0px 19.177px"
    fontSize: "15.9808px"
    fontWeight: "500"
    borderColor: "#080808"
    borderWidth: "0px 0px 2px"
  button-secondary:
    backgroundColor: "#efefef"
    textColor: "#080808"
    rounded: "0px"
    padding: "1px 6px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#080808"
  button-ghost:
    rounded: "0px"
    padding: "8px 16px"
    fontSize: "16px"
    fontWeight: "400"
---

# Webflow — Design System

## Overview

Webflow's design system embodies the Creator and Sage archetypes, manifesting a professional, developer-first aesthetic. It aligns with the visual precision and technical sophistication seen in brands like Vercel, Linear, Figma, and Stripe. The design prioritizes clarity, control, and engineering excellence, reflecting a commitment to custom solutions and clean code. This is a system built for builders, emphasizing functionality and robust capability over superficial trends or decorative flourishes.

The emotional register is one of competence and authority, instilling confidence through meticulous detail and a modern, uncluttered presentation. The design is not whimsical, overtly playful, or generic. It actively avoids visual clutter, excessive ornamentation, or any element that might detract from the core message of powerful, precise web development. Every component and interaction is crafted to reinforce the brand's dedication to bridging design and development with unparalleled technical elegance.

**Key characteristics:**

- Vibe — developer-first, precise, professional, modern, technical, clean
- Archetypes — The Creator, The Sage
- Comparable to — Vercel, Linear, Figma, Stripe
- Design era — contemporary-minimal
- Emotional tone — competent-empowering
- Target audience — Professional designers, frontend developers, and marketing teams who want full control over their digital presence without writing raw code manually.
- Visual energy — 6/10 (moderate)

## Colors

The primary color, `#146ef5`, anchors the Webflow brand with a confident, technical blue. This choice signals reliability, innovation, and a professional demeanor, aligning with the developer-first ethos. The dominant use of `#ffffff` for surfaces reinforces cleanliness and clarity, providing an expansive canvas that emphasizes content and functionality. This minimalist palette communicates precision and efficiency, avoiding distraction to focus on the powerful tools Webflow provides.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#146ef5` | Dodger Blue |
| secondary | `#7a3dff` | Blue Violet |
| accent / tertiary | `#7a3dff` | Blue Violet |
| background | `#ffffff` | White |
| text | `#080808` | Black |
| border | `#ababab` | Dark Silver |
| muted | `#898989` | Gray |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#080808` | Black |

## Typography

The exclusive use of WF Visual Sans Variable for all typographic elements establishes a singular, cohesive voice. This variable font choice underscores modernity and technical flexibility, allowing for precise control over weight and width to optimize readability and hierarchy across diverse contexts. The system prioritizes clear information architecture, using variations in weight and size to delineate importance without introducing visual noise. This communicates a commitment to clarity, accessibility, and a sophisticated, engineering-driven approach to content presentation.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| WF Visual Sans Variable | body | self-hosted | 400, 500 |
| WF Visual Sans Variable | heading | self-hosted | 500, 600 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | WF Visual Sans Variable | 80px | 600 | 83.2px | -0.8px |
| Heading 2 | WF Visual Sans Variable | 24px | 500 | 31.2px | — |
| Heading 3 | WF Visual Sans Variable | 20px | 600 | 28px | — |
| Body | WF Visual Sans Variable | 16px | 400 | 25.6px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 25.6px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| element | `rgba(0, 0, 0, 0) 0px 84px 24px 0px, rgba(0, 0, 0, 0.01) 0px 54px 22px 0px, rgba(0, 0, 0, 0.04) 0px 30px 18px 0px, rgba(0, 0, 0, 0.08) 0px 13px 13px 0px, rgba(0, 0, 0, 0.09) 0px 3px 7px 0px` |
| button | `rgba(0, 0, 0, 0) 0px 0px 0px 100px inset` |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 0%, color(srgb 1 1 1 / 0.85) 30%, color(srgb 1 1 1 / 0.4) 65%, color(srgb 1 1 1 / 0.1) 90%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.25) 59%, rgba(0, 0, 0, 0.5))`

## Shapes

Border-radius scale:

- `md` — 8px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#146ef5`
- Text — `#ffffff`
- Radius — `0px`
- Padding — `12px 0px`
- Font size — `14px`
- Font weight — `500`
- Border — ` solid #ffffff`
- Shadow — `rgba(0, 0, 0, 0) 0px 0px 0px 100px inset`
- Sample copy — "Coming soon: Own your visibility to AI search with Webflow AEO →"

**Outline**

- Text — `#080808`
- Radius — `0px`
- Padding — `20.775px 0px 19.177px`
- Font size — `15.9808px`
- Font weight — `500`
- Border — `0px 0px 2px solid #080808`
- Sample copy — "Platform→"

**Secondary**

- Background — `#efefef`
- Text — `#080808`
- Radius — `0px`
- Padding — `1px 6px`
- Font size — `16px`
- Font weight — `400`
- Border — ` solid #080808`
- Sample copy — "←Back"

**Ghost**

- Radius — `0px`
- Padding — `8px 16px`
- Font size — `16px`
- Font weight — `400`
- Sample copy — "Marketer"

## Do's and Don'ts

### Do

- Use WF Visual Sans Variable for all typography; apply weight 500-600 for headings and 400-500 for body text.
- Format all headings in sentence-case with no emoji or excessive punctuation; keep body line-height at 25.6px.
- Style primary CTA buttons with #146ef5 background, #ffffff text, 0px border-radius (sharp corners), and 12px vertical padding.
- Style outline buttons with #080808 text and border, 0px border-radius, and approximately 20px vertical padding for a tall, distinct look.
- Maintain a flat design aesthetic with 0px border-radius on interactive elements; avoid rounded corners on buttons and inputs.
- Use #080808 for primary text and #ffffff for backgrounds; reserve #7a3dff for secondary accents or gradients.
- Apply subtle, multi-layered shadows only to specific elements like cards or overlays (e.g., rgba(0,0,0,0.01) 0px 54px 22px 0px), never on primary buttons.
- Use action-oriented imperative verbs in copy (e.g., 'Build', 'Create', 'Drive') and avoid exclamations or emojis.

### Don't

- Do not use title case or ALL CAPS for headings; strictly adhere to sentence-case.
- Do not use serif fonts; the brand is exclusively sans-serif using WF Visual Sans Variable.
- Do not use emoji in marketing copy or UI elements; the brand maintains a serious, professional tone.
- Do not use rounded corners (border-radius > 0px) on buttons or primary UI controls; keep them sharp.
- Do not use vibrant or saturated background colors for the main layout; stick to #ffffff or light grays.
- Do not use heavy drop shadows on buttons; the brand prefers flat, solid color fills for primary actions.
- Do not use playful or casual language; avoid slang, humor, or excessive enthusiasm in copy.
- Do not use gradients on primary buttons; reserve gradients for background sections or subtle visual effects.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 4/10 | formal |
| Playful ↔ Serious | 3/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 6/10 | balanced |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 8 words
- Vocabulary — moderate
- Jargon — some
- CTA style — action-oriented imperative verbs
- Rhetorical devices — imperative verbs, parallel structure, metaphor

### Sample copy

> Make your website a growth engine

> Build your brand. Rank in AI search. Drive real revenue.

> Create custom, responsive websites with the power of code — visually.

> Build your way on a blank canvas.

> Quickly generate a custom website.

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/webflow.com) | 100% |
| primary | — | svg | [link](https://extractvibe.com/api/assets/brands/webflow.com/logo-svg-28.svg) | 84% |
| primary | — | svg | [link](https://extractvibe.com/api/assets/brands/webflow.com/logo-svg-29.svg) | 84% |
| primary | — | svg | [link](https://extractvibe.com/api/assets/brands/webflow.com/logo-svg-30.svg) | 84% |
| wordmark | dark | svg | [link](https://extractvibe.com/api/assets/brands/webflow.com/logo-14.svg) | 80% |
| wordmark | dark | svg | [link](https://extractvibe.com/api/assets/brands/webflow.com/logo-10.svg) | 80% |
| wordmark | light | svg | [link](https://extractvibe.com/api/assets/brands/webflow.com/logo-24.svg) | 80% |
| wordmark | dark | svg | [link](https://extractvibe.com/api/assets/brands/webflow.com/logo-20.svg) | 80% |
| wordmark | light | svg | [link](https://extractvibe.com/api/assets/brands/webflow.com/logo-22.svg) | 80% |
| wordmark | dark | svg | [link](https://extractvibe.com/api/assets/brands/webflow.com/logo-2.svg) | 80% |
| wordmark | light | svg | [link](https://extractvibe.com/api/assets/brands/webflow.com/logo-26.svg) | 80% |
| wordmark | dark | svg | [link](https://extractvibe.com/api/assets/brands/webflow.com/logo-13.svg) | 80% |

## Sources

- Live brand page — https://extractvibe.com/brand/webflow.com
- Raw JSON — https://extractvibe.com/api/brand/webflow.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/webflow.com/design.md
- Extracted — 2026-05-03T16:51:09.512Z
- Generator — ExtractVibe vv1
- Quality score — 90/100