Webflow Inspired Design System

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} — #ffffff) 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} (#080808) 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 #7a3dff / pink #ed52cb / blue #3b89ff / orange #ff6b00 / green #00d722, 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 variant — WFVisualSans-Mono with Inconsolata fallback — handles rare technical caption moments and code-style labels. OpenType features "ss02", "ss10", "zero" are enabled in the mono variant for the styled zero glyph.

Hierarchy

Principles

• Weight ceiling at 600. The brand never uses 700+. Confident, not loud.
• Negative tracking at display sizes. -0.8 px at 80 px, scaling through. Tight kerning is part of the voice.
• Uppercase eyebrows mark every section. 15 px / weight 500 / 1.5 px positive tracking is the brand's signature label style.
• Single family across the system. No separate display vs body face. The variable axes do the work.

Note on Font Substitutes

WF Visual Sans Variable is proprietary. Open-source substitutes:

• Display + body — Inter weights 400 / 500 / 600 with font-feature-settings: "ss01" enabled is the closest stylistic match.
• Mono — Inconsolata (the documented fallback) or DM Mono.

Layout

Spacing System

• Base unit: 4 px (with frequent 0.4 / 0.8 sub-multiples for fine padding).
• Tokens: {spacing.xxs} 2 px · {spacing.xs} 4 px · {spacing.sm} 8 px · {spacing.md} 12 px · {spacing.lg} 16 px · {spacing.xl} 20 px · {spacing.2xl} 24 px · {spacing.3xl} 32 px.
• Section padding: hero / content bands use {spacing.3xl} 32 px gutters with generous vertical spacing.
• Card interior padding: feature and pricing cards sit at {spacing.3xl} 32 px.

Grid & Container

• Marketing container is wide (effectively edge-to-edge with {spacing.3xl} gutters).
• Category card grid: 2 / 3-up at desktop with mixed sizing (some larger feature cards span 2 columns).
• Pricing tier grid: 3-up at desktop, 1-up at mobile.

Responsive Strategy

Breakpoints

Touch Targets

Buttons render at ~44 px (12 px vertical padding + 25.6 px line-height). WCAG AAA met.

Collapsing Strategy

• Nav: full link row at desktop. Hamburger at mobile.
• Category card grid: 2 / 3 / 4-up at desktop, drops to 1-up at mobile.
• Pricing tier: 3 / 4-up at desktop, 1-up at mobile.

Image Behavior

• Category cards: full-bleed solid colour fills (no photography).
• Product screenshots: 16:9 inside {rounded.md} card chrome.
• No portrait imagery in the marketing surface.

Elevation & Depth

Decorative Depth

