explainx.ainewsletter3.03k
// may the 4th be with you⚔️
Back to designs

DESIGN.md · explainx registry

Webflow

### Webflow - Visual web builder. - Blue-accented, polished marketing site aesthetic - Webflow's website is a visually rich, tool-forward platform that communicates "design without code" through clean white surfaces, the signat

Design & Creative Tools#design-md#awesome-design-md#design-creative-tools#webflow
Get a custom design.md for your product
DESIGN.md (markdown body)

Design System Inspired by Webflow

1. Visual Theme & Atmosphere

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.

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

2. Color Palette & Roles

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

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

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

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

3. Typography Rules

Font: WF Visual Sans Variable, fallback: Arial

RoleSizeWeightLine HeightLetter SpacingNotes
Display Hero80px6001.04-0.8px
Section Heading56px6001.04normal
Sub-heading32px5001.30normal
Feature Title24px500–6001.30normal
Body20px400–5001.40–1.50normal
Body Standard16px400–5001.60-0.16px
Button16px5001.60-0.16px
Uppercase Label15px5001.301.5pxuppercase
Caption14px400–5001.40–1.60normal
Badge Uppercase12.8px5501.20normaluppercase
Micro Uppercase10px500–6001.301pxuppercase
Code: Inconsolata (companion monospace font)

4. Component Stylings

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

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

6. Depth: 5-layer cascading shadow system

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.

8. Responsive: 479px, 768px, 992px

9. Agent Prompt Guide

  • Text: Near Black (#080808)
  • CTA: Webflow Blue (#146ef5)
  • Background: White (#ffffff)
  • Border: #d8d8d8
  • Secondary: Purple #7a3dff, Pink #ed52cb, Green #00d722

Usage

  1. Copy DESIGN.md into your project or paste it into your IDE agent chat.
  2. Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
  3. When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.

Common questions

What is Webflow on explainx.ai?
### Webflow - Visual web builder. - Blue-accented, polished marketing site aesthetic - Webflow's website is a visually rich, tool-forward platform that communicates "design without code" through clean white surfaces, the signat Listed under category “Design & Creative Tools”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
What is DESIGN.md?
DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
Where is the source repo?
Maintainers link to github.com/VoltAgent/awesome-design-md. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
How current is this DESIGN.md?
Explainx snapshots the file at import time. Recorded last update on this listing: May 4, 2026.
Need a fresh DESIGN.md from scratch?
Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.

Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.

Reference →DESIGN.md generator →Skills registry →