See it in context

The same design tokens applied across artifact kinds — a website, an app, a slide, a poster. Original mocks re-skinned with this system, not screenshots.

webflow.com

NEW · LIVE PREVIEW

Build something people love.

A mock UI rendered with the Webflow design tokens — straight from its DESIGN.md.

Get startedLearn more

Fast

Secure

Simple

Website

Webflow01 / 12

KEYNOTE

Design that ships itself.

One DESIGN.md — every surface on-brand.

NextAgenda

Slides

9:41

Webflow

Today

Make it yours.

App

Webflow2026

Make
it
real.

Open DesignDESIGN.md

Poster

Design tokens

56 tokens conforming to the Open Design token contract — the same structured palette, type, spacing, and motion values your agent reads to theme any artifact.

Surface

--bg #ffffff
--surface #ffffff
--surface-warm var(--surface)

Text

--fg #080808
--fg-2 #363636
--muted #5a5a5a
--meta #ababab

Border

--border #d8d8d8
--border-soft #ebebeb

Accent

--accent #146ef5
--accent-on #ffffff
--accent-hover #0055d4
--accent-active color-mix(in oklab, var(--accent), black 14%)

Semantic

--success #00d722
--warn #ffae13
--danger #ee1d36

Typography

--font-display "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif
--font-body "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif
--font-mono "Inconsolata", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace

Type scale

--text-xs 12px
--text-sm 14px
--text-base 16px
--text-lg 20px
--text-xl 24px
--text-2xl 32px
--text-3xl 56px
--text-4xl 80px
--leading-body 1.6
--leading-tight 1.04
--tracking-display -0.01em

Spacing

--space-1 4px
--space-2 8px
--space-3 12px
--space-4 16px
--space-5 20px
--space-6 24px
--space-8 32px
--space-12 48px
--section-y-desktop 96px
--section-y-tablet 64px
--section-y-phone 48px

Radius

--radius-sm 4px
--radius-md 4px
--radius-lg 8px
--radius-pill 9999px

Elevation

--elev-flat none
--elev-ring 0 0 0 1px var(--border)
--elev-raised 0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09)

Focus

--focus-ring 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)

Motion

--motion-fast 150ms
--motion-base 200ms
--ease-standard cubic-bezier(0.2, 0, 0, 1)

Layout

--container-max 1200px
--container-gutter-desktop 24px
--container-gutter-tablet 16px
--container-gutter-phone 12px

Design System Inspired by Webflow

Category: Design & Creative Visual web builder. Blue-accented, polished marketing site aesthetic.

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 system.

See it in context

Design tokens

Surface

Text

Border

Accent

Semantic

Typography

Type scale

Spacing

Radius

Elevation

Focus

Motion

Layout

Design System Inspired by Webflow

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Secondary Accents

Neutral

Shadows

3. Typography Rules

Font: `WF Visual Sans Variable`, fallback: `Arial`

4. Component Stylings

Buttons

Cards: `1px solid #d8d8d8`, 4px–8px radius

Badges: Blue-tinted bg at 10% opacity, 4px radius

5. Layout

6. Depth: 5-layer cascading shadow system

7. Do’s and Don’ts

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

9. Agent Prompt Guide

Tags

See it in context

Design tokens

Surface

Text

Border

Accent

Semantic

Typography

Type scale

Spacing

Radius

Elevation

Focus

Motion

Layout

Design System Inspired by Webflow

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Secondary Accents

Neutral

Shadows

3. Typography Rules

Font: WF Visual Sans Variable, fallback: Arial

4. Component Stylings

Buttons

Cards: 1px solid #d8d8d8, 4px–8px radius

Badges: Blue-tinted bg at 10% opacity, 4px radius

5. Layout

6. Depth: 5-layer cascading shadow system

7. Do’s and Don’ts

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

9. Agent Prompt Guide

Tags

Related systems in Design & Creative

Font: `WF Visual Sans Variable`, fallback: `Arial`

Cards: `1px solid #d8d8d8`, 4px–8px radius