• The chromatic category cards (full-saturation purple #7a3dff / pink #ed52cb / blue #3b89ff / orange #ff6b00 / green #00d722 fills) provide visual depth through pure colour contrast against the white canvas.
• Layered shadow recipes are the brand's only true atmospheric effect — they're 5-stop drop-shadow stacks with very low individual opacities.

Shapes

Border Radius Scale

Components

Buttons

button-primary — the canonical near-black CTA.

• Background {colors.primary} (#080808), text {colors.on-primary} white, label {typography.button-md} (16 px weight 500), padding {spacing.md} {spacing.xl}, shape {rounded.sm} 4 px.

button-secondary — the white outline CTA.

• Background {colors.canvas}, text {colors.ink}, 1 px solid {colors.hairline} border, same typography + padding + shape.

button-text-arrow — the underlined text-link CTA with arrow used in long-form sections.

• Background {colors.canvas}, text {colors.ink}, no border, body in {typography.button-md}, padding {spacing.xl} 0.

button-icon-circular — the circular icon button for carousel controls.

• Background {colors.canvas}, ink icon, shape {rounded.full}.

Cards & Containers

card-feature — the canonical feature card on canvas.

• Background {colors.canvas}, text {colors.ink}, 1 px solid {colors.hairline}, padding {spacing.3xl}, shape {rounded.md}. Often elevated to Level 2 shadow when featured.

card-feature-dark — the polarity-flipped feature card on near-black.

• Background {colors.primary} (#080808), text {colors.on-primary}, padding {spacing.3xl}, shape {rounded.md}.

card-pricing — the pricing-tier card.

• Background {colors.canvas}, text {colors.ink}, hairline border, padding {spacing.3xl}, shape {rounded.md}. Layered shadow on the featured tier.

Inputs & Forms

text-input — the canonical text input.

• Background {colors.canvas}, text {colors.ink}, 1 px solid {colors.hairline}, body in {typography.body-md}, padding {spacing.md} {spacing.lg}, shape {rounded.sm}.

Navigation

nav-bar — the sticky top nav.

• Background {colors.canvas}, text {colors.ink}, padding {spacing.lg} {spacing.3xl}.

nav-link — link items inside nav-bar.

• Text {colors.ink}, set in {typography.body-sm-strong}.

footer — the footer band.

• Background {colors.canvas}, text {colors.body-mid} (#5a5a5a), padding {spacing.3xl} {spacing.3xl}. Body in {typography.body-sm}.

Signature Components

hero-band — the white hero band.

• Background {colors.canvas}, text {colors.ink}, padding {spacing.3xl} {spacing.3xl}. Headline in {typography.display-xxl} (80 px weight 600).

hero-band-dark — the polarity-flipped near-black hero band (used on some campaign pages).

• Background {colors.primary} (#080808), text {colors.on-primary}, same padding / headline scale.

content-band — the standard content band on canvas.

• Background {colors.canvas}, text {colors.ink}, padding {spacing.3xl} {spacing.3xl}. Section headline in {typography.display-lg}.

category-card-purple — full-fill purple category card.

• Background {colors.accent-purple} (#7a3dff), text white, padding {spacing.3xl}, shape {rounded.md}.

category-card-pink — full-fill pink category card.

• Background {colors.accent-pink} (#ed52cb), text white, padding {spacing.3xl}, shape {rounded.md}.

category-card-blue — full-fill blue category card.

• Background {colors.accent-blue} (#3b89ff), text white, padding {spacing.3xl}, shape {rounded.md}.

category-card-orange — full-fill orange category card.

• Background {colors.accent-orange} (#ff6b00), text white, padding {spacing.3xl}, shape {rounded.md}.

category-card-green — full-fill green category card (uses ink text for legibility against the lighter green).

• Background {colors.accent-green} (#00d722), text {colors.primary} (#080808 ink), padding {spacing.3xl}, shape {rounded.md}.

badge-info + badge-info-soft — info badges in solid blue or soft outline.

• Filled: bg {colors.accent-blue-info} (#146ef5) text white. Soft: bg canvas, text {colors.accent-blue-info}. Both at {typography.caption} (12.8 px weight 550) — the brand's signature 550-weight caption.

Examples (illustrative)

Auto-derived kit-mirror demonstration surfaces (scripts/derive-examples-block.mjs). Each ex-* entry references brand-native primitives so downstream consumers (/preview-design, /generate-kit) re-skin the same 10 surfaces consistently. TO_FILL markers indicate missing primitives — resolve in the LLM judgment pass.

ex-pricing-tier — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

• Properties: backgroundColor, textColor, borderColor, rounded, padding

ex-pricing-tier-featured — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

• Properties: backgroundColor, textColor, rounded, padding

ex-product-selector — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

• Properties: backgroundColor, rounded, padding

ex-cart-drawer — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

• Properties: backgroundColor, rounded, padding, item-divider

ex-app-shell-row — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

• Properties: backgroundColor, activeIndicator, rounded, padding

ex-data-table-cell — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

• Properties: headerBackground, headerTypography, bodyTypography, cellPadding, rowBorder

ex-auth-form-card — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

• Properties: backgroundColor, rounded, padding

ex-modal-card — Modal dialog surface — same chrome as feature-card with elevated shadow.

• Properties: backgroundColor, rounded, padding

ex-empty-state-card — Empty-state illustration frame.

• Properties: backgroundColor, rounded, padding, captionTypography

ex-toast — Toast notification surface — feature-card shape + medium shadow.

• Properties: backgroundColor, rounded, padding, typography

Do's and Don'ts

Do

• Reserve {colors.primary} (#080808) for every primary CTA, every heading, and every wordmark. Near-black is the conversion colour.
• Use the five chromatic accents (purple #7a3dff / pink #ed52cb / blue #3b89ff / orange #ff6b00 / green #00d722) as full-fill category cards, NOT as button backgrounds.
• Set hero headlines in {typography.display-xxl} weight 600 with -0.8 px tracking.
• Pair the proprietary WF Visual Sans family across every typographic role.
• Use {rounded.sm} 4 px for buttons, {rounded.md} 8 px for cards. The brand never uses pill CTAs.
• Use layered multi-stop drop-shadows on featured cards — the brand's distinctive elevation recipe.

Don't

• Don't promote button-medium weight to 700+. The brand's weight ceiling is 600.
• Don't use chromatic accents as button backgrounds. They're surface fills, not actions.
• Don't render CTAs as pills. The brand's button geometry is tight 4 px rectangle.
• Don't introduce a sixth accent colour. The 5-stop palette is the system.

Known Gaps

• Hover state colours: not documented in the captured surfaces — the brand uses subtle layered-shadow lifts on featured cards, but precise per-state colour shifts on buttons and nav links don't extract reliably.
• Focus rings: the system uses some form of focus indicator (likely a 2 px outline at {colors.accent-blue-info}), but exact ring colour, offset, and width were not captured.
• Loading / skeleton states: not visible in the marketing surfaces sampled.
• Form input error states: error colour ({colors.accent-red} #ee1d36) is documented as a token, but the full input outline + helper-text combination on validation failure was not extracted.
• Editor / Designer UI: Webflow's actual visual builder (Designer canvas, panels, contextual menus) lives behind auth and uses a denser, darker chrome distinct from the marketing surface — not captured here.
• ex-* example surfaces: the 10 illustrative example components at the bottom of the spec are auto-derived kit-mirror references for downstream /preview-design and /generate-kit consumers, not pixel-extracted production surfaces. Resolve any TO_FILL markers in the LLM judgment pass.