# Webflow — Design System
> The agentic web platform for modern businesses.
- **Canonical:** https://uiuxskills.com/library/webflow
- **Source:** https://webflow.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:59.851Z

---

---
version: alpha
name: Webflow
description: The agentic web platform for modern businesses.
tone: >-
  Professional, authoritative, and empowering. The tone is direct and benefit-oriented, focusing on
  efficiency and ROI.
color-scheme: light
colors:
  primary: "#146EF5"
  on-primary: "#FFFFFF"
  surface: "#FFFFFF"
  surface-dim: "#F7F7F7"
  on-surface: "#1A1A1A"
  outline: "#E0E0E0"
  error: "#D93025"
  success: "#188038"
  focus-ring: "#146EF5"
  neutral: "#707070"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 48px
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 36px
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 30px
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 24px
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 20px
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 16px
  body-sm:
    fontFamily: Inter, sans-serif
    fontSize: 14px
  label-md:
    fontFamily: Inter, sans-serif
    fontSize: 14px
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#0D56C0"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#0D56C0"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "#E6F4EA"
    textColor: "{colors.success}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-neutral:
    backgroundColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.08)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Webflow is a high-performance, professional-grade visual development platform. Its visual identity is clean, sophisticated, and enterprise-focused, emphasizing speed, precision, and the removal of technical bottlenecks.

## Colors

The color palette is anchored in a professional, high-contrast aesthetic that prioritizes clarity and functional hierarchy.

