Webflow

Overview

Webflow positions itself as the visual web development platform — the marketing surface reads as a confident professional product, not a tech startup. The default page is a generous white canvas ({colors.canvas}) with a deep near-black {colors.primary} (#080808) for the brand's primary CTA, typography, and ink. Around this restrained primary, the brand layers a five-stop chromatic accent system — {colors.accent-purple} #7a3dff, {colors.accent-pink} #ed52cb, {colors.accent-blue} #3b89ff, {colors.accent-orange} #ff6b00, {colors.accent-green} #00d722 — each mapped to one of the platform's product categories (design, CMS, hosting, ecommerce, etc.). These accents appear as full-card fills inside the product-category grid, not as button colours; the brand's primary CTA stays near-black.

Type carries the second decisive voice. The proprietary WF Visual Sans Variable family carries every display, body, and label role at weight 500 / 600 — the brand never goes heavier than semibold, never lighter than regular. Hero display sits at 80 px / weight 600 / -0.8 px tracking — confident but not shouting. Uppercase eyebrows in 15 px weight 500 with 1.5 px positive tracking mark every section header.

The shape system is restrained. Buttons take a tight {rounded.sm} 4 px radius — neither pill nor square; the brand reads as engineered. Cards step up to {rounded.md} 8 px. Pill ({rounded.full} 9999 px) is reserved for circular icon containers. Layered drop-shadows on featured cards add modest elevation but never feel material-heavy.

Key Characteristics: - A two-colour conversion hierarchy — {colors.primary} near-black for every primary CTA, white-on-hairline for every secondary. Chromatic accents are used as full surface fills on category cards, never as button backgrounds. - The brand's signature is its five-stop chromatic category palette: purple / pink / blue / orange / green, each tied to a product surface. Used at full saturation as card fills. - Hero typography at 80 px weight 600 with -0.8 px tracking — restrained, confident, never billboard-loud. - WF Visual Sans Variable is the single family; the brand uses no separate sans for body / display. WFVisualSans-Mono / Inconsolata appears only for technical captions. - Tight {rounded.sm} 4 px button geometry; cards at {rounded.md} 8 px. The brand never uses pill CTAs. - Layered multi-offset drop-shadows on featured cards — the brand's only elevation cue.

Colors

Brand & Accent

• Ink Black ({colors.primary} — #080808): The brand's primary conversion colour. Every primary CTA, every heading, every wordmark. Deeper than pure black to read as branded.
• Accent Purple ({colors.accent-purple} — #7a3dff): One of the five chromatic category accents — used for design / build product surfaces.
• Accent Pink ({colors.accent-pink} — #ed52cb): Magenta accent — used for animation / interaction product surfaces.
• Accent Blue ({colors.accent-blue} — #3b89ff): Bright cyan-blue — used for SEO / analytics product surfaces.
• Accent Blue Deep ({colors.accent-blue-deep} — #006acc): The deeper blue used for emphasis links.
• Accent Blue Info ({colors.accent-blue-info} — #146ef5): The badge-info blue.
• Accent Orange ({colors.accent-orange} — #ff6b00): Used for hosting / infrastructure product surfaces.
• Accent Green ({colors.accent-green} — #00d722): Used for ecommerce / status-success surfaces.
• Accent Yellow ({colors.accent-yellow} — #ffae13): Used for warning / collaboration product surfaces.
• Accent Red ({colors.accent-red} — #ee1d36): Used for error / destructive states.

Surface

• Canvas ({colors.canvas} — #ffffff): The default page background.
• Hairline ({colors.hairline} — #d8d8d8): 1 px solid borders — input borders, card chrome, divider lines.

Text

• Ink ({colors.ink} — #080808): Default text and headings.
• Ink Strong ({colors.ink-strong} — #222222): Near-black emphasis.
• Body ({colors.body} — #363636): Default body paragraph color.
• Body Mid ({colors.body-mid} — #5a5a5a): Mid-emphasis secondary text — footer lines, captions.
• Mute ({colors.mute} — #898989): Lower-priority text.
• Mute Soft ({colors.mute-soft} — #ababab): The lightest text role — placeholder text, fine print.

Semantic

• Info Blue ({colors.accent-blue-info} — #146ef5): Info badge / notification.
• Success Green ({colors.accent-green} — #00d722): Success indicators.
• Warning Yellow ({colors.accent-yellow} — #ffae13): Warning states.
• Error Red ({colors.accent-red} — #ee1d36): Validation / destructive.

Typography

Font Family

A single proprietary family carries every typographic role: WF Visual Sans Variable (with Arial system fallback). Weights 400 / 500 / 550 / 600 are present; the brand never uses 700 / 800 / 900. A monospace vari