# Design Extractor > Design Extractor turns a public website URL into a DESIGN.md: a Markdown design system with the site's colors, typography, spacing and components that AI coding agents such as Claude Code, Cursor and Codex read as a style reference. This file holds the full text of the public docs and the free tool pages, the pricing facts and the gallery list, generated from the live pages. The short index is https://www.design-extractor.com/llms.txt. Agents can connect to the remote MCP server at https://www.design-extractor.com/api/mcp (Server Card at https://www.design-extractor.com/api/mcp/server-card). --- # Docs Source: https://www.design-extractor.com/docs/how-it-works Docs ## How Design Extractor works Paste a URL, get a structured design spec. Colors, typography, spacing, and components in a DESIGN.md you can drop into a repo. ### What is a DESIGN.md? A `DESIGN.md` is a plain-text design system document that both humans and AI agents can read. Think of it as the design counterpart to `AGENTS.md`. Where `AGENTS.md` tells agents how to build the project, `DESIGN.md` tells them how it should look and feel. Under the hood, every `DESIGN.md` has two layers: YAML front matter with machine-readable design tokens, and a markdown body that explains the design rationale. Tokens give agents precise values. Prose tells them why those values exist. [Read the full DESIGN.md specification ->](https://www.design-extractor.com/docs/design-md) ### Canonical sections - Overview - Colors - Typography - Layout - Elevation & Depth - Shapes - Components - Do's and Don'ts ### How it works 1. Input Paste a public URL (e.g., `design-extractor.com`). 2. Extraction The system crawls the page, analyzes its visual properties: colors, typography, spacing, component patterns, and overall design language. 3. Output One DESIGN.md containing: - Overview and brand style guidance - Color palettes with named tokens - Typography levels and font properties - Layout, spacing, and shape tokens - Component guidance and token references - Do's and don'ts that act as design guardrails ### Output Each extraction produces one DESIGN.md. #### Markdown - DESIGN.md. The canonical DESIGN.md format was introduced by Google Stitch. Drop it into any repo for AI agents to consume. ### Chrome extension Extract the page in your current tab without coming back here. The extension reuses your site session and spends the same credits. [Read how the extension works ->](https://www.design-extractor.com/docs/extension) ### The key insight AI agents produce better design output when given both precise tokens and human-readable rationale. The YAML front matter gives exact values. The markdown body explains how those values should be used in practice. Ready to try it? Get a DESIGN.md from any public URL in a few seconds. [Extract a site](https://www.design-extractor.com/#extract) --- Source: https://www.design-extractor.com/docs/design-md Docs ## What is DESIGN.md? DESIGN.md is a plain-text file that describes a design system for AI agents. YAML front matter at the top holds the exact design tokens: colors, typography, spacing, rounded corners and components. The markdown body below explains how and why to apply them. Humans and agents can both read it, edit it and enforce it. `README.md` explains what a project is. `AGENTS.md` tells coding agents how to build it. `DESIGN.md` tells them how it should look and feel, so the screens an agent generates share one palette, type scale and component language instead of drifting apart. ### Where DESIGN.md comes from Google introduced DESIGN.md with [Google Stitch](https://stitch.withgoogle.com/docs/design-md/overview), its AI design tool, as the design counterpart to AGENTS.md. Google Labs publishes the format as an open specification in the [google-labs-code/design.md](https://github.com/google-labs-code/design.md) repository under the Apache 2.0 license. The [DESIGN.md specification](https://github.com/google-labs-code/design.md/blob/main/docs/spec.md) is labeled alpha, so expect the format to change as it matures. The same repository ships an npm package, `@google/design.md`, with a `lint` command that checks structure, broken token references and WCAG contrast, and a `diff` command that compares two versions of a file token by token. ### Anatomy of a DESIGN.md file Every DESIGN.md file has two layers. The YAML front matter contains machine-readable design tokens such as exact color values, font properties, spacing scales and component token references. The markdown body provides the human-readable design rationale. The spec treats the tokens as the normative values and the prose as context for applying them. Tokens give agents precise values. Prose tells them why those values exist and how to use them consistently across screens. ``` --- name: DevFocus Dark colors: primary: "#2665fd" secondary: "#475569" surface: "#0b1326" on-surface: "#dae2fd" error: "#ffb4ab" typography: body-md: fontFamily: Inter fontSize: 16px fontWeight: 400 rounded: md: 8px --- # Design System ## Overview A focused, minimal dark interface for a developer productivity tool. Clean lines, low visual noise, high information density. ## Colors - **Primary** (#2665fd): CTAs, active states, key interactive elements - **Secondary** (#475569): Supporting UI, chips, secondary actions - **Surface** (#0b1326): Page backgrounds - **On-surface** (#dae2fd): Primary text on dark backgrounds - **Error** (#ffb4ab): Validation errors, destructive actions ## Typography - **Headlines**: Inter, semi-bold - **Body**: Inter, regular, 14-16px - **Labels**: Inter, medium, 12px, uppercase for section headers ## Components - **Buttons**: Rounded (8px), primary uses brand blue fill - **Inputs**: 1px border, subtle surface-variant background - **Cards**: No elevation, relies on border and background contrast ## Do's and Don'ts - Do use the primary color sparingly, only for the most important action - Don't mix rounded and sharp corners in the same view - Do maintain 4:1 contrast ratio for all text ``` ### The eight canonical sections The markdown body uses `##` headings. Sections can be omitted when they are not relevant, but when present they should follow this order. A heading that appears twice makes the file invalid; unknown sections are kept. 1. Overview (also Brand & Style). The look and feel in a few sentences: mood, density, personality. 2. Colors. Each color token and the role it plays, such as primary actions or page surfaces. 3. Typography. Font families and the type scale, from display headlines to small labels. 4. Layout (also Layout & Spacing). The spacing scale, grid, content widths and gutters. 5. Elevation & Depth (also Elevation). How surfaces separate: shadows, borders, tints. 6. Shapes. Corner radii and other shape rules. 7. Components. Buttons, inputs, cards and other atoms, with their tokens and states. 8. Do's and Don'ts. The rules an agent should not break. A compact markdown body with each canonical section in order. Adjust the content to your product, keep the headings and sequence. ``` ## Overview A minimal dark interface for a developer productivity tool. Clean lines, low visual noise, high information density. ## Colors - Primary (#2665fd): CTAs and active states - Surface (#0b1326): Page backgrounds - On-surface (#dae2fd): Text on dark backgrounds ## Typography - Headlines: Inter, semibold - Body: Inter, regular, 14-16px - Labels: Inter, medium, 12px, uppercase ## Layout - 8px base spacing unit, scale: 4 / 8 / 16 / 24 / 32 / 48 - Max content width 720px with 24px gutters on mobile ## Elevation & Depth - Surfaces rely on background contrast instead of shadow - Overlays use an 8 percent white tint on dark surfaces ## Shapes - Rounded 8px for controls, 16px for cards - Avoid mixing sharp and rounded corners in one view ## Components - Buttons: 8px rounded, primary filled with brand blue - Inputs: 1px border, subtle surface-variant background - Cards: no elevation, rely on border and background contrast ## Do's and Don'ts - Do use the primary color sparingly, for the most important action - Don't mix rounded and sharp corners in one view - Do maintain at least a 4:1 contrast ratio for all text ``` ### Design tokens and schema DESIGN.md embeds design tokens as YAML front matter at the beginning of the file. The front matter block begins with a line containing exactly `---` and ends with the same delimiter. ``` version: name: description: colors: : typography: : rounded: : spacing: : components: : : ``` Common scale names include xs, sm, md, lg, xl and full, but any descriptive key is valid. Spacing tokens live in the YAML under `spacing:`and are described in the markdown body's Layout section. #### Token types - **Color**: Any valid CSS color string. Hex in `#RRGGBB` form is the recommended default, for example `"#1A1C1E"`. - **Dimension**: Number plus a px, em or rem unit. Examples:`48px`,`-0.02em`. - **Token Reference**: Wrapped in curly braces and pointing to a value in the YAML tree. Example:`{colors.primary}`. - **Typography**: A composite object containing font properties such as family, size, weight, line height and letter spacing. See Typography properties. #### Typography properties - **fontFamily**: The font family name. - **fontSize**: The font size as a dimension. - **fontWeight**: Numeric weight such as 400 or 700. - **lineHeight**: A dimension or a unitless multiplier. Unitless values are recommended. - **letterSpacing**: Letter spacing adjustment as a dimension. - **fontFeature**: Configures font-feature-settings. - **fontVariation**: Configures font-variation-settings. #### Token references A token reference is wrapped in curly braces and contains an object path to another value in the YAML tree. For most token groups, the reference should point to a primitive value instead of a group. Within the components section, references to composite values such as typography levels are allowed. ``` components: button-primary: backgroundColor: "{colors.primary-60}" textColor: "{colors.primary-20}" rounded: "{rounded.md}" button-primary-hover: backgroundColor: "{colors.primary-70}" ``` #### Components The components section captures style guidance for component atoms such as buttons, chips, lists, inputs, checkboxes, radio buttons and tooltips. Design systems can define additional components that matter to their product domain. Variants for hover, active or pressed states are defined as separate component entries with related key names, such as `button-primary-hover`. - **backgroundColor**: Color - **textColor**: Color - **typography**: Typography - **rounded**: Dimension - **padding**: Dimension - **size**: Dimension - **height**: Dimension - **width**: Dimension #### Recommended token names These names are guidance, not requirements. They provide useful defaults for consistency across systems. Colors: primary, secondary, tertiary, neutral, surface, on-surface, error Typography: headline-display, headline-lg, headline-md, body-lg, body-md, body-sm, label-lg, label-md, label-sm Rounded: none, sm, md, lg, xl, full ### How AI agents use DESIGN.md Put DESIGN.md in the root of your repository, next to README.md and AGENTS.md. Any agent with file access can read it, but most do not load it on their own. Point to it from the instructions your agent already reads, or name it in the prompt when you ask for UI work. A short pointer is enough: ``` ## Design Follow DESIGN.md for every UI change: use its color, typography, spacing and component tokens instead of inventing new values. ``` - **Claude Code**: Reads files in your repo and loads CLAUDE.md on start. Add a line there that points to DESIGN.md, or mention the file in your prompt. - **Cursor**: Add DESIGN.md to the chat context, or reference it from a project rule so it applies to every UI request. - **GitHub Copilot**: Point to DESIGN.md from your repository's Copilot instructions file, or attach it in chat when you ask for UI work. - **Google Stitch**: Where the format started. Stitch uses a DESIGN.md so that generated screens share one palette, type scale and component language. The agent then takes exact values from the tokens (the hex for a primary button, the size of a body-md label) and uses the prose to decide where they belong. ### DESIGN.md vs AGENTS.md vs README.md The three files sit side by side and answer different questions. DESIGN.md does not replace AGENTS.md; the two work together. | File | Written for | Answers | | --- | --- | --- | | `README.md` | People who use or contribute to the project | What is this, and how do I run it? | | `AGENTS.md` | Coding agents | How do I build, test and change this code? | | `DESIGN.md` | Coding and design agents | How should the interface look and feel? | ### Real DESIGN.md examples The fastest way to understand the format is to read a few real files. Each of these gallery pages shows a DESIGN.md extracted from the brand's public website, with its palette and type specimen. They are not official brand guidelines. - [Stripe DESIGN.md](https://www.design-extractor.com/gallery/stripe) - [Anthropic DESIGN.md](https://www.design-extractor.com/gallery/anthropic) - [Airbnb DESIGN.md](https://www.design-extractor.com/gallery/airbnb) - [Linear DESIGN.md](https://www.design-extractor.com/gallery/linear) - [Notion DESIGN.md](https://www.design-extractor.com/gallery/notion) - [Supabase DESIGN.md](https://www.design-extractor.com/gallery/supabase) [Browse all DESIGN.md examples](https://www.design-extractor.com/gallery) ### How to get a DESIGN.md 1. Write it by hand. Start from the spec and the examples above, then check the file with the free [DESIGN.md Validator](https://www.design-extractor.com/tools/design-md-validator) or Google's `lint` command. 2. Start from an example. Copy a file from the [gallery](https://www.design-extractor.com/gallery) and edit the tokens and prose to match your product. 3. Generate it from a live website. Paste a public URL into [Design Extractor](https://www.design-extractor.com/). It renders the site in a browser and returns a DESIGN.md with its colors, typography, spacing and components that follows the spec above. The [DESIGN.md generator](https://www.design-extractor.com/design-md-generator) page explains what you get. The same extraction runs from the [Chrome extension](https://www.design-extractor.com/chrome-extension) and from your agent through the [MCP server](https://www.design-extractor.com/docs/mcp). FAQ ### DESIGN.md questions Short answers about the DESIGN.md format, where it comes from, and how to use it with AI agents. #### What is a DESIGN.md file? A DESIGN.md is a plain-text file that describes a design system for AI agents. YAML front matter at the top holds the exact tokens (colors, typography, spacing, rounded corners and components), and the markdown body below explains how and why to apply them. Agents read the tokens for values and the prose for intent. #### Who created the DESIGN.md format? Google introduced DESIGN.md with Stitch, its AI design tool. Google Labs publishes the specification on GitHub (google-labs-code/design.md) under the Apache 2.0 license. The format is labeled alpha, so expect changes as it matures. #### What is the difference between DESIGN.md and AGENTS.md? AGENTS.md tells coding agents how to build and work on a project: commands, conventions, tests. DESIGN.md tells them how the product should look and feel: colors, type, spacing, shapes and components. README.md is for the humans who use or contribute to the project. Many repos keep all three side by side. #### Where do I put DESIGN.md in my project? Put it in the repository root, next to README.md and AGENTS.md, so agents with file access can find it. Then point to it from the instructions your agent already loads, such as AGENTS.md, CLAUDE.md, a Cursor rule or your Copilot instructions, or mention it in the prompt when you ask for UI work. #### Do I need all eight sections? No. The spec lets you leave out sections that do not apply, but the ones you keep should follow the canonical order: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts. A section heading must not appear twice, and unknown sections are kept rather than rejected. #### How do I check that a DESIGN.md is valid? Google's npm package @google/design.md has a lint command that checks structure, broken token references and WCAG contrast. Design Extractor also has a free DESIGN.md Validator that checks the structure and tokens in your browser and previews the file, without uploading it. #### How do I get a DESIGN.md for an existing website? Write it by hand from the spec, copy one from a gallery of real examples as a starting point, or generate one from the live site. Design Extractor takes a public URL, renders the site in a browser, and returns a DESIGN.md with its colors, typography, spacing and components, ready to drop into your repo. Want one for a site you like? Paste a public URL and get its DESIGN.md. [Extract a site](https://www.design-extractor.com/#extract) --- Source: https://www.design-extractor.com/docs/extension Docs ## Chrome extension setup guide Extract the page you are looking at without coming back to the site. The extension lives in the Chrome toolbar, reuses the account you signed in with here, and sends the current tab through the same extraction as the form on the home page. This guide covers setup and limits; for what it produces and how it compares, see the [Design Extractor Chrome extension](https://www.design-extractor.com/chrome-extension) page. [Add to Chrome](https://chromewebstore.google.com/detail/design-extractor-designmd/nabnjgklaghlhdidncoeajhapndacick) Free to install. Extractions cost the usual credits. ### Install 1. Add it from the Chrome Web Store Open the listing and click Add to Chrome. The extension asks for access to design-extractor.com and the active tab, nothing else. [Add to Chrome](https://chromewebstore.google.com/detail/design-extractor-designmd/nabnjgklaghlhdidncoeajhapndacick) 2. Pin it Click the puzzle icon in the toolbar and pin Design Extractor so the popup is one click away on every page. 3. Open any public page and extract Open the popup, pick Lite or Pro, and click Extract this page. Progress shows in the popup while the extraction runs. ### Sign in once The extension has no login form of its own. It uses the session you already have on the site, so if you are signed in here you are signed in there. If you are not, the popup offers a Sign in button that opens the site in a new tab. Sign in, come back, reopen the popup. Signing out in the popup signs you out of the site as well: it is one session, not two. ### Credits and tiers The popup shows your credit balance at the top. An extraction from the popup costs exactly what it costs on the site: the Lite and Pro tiers are the same, the price is the same, and the result is the same. When the balance is empty the popup says so and links to [Pricing](https://www.design-extractor.com/pricing). ### Where results appear When the extraction finishes, the popup shows Open result: the DESIGN.md opens on the site on its result page, the same page you get from the home form. It is listed in [My extractions](https://www.design-extractor.com/extractions) like every other extraction, and you copy, edit, re-extract or delete it there. ### Limits This is the first version of the extension. It is deliberately small. - Public pages only. The server captures the page from the URL, not from your browser, so pages behind a login, on `localhost` or on a private network are not supported yet. - Chrome only. The extension is built for Chrome. Other browsers are not supported. - No editing or download in the popup. The popup starts the extraction and shows progress. Reading, editing, copying and downloading the DESIGN.md happen on the site. Ready to extract from a tab? Install the extension and open any public page. [Add to Chrome](https://chromewebstore.google.com/detail/design-extractor-designmd/nabnjgklaghlhdidncoeajhapndacick) --- Source: https://www.design-extractor.com/docs/mcp Docs ## MCP server Design Extractor is an MCP server. Any client that speaks the Model Context Protocol, from claude.ai to n8n or a script built on the Agent SDK, can extract a DESIGN.md from a public site and read it back, with the same account and the same credits as here. Add the server URL and sign in from the client, or create a key and paste the block for your client. Done. ### What the server gives an agent The server lives at `https://www.design-extractor.com/api/mcp`, speaks streamable HTTP, and accepts two credentials: a sign-in with your account through the standard MCP authorization flow (OAuth 2.1), or a personal API key sent as `Authorization: Bearer dx_...`. Through it an agent can start an extraction of a public site, wait for it, read the finished [DESIGN.md](https://www.design-extractor.com/docs/design-md), check the price and your balance, and list what you extracted before. The result also appears in [My extractions](https://www.design-extractor.com/extractions) like every other extraction. For Claude Code and Codex there is also a plugin that bundles the server with an `apply-designmd` skill: it walks the agent through extracting a reference site and mapping the tokens onto Tailwind, CSS variables or a tokens file. Source and install notes at [Magentix-Studio/design-extractor-plugin](https://github.com/Magentix-Studio/design-extractor-plugin). ### Sign in with your account claude.ai, Claude Desktop, ChatGPT, Claude Code and Codex connect without a key: the client discovers the sign-in from the server URL, you approve once in the browser, and the client holds a token it refreshes on its own. Nothing to paste, nothing to rotate. 1. Add the server URL in the connector settings claude.ai and Claude Desktop: Settings, Connectors, Add custom connector, then paste `https://www.design-extractor.com/api/mcp`. ChatGPT: Settings, Connectors, Create, same URL. 2. Approve on the consent page The client opens Design Extractor in the browser. Sign in if you are not already, check what the agent asks for, and approve. Extractions it starts spend your credits like any other. 3. Ask for a site “Extract the design of stripe.com” is enough. The agent shows up under Connected agents on your [account page](https://www.design-extractor.com/account), where one click disconnects it. A connector added in claude.ai also appears in Claude Code on its own, so one approval covers both. Claude Code and Codex sign in the same way from the terminal: add the server without a key and authenticate when the client asks. The exact commands are under Claude Code and Codex. ### Create an API key 1. Open your account Sign in and go to [Account](https://www.design-extractor.com/account). The API keys section sits below your linked sign-in methods. 2. Create a key and copy it Name it after the client (Claude Code, Cursor) so you know what to revoke later. The key starts with `dx_` and is shown once. 3. Paste it into your client Use one of the blocks below. Up to five active keys, each valid for one year, and any of them can be revoked from the same section at any time. Keys suit n8n, scripts, CI and other clients that cannot open a browser. ### Claude Code One command registers the server for the current project, no key needed. Add `--scope user` to have it in every project. ``` claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp ``` Then run `/mcp`, pick `design-extractor` and choose Authenticate. Sign in and approve on the page that opens; Claude Code keeps the token and renews it on its own. Or install the plugin, which adds the server and the `apply-designmd` skill. Its server signs in the same way: after the install, run `/mcp`, pick the plugin's server and authenticate. ``` /plugin marketplace add Magentix-Studio/design-extractor-plugin /plugin install design-extractor@design-extractor ``` To use an API key instead, for a machine that cannot open a browser, pass it as a header and skip the authenticate step. ``` claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp \ --header "Authorization: Bearer dx_..." ``` Check `/mcp` shows `design-extractor` as connected. Tools are named `mcp__design-extractor__extract_design` and so on after `claude mcp add`, and `mcp__plugin_design-extractor_design-extractor__extract_design` when the server comes from the plugin. ### Codex Add the server without a key and Codex opens the sign-in straight away. Sign in and approve on the page that opens; `codex mcp login design-extractor` repeats it later if needed. ``` codex mcp add design-extractor --url https://www.design-extractor.com/api/mcp ``` Or install the same plugin from its marketplace. In the Codex CLI, `/plugins` opens the browser where marketplace entries are installed and toggled; if its server asks for authentication, `codex mcp login design-extractor` opens the sign-in. ``` codex plugin marketplace add Magentix-Studio/design-extractor-plugin codex plugin add design-extractor@design-extractor ``` To use an API key instead, name the environment variable that holds it and export it in the shell you start Codex from; otherwise the server shows as failed with zero tools. ``` export DESIGN_EXTRACTOR_API_KEY=dx_... codex mcp add design-extractor --url https://www.design-extractor.com/api/mcp \ --bearer-token-env-var DESIGN_EXTRACTOR_API_KEY ``` The same declaration by hand in `~/.codex/config.toml`; to inline the key instead use `http_headers = { "Authorization" = "Bearer dx_..." }`. ``` [mcp_servers.design-extractor] url = "https://www.design-extractor.com/api/mcp" bearer_token_env_var = "DESIGN_EXTRACTOR_API_KEY" ``` ### Cursor Add the server to `.cursor/mcp.json` in the project, or to `~/.cursor/mcp.json` for every project. Cursor also accepts `${env:DESIGN_EXTRACTOR_API_KEY}` in the header value if you prefer to keep the key out of the file. ``` { "mcpServers": { "design-extractor": { "url": "https://www.design-extractor.com/api/mcp", "headers": { "Authorization": "Bearer dx_..." } } } } ``` ### Claude Agent SDK Pass the server in `options.mcpServers` with `type: "http"` and the header, and allow its tools with a wildcard so the agent can call them without a permission prompt. ``` import { query } from "@anthropic-ai/claude-agent-sdk"; for await (const message of query({ prompt: "Extract the design system of https://example.com and summarize its colors", options: { mcpServers: { "design-extractor": { type: "http", url: "https://www.design-extractor.com/api/mcp", headers: { Authorization: `Bearer ${process.env.DESIGN_EXTRACTOR_API_KEY}`, }, }, }, allowedTools: ["mcp__design-extractor__*"], }, })) { if (message.type === "result" && message.subtype === "success") { console.log(message.result); } } ``` ### Tools | Tool | Input | Returns | | --- | --- | --- | | `get_pricing` | none | The credit cost of the Lite and Pro tiers, and the surcharge and countries when extraction from another country is offered. | | `get_credits` | none | Your remaining credit balance. | | `extract_design` | url, tier (LITE or PRO, default LITE), country (optional two-letter code) | Starts an extraction and spends the credits. Returns the publicId, the status and the result page on the site (/extract/). A URL you extracted recently is reused instead, and the reply says no credits were charged; a URL only other users extracted still costs its tier price. Pass country only after a run failed with a regional restriction: the page then loads through a browser in that country, at the tier price plus a surcharge. | | `get_extraction` | site (a name or URL, resolved to your newest extraction of it) or publicId | The DESIGN.md text once the extraction is complete. Until then the status and a hint to poll again in 25 seconds. A failed run says why; after a regional block it lists suggestedCountries and what a retry from one of them costs. | | `list_my_extractions` | limit (1 to 50, default 20), cursor (optional) | Your extractions, newest first, with their status and publicId. | ### Credits An extraction through the server costs exactly what it costs on the site. Lite extracts one page, Pro samples the site's key pages. The current prices come from `get_pricing` (6 credits for Lite and 10 for Pro at the time of writing) and your balance from `get_credits`. When the balance does not cover the tier, `extract_design` refuses and says so; top up on [Pricing](https://www.design-extractor.com/pricing). Asking for a site you extracted recently reuses your extraction rather than starting a new one, and the reply says no credits were charged; a site only other people extracted still costs its tier price. Run `list_my_extractions` first to see what is already there. Some sites only answer visitors from certain countries. When a run fails that way, `get_extraction` lists the countries that load the page and the agent can retry with `extract_design` and `country`. A country run costs the tier price plus a surcharge, both listed by `get_pricing`. ### Limits - Public pages only. The server captures the page from the URL, so pages behind a login, on `localhost` or on a private network are not supported. - Start, then poll. `extract_design` returns as soon as the extraction is queued. An extraction takes at least a minute, so the agent waits about a minute and then calls `get_extraction` with the site every 25 seconds until it is complete. You never handle ids: naming the site is enough. - One credential per client. A signed-in agent holds a token that expires after 15 minutes and renews itself; disconnecting it on the account page stops the renewal. Keys expire after one year and can be revoked on the same page. If a key leaks, revoke it there and create a new one. Ready to connect an agent? Sign in from your client, or create a key and paste one block. [Open account](https://www.design-extractor.com/account) --- # Free tools Source: https://www.design-extractor.com/tools/design-md-validator Free tool, no signup ## DESIGN.md validator Paste or upload a DESIGN.md to check it against [the DESIGN.md format](https://www.design-extractor.com/docs/design-md): frontmatter, colors, token references, section order and text contrast, with a live preview of its tokens. Validation runs in your browser and the file is not uploaded. Need a starting point? Browse [real DESIGN.md examples](https://www.design-extractor.com/gallery) extracted from live sites. FAQ ### DESIGN.md validator questions Short answers about the free DESIGN.md Validator. #### What does the validator check? The YAML frontmatter, the required primary color, that colors are written in a color format (hex, rgb, hsl, oklch, a color name and the like), font sizes and radii in px, em or rem, typography properties, component properties and their token references (including references left unquoted, which YAML does not read as text), the omitted list, duplicate or out-of-order sections, and the contrast between each component's text and background colors against the WCAG AA minimum of 4.5:1. Errors make the file invalid; warnings flag things worth fixing. #### Is my file uploaded anywhere? No. Validation runs entirely in your browser: the text you paste or the file you pick is never sent to our servers. The only requests the preview makes are for font stylesheets: our server fetches them from Google Fonts, and they carry just the font family names from your typography tokens. #### Which spec version does it follow? Google's DESIGN.md format as used by Stitch and published in the google-labs-code/design.md repository. The validator applies the same rules Design Extractor uses to check every DESIGN.md it generates, plus a contrast check on component colors. #### How do I fix an unresolved token reference? A reference such as "{colors.brand}" has to name a token that exists in the frontmatter, here a brand entry under colors. Add the missing token or point the reference at one that exists. Keep references in quotes: YAML reads an unquoted {colors.brand} as a mapping, not as text. #### Can I lint DESIGN.md in CI? Yes. Google's open-source command-line tool checks a file in your pipeline: run npx @google/design.md lint DESIGN.md. It prints a JSON report and exits with code 1 when it finds errors, so the job fails on a broken file. Its rule set overlaps with this page but some severities differ. ### More free tools [See all free tools](https://www.design-extractor.com/tools) - ** Website Font Finder** Enter a URL to see which fonts a website uses, free and without signup. [Open the Website Font Finder](https://www.design-extractor.com/tools/website-font-finder) - ** Website Color Palette Extractor** Enter a URL to get the color palette of a website, ready to copy. [Open the Website Color Palette Extractor](https://www.design-extractor.com/tools/website-color-palette) ### No DESIGN.md yet? Extract one from any website URL and get its colors, typography, spacing and components in a single DESIGN.md. [Extract a DESIGN.md from your site](https://www.design-extractor.com/#extract) --- Source: https://www.design-extractor.com/tools/website-font-finder Free tool, no signup ## What font does this website use? Paste a URL to see the fonts a website uses, with weights, sizes and where each one appears. Free, no signup. See worked examples like [Anthropic’s fonts](https://www.design-extractor.com/gallery/anthropic) and [Airbnb’s fonts](https://www.design-extractor.com/gallery/airbnb), or learn what a [DESIGN.md](https://www.design-extractor.com/docs/design-md) adds on top. ### Use these fonts in your code The finder gives you the family names, their weights and where each one sets text. To reuse them, load each family once, give every role a CSS variable, and always end the stack with fallbacks so text still renders while the font downloads or if it fails to load. **1. Load the font.** For a Google Fonts family, add its `` tag or use `next/font/google`, and request only the weights the finder listed. For a commercial font, buy a web license from the foundry and serve its files with `@font-face`. **2. Name the roles.** One variable per job: display for headings, body for running text, mono for code. Swap the family names for the ones you found. ``` :root { --font-display: "Inter Display", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; } body { font-family: var(--font-body); font-weight: 400; } code, pre { font-family: var(--font-mono); } ``` **3. Use them in Tailwind.** The same stacks become `font-display`, `font-sans` and `font-mono` utilities. ``` /* app.css, Tailwind CSS v4 */ @theme { --font-display: "Inter Display", "Inter", system-ui, sans-serif; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; } ``` Families are half of a type system. The sizes, line heights and letter spacing of each level live in the typography section of a [DESIGN.md](https://www.design-extractor.com/docs/design-md), which your coding agent can apply across every screen. FAQ ### Font finder questions Short answers about the free Website Font Finder. #### How does it detect fonts? It opens the page in a real browser and reads the computed font of every visible piece of text: the family the browser actually rendered, plus its weight and size. Families are then grouped and ranked by how much text they set. #### Can I download the font? No. Fonts are licensed software, and a site's license usually covers only that site. If the family is on Google Fonts you can get it there for free; otherwise look up its foundry and buy a license for your own use. #### Why is a font missing? It reads the one page you enter and lists up to eight families. It only sees text that page shows to a fresh visitor: text behind a login wall, pages that block automated browsers, and lettering drawn as images or SVG are not read, so their fonts do not appear. #### Does it work for Google Fonts and Adobe Fonts? Yes. Any web font the page renders is detected, whether it comes from Google Fonts, Adobe Fonts or the site's own servers. Google fonts are previewed in their real face; others are shown in a fallback. #### Can I check a font by hand? Yes, one element at a time. In Chrome or Edge, right-click the text, choose Inspect and scroll the Computed tab to Rendered Fonts, which names the font actually drawn. In Firefox, the Fonts panel in the Inspector lists the fonts of the selected element and every font the page loaded. #### What's the difference from a full DESIGN.md? This tool lists fonts only. A DESIGN.md from Design Extractor covers the colors, the full type scale, spacing and component rules of a site, in one file your coding agent can follow. ### More free tools [See all free tools](https://www.design-extractor.com/tools) - ** DESIGN.md Validator** Paste a DESIGN.md to check its structure and tokens and preview it, right in the browser. [Open the DESIGN.md Validator](https://www.design-extractor.com/tools/design-md-validator) - ** Website Color Palette Extractor** Enter a URL to get the color palette of a website, ready to copy. [Open the Website Color Palette Extractor](https://www.design-extractor.com/tools/website-color-palette) ### Need the whole design system? Get a DESIGN.md with the colors, type scale, spacing and components of any site, ready for your coding agent. [Get a DESIGN.md](https://www.design-extractor.com/#extract) --- Source: https://www.design-extractor.com/tools/website-color-palette Free tool, no signup ## Extract a color palette from any website Paste a URL to get the site’s brand, text, background and accent colors with hex codes, ranked by use. Free, no signup. See full examples for [Stripe’s DESIGN.md](https://www.design-extractor.com/gallery/stripe) and [Linear’s DESIGN.md](https://www.design-extractor.com/gallery/linear), or learn what a [DESIGN.md](https://www.design-extractor.com/docs/design-md) adds on top. ### Use this palette in your code The extractor groups the colors by role (background, surface, text, brand, accent and border) and ranks them by how much of the page each covers. To reuse them, give each role a name instead of pasting hex codes across your styles, so one change updates every place the color appears. **1. Name colors by role, not by hue.** `--color-text-muted` still makes sense after a redesign; `--gray-600` does not say where it belongs. Swap in the hex codes you copied. ``` :root { --color-brand: #635bff; --color-text: #0a2540; --color-text-muted: #425466; --color-surface: #ffffff; --color-surface-muted: #f6f9fc; --color-border: #e3e8ee; } body { background: var(--color-surface); color: var(--color-text); } a, .button-primary { color: var(--color-brand); } ``` **2. Use them in Tailwind.** Each variable becomes a set of utilities such as `bg-surface`, `text-ink-muted` and `border-line`. ``` /* app.css, Tailwind CSS v4 */ @theme { --color-brand: #635bff; --color-ink: #0a2540; --color-ink-muted: #425466; --color-surface: #ffffff; --color-surface-muted: #f6f9fc; --color-line: #e3e8ee; } ``` **3. Check the pairs you use.** Body text needs a contrast ratio of at least 4.5:1 against its background, and large text 3:1. The extractor shows the ratio of the main text color on the page background; check any other pair you plan to use before you ship it. Colors are one layer of a design system. A [DESIGN.md](https://www.design-extractor.com/docs/design-md) keeps them next to the type scale, spacing and component rules, so your coding agent uses the right color in the right place. FAQ ### Color palette questions Short answers about the free Website Color Palette Extractor. #### How are the colors picked? The page is loaded in a real browser and the colors it paints are measured by how much of the page they cover. Each color gets a best-guess role: background, panel, text, brand, accent or border. #### Why are there fewer colors than I expected? The palette lists colors the page actually uses, ranked by coverage and capped at twelve. Colors inside images or videos, colors that only appear on hover, and colors used on other pages of the site are not counted. #### Does it read dark mode? No. It reads the page in the theme a fresh visitor sees by default, usually light. Sites that are dark by default come back dark. A full DESIGN.md covers dark mode when the site has one. #### Can I export the palette? Not as a file. You can copy the hex codes: select a swatch for one, or copy all at once, one per line. #### Can I pick a color by hand? Yes, one pixel at a time. In Chrome or Edge, right-click an element, choose Inspect and click the color square next to any color in the Styles pane; its picker has an eyedropper that reads any point on the page. Firefox has the same eyedropper in the Inspector toolbar. #### What's the difference from a full DESIGN.md? This tool lists colors only. A DESIGN.md covers the colors with their roles, the type scale, spacing and component rules of a site, in one file your coding agent can follow. ### More free tools [See all free tools](https://www.design-extractor.com/tools) - ** DESIGN.md Validator** Paste a DESIGN.md to check its structure and tokens and preview it, right in the browser. [Open the DESIGN.md Validator](https://www.design-extractor.com/tools/design-md-validator) - ** Website Font Finder** Enter a URL to see which fonts a website uses, free and without signup. [Open the Website Font Finder](https://www.design-extractor.com/tools/website-font-finder) ### Need the whole design system? Get a DESIGN.md with the colors, type scale, spacing and components of any site, ready for your coding agent. [Get a DESIGN.md](https://www.design-extractor.com/#extract) --- # Pricing Source: https://www.design-extractor.com/pricing Prepaid credit packs, no subscription: buy a pack once and spend it whenever. Credits never expire. Prices in USD; tax is shown at checkout where applicable. - A Pro extraction (it samples the key pages of the site) costs 10 credits. - A run through a browser in another country, for sites that block some regions, costs 6 credits more. Countries: US, GB, DE, FR, NL, ES, IT, SE, PL, CH, AT, BE, DK, NO, FI, IE, PT, CZ, CA, MX, BR, AR, AU, NZ, JP, KR, SG, IN, ID, TH, MY, PH, VN, TR, AE, SA, IL, ZA, NG, EG. - Starter: $5 for 50 credits. Try the full pipeline on your own projects. - Plus: $10 for 110 credits (10% bonus included). For regular extractions, with a 10% credit bonus. - Max: $25 for 300 credits (20% bonus included). Best for heavy use and teams, with a 20% credit bonus. --- # Gallery Source: https://www.design-extractor.com/gallery Pre-extracted DESIGN.md files from real websites, one page per site with its colors, typography, spacing and components. Copy one as a starting template, or extract any other public URL. Sites (24): - [Airbnb](https://www.design-extractor.com/gallery/airbnb) (https://www.airbnb.com/): Airbnb's design system is built around a single proprietary variable font (Airbnb Cereal VF), a near-monochrome neutral palette anchored by deep charcoal (#222222) and light grays, with the brand's... - [Anthropic](https://www.design-extractor.com/gallery/anthropic) (https://www.anthropic.com/): Anthropic's design system is a restrained, typographically-led identity built around two custom typefaces — Anthropic Serif and Anthropic Sans — set against a warm ivory background (#faf9f5). - [Apple](https://www.design-extractor.com/gallery/apple) (https://www.apple.com/): Design tokens extracted from CSSOM frequency analysis without LLM interpretation. - [Dribbble](https://www.design-extractor.com/gallery/dribbble) (https://dribbble.com/): Dribbble's design system is built on a deep near-black navy (#0d0c22) paired with a crisp white surface, punctuated by a signature hot-pink (#ea4c89) accent used sparingly for editorial emphasis an... - [Duolingo - The world’s most popular way to learn](https://www.design-extractor.com/gallery/duolingo) (https://www.duolingo.com/): Design tokens extracted from CSSOM frequency analysis without LLM interpretation. - [Figma](https://www.design-extractor.com/gallery/figma) (https://figma.com/): Figma's marketing site uses a stark black-and-white monochrome system anchored by its proprietary figmaSans variable font. - [Harvey](https://www.design-extractor.com/gallery/harvey) (https://www.harvey.ai/): Harvey's design system is built around a bespoke dual-typeface identity — HarveySerifFont for editorial authority and HarveySansFont for functional clarity — set against a warm near-black (#0f0e0d)... - [IKEA](https://www.design-extractor.com/gallery/ikea) (https://ikea.com/): IKEA's global homepage uses a bold, flat design system anchored by the iconic IKEA Yellow (#ffdb00) as the primary action surface and IKEA Blue (#0058a3) as the brand logo accent. - [Klarna](https://www.design-extractor.com/gallery/klarna) (https://www.klarna.com/): Klarna's design system features a sophisticated dark navy primary color (#0b051d) with bright accent colors including their signature pink (#ffa8cd). - [Linear](https://www.design-extractor.com/gallery/linear) (https://linear.app/?utm_source=chatgpt.com): Linear's design system is a dark-first, high-density product UI built for engineering teams. - [Magentix Studio](https://www.design-extractor.com/gallery/magentix) (https://www.magentix.studio): Magentix Studio dresses an AI-first product studio in editorial, art-gallery clothing. - [Neon](https://www.design-extractor.com/gallery/neon) (https://neon.com/): Neon's design system is a dark-first developer brand built on a near-black canvas (#000000, #18191b) with a vivid neon-green primary (#00e599) and a supporting mid-green (#34d59a). - [Notion](https://www.design-extractor.com/gallery/notion) (http://notion.com/): Notion's marketing homepage pairs a deep navy (#02093a) hero section with a light (#f6f5f4) body, using a custom typeface (NotionInter) across all text roles. - [Paperclip](https://www.design-extractor.com/gallery/paperclip) (https://paperclip.ing/): Paperclip is an AI agent management platform with a bold dark-canvas design anchored by a near-black (#0a0a0a) background and white (#ffffff) foreground text. - [PayPal](https://www.design-extractor.com/gallery/paypal) (https://www.paypal.com/): PayPal's Dutch homepage uses a bold, consumer-facing design anchored by a vivid sky-blue (#60cdff) hero section with ultra-heavy black display typography (PayPal Pro w900). - [Railway](https://www.design-extractor.com/gallery/railway) (https://railway.com/): Railway's design system is a dark-first developer platform UI anchored in deep near-black navy surfaces (#13111c, #0b0b0f), high-contrast off-white text (#f7f7f8), and a distinctive purple brand ac... - [Shopify](https://www.design-extractor.com/gallery/shopify) (https://www.shopify.com/): Shopify's marketing homepage uses a dramatic full-bleed video hero with a near-black (#02090a) background that contrasts sharply with the white navigation bar above. - [Snapchat](https://www.design-extractor.com/gallery/snapchat) (https://www.snapchat.com/): Snapchat's web presence uses a high-contrast light theme anchored by its iconic #FFFC00 brand yellow, near-black (#121314) primary surfaces, and a clean white page background. - [Stripe](https://www.design-extractor.com/gallery/stripe) (https://stripe.com/nl): Stripe's marketing homepage uses a tightly controlled design system (HDS — Stripe Design System) built around the variable font "sohne-var" at light weights (300–400), a deep navy-to-indigo brand p... - [Supabase](https://www.design-extractor.com/gallery/supabase) (https://supabase.com/): Supabase uses a dark-first design system anchored by a deep near-black background (oklch ~0.19) with a vivid green brand accent (#3ecf8e / #3fcf8e). - [The Onion](https://www.design-extractor.com/gallery/theonion) (https://theonion.com/): The Onion's design system is a digitized satirical newspaper: bold condensed gothic headlines in black, a distinctive forest-green (#006b3a) brand accent used for section labels, trending badges, a... - [Uber](https://www.design-extractor.com/gallery/uber) (https://www.uber.com/): Uber's design language combines clean minimalism with vibrant illustrations to create an approachable yet professional transportation platform. - [WIRED](https://www.design-extractor.com/gallery/wired) (https://www.wired.com/): WIRED's design system is a high-contrast, editorially-driven monochrome framework built around a proprietary type system (Breve Text, WIRED Mono, WiredDisplay, Apercu) and a near-zero chromatic pal... - [xAI](https://www.design-extractor.com/gallery/x) (https://x.ai/): xAI's marketing site uses a warm off-white surface palette anchored by --color-ivory (#f9f8f6) and --color-white (#ffffff), with near-black #0a0a0a as the dominant text and foreground color.