Design System Inspiration

# Design System Inspiration of Webflow

A visual web development platform whose surface contrasts a deep near-black primary against a generous white canvas, broken by a five-stop chromatic accent system (purple / pink / blue / orange / green) that maps to the brand's product categories, and anchored by a single sans family used at restrained 500 / 600 weights with negative tracking.

Explore the system See signature components

Foundation · 01

## Color Palette

A near-monochrome ink-on-canvas system broken only by a five-stop chromatic category palette. Purple, pink, blue, orange, and green map to the platform's product surfaces — used as full card fills, never as button backgrounds.

### Brand & Accent

Ink Black

#080808

The primary CTA, headlines, wordmark. Deeper than pure black to read as branded.

Accent Purple

#7A3DFF

Design / build product surface. Full-fill category card.

Accent Pink

#ED52CB

Animation / interaction product surface.

Accent Blue

#3B89FF

SEO / analytics product surface.

Accent Orange

#FF6B00

Hosting / infrastructure product surface.

Accent Green

#00D722

Ecommerce / success state. Uses ink text for legibility.

Accent Blue Deep

#006ACC

Emphasis link colour.

### Surface

Canvas

#FFFFFF

Default page background — every band.

Canvas Soft

#F7F7F7

Quiet wash for table headers and chip backgrounds.

Hairline

#D8D8D8

1 px borders — inputs, card chrome, dividers.

### Text

Ink

#080808

Default text + headings.

Ink Strong

#222222

Near-black emphasis.

Body

#363636

Default body paragraphs.

Body Mid

#5A5A5A

Mid-emphasis secondary — footer lines, captions.

Mute

#898989

Lower-priority labels.

Mute Soft

#ABABAB

Placeholder text, fine print.

### Semantic

Info Blue

#146EF5

Info badge / notification rail.

Success Green

#00D722

Success / completion indicator.

Warning Yellow

#FFAE13

Warning / approaching-limit state.

Error Red

#EE1D36

Validation / destructive signal.

Foundation · 02

## Typography Scale

A single proprietary sans (WF Visual Sans Variable) carries every role at restrained 400 / 500 / 550 / 600 weights. Inter is loaded here as an open-source substitute; Inconsolata stands in for the proprietary mono variant.

display-xxl80 / 83.2 · w600 · -0.8px
Build for the web
display-xl56 / 58.24 · w600
A visual platform for production
display-lg44.8 / 46.6 · w600
Section-leading headline
display-md32 / 41.6 · w500
Card-cluster headline at weight 500.
display-sm24 / 31.2 · w500
Sub-section display heading.
display-xs20 / 28 · w500
Inline display micro-heading
eyebrow-uppercase15 / 19.5 · w500 · 1.5px · upper
Eyebrow above section
eyebrow-uppercase-sm12 / 12 · w500 · 0.6px · upper
Small uppercase metadata
body-lg28.8 / 46.08 · w400 · -0.288px
Lead paragraph for hero subtitle.
body-md16 / 25.6 · w400 · -0.16px
Default body paragraph for content bands. Tight negative tracking is part of the brand voice — it pulls characters into a confident, engineered rhythm.
body-md-strong16 / 25.6 · w500 · -0.16px
Bolded inline body for emphasis within paragraphs.
body-sm14 / 22.4 · w400
Secondary body for compact areas like nav links and dense list items.
body-sm-strong14 / 22.4 · w500
Bolded short body for nav links and badge labels.
caption12.8 / 15.36 · w550
Caption / badge label · the brand's signature 550 weight
caption-mono12 / 18 · w400 · mono
/0.1 · Mono code caption — Inconsolata fallback
button-md16 / 25.6 · w500 · -0.16px
Default button label.

Components · 03

## Button Variants

Every CTA renders at a tight 4 px radius — never a pill. The brand has exactly two filled / outline rectangular variants plus a text-arrow link and a circular icon container.

button-primary · 4px · ink fill
button-secondary · 4px · hairline outline
Read the docs →
button-text-arrow · underline + arrow
button-icon-circular · pill full

Components · 04

## Cards & Containers

Card chrome sits at 8 px radius with a 1 px hairline. Featured cards step up to the brand's signature 5-stop layered drop shadow. The dark variant flips polarity to near-black on ink.

card-feature

#### Design visually, ship to production.

The canonical feature card on canvas. 1 px hairline, 8 px radius, 32 px padding. The default chrome for every product feature surface.

