DESIGN.md is Google Labs' open specification for machine-readable design system files. A single Markdown document captures the full token surface — colors, typography, radii, spacing, components — as YAML frontmatter, with prose for context in the body. The format is small enough to drop into any repo and rich enough for an AI agent to reason over.

How is each entry curated?

Every system is hand-curated from the brand's public website — colors sampled, typography measured, components reverse-engineered. The spec lives in `content/design/{slug}.md` and is parsed at build time with a strict Zod schema so authoring mistakes (unquoted hex, numeric component values) fail loud rather than silently.

What's in a DESIGN.md file?

Five token groups (colors, typography, rounded, spacing, components), a description, an SEO block with curated prose, a `related` link list, and FAQ Q&A. The body of the file is free-form Markdown for design notes, rationale, and known gaps. Every value is plain text — no proprietary format, no build step required to read it.

Can I propose a new design system?

Yes. Open a PR adding a new `.md` file to `content/design/`. Run `bun run design:new ` to scaffold one from the template, then fill in tokens and SEO. The validator (`bun run design:validate`) checks schema, canonical tags, and required SEO fields before the file goes live.

How do I use these with Claude, Cursor, or Copilot?

Download the raw `.md` file from the detail page and paste it into your AI editor's context. The format is dense and explicit — an LLM can reliably build matching React components, Tailwind themes, or Figma variables from the token table alone. No screenshots needed.

How do I download the spec?

Each detail page exposes a download link at the top. The downloaded file is the raw machine-readable spec — identical to what powers the live page on shadcn.io. Drop it into any project as a single source of truth for your AI tools or design audits.

Can I customize a system before using it?

The files are plain Markdown — open them in any editor, swap a hex, retune type scales, rename components. There's no lock-in. The shadcn.io page renders whatever's in your local copy, so you can fork a system as a starting point and iterate without leaving Markdown.

Why ship spec + prose instead of code?

Components are framework-locked; tokens aren't. A DESIGN.md spec ports cleanly to React, Vue, SwiftUI, or Figma because it describes the design language, not an implementation. Pair it with the matching shadcn/ui registry for working React code, or hand it to an agent for a fresh build.

DESIGN.md files for every brand.

Free, hand-curated DESIGN.md specs — colors, typography, and components from real brands. Drop into Claude or Cursor. Copy, paste, ship.

stripe.design.md

shadcn.io/design

Stripe Inspired Linear Apple GitHub Vercel Inspired Claude

500 systems

Browse the directory

Filter by category, sort by name or recency, and switch between grid, compact, and list views. Every card links to the full DESIGN.md spec — live tokens, downloadable file, AI-ready prose.

500 systems

Acura

15 components

Honda's performance-luxury automotive sub-brand whose marketing site runs on a near-black canvas with a single brand-red voltage (#cc0000 / Acura Performance Red) wired into primary CTAs and badge accents, while vehicle photography carries every above-fold chromatic moment. Display headlines run in Acura Precision Display — a proprietary geometric sans with condensed numerals — at weight 400–700 with tight tracking; body copy uses Acura Text at weight 400. The geometry is sharp throughout: near-zero border radius on cards and buttons, with a pill variant reserved for the "Build & Price" primary CTA. The system is closer to the European luxury-performance register (Alfa Romeo, BMW M) than to its Japanese-origin brands Toyota or Honda.

adidas

11 components

A global sportswear brand whose marketing chrome is pure monochrome — the captured surface renders the adidas trefoil-and-wordmark in flat black on a white floor, with a 25px adineue Pro display headline in uppercase tracking that mirrors the wordmark itself. There is no chromatic accent anywhere on the captured page. The system runs adineue (the proprietary athletic grotesk) for every display, body, and label tier, with Arial as the immediate fallback for button labels and input chrome. Buttons sit at a 3px corner radius — almost square — and use a flat black fill with white text, no shadow, no shimmer, no gradient. The voice is functional sportswear catalog rather than premium fashion or tech retail.

Adobe

15 components

A creative-software brand whose marketing canvas is a charcoal-and-cream tile system rather than a brand-color block — the above-fold lays out a grid of dark cards (Creative Cloud promo, generative-AI tile, Acrobat link rail) over a near-white floor, with full-bleed app artwork (Photoshop, Illustrator, Premiere) carrying the chromatic moments. Adobe's proprietary display sans runs every tier at weights 400 / 600 / 700, the cobalt CTA pill is the only saturated brand-color in the marketing chrome, and the iconic Adobe voltage red appears just once — as the wordmark glyph on the top-left and the brand variable wired into the Acrobat tile. The system trusts a 20px corner-radius default and uses the dark-tile surface to host the colored product creatives.

Adyen

18 components

An enterprise-payments brand whose marketing chrome runs on near-black canvas with a single mint-green voltage in #00d16a — used only on the CTA button, the active-state indicator dot, and the heading-emphasis underline. The hero is a wide cinematic photograph (two hands exchanging a black payment card over a darkened studio backdrop), with the headline "Fintech you can bank on" floating in white at center and a small mint pill CTA underneath. Above the headline sits the brand's signature monospace eyebrow — "INTELLIGENT MONEY MOVEMENT" — rendered in 12px AdyenMono with +0 tracking and uppercase casing, the typographic move that ties every Adyen surface together. Type runs the proprietary Adyen sans across every spoken tier at unusual variable weights (436, 452, 484, 496 — not 400/500/700) plus AdyenMono for every annotation. The radius scale collapses to one value: 6px. Everything corner-rounded on the page uses the same 6px, including the mint CTA.

