---
site: "Webflow: The agentic web platform for modern businesses"
url: "https://webflow.com"
generated_at: "2026-06-25T08:28:55.784Z"
generator: "designlang@13.0.0"
intent: landing
material: flat
library: bootstrap
tokens:
  colors:
    primary: "#146ef5"
    secondary: "#6ca7ff"
    accent: "#3b82f6"
    background: "#ffffff"
    foreground: "#000000"
  typography:
    sans: WF Visual Sans Variable
    mono: WFVisualSans-Mono
    base: 12
  spacing:
    scale: "[1, 23, 31, 37, 40, 46, 56, 64, 73, 80]"
  radii:
    xs: 2
    md: 6
    full: 1280
  shadows:
    sm: "rgba(0, 0, 0, 0) 0px 0px 0px 100px inset"
    lg: "rgba(0, 0, 0, 0.12) 0px 4px 24px 0px, rgba(0, 0, 0, 0.08) 0px 1px 4px 0px"
    xl: "rgba(0, 0, 0, 0) 0px 105px 30px 0px, rgba(0, 0, 0, 0.02) 0px 67px 27px 0px, rgba(0, 0, 0, 0.06) 0px 38px 23px 0px, rgba(0, 0, 0, 0.1) 0px 17px 17px 0px, rgba(0, 0, 0, 0.12) 0px 4px 9px 0px"
---

# Overview

A **landing** page (heuristic confidence 0.75), dressed in **flat** material.

Component library appears to be **bootstrap** (0.7).

> "Platform"

The author writes in a **neutral** voice; headings tend to be **Sentence case** case and **tight**.

Reading order detected on the source: `nav → nav → nav → nav → nav → nav → nav → nav → nav → nav → pricing-table → pricing-table → pricing-table → testimonial → content → pricing-table → testimonial → content → testimonial → cta → footer → nav`.

Source: <https://webflow.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#146ef5` | 43 |
| secondary | `#6ca7ff` | 194 |
| accent | `#3b82f6` | 3 |
| background | `#ffffff` | — |
| foreground | `#000000` | — |

**Neutrals:** `#080808` · `#ffffff` · `#5a5a5a` · `#d8d8d8` · `#f0f0f0`

**Total unique colors detected:** 17.

# Typography

**Families**
- `WF Visual Sans Variable` · 3400 uses
- `WFVisualSans-Mono` · 374 uses
- `Times` · 8 uses

**Body size:** `12px` / line-height `12px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `74.8571px` | `600` | `77.8514px` |
| h2 | `52.5714px` | `600` | `54.6743px` |
| h3 | `30.5714px` | `500` | `39.7429px` |
| h4 | `23.4286px` | `500` | `30.4571px` |

# Layout

**Scale:** `1px` · `23px` · `31px` · `37px` · `40px` · `46px` · `56px` · `64px` · `73px` · `80px`

**Layout primitives:** 4 grid containers · 809 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `rgba(0, 0, 0, 0) 0px 0px 0px 100px inset`
- `lg` — `rgba(0, 0, 0, 0.12) 0px 4px 24px 0px, rgba(0, 0, 0, 0.08) 0px 1px 4px 0px`
- `xl` — `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`
- `xl` — `rgba(0, 0, 0, 0) 0px 105px 30px 0px, rgba(0, 0, 0, 0.02) 0px 67px 27px 0px, rgba(0, 0, 0, 0.06) 0px 38px 23px 0px, rgba(0, 0, 0, 0.1) 0px 17px 17px 0px, rgba(0, 0, 0, 0.12) 0px 4px 9px 0px`
- `xl` — `rgba(0, 0, 0, 0.01) 0px 148px 42px 0px, rgba(0, 0, 0, 0.04) 0px 95px 38px 0px, rgba(0, 0, 0, 0.15) 0px 53px 32px 0px, rgba(0, 0, 0, 0.26) 0px 24px 24px 0px, rgba(0, 0, 0, 0.29) 0px 6px 13px 0px`

**Z-index layers:** 17 · ⚠ 1 issue(s)

# Shapes

**Radius scale**
- `xs` — `2px`
- `md` — `6px`
- `full` — `50px`
- `full` — `1280px`

# Components

**Detected patterns:** `buttons` · `cards` · `inputs` · `links` · `navigation` · `footer` · `modals` · `dropdowns` · `badges` · `avatars` · `tabs` · `accordions` · `progressBars` · `switches`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | link | sm | 128 |
| card | link | — | 9 |
| other | — | — | 3 |

# Do's and Don'ts

**Do's**
- Use `read`, `play`, `start` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **tight** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't ship copy on the colors flagged in accessibility — 1 contrast pair(s) fail WCAG AA on the source itself.
- Don't 21 distinct font sizes — consider a tighter type scale.
- Don't 1 wcag contrast failures.
- Don't 192 !important rules — prefer specificity over overrides.
- Don't 77% of css is unused — consider purging.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://webflow.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._