← Gallery
extracted · 34 artefacts
webflow.com
Live extraction of https://webflow.com — tokens, emitters, anatomy, icons, voice, motion, MCP server, AGENTS.md, prompt pack and a 13-chapter brand book. Generated with one command.
18colors
Aaf0
vs design-extractor.com
See full comparison ↗They surface 4 sections per brand (DESIGN.md · Tailwind · CSS · Tokens). designlang ships 34 artefacts for webflow.com and renders 12+ sections below.
4,708 charsbrand book ↗
---
site: "Webflow: The agentic web platform for modern businesses"
url: "https://webflow.com"
generated_at: "2026-06-25T08:28:55.784Z"
generator: "designlang@13.0.0"
intent: landing
material: flat
library: bootstrap
tokens:
colors:
primary: "#146ef5"
secondary: "#6ca7ff"
accent: "#3b82f6"
background: "#ffffff"
foreground: "#000000"
typography:
sans: WF Visual Sans Variable
mono: WFVisualSans-Mono
base: 12
spacing:
scale: "[1, 23, 31, 37, 40, 46, 56, 64, 73, 80]"
radii:
xs: 2
md: 6
full: 1280
shadows:
sm: "rgba(0, 0, 0, 0) 0px 0px 0px 100px inset"
lg: "rgba(0, 0, 0, 0.12) 0px 4px 24px 0px, rgba(0, 0, 0, 0.08) 0px 1px 4px 0px"
xl: "rgba(0, 0, 0, 0) 0px 105px 30px 0px, rgba(0, 0, 0, 0.02) 0px 67px 27px 0px, rgba(0, 0, 0, 0.06) 0px 38px 23px 0px, rgba(0, 0, 0, 0.1) 0px 17px 17px 0px, rgba(0, 0, 0, 0.12) 0px 4px 9px 0px"
---
# Overview
A **landing** page (heuristic confidence 0.75), dressed in **flat** material.
Component library appears to be **bootstrap** (0.7).
> "Platform"
The author writes in a **neutral** voice; headings tend to be **Sentence case** case and **tight**.
Reading order detected on the source: `nav → nav → nav → nav → nav → nav → nav → nav → nav → nav → pricing-table → pricing-table → pricing-table → testimonial → content → pricing-table → testimonial → content → testimonial → cta → footer → nav`.
Source: <https://webflow.com>.
# Colors
| role | hex | usage |
|---|---|---|
| primary | `#146ef5` | 43 |
| secondary | `#6ca7ff` | 194 |
| accent | `#3b82f6` | 3 |
| background | `#ffffff` | — |
| foreground | `#000000` | — |
**Neutrals:** `#080808` · `#ffffff` · `#5a5a5a` · `#d8d8d8` · `#f0f0f0`
**Total unique colors detected:** 17.
# Typography
**Families**
- `WF Visual Sans Variable` · 3400 uses
- `WFVisualSans-Mono` · 374 uses
- `Times` · 8 uses
**Body size:** `12px` / line-height `12px`.
**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `74.8571px` | `600` | `77.8514px` |
| h2 | `52.5714px` | `600` | `54.6743px` |
| h3 | `30.5714px` | `500` | `39.7429px` |
| h4 | `23.4286px` | `500` | `30.4571px` |
# Layout
**Scale:** `1px` · `23px` · `31px` · `37px` · `40px` · `46px` · `56px` · `64px` · `73px` · `80px`
**Layout primitives:** 4 grid containers · 809 flex containers.
**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`
# Elevation and Depth
**Shadow scale**
- `sm` — `rgba(0, 0, 0, 0) 0px 0px 0px 100px inset`
- `lg` — `rgba(0, 0, 0, 0.12) 0px 4px 24px 0px, rgba(0, 0, 0, 0.08) 0px 1px 4px 0px`
- `xl` — `rgba(0, 0, 0, 0) 0px 84px 24px 0px, rgba(0, 0, 0, 0.01) 0px 54px 22px 0px, rgba(0, 0, 0, 0.04) 0px 30px 18px 0px, rgba(0, 0, 0, 0.08) 0px 13px 13px 0px, rgba(0, 0, 0, 0.09) 0px 3px 7px 0px`
- `xl` — `rgba(0, 0, 0, 0) 0px 105px 30px 0px, rgba(0, 0, 0, 0.02) 0px 67px 27px 0px, rgba(0, 0, 0, 0.06) 0px 38px 23px 0px, rgba(0, 0, 0, 0.1) 0px 17px 17px 0px, rgba(0, 0, 0, 0.12) 0px 4px 9px 0px`
- `xl` — `rgba(0, 0, 0, 0.01) 0px 148px 42px 0px, rgba(0, 0, 0, 0.04) 0px 95px 38px 0px, rgba(0, 0, 0, 0.15) 0px 53px 32px 0px, rgba(0, 0, 0, 0.26) 0px 24px 24px 0px, rgba(0, 0, 0, 0.29) 0px 6px 13px 0px`
**Z-index layers:** 17 · ⚠ 1 issue(s)
# Shapes
**Radius scale**
- `xs` — `2px`
- `md` — `6px`
- `full` — `50px`
- `full` — `1280px`
# Components
**Detected patterns:** `buttons` · `cards` · `inputs` · `links` · `navigation` · `footer` · `modals` · `dropdowns` · `badges` · `avatars` · `tabs` · `accordions` · `progressBars` · `switches`
**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | link | sm | 128 |
| card | link | — | 9 |
| other | — | — | 3 |
# Do's and Don'ts
**Do's**
- Use `read`, `play`, `start` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **tight** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **flat** material — match shadow and radius habits.
**Don'ts**
- Don't ship copy on the colors flagged in accessibility — 1 contrast pair(s) fail WCAG AA on the source itself.
- Don't 21 distinct font sizes — consider a tighter type scale.
- Don't 1 wcag contrast failures.
- Don't 192 !important rules — prefer specificity over overrides.
- Don't 77% of css is unused — consider purging.
---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://webflow.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._
Typography
WF Visual Sans VariableThe quick brown fox jumps
display · 56px / 600The quick brown fox jumps
headline · 36px / 500The quick brown fox jumps
subhead · 22px / 400The quick brown fox jumps
body · 16px / 400The quick brown fox jumps
caption · 12px / 500 · uppercaseAgent prompt
One self-contained system prompt with every webflow.com token, anatomy slot and voice rule. Drop it into any AI agent and it builds in this brand without hallucinating.
paste into Claude · GPT · Cursor · Windsurf · v0
# You are building UI in the webflow.com design system. Source: https://webflow.com Extracted by designlang on 2026-06-25. ## Brand at a glance - title Webflow: The agentic web platform for modern businesses - page intent landing - material flat - design grade B ## Colour - primary #146ef5 - secondary #6ca7ff - accent #3b82f6 - neutrals #080808 · #ffffff · #5a5a5a · #d8d8d8 · #f0f0f0 · #1a1a1a ## Typography - families WF Visual Sans Variable · WFVisualSans-Mono · Times - weights 400 · 500 · 600 · 550 - base size 16px ## Spacing - scale 1px · 23px · 31px · 37px · 40px · 46px · 56px · 64px · 73px · 80px · 88px · 91px ## Radii - scale 2px · 6px · 50px · 1280px ## Motion - durations 150ms · 300ms · 450ms · 1200ms ## Voice - tone neutral - pronoun you-only - headings Sentence case - CTA verbs read · play · start · get · explore · view ## Component anatomy - button variants: [object Object] · [object Object] · slots: true · false · false - card variants: [object Object] · [object Object] · slots: false · false · true · false - other variants: [object Object] · slots: — ## Accessibility - WCAG score 95% · failing pairs: 1 ## Build rules 1. Use the colours above. **Never invent a new hex.** If you need a shade between two existing colours, derive it via HSL adjustment from the closest extracted colour and call out the derivation. 2. Use the extracted typography families. If you need a missing weight, pick the nearest available weight from the list and note it. 3. Snap spacing values to the scale above. No off-scale paddings or margins. 4. Snap border radii to the scale above. 5. Match the voice: same tone, same pronoun stance, same heading style. Reuse the listed CTA verbs. 6. Aim for WCAG AA contrast minimum. When the brand colours fail, prefer the foreground colour on the background colour rather than mid-tone neutrals. 7. Reuse component anatomy when it exists — do not invent novel structures for things the site already has. ## Available context files designlang wrote these alongside this prompt. Reach for them when you need ground truth: - `<host>-design-tokens.json` — DTCG primitive · semantic · composite tokens - `<host>-tailwind.config.js` — Tailwind v3 config - `<host>-tailwind-v4.css` — Tailwind v4 `@theme` block - `<host>-tokens.d.ts` — TypeScript literal-union types - `<host>-variables.css` — bare CSS custom properties - `<host>-reset.css` — brand-aware base styles - `<host>-gradients.css` — `.grad-N` utility classes - `<host>-anatomy.tsx` — typed React component scaffolds - `<host>-shadcn-theme.css` — shadcn/ui theme - `<host>-theme.js` — React / Vue / Svelte theme object - `<host>-mcp.json` — MCP server payload (load via stdio) - `<host>.brand.pdf` — print-ready 13-chapter brand book When you reference the system in code, prefer importing from these files over hard-coding values. ## Output expectations When asked to "build a pricing page" or "make a card" or any UI: - Produce a single self-contained component file in the appropriate framework (React / Vue / Svelte — match what the user is using). - Use Tailwind utility classes wired to the v4 `@theme` if Tailwind is available; otherwise use the CSS custom properties from `variables.css`. - Write the headline copy using the brand voice; do not invent generic Lorem. - Annotate any choice where you had to bend the system, with a one-line `// note:` comment explaining what and why. ## One-line install ```bash npx designlang webflow.com ``` Run this against any other URL to extract its system in the same shape as the one above. --- Generated by designlang. Re-extract by running `npx designlang webflow.com`.
Drop this in any AI agent. It will build UI in the webflow.com brand without hallucinating colours, fonts or component shapes.
MCP / Agent rules
The same payload the stdio MCP server hands to Claude Code, Cursor and Windsurf. Wire it into your editor and the agent answers brand-system questions with the actual extraction — not a guess.
How to wire MCP →
npx designlang mcp --url https://webflow.com{
"colors": {
"all": [
{
"hex": "#080808",
"rgb": {
"r": 8,
"g": 8,
"b": 8,
"a": 1
},
"hsl": {
"h": 0,
"s": 0,
"l": 3
},
"count": 4914,
"contexts": [
"text",
"border",
"background"
]
},
{
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255,
"a": 1
},
"hsl": {
"h": 0,
"s": 0,
"l": 100
},
"count": 2099,
"contexts": [
"background",
"text",
"border"
]
},
{
"hex": "#5a5a5a",
"rgb": {
"r": 90,
"g": 90,
"b": 90,
"a": 1
},
"hsl": {
"h": 0,
"s": 0,
"l": 35
},
"count": 517,
"contexts": [
"text",
"border",
"background"
]
},
{
"hex": "#6ca7ff",
"rgb": {
"r": 108,
"g": 167,
"b": 255,
"a": 1
},
"hsl": {
"h": 216,
"s": 100,
"l": 71
},
"count": 194,
"contexts": [
"text",
"border"
]
},
{
"hex": "#d8d8d8",
"rgb": {
"r": 216,
"g": 216,
"b": 216,
"a": 1
},
"hsl": {
"h": 0,
"s": 0,
"l": 85
},
"count": 91,
"contexts": [
"border",
"background"
]
},
{
"hex": "#ffa666",
"rgb": {
"r": 255,
"g": 166,
"b": 102,
"a": 1
},
"hsl": {
"h": 25,
"s": 100,
"l": 70
},
"count": 84,
"contexts": [
"text",
"border"
]
},
{
"hex": "#146ef5",
"rgb": {
"r": 20,
"g": 110,
"b": 245,
"a": 1
},
"hsl": {
"h": 216,
"s": 92,
"l": 52
},
"count": 43,
"contexts": [
"background",
"text",
"border"
]
},
{
"hex": "#f0f0f0",
"rgb": {
"r": 240,
"g": 240,
"b": 240,
"a": 1
},
"hsl": {
"h": 0,
"s": 0,
"l": 94
},
"count": 25,
"contexts": [
"background"
]
},
{
"hex": "#60ed76",
"rgb": {
"r": 96,
"g": 237,
"b": 118,
"a": 1
},
"hsl": {
"h": 129,
"s": 80,
"l": 65
},
"count": 24,
"contexts": [
"text",
"border"
]
},
{
"hex": "#1a1a1a",
"rgb": {
"r": 26,
"g": 26,
"b": 26,
"a": 1
},
"hsl": {
"h": 0,
"s": 0,
"l": 10
},
"count": 17,
"contexts": [
"text",
"border"
]
},
{
"hex": "#6b7280",
"rgb": {
"r": 107,
"g": 114,
"b": 128,
"a": 1
},
"hsl": {
"h": 220,
"s": 9,
"l": 46
},
"count": 8,
"contexts": [
"text",
"border"
]
},
{
"hex": "#292929",
"rgb": {
"r": 41,
"g": 41,
"b": 41,
"a": 1
},
"hsl": {
"h": 0,
"s": 0,
"l": 16
},
"count": 6,
"contexts": [
"background"
]
},
{
"hex": "#464646",
"rgb": {
"r": 70,
"g": 70,
"b": 70,
"a": 1
},
"hsl": {
"h": 0,
"s": 0,
"l": 27
},
"count": 6,
"contexts": [
"background"
]
},
{
"hex": "#808080",
"rgb": {
"r": 128,
"g": 128,
"b": 128,
"a": 1
},
"hsl": {
"h": 0,
"s": 0,
"l": 50
},
"count": 5,
"contexts": [
"text"
]
},
{
"hex": "#171717",
"rgb": {
"r": 23,
"g": 23,
"b": 23,
"a": 1
},
"hsl": {
"h": 0,
"s": 0,
"l": 9
},
"count": 4,
"contexts": [
"background"
]
},
{
"hex": "#3b82f6",
"rgb": {
"r": 59,
"g": 130,
"b": 246,
"a": 1
},
"hsl": {
"h": 217,
"s": 91,
"l": 60
},
"count": 3,
"contexts": [
"text",
"border",
"background"
]
},
{
"hex": "#363636",
"rgb": {
"r": 54,
"g": 54,
"b": 54,
"a": 1
},
"hsl": {
"h": 0,
"s": 0,
"l": 21
},
"count": 1,
"contexts": [
"border"
]
}
]
},
"regions": [
{
"role": "sidebar",
"tag": "aside",
"bounds": {
"x": 0,
"y": 0,
"w": 1280,
"h": 46.390625
},
"heading": null,
"buttonCount": 0,
"cardCount": 0,
"className": "nav-banner-wrap"
},
{
"role": "nav",
"tag": "div",
"bounds": {
"x": 0,
"y": 46.390625,
"w": 1280,
"h": 68
},
"heading": "Platform",
"buttonCount": 26,
"cardCount": 84,
"className": "nav w-nav"
},
{
"role": "nav",
"tag": "nav",
"bounds": {
"x": 204,
"y": 46.390625,
"w": 413.890625,
"h": 67
},
"heading": "Platform",
"buttonCount": 24,
"cardCount": 84,
"className": "nav-menu w-nav-menu"
},
{
"role": "nav",
"tag": "nav",
"bounds": {
"x": 0,
"y": 0,
"w": 0,
"h": 0
},
"heading": null,
"buttonCount": 0,
"cardCount": 4,
"className": "nav-setting_dropdown-content w-variant-b589ac39-b092-8bfb-4add-02f955589201 w-dropdown-list"
},
{
"role": "nav",
"tag": "nav",
"bounds": {
"x": 0,
"y": 0,
"w": 0,
"h": 0
},
"heading": null,
"buttonCount": 0,
"cardCount": 4,
"className": "nav-setting_dropdown-content w-variant-b589ac39-b092-8bfb-4add-02f955589201 w-dropdown-list"
},
{
"role": "nav",
"tag": "nav",
"bounds": {
"x": 0,
"y": 0,
"w": 0,
"h": 0
},
"heading": null,
"buttonCount": 0,
"cardCount": 4,
"className": "nav-setting_dropdown-content w-variant-b589ac39-b092-8bfb-4add-02f955589201 w-dropdown-list"
},
{
"role": "nav",
"tag": "nav",
"bounds": {
"x": 0,
"y": 0,
"w": 0,
"h": 0
},
"heading": "Site Settings",
"buttonCount": 7,
"cardCount": 8,
"className": "nav-dropdown_content cc-mega w-dropdown-list"
},
{
"role": "nav",
"tag": "nav",
"bounds": {
"x": 0,
"y": 0,
"w": 0,
"h": 0
},
"heading": null,
"buttonCount": 0,
"cardCount": 4,
"className": "nav-setting_dropdown-content w-dropdown-list"
},
{
"role": "nav",
"tag": "nav",
"bounds": {
"x": 0,
"y": 0,
"w": 0,
"h": 0
},
"heading": null,
"buttonCount": 0,
"cardCount": 4,
"className": "nav-setting_dropdown-content w-variant-b589ac39-b092-8bfb-4add-02f955589201 w-dropdown-list"
},
{
"role": "pricing",
"tag": "main",
"bounds": {
"x": 0,
"y": 114.390625,
"w": 1280,
"h": 8965.4375
},
"heading": "Make your website a growth engine",
"buttonCount": 364,
"cardCount": 169,
"className": "page-main"
},
{
"role": "sidebar",
"tag": "aside",
"bounds": {
"x": 0,
"y": 114.390625,
"w": 1280,
"h": 2612.53125
},
"heading": "Make your website a growth engine",
"buttonCount": 226,
"cardCount": 61,
"className": "home-hero_sticky"
},
{
"role": "nav",
"tag": "header",
"bounds": {
"x": 0,
"y": 114.390625,
"w": 1280,
"h": 1120
},
"heading": "Make your website a growth engine",
"buttonCount": 175,
"cardCount": 44,
"className": "home-hero_section"
},
{
"role": "content",
"tag": "section",
"bounds": {
"x": 0,
"y": 1234.390625,
"w": 1280,
"h": 1044.1875
},
"heading": "Webflow is the agentic web marketing platform for high-performing brands",
"buttonCount": 24,
"cardCount": 6,
"className": "section"
},
{
"role": "content",
"tag": "section",
"bounds": {
"x": 0,
"y": 2278.578125,
"w": 1280,
"h": 448.34375
},
"heading": null,
"buttonCount": 8,
"cardCount": 2,
"className": "section"
},
{
"role": "testimonials",
"tag": "section",
"bounds": {
"x": 0,
"y": 3641.296875,
"w": 1280,
"h": 1063.609375
},
"heading": "300,000+ brands move
the needle with Webflow",
"buttonCount": 70,
"cardCount": 22,
"className": "section"
},
{
"role": "content",
"tag": "section",
"bounds": {
"x": 0,
"y": 4704.90625,
"w": 1280,
"h": 273.640625
},
"heading": "From idea to impact, faster",
"buttonCount": 8,
"cardCount": 2,
"className": "section"
},
{
"role": "content",
"tag": "section",
"bounds": {
"x": 0,
"y": 4978.546875,
"w": 1280,
"h": 986.625
},
"heading": "Build",
"buttonCount": 3,
"cardCount": 3,
"className": "section"
},
{
"role": "content",
"tag": "section",
"bounds": {
"x": 0,
"y": 5965.171875,
"w": 1280,
"h": 2008.890625
},
"heading": "Everything marketing teams love about webflow",
"buttonCount": 0,
"cardCount": 52,
"className": "section"
},
{
"role": "nav",
"tag": "nav",
"bounds": {
"x": 0,
"y": 0,
"w": 0,
"h": 0
},
"heading": null,
"buttonCount": 0,
"cardCount": 4,
"className": "persona-select_dropdown-content w-dropdown-list"
},
{
"role": "pricing",
"tag": "section",
"bounds": {
"x": 0,
"y": 7974.0625,
"w": 1280,
"h": 1105.765625
},
"heading": "Make your website your competitive edge",
"buttonCount": 19,
"cardCount": 11,
"className": "section u-mode-dark u-overflow-hidden"
},
{
"role": "footer",
"tag": "footer",
"bounds": {
"x": 0,
"y": 9079.828125,
"w": 1280,
"h": 1233.03125
},
"heading": "Product",
"buttonCount": 0,
"cardCount": 157,
"className": "section cc-footer"
},
{
"role": "nav",
"tag": "nav",
"bounds": {
"x": 64,
"y": 9156.25,
"w": 1152,
"h": 915.015625
},
"heading": "Product",
"buttonCount": 0,
"cardCount": 136,
"className": "footer_top"
}
],
"componentClusters": [
{
"kind": "button",
"structuralHash": "button>div>div",
"instanceCount": 3,
"variants": [
{
"css": {
"background": "rgba(255, 255, 255, 0)",
"color": "rgb(8, 8, 8)",
"padding": "19.2982px 0px 17.8138px 0px",
"borderRadius": "0px",
"border": "0px 0px 2px none none solid rgb(8, 8, 8) rgb(8, 8, 8) rgba(0, 0, 0, 0)",
"fontSize": "14.8448px",
"fontWeight": "500"
},
"instanceCount": 3
}
]
},
{
"kind": "button",
"structuralHash": "a",
"instanceCount": 1,
"variants": [
{
"css": {
"background": "rgb(20, 110, 245)",
"color": "rgb(255, 255, 255)",
"padding": "16px 24px 16px 24px",
"borderRadius": "4px",
"border": "0px none rgb(255, 255, 255)",
"fontSize": "16px",
"fontWeight": "500"
},
"instanceCount": 1
}
]
},
{
"kind": "button",
"structuralHash": "div>div>div>div>div>div",
"instanceCount": 39,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(255, 255, 255)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(255, 255, 255)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 18
},
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(8, 8, 8)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(8, 8, 8)",
"fontSize": "16px",
"fontWeight": "500"
},
"instanceCount": 21
}
]
},
{
"kind": "button",
"structuralHash": "div",
"instanceCount": 39,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(255, 255, 255)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(255, 255, 255)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 18
},
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(8, 8, 8)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(8, 8, 8)",
"fontSize": "16px",
"fontWeight": "500"
},
"instanceCount": 21
}
]
},
{
"kind": "button",
"structuralHash": "div>div>div>a",
"instanceCount": 9,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(8, 8, 8)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(8, 8, 8)",
"fontSize": "16px",
"fontWeight": "500"
},
"instanceCount": 5
},
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(255, 255, 255)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(255, 255, 255)",
"fontSize": "16px",
"fontWeight": "500"
},
"instanceCount": 3
},
{
"css": {
"background": "rgb(20, 110, 245)",
"color": "rgb(255, 255, 255)",
"padding": "16px 24px 16px 24px",
"borderRadius": "4px",
"border": "0px none rgb(255, 255, 255)",
"fontSize": "16px",
"fontWeight": "500"
},
"instanceCount": 1
}
]
},
{
"kind": "button",
"structuralHash": "div>div>div",
"instanceCount": 18,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(8, 8, 8)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(8, 8, 8)",
"fontSize": "16px",
"fontWeight": "500"
},
"instanceCount": 14
},
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(255, 255, 255)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(255, 255, 255)",
"fontSize": "14px",
"fontWeight": "400"
},
"instanceCount": 4
}
]
},
{
"kind": "button",
"structuralHash": "button>svg",
"instanceCount": 7,
"variants": [
{
"css": {
"background": "rgb(255, 255, 255)",
"color": "rgb(8, 8, 8)",
"padding": "0px 0px 0px 0px",
"borderRadius": "4px",
"border": "0px none rgb(8, 8, 8)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 7
}
]
},
{
"kind": "card",
"structuralHash": "div>div>a",
"instanceCount": 3,
"variants": [
{
"css": {
"background": "rgb(20, 110, 245)",
"color": "rgb(255, 255, 255)",
"padding": "12px 8px 12px 16px",
"borderRadius": "4px",
"border": "0px none rgb(216, 216, 216)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 3
}
]
},
{
"kind": "button",
"structuralHash": "button>svg>svg>div",
"instanceCount": 3,
"variants": [
{
"css": {
"background": "rgb(8, 8, 8)",
"color": "rgb(255, 255, 255)",
"padding": "4px 0px 4px 4px",
"borderRadius": "0px",
"border": "0px none rgb(255, 255, 255)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 3
}
]
},
{
"kind": "other",
"structuralHash": "svg>path",
"instanceCount": 3,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(255, 255, 255)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(255, 255, 255)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 3
}
]
},
{
"kind": "button",
"structuralHash": "button>div",
"instanceCount": 7,
"variants": [
{
"css": {
"background": "rgb(8, 8, 8)",
"color": "rgb(255, 255, 255)",
"padding": "0px 0px 0px 0px",
"borderRadius": "50%",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 2
},
{
"css": {
"background": "rgba(239, 239, 239, 0)",
"color": "rgb(8, 8, 8)",
"padding": "1px 6px 1px 6px",
"borderRadius": "0px",
"border": "0px none rgb(8, 8, 8)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 3
},
{
"css": {
"background": "rgb(255, 255, 255)",
"color": "rgb(8, 8, 8)",
"padding": "0px 0px 0px 0px",
"borderRadius": "50%",
"border": "0px none rgb(0, 0, 0)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 2
}
]
},
{
"kind": "card",
"structuralHash": "div>a>div>div>div",
"instanceCount": 6,
"variants": [
{
"css": {
"background": "rgba(0, 0, 0, 0)",
"color": "rgb(255, 255, 255)",
"padding": "0px 0px 0px 0px",
"borderRadius": "0px",
"border": "0px none rgb(255, 255, 255)",
"fontSize": "16px",
"fontWeight": "400"
},
"instanceCount": 6
}
]
},
{
"kind": "button",
"structuralHash": "div>div>a",
"instanceCount": 2,
"variants": [
{
"css": {
"background": "rgb(20, 110, 245)",
"color": "rgb(255, 255, 255)",
"padding": "16px 24px 16px 24px",
"borderRadius": "4px",
"border": "0px none rgb(255, 255, 255)",
"fontSize": "16px",
"fontWeight": "500"
},
"instanceCount": 2
}
]
}
],
"accessibility": {
"remediation": [
{
"fg": "#ffffff",
"bg": "#3b82f6",
"ratio": 3.68,
"rule": "AA-normal",
"suggestion": {
"replace": "fg",
"color": "#080808",
"newRatio": 5.45
}
}
]
},
"cssHealth": {
"sheets": [
{
"url": "https://webflow.com/",
"totalBytes": 229,
"usedBytes": 0,
"unusedBytes": 229,
"unusedPercent": 100
},
{
"url": "https://cdn.prod.website-files.com/686294e263eb7e215bd232f7/css/marketing-main.webflow.shared.32a93732d.min.css",
"totalBytes": 30044,
"usedBytes": 3144,
"unusedBytes": 26900,
"unusedPercent": 90
},
{
"url": "https://webflow.com/",
"totalBytes": 86,
"usedBytes": 86,
"unusedBytes": 0,
"unusedPercent": 0
},
{
"url": "https://webflow.com/",
"totalBytes": 627,
"usedBytes": 0,
"unusedBytes": 627,
"unusedPercent": 100
},
{
"url": "https://webflow.com/",
"totalBytes": 100,
"usedBytes": 100,
"unusedBytes": 0,
"unusedPercent": 0
},
{
"url": "https://cdn.prod.website-files.com/686294e263eb7e215bd232f7/css/marketing-main.webflow.686294e363eb7e215bd2334b.946a6d65c.opt.min.css",
"totalBytes": 201976,
"usedBytes": 63128,
"unusedBytes": 138848,
"unusedPercent": 69
},
{
"url": "https://fonts.googleapis.com/css?family=Inconsolata:400,700",
"totalBytes": 2678,
"usedBytes": 0,
"unusedBytes": 2678,
"unusedPercent": 100
},
{
"url": "https://webflow.com/",
"totalBytes": 221,
"usedBytes": 0,
"unusedBytes": 221,
"unusedPercent": 100
},
{
"url": "https://webflow.com/",
"totalBytes": 3496,
"usedBytes": 0,
"unusedBytes": 3496,
"unusedPercent": 100
},
{
"url": "https://webflow.com/",
"totalBytes": 31452,
"usedBytes": 8103,
"unusedBytes": 23349,
"unusedPercent": 74
},
{
"url": "https://webflow.com/",
"totalBytes": 16519,
"usedBytes": 2096,
"unusedBytes": 14423,
"unusedPercent": 87
},
{
"url": "https://webflow.com/",
"totalBytes": 2370,
"usedBytes": 138,
"unusedBytes": 2232,
"unusedPercent": 94
},
{
"url": "https://webflow.com/",
"totalBytes": 4982,
"usedBytes": 930,
"unusedBytes": 4052,
"unusedPercent": 81
},
{
"url": "https://webflow.com/",
"totalBytes": 1875,
"usedBytes": 152,
"unusedBytes": 1723,
"unusedPercent": 92
},
{
"url": "https://webflow.com/",
"totalBytes": 574,
"usedBytes": 392,
"unusedBytes": 182,
"unusedPercent": 32
},
{
"url": "https://webflow.com/",
"totalBytes": 1081,
"usedBytes": 135,
"unusedBytes": 946,
"unusedPercent": 88
},
{
"url": "https://webflow.com/",
"totalBytes": 389,
"usedBytes": 252,
"unusedBytes": 137,
"unusedPercent": 35
},
{
"url": "https://webflow.com/",
"totalBytes": 149,
"usedBytes": 145,
"unusedBytes": 4,
"unusedPercent": 3
},
{
"url": "https://webflow.com/",
"totalBytes": 2636,
"usedBytes": 0,
"unusedBytes": 2636,
"unusedPercent": 100
},
{
"url": "https://webflow.com/",
"totalBytes": 2636,
"usedBytes": 0,
"unusedBytes": 2636,
"unusedPercent": 100
},
{
"url": "https://webflow.com/",
"totalBytes": 2636,
"usedBytes": 0,
"unusedBytes": 2636,
"unusedPercent": 100
},
{
"url": "https://webflow.com/",
"totalBytes": 2636,
"usedBytes": 773,
"unusedBytes": 1863,
"unusedPercent": 71
},
{
"url": "https://webflow.com/",
"totalBytes": 357,
"usedBytes": 63,
"unusedBytes": 294,
"unusedPercent": 82
},
{
"url": "https://cdn.jsdelivr.net/gh/webflow/brand_studio@65ba06b/marketo/wow-marketo-forms.min.css",
"totalBytes": 12663,
"usedBytes": 545,
"unusedBytes": 12118,
"unusedPercent": 96
},
{
"url": "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css",
"totalBytes": 18454,
"usedBytes": 897,
"unusedBytes": 17557,
"unusedPercent": 95
},
{
"url": "https://transcend-cdn.com/cm/8088b5a5-758a-405d-b0f7-015c7b573b7f/cm.css",
"totalBytes": 19605,
"usedBytes": 3653,
"unusedBytes": 15952,
"unusedPercent": 81
},
{
"url": "https://accounts.google.com/gsi/style",
"totalBytes": 696,
"usedBytes": 0,
"unusedBytes": 696,
"unusedPercent": 100
},
{
"url": "https://webflow.com/",
"totalBytes": 0,
"usedBytes": 0,
"unusedBytes": 0,
"unusedPercent": 0
}
],
"totalBytes": 361167,
"usedBytes": 84732,
"unusedBytes": 276435,
"unusedPercent": 77,
"importantCount": 192,
"duplicates": 4782,
"vendorPrefixes": {
"webkit": 98,
"moz": 7,
"ms": 2,
"o": 1
},
"keyframes": [
{
"name": "marquee_1_timeline",
"steps": 2
},
{
"name": "fadeIn",
"steps": 2
}
],
"specificity": {
"max": [
1,
8,
24
],
"average": [
0.01,
1.72,
0.46
],
"count": 3387
},
"issues": [
"192 !important rules",
"4782 duplicate declarations",
"77% unused CSS"
]
}
}All artefacts
Every file designlang produced for webflow.com — 34 in total. Download anything.
Run designlang on your own URL.
Same 34-artefact depth as the webflow.com extraction above. No signup, no API key.
npx designlang yoursite.comTry it live