Skip to content

DESIGN.md

Latest commit

 

History

History
588 lines (507 loc) · 27.5 KB

DESIGN.md

File metadata and controls

588 lines (507 loc) · 27.5 KB
Raw
version alpha
name Webflow Inspired
description An inspired interpretation of Webflow's design language — a visual web development platform whose surface contrasts a deep near-black `#080808` 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 the proprietary WF Visual Sans family used at restrained 500 / 600 weights with negative tracking.
colors
primary on-primary ink ink-strong body body-mid mute mute-soft hairline canvas accent-purple accent-pink accent-blue accent-blue-deep accent-blue-info accent-orange accent-green accent-yellow accent-red
#080808
#ffffff
#080808
#222222
#363636
#5a5a5a
#898989
#ababab
#d8d8d8
#ffffff
#7a3dff
#ed52cb
#3b89ff
#006acc
#146ef5
#ff6b00
#00d722
#ffae13
#ee1d36
typography
display-xxl display-xl display-lg display-md display-sm display-xs eyebrow-uppercase eyebrow-uppercase-sm body-lg body-md body-md-strong body-sm body-sm-strong caption caption-mono button-md
fontFamily fontSize fontWeight lineHeight letterSpacing
WF Visual Sans Variable, Inter, system-ui, -apple-system, sans-serif
80px
600
83.2px
-0.8px
fontFamily fontSize fontWeight lineHeight
WF Visual Sans Variable, Inter, system-ui, sans-serif
56px
600
58.24px
fontFamily fontSize fontWeight lineHeight
WF Visual Sans Variable, Inter, system-ui, sans-serif
44.8px
600
46.6px
fontFamily fontSize fontWeight lineHeight
WF Visual Sans Variable, Inter, system-ui, sans-serif
32px
500
41.6px
fontFamily fontSize fontWeight lineHeight
WF Visual Sans Variable, Inter, system-ui, sans-serif
24px
500
31.2px
fontFamily fontSize fontWeight lineHeight
WF Visual Sans Variable, Inter, system-ui, sans-serif
20px
500
28px
fontFamily fontSize fontWeight lineHeight letterSpacing
WF Visual Sans Variable, Inter, system-ui, sans-serif
15px
500
19.5px
1.5px
fontFamily fontSize fontWeight lineHeight letterSpacing
WF Visual Sans Variable, Inter, system-ui, sans-serif
12px
500
12px
0.6px
fontFamily fontSize fontWeight lineHeight letterSpacing
WF Visual Sans Variable, Inter, system-ui, sans-serif
28.8px
400
46.08px
-0.288px
fontFamily fontSize fontWeight lineHeight letterSpacing
WF Visual Sans Variable, Inter, system-ui, sans-serif
16px
400
25.6px
-0.16px
fontFamily fontSize fontWeight lineHeight letterSpacing
WF Visual Sans Variable, Inter, system-ui, sans-serif
16px
500
25.6px
-0.16px
fontFamily fontSize fontWeight lineHeight
WF Visual Sans Variable, Inter, system-ui, sans-serif
14px
400
22.4px
fontFamily fontSize fontWeight lineHeight
WF Visual Sans Variable, Inter, system-ui, sans-serif
14px
500
22.4px
fontFamily fontSize fontWeight lineHeight
WF Visual Sans Variable, Inter, system-ui, sans-serif
12.8px
550
15.36px
fontFamily fontSize fontWeight lineHeight
WFVisualSans-Mono, Inconsolata, ui-monospace, SFMono-Regular, Menlo, monospace
12px
400
18px
fontFamily fontSize fontWeight lineHeight letterSpacing
WF Visual Sans Variable, Inter, system-ui, sans-serif
16px
500
25.6px
-0.16px
rounded
none xs sm md full
0px
2px
4px
8px
9999px
spacing
xxs xs sm md lg xl 2xl 3xl
2px
4px
8px
12px
16px
20px
24px
32px
components
nav-bar nav-link button-primary button-secondary button-text-arrow button-icon-circular text-input badge-info badge-info-soft card-feature card-feature-dark card-pricing hero-band hero-band-dark content-band category-card-purple category-card-blue category-card-orange category-card-green category-card-pink footer ex-pricing-tier ex-pricing-tier-featured ex-product-selector ex-cart-drawer ex-app-shell-row ex-data-table-cell ex-auth-form-card ex-modal-card ex-empty-state-card ex-toast
backgroundColor textColor typography padding
{colors.canvas}
{colors.ink}
{typography.body-sm-strong}
{spacing.lg} {spacing.3xl}
textColor typography
{colors.ink}
{typography.body-sm-strong}
backgroundColor textColor typography rounded padding
{colors.primary}
{colors.on-primary}
{typography.button-md}
{rounded.sm}
{spacing.md} {spacing.xl}
backgroundColor textColor borderColor typography rounded padding
{colors.canvas}
{colors.ink}
{colors.hairline}
{typography.button-md}
{rounded.sm}
{spacing.md} {spacing.xl}
backgroundColor textColor typography padding
{colors.canvas}
{colors.ink}
{typography.button-md}
{spacing.xl} 0
backgroundColor textColor rounded padding
{colors.canvas}
{colors.ink}
{rounded.full}
{spacing.sm}
backgroundColor textColor borderColor typography rounded padding
{colors.canvas}
{colors.ink}
{colors.hairline}
{typography.body-md}
{rounded.sm}
{spacing.md} {spacing.lg}
backgroundColor textColor typography rounded padding
{colors.accent-blue-info}
{colors.on-primary}
{typography.caption}
{rounded.sm}
{spacing.xs} {spacing.sm}
backgroundColor textColor typography rounded padding
{colors.canvas}
{colors.accent-blue-info}
{typography.caption}
{rounded.sm}
{spacing.xs} {spacing.sm}
backgroundColor textColor borderColor typography rounded padding
{colors.canvas}
{colors.ink}
{colors.hairline}
{typography.body-md}
{rounded.md}
{spacing.3xl}
backgroundColor textColor typography rounded padding
{colors.primary}
{colors.on-primary}
{typography.body-md}
{rounded.md}
{spacing.3xl}
backgroundColor textColor borderColor typography rounded padding
{colors.canvas}
{colors.ink}
{colors.hairline}
{typography.body-md}
{rounded.md}
{spacing.3xl}
backgroundColor textColor typography padding
{colors.canvas}
{colors.ink}
{typography.display-xxl}
{spacing.3xl} {spacing.3xl}
backgroundColor textColor typography padding
{colors.primary}
{colors.on-primary}
{typography.display-xxl}
{spacing.3xl} {spacing.3xl}
backgroundColor textColor typography padding
{colors.canvas}
{colors.ink}
{typography.display-lg}
{spacing.3xl} {spacing.3xl}
backgroundColor textColor typography rounded padding
{colors.accent-purple}
{colors.on-primary}
{typography.display-md}
{rounded.md}
{spacing.3xl}
backgroundColor textColor typography rounded padding
{colors.accent-blue}
{colors.on-primary}
{typography.display-md}
{rounded.md}
{spacing.3xl}
backgroundColor textColor typography rounded padding
{colors.accent-orange}
{colors.on-primary}
{typography.display-md}
{rounded.md}
{spacing.3xl}
backgroundColor textColor typography rounded padding
{colors.accent-green}
{colors.primary}
{typography.display-md}
{rounded.md}
{spacing.3xl}
backgroundColor textColor typography rounded padding
{colors.accent-pink}
{colors.on-primary}
{typography.display-md}
{rounded.md}
{spacing.3xl}
backgroundColor textColor typography padding
{colors.canvas}
{colors.body-mid}
{typography.body-sm}
{spacing.3xl} {spacing.3xl}
description backgroundColor textColor borderColor rounded padding
Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.
{colors.canvas}
{colors.ink}
{colors.hairline}
{rounded.md}
{spacing.3xl}
description backgroundColor textColor rounded padding
Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).
{colors.ink}
{colors.on-primary}
{rounded.md}
{spacing.3xl}
description backgroundColor rounded padding
What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).
{colors.canvas}
{rounded.md}
{spacing.3xl}
description backgroundColor rounded padding item-divider
Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).
{colors.canvas}
{rounded.md}
{spacing.2xl}
{colors.hairline}
description backgroundColor activeIndicator rounded padding
Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.
{colors.canvas}
{colors.primary}
{rounded.sm}
{spacing.md} {spacing.lg}
description headerBackground headerTypography bodyTypography cellPadding rowBorder
Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.
{colors.canvas}
{typography.caption}
{typography.body-sm}
{spacing.md} {spacing.lg}
{colors.hairline}
description backgroundColor rounded padding
Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.
{colors.canvas}
{rounded.md}
{spacing.3xl}
description backgroundColor rounded padding
Modal dialog surface — same chrome as feature-card with elevated shadow.
{colors.canvas}
{rounded.md}
{spacing.3xl}
description backgroundColor rounded padding captionTypography
Empty-state illustration frame.
{colors.canvas}
{rounded.md}
{spacing.3xl}
{typography.body-md}
description backgroundColor rounded padding typography
Toast notification surface — feature-card shape + medium shadow.
{colors.canvas}
{rounded.md}
{spacing.md} {spacing.lg}
{typography.body-sm}

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

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