Aesop

19 components

An apothecary-grade commerce interface anchored on warm graphite ink (#333333) over a cream canvas (#fffef2), with every button, input, and product tile rendered at a 0px corner — the brand's signature right-angle geometry. Body type runs SuisseIntl at 14px / 21px line-height, while the homeward "New and notable" headline ladders up to Zapf-Humanist serif at 31px — the only humanist break in an otherwise grotesque-led page. Photography carries the warmth (warm taupe #f7ecdd, terracotta-leather #945c26), and the system refuses gradients, drop shadows, and rounded chrome.

Affirm

17 components

An inspired interpretation of Affirm's buy-now-pay-later design language — a consumer-fintech brand built on an indigo-black canvas "#101820", a load-bearing electric indigo "#4a4af4" tucked inside the CSS variable layer, and a pale-periwinkle glow "#9cadfc" that radiates from gradients and shadows around every hero. Type runs the proprietary Axiforma for Affirm family at thin weight 300 with negative letter-spacing from "-3.2px" at 80px down to "-0.6px" at 30px, paired with Calibre at 14–20px for body copy. Buttons sit on a 96px full-pill radius scale anchored by a 24px workhorse card radius, and the search bar pushes the geometry further to a 36px capsule on a 54px input height.

Afterpay

14 components

A buy-now-pay-later brand (Block-owned, formerly Afterpay Touch Group) whose global landing surface is unusually spare — the captured page is the country-select splash for afterpay.com/global, with a single "Afterpay International" headline in ink black on pure white, a one-line lead "Choose your region & language below," and a 6-up grid of hairline-bordered region cards each carrying a flag pictogram and a country label. The marketing chrome runs Italian Plate No2 Expanded — a wide-letterform proprietary sans the brand commissioned from Klim Type Foundry — at a single weight pair (400 for body, 700 for the 64px display) with no secondary typeface, no monospace, no serif. Every clickable affordance carries a single 12px corner radius. There is no chromatic brand voltage on this captured surface; the brand's famous mint-green identity lives on the regional homepages once a locale is chosen, not on the global splash. The result reads more like a directory page than a marketing site — an honest reflection of what the global root surface actually is.

Aimé Leon Dore

16 components

A New York City menswear and lifestyle brand founded in 2014 by Teddy Santis, running a near-black ink (#181818) on pure white with a silver-gray mid-tone (#c4c4c4) as the only structural accent — the chrome is severely monochrome, trusting sepia-toned analog-film editorial photography and a dual-typeface system of Financier Display serif at headline moments and Sohne grotesque at 10-12px with 1.4px uppercase tracking for every operational label and nav link to carry the brand's downtown-New York aesthetic without a single chromatic UI token.

Airbnb

33 components

A warm, generous consumer marketplace anchored on a clean white canvas and Airbnb Rausch (#ff385c), the single brand voltage that carries every primary CTA, search-button orb, and rating dot. Type runs Airbnb Cereal VF at modest weights — display sits at 22–28px in weight 500/600 rather than the heavy 700+ that fintech and enterprise systems use; the brand trusts photography and generous whitespace over typographic muscle. Three product entries (Homes, Experiences, Services) sit in the top nav with hand-illustrated 32-icon glyphs and "NEW" badges, signaling a marketplace expansion rather than a feature dump. Pill-shaped search bars (`{rounded.full}`), softly rounded property cards (`{rounded.lg}` ~14px), and 32px button radii read as friendly and human — there is no hard corner anywhere except the body grid.

Airtable

26 components

A sober, editorial workflow-software interface anchored on white canvas and dark-ink type, where brand voltage comes from full-bleed signature cards in coral, dark green, peach, and dark navy that punctuate long-scroll explainer pages. Primary actions use a near-black pill CTA; secondary actions sit in a white outlined button. Type runs Haas Grotesk in modest weights — never bold for its own sake.

Alfa Romeo

15 components

An Italian luxury-automotive brand (Stellantis) whose design system is built on a near-black charcoal canvas (#292b35 / #1c1f2a) anchored by a single brand-red voltage (#ba0816) wired into the CSS as `--brand` and `--wlb-color-brand-1`. Type runs Sequel — a proprietary geometric sans — at weight 400 with uppercase tracking (1.5px on labels), giving the page a motorsport-precision cadence that sits closer to racing livery than to Italian-café warmth. Buttons are square-cornered; the brand red appears only on accent CTAs and hover states, while the dominant interactive surfaces use stark black-on-white or white-on-dark with no chromatic fill.

Algolia

20 components

A hosted-search platform whose marketing site opens on a near-black hero washed with a violet-to-cobalt gradient and carries an 80px Sora display headline in weight 700 with -4% tracking; the electric Algolia blue is held in reserve as a single primary CTA fill and a handful of inline link accents rather than painting the canvas. Below the fold the page inverts to a warm grey body where Inter takes over for every running paragraph, hairline-bordered card surfaces in near-white grey carry the ROI metrics and customer evidence, and Sora returns only for the big numeric proof points. The pairing of Sora-as-display plus Inter-as-body is the structural typographic move; one near-black gradient hero plus a white editorial body is the structural layout move.

Frequently Asked Questions

What DESIGN.md is, how each system is curated, and how to feed the spec to Claude, Cursor, or any other AI editor.

Get Pro — Save 33%·Ends in --:--:--→