Webflow Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

19tokens

24type steps

4radius steps

2pxspacing base

Webflow, in one page

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.

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 / pink / blue / orange / green) 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.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Webflow design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #080808
- on-primary: #ffffff
- ink: #080808
- ink-strong: #222222
- body: #363636
- body-mid: #5a5a5a
- mute: #898989
- mute-soft: #ababab
- hairline: #d8d8d8
- canvas: #ffffff

Type:
- families: WF Visual Sans Variable, Inter, -apple-system, WFVisualSans-Mono
- scale: 12, 12.8, 14, 15, 15.36, 16, 18, 19.5, 20
- weights: 400, 500, 550, 600

Shape:
- radius: 0, 2, 4, 8
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow.

Spacing: 2, 4, 8, 12, 16, 20, 24, 32

Rules:
- 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 / pink / blue / orange / green) 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.

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

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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.

Type scaleRead the full spec

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

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-xxl}`	80px	600	83.2px	-0.8px	Hero headline.
`{typography.display-xl}`	56px	600	58.24px	0	Sub-hero displays.
`{typography.display-lg}`	44.8px	600	46.6px	0	Section headlines.
`{typography.display-md}`	32px	500	41.6px	0	Card-cluster headlines.
`{typography.display-sm}`	24px	500	31.2px	0	Sub-section displays.
`{typography.display-xs}`	20px	500	28px	0	Inline display micro-headings.
`{typography.eyebrow-uppercase}`	15px	500	19.5px	1.5px	UPPERCASE eyebrow tags above sections.
`{typography.eyebrow-uppercase-sm}`	12px	500	12px	0.6px	Small uppercase metadata.
`{typography.body-lg}`	28.8px	400	46.08px	-0.288px	Lead paragraphs.
`{typography.body-md}`	16px	400	25.6px	-0.16px	Default body.
`{typography.body-md-strong}`	16px	500	25.6px	-0.16px	Bolded inline body.
`{typography.body-sm}`	14px	400	22.4px	0	Secondary body.
`{typography.body-sm-strong}`	14px	500	22.4px	0	Bold caption / nav-link.
`{typography.caption}`	12.8px	550	15.36px	0	Badge labels (the brand's signature 550 weight).
`{typography.caption-mono}`	12px	400	18px	0	Mono code captions.
`{typography.button-md}`	16px	500	25.6px	-0.16px	Button labels.

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

Components and layoutRead the full spec

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}, 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}, 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}, 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}, text white, padding {spacing.3xl}, shape {rounded.md}.

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

Background {colors.accent-pink}, text white, padding {spacing.3xl}, shape {rounded.md}.

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

Background {colors.accent-blue}, text white, padding {spacing.3xl}, shape {rounded.md}.

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

Background {colors.accent-orange}, 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}, text {colors.primary} (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} 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).

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-webflow {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #080808;
  --heading-color: #080808;
  --link-color: #080808;
  --link-hover-color: #000000;
  --border-color: #d3d3d3;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(8,8,8,0.06);
  --card-hover-shadow: 0 6px 18px rgba(8,8,8,0.12);
  --header-bg: #080808;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #5e5e5e;
  --button-bg: #080808;
  --button-text-color: #ffffff;
  --button-hover-bg: #000000;
  --button-border: none;
  --button-border-radius: 4px;
  --button-secondary-bg: #f0f0f0;
  --button-secondary-text-color: #080808;
  --button-secondary-hover-bg: #e1e1e1;
  --button-secondary-border: 1px solid #d3d3d3;
  --prompt-bg: #f3f3f3;
  --prompt-text-color: #080808;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-inter);
  --card-border-radius: 4px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

resend 71.9%
mydealz 71.3%
notion 70.5%
together.ai 70.5%
loglass 70.0%

Where this came from

Source document: volt/design-md/webflow/DESIGN.md · 27.3 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.