getdesign.mdgetdesign/webflow

Webflow

Design-without-code platform — clean white canvas, Webflow Blue accent, rich secondary palette, conservative 4-8px radii, multi-layer shadows.

install

npx designkit-cli add getdesign/webflow

source ↗

previewtemplates · Webflow

Typography

Every text element the kit ships — headings through code

elements

Headings

The quick brown fox

Section heading

Subsection heading

Minor heading

Overline heading

Body text

Lead paragraph.Body text sits at the backbone of any interface — if it reads well, everything else has a chance. If it doesn't, nothing else matters.

Standard paragraph at the body size. Type hierarchies work best when the jump from body to subheading is clear but not disruptive — around 1.25-1.5× works across most contexts. Inline elements like a link, inline code, emphasis, strong, and highlighted text should all feel native to the kit.

Small / caption text — used for metadata, timestamps, descriptions under labels. Usually 14px or slightly smaller.

Links

Primary link Inline text link Subtle link Learn more →Visited / disabled

Lists

Unordered

Token-driven styling
Agent-readable format
Composable kits
- Colors
- Typography
- Component stylings
Portable between projects

Ordered

Describe the kit in prose
Extract colors and typography
Apply to a sample UI
Iterate on token values

Blockquote

“Good design is as little design as possible. Less, but better — because it concentrates on the essential aspects, and the products are not burdened with non-essentials.”
— Dieter Rams

Code

// install a kit
$ npx designkit-cli add airbnb

// apply it to your project
import { applyKit } from "@designkit/theme"
applyKit("airbnb")

Rule

Buttons

Primary, secondary, outline, ghost — every state the kit ships

elements

Default

Sizes

With icon

Feedback

Alerts, badges, progress, tooltips, avatars — the signal surface of every UI

elements

Alerts

Scheduled maintenance

We'll be rolling out a new version on Friday at 22:00 UTC. Expect a short read-only window.

Kit published

Your DESIGN.md is live. Anyone can now install it with `npx designkit-cli add you/my-kit`.

Deprecated API

You're calling /v1/kits which will be removed in 30 days. Migrate to /v2/kits.

Build failed

Two component tokens reference an undefined color. Run `designkit lint` to see them.

Badges & tags

OfficialCommunityv2.0BetaDeprecatedOutlineOutline alt

Avatars

Jeremy Dupont

Author

ALMTKPSJ+6

Progress

Upload32%

Build78%

Complete100%

Spinner

Loading…

Tooltip (static)

Tooltip text

Keyboard shortcut

Press ⌘ K to open the command palette, or Esc to dismiss.

Data display

Table, definition list, empty state — how the kit shows structured data

app

Table

Kit	Author	Installs	Updated	Status
airbnb	getdesign	12.4K	2d ago	Active
claude	getdesign	8.1K	5d ago	Active
stripe	getdesign	7.9K	1w ago	Active
linear.app	getdesign	6.2K	2w ago	Beta
heritage	dk	2.1K	1mo ago	Draft

Definition list

Name: Airbnb
Author: getdesign · Claude
Format: DESIGN.md (Google Stitch spec)
Primary font: Nunito (substitute for Airbnb Cereal VF)
Installs: 12,408
License: MIT

Empty state

No kits yet

You haven't published any kits on this account. Drop a DESIGN.md in a public repo to get started.

Breadcrumbs

Tabs

Sign in

Centered auth card — the most scrutinised surface in any app

app

Welcome back

EmailPasswordForgot?

New here? Create an account

Dashboard KPIs

Four-card stat row — the staple of every internal dashboard

app

Overview

Performance for the last 30 days

Active users

12,408

+4.2% vs last period

MRR

$28.9K

+12.1% vs last period

Churn

1.8%

-0.3% vs last period

NPS

+5 vs last period

[chart placeholder]

Chat thread

Agent + user turn-based chat — bubbles, avatar, timestamp

app

Design Agent

online · responds in seconds

Hey — what's the goal of today's session?

I want to ship a pricing page that matches our brand.

Got it. Sharing three variants in a sec — each in your brand tokens so it'll feel native. Which fits better: conversion-first, feature-first, or transparency-first?

Let's try conversion-first.

Hero

Landing-page headline + subtitle + primary CTA

marketing

New · v2.0

Designed for humans. Built for agents.

Ship a brand-aligned product in hours. Coding agents write UI that matches your design system — no brief, no handoff.

Pricing

Three-tier comparison grid with a highlighted middle tier

marketing

Simple pricing

Pay for what you use. Change plans any time.

Hobby

$0forever

1 project
Community support
Public kits only

Pro

Popular

$19per month

Unlimited projects
Private kits
Priority support
AI kit generator

Team

$49per seat / mo

Everything in Pro
Shared workspace
SSO + audit logs
Dedicated support

source

---
name: Webflow
description:
  Design-without-code platform — clean white canvas, Webflow Blue accent, rich
  secondary palette, conservative 4-8px radii, multi-layer shadows.
originalFonts:
  primary: "WF Visual Sans Variable"
  mono: "Inconsolata"
  fallbacks:
    - "Arial"
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  ink: "#080808"
  accent: "#146EF5"
  near-black: "#080808"
  webflow-blue: "#146EF5"
  blue-400: "#3B89FF"
  blue-300: "#006ACC"
  button-hover-blue: "#0055D4"
  purple: "#7A3DFF"
  pink: "#ED52CB"
  green: "#00D722"
  orange: "#FF6B00"
  yellow: "#FFAE13"
  red: "#EE1D36"
  gray-800: "#222222"
  gray-700: "#363636"
  gray-300: "#ABABAB"
  mid-gray: "#5A5A5A"
  border: "#D8D8D8"
  border-gray: "#D8D8D8"
  border-hover: "#898989"
typography:
  h1:
    family: "Inter"
    size: "5rem"
    weight: 600
    lineHeight: 1.04
  body:
    family: "Inter"
    size: "1rem"
    weight: 400
    lineHeight: 1.6
  code:
    family: "JetBrains Mono"
spacing:
  xs: "0.25rem"
  sm: "0.5rem"
  md: "0.75rem"
  lg: "1rem"
  xl: "1.5rem"
rounded:
  sm: "2px"
  md: "4px"
  lg: "8px"
  xl: "9999px"
shadows:
  sm: "rgba(0,0,0,0.09) 0px 3px 7px"
  md: "rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px"
  lg:
    "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"
components:
  button-primary:
    background: "{colors.accent}"
    color: "#FFFFFF"
    border: "1px solid {colors.accent}"
    radius: "{rounded.md}"
    padding: "0.625rem 1.25rem"
  button-secondary:
    background: "transparent"
    color: "{colors.near-black}"
    border: "1px solid {colors.border}"
    radius: "{rounded.md}"
    padding: "0.625rem 1.25rem"
  card:
    background: "#FFFFFF"
    border: "1px solid {colors.border}"
    radius: "{rounded.md}"
    padding: "1.5rem"
  input:
    background: "#FFFFFF"
    color: "{colors.near-black}"
    border: "1px solid {colors.border}"
    radius: "{rounded.md}"
    padding: "0.5rem 0.75rem"
---

<!-- source: VoltAgent/awesome-design-md @ 80bbbc2 (MIT) — see ATTRIBUTION.md -->

# Design System Inspiration of 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`

| 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`

Typography

The quick brown fox

Section heading

Subsection heading

Minor heading

Overline heading

Buttons

Form fields

Feedback

Data display

No kits yet

Sign in

Welcome back

Dashboard KPIs

Overview

Chat thread

Hero

Designed for humans. Built for agents.

Pricing

Simple pricing

Hobby

Pro

Team

source