Name Width Key Changes
Mobile < 479px Hero stacks; all grids 1-up.
Mobile-Large 479–767px Same as Mobile.
Tablet 768–991px 2-up grids.
Desktop ≥ 992px Full multi-up grids.

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

Level Treatment Use
Level 0 — Flat No shadow, no border. Default bands.
Level 1 — Hairline 1 px solid {colors.hairline} border on {colors.canvas}. Default card chrome and input borders.
Level 2 — Layered Drop Multi-stop layered shadow with subtle warm offsets — 0 84px 24px rgba(0,0,0,0), 0 54px 22px rgba(0,0,0,0.01), 0 30px 18px rgba(0,0,0,0.04), 0 13px 13px rgba(0,0,0,0.08), 0 3px 7px rgba(0,0,0,0.09). Featured cards needing visible lift.
Level 3 — Layered Drop Strong Deeper version of Level 2 with 0.12 final offset opacity. Pricing / modal-level emphasis.
Level 4 — Heavy Modal Extremely heavy multi-stop — 0 24px 24px rgba(0,0,0,0.26), 0 6px 13px rgba(0,0,0,0.29) final stops. Modal / dialog surfaces.

Decorative Depth

  • The chromatic category cards (full-saturation purple / pink / blue / orange / green 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

Token Value Use
{rounded.none} 0px Full-bleed bands.
{rounded.xs} 2px Tight inline pills.
{rounded.sm} 4px The brand's canonical button + badge + small-element radius.
{rounded.md} 8px Card chrome and feature / category cards.
{rounded.full} 9999px Circular icon containers only.

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}, 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).

  • 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 / 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.