mirror of
https://github.com/VoltAgent/awesome-design-md.git
synced 2026-05-14 13:06:57 +08:00
28 KiB
28 KiB
| version | name | description | colors | typography | rounded | spacing | components | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| alpha | Webflow Inspired | 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. |
|
|
|
|
|
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 pxtracking — 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 pxat 80 px, scaling through. Tight kerning is part of the voice. - Uppercase eyebrows mark every section. 15 px / weight 500 /
1.5 pxpositive 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). Eachex-*entry references brand-native primitives so downstream consumers (/preview-design,/generate-kit) re-skin the same 10 surfaces consistently.TO_FILLmarkers 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 pxtracking. - 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.