*   Primary (#146EF5): The core brand blue used for primary CTAs and active states.
*   On-Primary (#FFFFFF) (inferred): Text color for primary buttons.
*   Surface (#FFFFFF): Main background color for the site.
*   Surface-Dim (#F7F7F7) (inferred): Background for secondary sections and cards.
*   On-Surface (#1A1A1A): Primary text color for headings and body.
*   Outline (#E0E0E0) (inferred): Border color for cards and input fields.
*   Error (#D93025) (inferred): Semantic color for errors and alerts.
*   Success (#188038) (inferred): Semantic color for positive performance metrics.
*   Focus-Ring (#146EF5) (inferred): Focus state ring color.
*   Neutral (#707070) (inferred): Secondary text and muted UI elements.

## Typography

The typography uses the Inter typeface to maintain a clean, readable, and enterprise-ready look across all screen sizes.

*   Display-lg (inferred): Main hero headlines.
*   Display-md (inferred): Section headers.
*   Headline-lg (inferred): Sub-headers.
*   Body-md (inferred): Primary body text.
*   Label-md (inferred): Button labels.
*   Label-sm (inferred): Small labels and badges.

## Layout

Webflow utilizes a responsive grid system with a max-width container (typically 1200px-1440px) and a consistent 8px base spacing rhythm. The page structure follows a logical flow: nav, hero, social-proof, features, customer-stories, cta, and footer. The hero composition typically features a centered headline and subhead with a primary CTA, accompanied by a large product UI screenshot. On smaller viewports, the navigation collapses into a hamburger menu to maintain a mobile-first experience.

## Elevation & Depth

Depth is used sparingly to differentiate cards and interactive elements from the background using a three-tier shadow system. 

*   elevation.sm — subtle lift for small UI elements.
*   elevation.md — standard card lift for content containers.
*   elevation.lg — prominent modal or drawer overlay.

## Shapes

The design system favors a moderate corner radius, utilizing the `rounded` scale to create a balance between modern softness and professional structure. A standard 8px radius (`rounded.md`) is applied to most cards and input fields to maintain a cohesive, approachable look.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The primary button uses `{colors.primary}` with `{colors.on-primary}` text, featuring a hover state that shifts to a deeper blue. Use these for high-intent actions like "Start for free" or "Contact Sales."

### Card
Cards utilize `{colors.surface}` with a subtle `{colors.outline}` border and `{rounded.md}` corners. These are best used for grouping related content or feature highlights in a clean, organized manner.

### Input Field
Input fields are styled with a `{colors.surface}` background and `{rounded.sm}` corners. When focused, they transition to the `{colors.focus-ring}` border color to provide clear visual feedback.

### Badge
Badges use `{colors.surface-dim}` for a neutral background or semantic colors like `{colors.success}` for positive indicators. They are intended for small, supplementary metadata or status labels.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Never use `{colors.error}` for non-destructive actions. |
| Apply `{typography.display-lg}` for hero headlines only. | Avoid mixing `{typography.body-md}` and `{typography.body-sm}` in the same paragraph. |
| Use `{rounded.md}` for all card components. | Do not use `{rounded.full}` on standard content cards. |
| Maintain `{spacing.md}` between form elements. | Never apply `{colors.surface-dim}` as a background for primary content. |
| Use `{colors.success}` for positive performance metrics. | Avoid using more than two font weights on a single page. |
| Ensure all buttons have a minimum height of 40px. | Do not use low-contrast text on `{colors.surface}` backgrounds. |
| Use `{colors.outline}` for subtle card borders. | Do not use heavy drop shadows (`elevation.lg`) on small buttons. |
| Apply `{typography.label-md}` for button text. | Never use `transparent` backgrounds for primary action buttons. |

## Content Style

CTA labels should use imperative verbs and sentence case, such as "Start for free" or "Talk to sales." Keep labels concise to maintain button legibility.

Headings should be phrased as concrete, benefit-led statements that focus on speed, business impact, and efficiency. Avoid vague marketing fluff in favor of direct, authoritative claims.

Copy density should be kept low, utilizing short, scannable paragraphs. Use bullet points frequently to break up complex information and improve readability for enterprise users.

## Imagery & Icons

The imagery style is mixed, combining high-fidelity product screenshots, clean vector icons, and professional portrait photography for customer stories. Icons should follow a minimal, geometric language that complements the professional aesthetic. Product screenshots should be clear and high-resolution, often displayed within browser frames or device mockups to provide context.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Webflow, a minimal enterprise web platform with a professional, authoritative tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or raw font strings.
2. Use only the component variants defined under `components:`. Do not invent new button styles, badge variants, or card treatments beyond what the spec lists.
3. Follow the Layout section for container width (1200px–1440px), the 8px spacing rhythm, and the page-section sequence (nav → hero → social-proof → features → customer-stories → CTA → footer).
4. Apply the Do's and Don'ts table as authoritative. If a user request conflicts with a rule — such as using `{colors.error}` on a non-destructive action — surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, tokens JSON) is available, those values override the spec.

## Output contract

**Must:**
- Use token names for all colors, typography, spacing, radii, and elevation values.
- Include hover, focus, and disabled states for every interactive component the spec defines — particularly `button-primary-hover`, `input-field-focus`, and `link-hover`.
- Apply `{rounded.md}` to cards and `{rounded.sm}` to inputs; never use `{rounded.full}` on content cards.
- Use `{typography.label-md}` for all button labels; `{typography.display-lg}` only in hero contexts.
- Write CTAs in imperative sentence case matching the Content Style section ("Start for free", not "GET STARTED").

**Must NOT:**
- Invent colors, font sizes, or radii outside the spec.
- Use generic system-level utility defaults when a named token exists.
- Apply `{elevation.lg}` to buttons or small UI elements.
- Add emoji, filler copy, or unsolicited marketing language.
- Rewrite existing headings, button labels, or body copy; do not alter navigation items or page-section order as a side effect of token application.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- For background choices, prefer `{colors.surface}` for primary content and `{colors.surface-dim}` only for secondary sections.
- For unspecified breakpoints, follow mobile-first with one breakpoint at 768px.
- Compose new UI by combining existing spec components rather than introducing new tokens.
- For ambiguous text roles, use `{colors.on-surface}` for primary text and `{colors.neutral}` for muted or secondary copy.