GetDesignMD
design-toolscreativecompositionalpreciseminimal

Webflow DESIGN.md — Design System Breakdown

Webflow runs on a design tools visual language anchored by #146ef5, #080808, #7a3dff. This independent Webflow DESIGN.md turns that system — palette roles, type rules, component states — into design context an AI coding agent can apply without guesswork. The Webflow design md below is the complete reference: values such as #146ef5, #080808, #7a3dff appear with their roles, alongside the System UI type rules and per-state component styling that make Webflow interfaces recognizable.

Use the Webflow design md as design context for Claude Code, Cursor, or Codex: check it into your repository and the agent implements Webflow's hierarchy, color behavior, and interface rhythm instead of inventing its own. It is an independent analysis — a practical implementation reference, not an official brand asset.

Copy the raw Webflow design md markdown, download the file, or export the palette as globals.css, Tailwind, or JSON tokens below.

Webflow design md color tokens

:root {
  --background: #080808;
  --foreground: #146ef5;
  --primary: #7a3dff;
  --card: #080808;
  --border: #146ef5;
}

Full Webflow DESIGN.md

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

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)

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

Webflow DESIGN.md FAQ

Related design systems

Clay

design-tools

Figma

design-tools

Framer

design-tools

Miro

design-tools

Generate one for your own site

Turn a public website into a grounded DESIGN.md for your AI coding workflow.

Open the generator

Design analyses adapted from the open-source awesome-design-md library.