A near-black surface that separates everything with a single 1px hairline instead of fills or shadows: an #080808 canvas over the tightest grey ladder in the library, with WF Visual Sans capped at weight 600 and a deliberately gapped scale that drops from an 80px hero straight to 24px with nothing in between. One electric blue carries the only CTA, green and orange stay locked inside product artwork, and the whole hero is framed inside a rendering of the Webflow Designer itself — icon rail, Publish button, visible canvas edge. The hover detail is a box-shadow whose inset spread animates, so button fills sweep in from the edges.
Browse Webflow in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: webflow.com (live DOM, computed styles), 2026-07-19. Coverage: home. Responsive: breakpoints not captured. The Designer chrome framing the hero is rendered as artwork, not DOM — described observationally, no token values claimed.
Near-black and matter-of-fact. Webflow's canvas is #080808 — not a navy or a warm charcoal — and the surfaces above it step through the tightest possible grey ladder (#171717, #1a1a1a, #222222, #292929), separated by a single 1px #363636 hairline rather than any fill contrast. The typographic voice is one variable family, WF Visual Sans, and the hero pushes it to 80px at weight 600 with -0.8px tracking — heavy, tightly leaded, centred. Below that the scale collapses hard: h2 is only 24px and nearly everything else is 16px, so hierarchy comes from the one big headline and then a flat field of small text.
The signature move is self-reference: the entire hero is wrapped in a rendering of the Webflow Designer — a left icon rail, a top toolbar with a Design chip, breadcrumb, collaborator avatars and a Publish button, and the canvas edge visible at the right — so the marketing page is presented as if it were open inside the product. Colour is rationed to one electric blue #146ef5; a green #60ed76 and an orange #ffa666 appear only inside product artwork. It avoids gradients, glow, glass and grain entirely.
Feels: dark, engineered, product-first, unsentimental.
| Token | Hex | Role / usage |
|---|---|---|
| text | #ffffff | Headings, body, nav — the dominant text colour |
| muted | #ababab | Card descriptions, secondary copy |
| link-blue | #3b89ff | Inline links |
| link-blue-soft | #6ca7ff | Softer link / hover variant |
| ink (on light) | #080808 | Text on the rare light surface |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #080808 | Page background |
| surface-1 | #171717 | Cards, panels |
| surface-2 | #1a1a1a | Alternate panel step |
| surface-3 | #222222 | Raised chrome |
| surface-4 | #292929 | Highest chrome step |
| black | #000000 | Sticky nav bar |
| navy | #020b19 | Deep blue-black product/section ground |
| hairline | #363636 | The 1px border used almost everywhere |
| border-strong | #5a5a5a | Emphasised 1px border |
| rule-inverse | #ffffff (2px) | Underline on active/emphasis links |
| Token | Hex | Role / usage |
|---|---|---|
| blue | #146ef5 | The accent — primary CTA, top banner, logo |
| green | #60ed76 | Product/artwork only (status, code) |
| orange | #ffa666 | Product/artwork only |
Rules: #146ef5 is the only accent in chrome. Green and orange never leave product screenshots and inline code. Surfaces are separated by a #363636 hairline, not by a fill step alone.
"WF Visual Sans Variable", -apple-system, system-ui, sans-serif — a geometric grotesque with a distinctly circular lowercase a and g.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero h1 | 80/83.2 px | 600 | -0.8px |
| Section h2 | 24/31.2 px | 500 | normal |
| Card h3 | 20/28 px | 600 | normal |
| Body | 16/25.6 px | 400 | normal |
| Nav link / CTA | 16/19.2 px | 500 | -0.16px |
| Small / banner | 14/22.4 px | 500 | normal |
| Label, uppercase | 12/12 px | 500 | +0.6px |
Patterns: negative tracking only at 80px (-0.8px) and on 16px UI text (-0.16px) — everything in between is normal. Weight tops out at 600; there is no 700 or 800. The 12px label is the only role with positive tracking, and the only one set uppercase. The type scale is deliberately gapped: 80px → 24px, with nothing between.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.