update design.md v2
This commit is contained in:
necatiozmen
+567
-71
@@ -1,92 +1,588 @@
|
||||
# Design System Inspired by Webflow
|
||||
---
|
||||
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.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
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"
|
||||
accent-purple: "#7a3dff"
|
||||
accent-pink: "#ed52cb"
|
||||
accent-blue: "#3b89ff"
|
||||
accent-blue-deep: "#006acc"
|
||||
accent-blue-info: "#146ef5"
|
||||
accent-orange: "#ff6b00"
|
||||
accent-green: "#00d722"
|
||||
accent-yellow: "#ffae13"
|
||||
accent-red: "#ee1d36"
|
||||
|
||||
Webflow's website is a visually rich, tool-forward platform that communicates "design without code" through clean white surfaces, the signature Webflow Blue (`#146ef5`), and a rich secondary color palette (purple, pink, green, orange, yellow, red). The custom WF Visual Sans Variable font creates a confident, precise typographic system with weight 600 for display and 500 for body.
|
||||
typography:
|
||||
display-xxl:
|
||||
fontFamily: WF Visual Sans Variable, Inter, system-ui, -apple-system, sans-serif
|
||||
fontSize: 80px
|
||||
fontWeight: 600
|
||||
lineHeight: 83.2px
|
||||
letterSpacing: -0.8px
|
||||
display-xl:
|
||||
fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif
|
||||
fontSize: 56px
|
||||
fontWeight: 600
|
||||
lineHeight: 58.24px
|
||||
display-lg:
|
||||
fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif
|
||||
fontSize: 44.8px
|
||||
fontWeight: 600
|
||||
lineHeight: 46.6px
|
||||
display-md:
|
||||
fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif
|
||||
fontSize: 32px
|
||||
fontWeight: 500
|
||||
lineHeight: 41.6px
|
||||
display-sm:
|
||||
fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif
|
||||
fontSize: 24px
|
||||
fontWeight: 500
|
||||
lineHeight: 31.2px
|
||||
display-xs:
|
||||
fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif
|
||||
fontSize: 20px
|
||||
fontWeight: 500
|
||||
lineHeight: 28px
|
||||
eyebrow-uppercase:
|
||||
fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif
|
||||
fontSize: 15px
|
||||
fontWeight: 500
|
||||
lineHeight: 19.5px
|
||||
letterSpacing: 1.5px
|
||||
eyebrow-uppercase-sm:
|
||||
fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif
|
||||
fontSize: 12px
|
||||
fontWeight: 500
|
||||
lineHeight: 12px
|
||||
letterSpacing: 0.6px
|
||||
body-lg:
|
||||
fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif
|
||||
fontSize: 28.8px
|
||||
fontWeight: 400
|
||||
lineHeight: 46.08px
|
||||
letterSpacing: -0.288px
|
||||
body-md:
|
||||
fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 25.6px
|
||||
letterSpacing: -0.16px
|
||||
body-md-strong:
|
||||
fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif
|
||||
fontSize: 16px
|
||||
fontWeight: 500
|
||||
lineHeight: 25.6px
|
||||
letterSpacing: -0.16px
|
||||
body-sm:
|
||||
fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 22.4px
|
||||
body-sm-strong:
|
||||
fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 22.4px
|
||||
caption:
|
||||
fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif
|
||||
fontSize: 12.8px
|
||||
fontWeight: 550
|
||||
lineHeight: 15.36px
|
||||
caption-mono:
|
||||
fontFamily: WFVisualSans-Mono, Inconsolata, ui-monospace, SFMono-Regular, Menlo, monospace
|
||||
fontSize: 12px
|
||||
fontWeight: 400
|
||||
lineHeight: 18px
|
||||
button-md:
|
||||
fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif
|
||||
fontSize: 16px
|
||||
fontWeight: 500
|
||||
lineHeight: 25.6px
|
||||
letterSpacing: -0.16px
|
||||
|
||||
rounded:
|
||||
none: 0px
|
||||
xs: 2px
|
||||
sm: 4px
|
||||
md: 8px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 2px
|
||||
xs: 4px
|
||||
sm: 8px
|
||||
md: 12px
|
||||
lg: 16px
|
||||
xl: 20px
|
||||
2xl: 24px
|
||||
3xl: 32px
|
||||
|
||||
components:
|
||||
nav-bar:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm-strong}"
|
||||
padding: "{spacing.lg} {spacing.3xl}"
|
||||
nav-link:
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm-strong}"
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: "{spacing.md} {spacing.xl}"
|
||||
button-secondary:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
borderColor: "{colors.hairline}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: "{spacing.md} {spacing.xl}"
|
||||
button-text-arrow:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button-md}"
|
||||
padding: "{spacing.xl} 0"
|
||||
button-icon-circular:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "{spacing.sm}"
|
||||
text-input:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
borderColor: "{colors.hairline}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: "{spacing.md} {spacing.lg}"
|
||||
badge-info:
|
||||
backgroundColor: "{colors.accent-blue-info}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: "{spacing.xs} {spacing.sm}"
|
||||
badge-info-soft:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.accent-blue-info}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: "{spacing.xs} {spacing.sm}"
|
||||
card-feature:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
borderColor: "{colors.hairline}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.3xl}"
|
||||
card-feature-dark:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.3xl}"
|
||||
card-pricing:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
borderColor: "{colors.hairline}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.3xl}"
|
||||
hero-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-xxl}"
|
||||
padding: "{spacing.3xl} {spacing.3xl}"
|
||||
hero-band-dark:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.display-xxl}"
|
||||
padding: "{spacing.3xl} {spacing.3xl}"
|
||||
content-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-lg}"
|
||||
padding: "{spacing.3xl} {spacing.3xl}"
|
||||
category-card-purple:
|
||||
backgroundColor: "{colors.accent-purple}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.display-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.3xl}"
|
||||
category-card-blue:
|
||||
backgroundColor: "{colors.accent-blue}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.display-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.3xl}"
|
||||
category-card-orange:
|
||||
backgroundColor: "{colors.accent-orange}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.display-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.3xl}"
|
||||
category-card-green:
|
||||
backgroundColor: "{colors.accent-green}"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.display-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.3xl}"
|
||||
category-card-pink:
|
||||
backgroundColor: "{colors.accent-pink}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.display-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.3xl}"
|
||||
footer:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.body-mid}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: "{spacing.3xl} {spacing.3xl}"
|
||||
|
||||
# ─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ───
|
||||
ex-pricing-tier:
|
||||
description: "Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface."
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
borderColor: "{colors.hairline}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.3xl}"
|
||||
ex-pricing-tier-featured:
|
||||
description: "Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode)."
|
||||
backgroundColor: "{colors.ink}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.3xl}"
|
||||
ex-product-selector:
|
||||
description: "What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery)."
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.3xl}"
|
||||
ex-cart-drawer:
|
||||
description: "Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart)."
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.2xl}"
|
||||
item-divider: "{colors.hairline}"
|
||||
ex-app-shell-row:
|
||||
description: "Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator."
|
||||
backgroundColor: "{colors.canvas}"
|
||||
activeIndicator: "{colors.primary}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: "{spacing.md} {spacing.lg}"
|
||||
ex-data-table-cell:
|
||||
description: "Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm."
|
||||
headerBackground: "{colors.canvas}"
|
||||
headerTypography: "{typography.caption}"
|
||||
bodyTypography: "{typography.body-sm}"
|
||||
cellPadding: "{spacing.md} {spacing.lg}"
|
||||
rowBorder: "{colors.hairline}"
|
||||
ex-auth-form-card:
|
||||
description: "Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside."
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.3xl}"
|
||||
ex-modal-card:
|
||||
description: "Modal dialog surface — same chrome as feature-card with elevated shadow."
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.3xl}"
|
||||
ex-empty-state-card:
|
||||
description: "Empty-state illustration frame."
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.3xl}"
|
||||
captionTypography: "{typography.body-md}"
|
||||
ex-toast:
|
||||
description: "Toast notification surface — feature-card shape + medium shadow."
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.md} {spacing.lg}"
|
||||
typography: "{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:**
|
||||
- White canvas with near-black (`#080808`) text
|
||||
- Webflow Blue (`#146ef5`) as primary brand + interactive color
|
||||
- WF Visual Sans Variable — custom variable font with weight 500–600
|
||||
- Rich secondary palette: purple `#7a3dff`, pink `#ed52cb`, green `#00d722`, orange `#ff6b00`, yellow `#ffae13`, red `#ee1d36`
|
||||
- Conservative 4px–8px border-radius — sharp, not rounded
|
||||
- Multi-layer shadow stacks (5-layer cascading shadows)
|
||||
- Uppercase labels: 10px–15px, weight 500–600, wide letter-spacing (0.6px–1.5px)
|
||||
- translate(6px) hover animation on buttons
|
||||
- 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.
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
## Colors
|
||||
|
||||
### Primary
|
||||
- **Near Black** (`#080808`): Primary text
|
||||
- **Webflow Blue** (`#146ef5`): `--_color---primary--webflow-blue`, primary CTA and links
|
||||
- **Blue 400** (`#3b89ff`): `--_color---primary--blue-400`, lighter interactive blue
|
||||
- **Blue 300** (`#006acc`): `--_color---blue-300`, darker blue variant
|
||||
- **Button Hover Blue** (`#0055d4`): `--mkto-embed-color-button-hover`
|
||||
### 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.
|
||||
|
||||
### Secondary Accents
|
||||
- **Purple** (`#7a3dff`): `--_color---secondary--purple`
|
||||
- **Pink** (`#ed52cb`): `--_color---secondary--pink`
|
||||
- **Green** (`#00d722`): `--_color---secondary--green`
|
||||
- **Orange** (`#ff6b00`): `--_color---secondary--orange`
|
||||
- **Yellow** (`#ffae13`): `--_color---secondary--yellow`
|
||||
- **Red** (`#ee1d36`): `--_color---secondary--red`
|
||||
### Surface
|
||||
- **Canvas** (`{colors.canvas}` — `#ffffff`): The default page background.
|
||||
- **Hairline** (`{colors.hairline}` — `#d8d8d8`): 1 px solid borders — input borders, card chrome, divider lines.
|
||||
|
||||
### Neutral
|
||||
- **Gray 800** (`#222222`): Dark secondary text
|
||||
- **Gray 700** (`#363636`): Mid text
|
||||
- **Gray 300** (`#ababab`): Muted text, placeholder
|
||||
- **Mid Gray** (`#5a5a5a`): Link text
|
||||
- **Border Gray** (`#d8d8d8`): Borders, dividers
|
||||
- **Border Hover** (`#898989`): Hover border
|
||||
### 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.
|
||||
|
||||
### Shadows
|
||||
- **5-layer cascade**: `rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
|
||||
### 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.
|
||||
|
||||
## 3. Typography Rules
|
||||
## Typography
|
||||
|
||||
### Font: `WF Visual Sans Variable`, fallback: `Arial`
|
||||
### 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.
|
||||
|
||||
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | 80px | 600 | 1.04 | -0.8px | |
|
||||
| Section Heading | 56px | 600 | 1.04 | normal | |
|
||||
| Sub-heading | 32px | 500 | 1.30 | normal | |
|
||||
| Feature Title | 24px | 500–600 | 1.30 | normal | |
|
||||
| Body | 20px | 400–500 | 1.40–1.50 | normal | |
|
||||
| Body Standard | 16px | 400–500 | 1.60 | -0.16px | |
|
||||
| Button | 16px | 500 | 1.60 | -0.16px | |
|
||||
| Uppercase Label | 15px | 500 | 1.30 | 1.5px | uppercase |
|
||||
| Caption | 14px | 400–500 | 1.40–1.60 | normal | |
|
||||
| Badge Uppercase | 12.8px | 550 | 1.20 | normal | uppercase |
|
||||
| Micro Uppercase | 10px | 500–600 | 1.30 | 1px | uppercase |
|
||||
| Code: Inconsolata (companion monospace font)
|
||||
### Hierarchy
|
||||
|
||||
## 4. Component Stylings
|
||||
| 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
|
||||
- Transparent: text `#080808`, translate(6px) on hover
|
||||
- White circle: 50% radius, white bg
|
||||
- Blue badge: `#146ef5` bg, 4px radius, weight 550
|
||||
|
||||
### Cards: `1px solid #d8d8d8`, 4px–8px radius
|
||||
### Badges: Blue-tinted bg at 10% opacity, 4px radius
|
||||
**`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.
|
||||
|
||||
## 5. Layout
|
||||
- Spacing: fractional scale (1px, 2.4px, 3.2px, 4px, 5.6px, 6px, 7.2px, 8px, 9.6px, 12px, 16px, 24px)
|
||||
- Radius: 2px, 4px, 8px, 50% — conservative, sharp
|
||||
- Breakpoints: 479px, 768px, 992px
|
||||
**`button-secondary`** — the white outline CTA.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}` border, same typography + padding + shape.
|
||||
|
||||
## 6. Depth: 5-layer cascading shadow system
|
||||
**`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.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
- Do: Use WF Visual Sans Variable at 500–600. Blue (#146ef5) for CTAs. 4px radius. translate(6px) hover.
|
||||
- Don't: Round beyond 8px for functional elements. Use secondary colors on primary CTAs.
|
||||
**`button-icon-circular`** — the circular icon button for carousel controls.
|
||||
- Background `{colors.canvas}`, ink icon, shape `{rounded.full}`.
|
||||
|
||||
## 8. Responsive: 479px, 768px, 992px
|
||||
### Cards & Containers
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
- Text: Near Black (`#080808`)
|
||||
- CTA: Webflow Blue (`#146ef5`)
|
||||
- Background: White (`#ffffff`)
|
||||
- Border: `#d8d8d8`
|
||||
- Secondary: Purple `#7a3dff`, Pink `#ed52cb`, Green `#00d722`
|
||||
**`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.
|
||||
|
||||
Reference in New Issue
Block a user