card-feature · elevated

#### Featured cards lift with a layered drop.

Five offset shadows stack at extremely low individual opacities — the brand's only true atmospheric effect.

card-feature-dark

#### The polarity-flipped variant.

Same geometry, near-black surface, white text. Reserved for closing-band emphasis.

card-pricing · Starter
$14

Per site per month, billed annually.

- 2 CMS items
- 1,000 monthly visits
- Community support

Get started
card-pricing · CMS
$29

For teams launching content-driven sites.

- 2,000 CMS items
- 25,000 monthly visits
- Form submissions + integrations

Start free trial
card-pricing · Business
$49

For agencies and high-traffic clients.

- 10,000 CMS items
- 250,000 monthly visits
- SLA + dedicated review

Talk to sales

Components · 05

## Form Elements

Inputs share the 4 px button radius — a tight engineered rectangle. 1 px hairline border, body-md typography, comfortable 12 / 16 px interior padding.

Foundation · 06

## Spacing Scale

A 4 px base unit. Section gutters and card interiors land at 32 px; inline gaps step through 8 / 12 / 16 / 20 / 24 px between siblings.

xxs2 px
xs4 px
sm8 px
md12 px
lg16 px
xl20 px
2xl24 px
3xl32 px

Foundation · 07

## Border Radius Scale

The brand reads as engineered — buttons take a tight 4 px rectangle, cards step up to 8 px, and pill is reserved for circular icon containers. No values in between.

none 0 px
xs 2 px
sm 4 px · buttons
md 8 px · cards
full 9999 px

Foundation · 08

## Elevation & Depth

The brand's distinctive elevation recipe is a 5-stop layered drop shadow with very low individual opacities — five offsets stacked to give a featured card a soft, atmospheric lift. Heavier modal surfaces add a deeper terminal stop.

Level 0 — FlatNo shadow, no border
Default band
Level 1 — Hairline1 px solid hairline
Default card chrome
Level 2 — Layered Drop5-stop drop shadow
Featured card
Level 3 — Layered StrongDeeper 5-stop
Pricing-tier accent
Level 4 — Heavy ModalModal stack
Dialog surface

Components · 09

## Signature Components

The brand-native composite surfaces — the canvas and ink hero bands, the standard content band, the five-stop chromatic category cards, info badges, the canvas nav, and the canvas footer. Together these define every page on the marketing site.

hero-band

### Build for the web, visually.

The canvas hero hosts the brand's display-xxl headline at 80 px weight 600 with tight -0.8 px tracking. Confident, never billboard-loud.

Start building Talk to sales
hero-band-dark

### The polarity-flipped variant.

Same scale and tracking, near-black surface, white text. Used on campaign and product-launch pages where the ink hero closes the page.

Start building Read the docs
content-band

### The standard content band on canvas.

Section headlines set in display-lg at 44.8 px weight 600 with -0.5 px tracking. Lead paragraphs sit calmly in body-md beneath.

category-card · five-stop chromatic palette

/01 · Design

#### Design

/02 · Content

#### Content

/03 · Hosting

#### Hosting

/04 · Analytics

#### Analytics

/05 · Ecommerce

#### Ecommerce

badge-info & badge-info-soft

New Beta Updated v2.0 Launch ready

nav-bar

footer

Behavior · 10

## Responsive Behavior

Four breakpoints, fluid display scale, mixed-size category grids. The 80 px hero scales fluidly down to ~44 px on mobile while preserving the brand's tight negative tracking.

Breakpoint | Width | Key Changes
--- | --- | ---
Mobile | < 479 px | Hero stacks · all grids drop to 1-up · nav collapses to hamburger.
Mobile-Large | 479 – 767 px | Same as Mobile · slight horizontal gutter relief.
Tablet | 768 – 991 px | 2-up category and pricing grids · display headlines drop to 56 – 64 px.
Desktop | ≥ 992 px | Full multi-up grids · hero at 80 px weight 600 with -0.8 px tracking.

## Pricing Tiers

Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.

/0.1 · Starter
$9/month

For individuals getting started.

- Core features
- Up to 3 projects
- Community support

/0.2 · Pro Most popular
$29/month

For teams ready to ship.

- Everything in Starter
- Unlimited projects
- Email support
- Advanced analytics

/0.3 · Team
$99/month

For organizations operating at scale.

- Everything in Pro
- SSO + audit log
- Priority support
- SLA & onboarding