DESIGN.md files for every brand.

DESIGN.md is Google Labs' open specification (https://github.com/google-labs-code/design.md) for machine-readable design system files. A single Markdown document holds the tokens (colors, typography, radii, spacing, components) as YAML frontmatter, with prose for context in the body.

Five token groups (colors, typography, rounded, spacing, components), a description, curated prose and related links. The body is free-form Markdown for design notes and known gaps. Every value is plain text, so it reads without a build step.

500 brands, from Stripe, Linear, Apple, GitHub and Vercel to many others, in 29 categories. Each has its own page with the palette, type, components and a live mockup.

Every system is hand-curated from the brand's public website: colors sampled, typography measured, components reverse-engineered. Each file is checked against a schema when the site loads it, and a file that fails the check is left out.

A style guide is for people, in a PDF or a Figma file. A DESIGN.md is plain text that an AI agent reads directly: exact hex values and sizes instead of screenshots to interpret.

29 categories, largest first: E-commerce & Retail (87), Developer Tools & IDEs (71), AI & LLM Platforms (65) and Productivity & SaaS (54). A brand can sit in more than one.

Open a category from the Browse by category cells: it lists every system in it, with a search when it is long. The finder at the top of the page also searches every system by name, category or color.

Search the brand's name in the finder, or open a category such as E-commerce & Retail. If a brand is missing, write to contact@shadcn.io.

The finder matches color words (such as orange or dark) as well as names and categories, so you can search for a palette's feel as well as for a brand.

No. Each DESIGN.md describes the look of a brand's public website. It is not official, and the brand has not endorsed or reviewed it. Names and logos belong to their owners.

Colors are sampled, typography measured and components reverse-engineered from the public site, so a file is an interpretation, not the brand's own source. Some are named "Inspired" for that reason.

Use them to learn from a brand's visual language and to start your own design. Do not present your product as made or endorsed by the brand, and keep the brand's names and logos out of it.

Download the file from the detail page, or copy it as Markdown, and put it in your project or paste it into the chat. Then ask for a page "in the style of the DESIGN.md": the agent builds React components and Tailwind classes from the tokens.

Add the file to your project (for example at the root or in a docs folder) and mention it in the chat or a rule, so Cursor reads the tokens when it writes UI. Any editor or agent that reads Markdown can use it the same way.

Because it is dense and explicit: names and values, not pictures. An agent can reliably build matching components or a Tailwind theme from the token table alone, with no screenshots.

Yes, it is plain Markdown: open it in any editor, change a hex, retune the type scale, rename components. Fork a system as a starting point and keep editing in Markdown.

Map the file's tokens to the CSS variables shadcn/ui reads: its primary color to `--primary`, its surface and ink colors to `--background` and `--foreground`, its base corner radius to `--radius`. Put them in `globals.css` and the components follow.

Yes. Every file lists exact colors, type tokens, radii and spacing values, so you can paste them into your CSS variables or Tailwind theme, or hand the file to an agent to do it.

Components are tied to a framework, tokens are not. A DESIGN.md describes the design language, so it ports to React, Vue, SwiftUI or Figma. Pair it with shadcn/ui for working React code, or hand it to an agent for a fresh build.

shadcn.io's blocks are built to look right in any theme. Set the brand's tokens as your theme, then add blocks: with Pro, your AI agent installs them from a prompt.

Yes. The DESIGN.md files are free, with no account and no Pro plan. Pro adds the blocks, the premium templates and the MCP server that lets your AI agent install them.

Each detail page has a Download DESIGN.md button at the top and the bottom, and a Copy markdown button. The download is the raw file, saved as `<brand>.design.md`; the same text is at `/design/<brand>/raw`.

You can write to contact@shadcn.io with the brand's name. The systems here are made from a brand's public website, so a brand needs one.