# Webflow — Marketing site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

| 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.

## 3. Typography Rules

- One family: `"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.

## 4. Component Stylings

- **Primary CTA** — bg `#146ef5`, white 16/19.2 at 500/-0.16px, `border-radius:4px`, height 51px, padding `16px 24px`.
- **Compact button** — bg `#146ef5`, `border-radius:8px`, height 36px, padding `9.6px 18px`, label 12/12 at 500 with +0.6px tracking.
- **Nav link** — no fill, no radius, white 16/25.6 at 500/-0.16px; the sticky bar is pure `#000000` at 66px tall, sitting under a `#146ef5` announcement banner at 46px.
- **Text link** — 16/19.2 at 500, with a 2px white underline rule as the emphasis state.
- **Card** — `border-radius:8px`, `#171717` fill, `1px #363636` border, ~168px tall, holding an h3 + `#ababab` description at the left and a bleeding product screenshot at the right.
- **Badge** — small uppercase pill (e.g. `NEW`) in `#146ef5` next to a card title.
- **Signature: Designer frame** — the hero sits inside a rendering of the Webflow Designer: a ~34px dark icon rail down the left, a top toolbar with a `Design` dropdown chip, page/breakpoint breadcrumbs, collaborator avatars, and `Share` + `Publish` controls at the right, and the canvas boundary drawn as a vertical rule near the right edge. Reproduce this frame — it is the brand's most recognisable element.

## 5. Layout Principles

1440px max container. The page is a stack of full-bleed dark bands: announcement bar → sticky black nav → Designer-framed hero → a 3-up card row → a centred "Start building for free" line → a logo wall. The hero is centred single-column: h1 (2 lines) → 16px sub → card row → text link, all inside the Designer frame so the effective content column is inset from the viewport on both sides. Cards sit in an equal 3-column grid with ~20px gutters.

## 6. Depth & Elevation

Radius scale: `2px` · `4px` (primary CTA) · `8px` (cards, compact buttons) · `50%` (avatars), plus split radii (`2px 2px 0 0`, `0 0 8px 8px`, `0 0 4px 4px`) where a panel meets a tab or footer strip.

Shadows — one recipe, an extremely long-throw stack used for the floating product artwork:

```
0 148px 42px rgba(0,0,0,.01), 0 95px 38px rgba(0,0,0,.04),
0 53px 32px rgba(0,0,0,.15), 0 24px 26px rgba(0,0,0,.26)   /* opening layers captured */
```

Plus a hover mechanic worth naming: the nav CTA carries `box-shadow: inset 0 0 0 100px <transparent>` at rest and animates the inset spread on hover, so the fill **sweeps in from the edges** rather than cross-fading.

Philosophy: borders over shadows. On a `#080808` canvas the 1px `#363636` hairline does nearly all the separation; real shadow appears only under floating product imagery.

## 7. Motion

Three curves, all at 0.3s unless noted:

- `background-color, color, border` — `0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955)` (a symmetric ease-in-out; the house curve)
- `transform` — `0.3s cubic-bezier(0.645, 0.045, 0.355, 1)`
- `opacity` — `0.45s cubic-bezier(0.455, 0.03, 0.515, 0.955)`
- `box-shadow` (the CTA fill sweep) — `0.3s cubic-bezier(0.165, 0.84, 0.44, 1)`

No scroll-linked animation, parallax or entrance keyframes observed; the hero's Designer frame is sticky-positioned rather than animated.

## 8. Backgrounds, Effects & WebGL

None observed — no gradients, no `backdrop-filter`, no blend modes, no canvas or WebGL, no grain. Every surface is a flat solid from the grey ladder. Depth and interest come entirely from product screenshots and video composited on those flat grounds.

## 9. Do's and Don'ts

### Do
- Ground everything on `#080808` and step surfaces through `#171717` / `#1a1a1a` / `#222222` / `#292929`.
- Separate surfaces with a `1px #363636` hairline.
- Set the hero at 80/83.2 weight 600 with -0.8px tracking, centred, in WF Visual Sans.
- Keep the scale gapped — one huge headline, then 24px and 16px.
- Use `#146ef5` for the single primary CTA (radius 4px, 51px tall) and nothing else in chrome.
- Frame the hero in Designer chrome (icon rail, top toolbar, Publish button, canvas edge).
- Animate on `cubic-bezier(0.455, 0.03, 0.515, 0.955)` at 0.3s.

### Don't
- Don't use weight 700 or above.
- Don't add gradients, glow, glass or grain — the surfaces are flat solids.
- Don't let green `#60ed76` or orange `#ffa666` into chrome; they belong to product artwork.
- Don't make buttons pills — 4px and 8px only.
- Don't rely on drop shadows for card separation; use the hairline.

## 10. Responsive Behavior

Not captured. Container caps at 1440px; percentage max-widths (50%, 41.66%) indicate a 12-column-style fluid grid beneath it.

## 11. Agent Prompt Guide

- Canvas `#080808` · Surface `#171717` · Text `#ffffff` · Muted `#ababab` · Border `#363636` · Accent `#146ef5`
- Font: WF Visual Sans Variable · Body: 16/25.6 · Radius: 4px CTA / 8px card · Control height: 51px (36px compact)
- Focus: not captured · Hover: `inset 0 0 0 100px` box-shadow sweep at 0.3s `cubic-bezier(.165,.84,.44,1)`

<webflow_design_language>
Dark, engineered and product-first. Canvas `#080808` with a very tight surface ladder — `#171717`, `#1a1a1a`, `#222222`, `#292929` — separated by a single `1px #363636` hairline rather than fills or shadows; the sticky nav is pure `#000000` under a `#146ef5` announcement bar. One family, WF Visual Sans Variable, capped at weight 600: hero 80/83.2 at -0.8px tracking, then a hard gap down to h2 24/31.2 at 500 and 16/25.6 body in `#ffffff` over `#ababab` muted; UI text carries -0.16px, the 12/12 uppercase label is the only positive tracking. One accent, electric blue `#146ef5`, on a 51px primary CTA at `border-radius:4px` (compact 36px at 8px); green `#60ed76` and orange `#ffa666` exist only inside product artwork. Flat solid surfaces — no gradients, blur, glass or grain — with a single very-long-throw shadow (`0 148px 42px` opening layer) reserved for floating product imagery, and a distinctive hover where the CTA fill sweeps in via an animated `inset 0 0 0 100px` box-shadow. Motion is 0.3s on `cubic-bezier(0.455,0.03,0.515,0.955)`. Signature: the hero is framed inside the Webflow Designer itself — left icon rail, top toolbar with Design chip and Publish button, visible canvas edge. Feels: dark, engineered, product-first, unsentimental. Avoid: weight 700+, pill buttons, gradients or glow, shadow-based card separation, letting green or orange into chrome.
</webflow_design_language>