# Webflow

> `webflow@1.0.0`

Webflow is a visual web-development platform — a designer canvas on top of a production website builder, with CMS, e-commerce, hosting, and (since 2023) a marketing platform layer. The brand voice is design-first, developer-aware, and professional. Visually, the identity is the wordmark in Webflow Blue (#4353FF) on a clean white canvas with near-black body text.


**Tags:** `saas`, `no-code`, `webflow`, `design-tools`, `web-development`

## Atoms

### Palette

**Webflow** · `webflow@1.0.0` · Proprietary — All Rights Reserved

> Webflow's brand palette, anchored on Webflow Blue (#4353FF) — the signature indigo-blue that carries the wordmark and the "WF" mark. The institutional voice pairs that blue with a clean white canvas and near-black body text on marketing surfaces. Where competing no-code builders lean on multi-color identities, Webflow commits to a single confident indigo with disciplined neutrals. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `webflow-blue` | Webflow Blue | `#4353FF` |
| `webflow-white` | Webflow White | `#FFFFFF` |
| `webflow-black` | Webflow Black | `#080F25` |
| `webflow-canvas-dark` | Webflow Canvas Dark | `#0E1330` |
| `webflow-surface-light` | Webflow Surface Light | `#F5F6FB` |
| `webflow-surface-dark` | Webflow Surface Dark | `#1B2046` |
| `webflow-text-secondary` | Webflow Text Secondary | `#3F4156` |
| `webflow-text-tertiary` | Webflow Text Tertiary | `#7A7D94` |
| `webflow-blue-hover` | Webflow Blue Hover | `#6371FF` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `webflow-white` | `#FFFFFF` |
| `surface` | `webflow-surface-light` | `#F5F6FB` |
| `surface-elevated` | `webflow-white` | `#FFFFFF` |
| `text-primary` | `webflow-black` | `#080F25` |
| `text-secondary` | `webflow-text-secondary` | `#3F4156` |
| `text-tertiary` | `webflow-text-tertiary` | `#7A7D94` |
| `primary` | `webflow-blue` | `#4353FF` |
| `primary-hover` | `webflow-blue-hover` | `#6371FF` |
| `accent` | `webflow-blue` | `#4353FF` |
| `accent-hover` | `webflow-blue-hover` | `#6371FF` |
| `warning` | `webflow-blue` | `#4353FF` |
| `warning-hover` | `webflow-blue-hover` | `#6371FF` |
| `error` | `webflow-blue` | `#4353FF` |
| `success` | `webflow-blue` | `#4353FF` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `webflow-canvas-dark` | `#0E1330` |
| `surface` | `webflow-surface-dark` | `#1B2046` |
| `surface-elevated` | `webflow-surface-dark` | `#1B2046` |
| `text-primary` | `webflow-white` | `#FFFFFF` |
| `text-secondary` | `webflow-text-tertiary` | `#7A7D94` |
| `text-tertiary` | `webflow-text-secondary` | `#3F4156` |
| `primary` | `webflow-blue` | `#4353FF` |
| `primary-hover` | `webflow-blue-hover` | `#6371FF` |
| `accent` | `webflow-blue` | `#4353FF` |
| `accent-hover` | `webflow-blue-hover` | `#6371FF` |
| `warning` | `webflow-blue` | `#4353FF` |
| `warning-hover` | `webflow-blue-hover` | `#6371FF` |
| `error` | `webflow-blue` | `#4353FF` |
| `success` | `webflow-blue` | `#4353FF` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `webflow-blue` | `#4353FF` |
| `on-identity` | `webflow-white` | `#FFFFFF` |
| `primary` | `webflow-blue` | `#4353FF` |
| `primary-hover` | `webflow-blue-hover` | `#6371FF` |
| `accent` | `webflow-blue` | `#4353FF` |
| `accent-hover` | `webflow-blue-hover` | `#6371FF` |
| `success` | `webflow-blue` | `#4353FF` |
| `warning` | `webflow-blue` | `#4353FF` |
| `error` | `webflow-blue` | `#4353FF` |
| `background-light` | `webflow-white` | `#FFFFFF` |
| `background-dark` | `webflow-canvas-dark` | `#0E1330` |
| `surface-light` | `webflow-surface-light` | `#F5F6FB` |
| `surface-dark` | `webflow-surface-dark` | `#1B2046` |
| `text-primary-light` | `webflow-black` | `#080F25` |
| `text-primary-dark` | `webflow-white` | `#FFFFFF` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (6)

#### `colorChoice` → `logo.mark`

- **allowed:** webflow-blue, webflow-white, webflow-black
- **forbidden:** any-non-brand-color

> The Webflow wordmark renders in Webflow Blue on light surfaces and in white on dark surfaces. Recoloring the wordmark into off-brand hues violates Webflow's brand-use guidance. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill

> Webflow's press resources prohibit stretching, rotating, recoloring, or applying decorative effects to the wordmark. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> WCAG 2.1 Level AA contrast minimum for body text. Webflow Black (#080F25) on Webflow White (#FFFFFF) clears AA at very high contrast. 

#### `variantSelection` → `logo`

- **use:** `logo-light`
- **when:** `backgroundColorScheme="dark"`

> On dark surfaces, use Webflow's documented light-fill wordmark variant; do not invert the blue wordmark on the fly. 

#### `contextRestriction` → `roles.colors.identity`

- **forbiddenContexts:** product-of-competitor, merchandise, endorsement-implication, company-name-or-domain

> Webflow's trademark guidance forbids use of the Webflow name and mark in third-party company names, domains, and uses that imply affiliation or endorsement. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Webflow-skinned surfaces must clear AA on body text. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 500, 600, 700

> Webflow's marketing surfaces render headings in the 500–700 band; lighter weights undermine the confident, design-first voice of the brand. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.identity`

- **pairsWith:** webflow-white, webflow-black, webflow-surface-light

> Webflow Blue is calibrated to read on white and near-black. Pairing it with another saturated hue at the same weight breaks the focused, design-first voice of the brand surface. 

## Provenance

- **Source:** <https://webflow.com/press>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Webflow and the Webflow logo are trademarks of Webflow, Inc. The primary brand color Webflow Blue (#4353FF) is documented on Webflow's press resources. brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the Webflow name and mark is governed by Webflow's brand-use guidance at webflow.com/press. 
- **Imported:** `2026-05-18`
- **Notes:** Webflow's marketing pages render in a neutral humanist sans consistent with Inter; Inter is referenced here as the primary face and is already in the brand-atoms catalog. 

---

*Generated by the brand-atoms converter. Source: `webflow@1.0.0` from the encyclopedia.*