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 Systems for React

A directory of design systems described in the DESIGN.md format. Live color swatches, typography specimens, and live component previews — one machine-readable file per system, ready to feed to Claude or Cursor.

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

189 systems

Aesop

19 componentsalpha

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 componentsalpha

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.

Airbnb

33 componentsalpha

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 componentsalpha

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.

Allbirds

22 componentsalpha

A natural-materials footwear storefront anchored on a warm natural-white canvas (#ece9e2) and a warm graphite ink (#212121) — text count 332, border count 323 — with the brand voltage delegated to four muted material-tones: dusty mauve (#a57e75), muted sky (#879aab), olive (#9e8949), and warm taupe (#d1b0a4), each appearing in fewer than three component backgrounds. Type pairs Geograph sans-serif (12–16px workhorse, uppercase nav at 0.3px and 0.7px tracking) against a single Self Modern serif moment at 40px / 40px leading reserved for product names like "Canvas Cruiser" — the humanist break in an otherwise grotesque page. Every interactive surface ships at a 9999px pill radius (61 occurrences) — the opposite of the 0px right-angle apparel default — and the rest of the chrome runs flat with no drop shadows.

Anthropic

21 componentsalpha

Anthropic's design system runs a monochrome marketing surface — slate ink (#141413) on a warm ivory canvas (#faf9f5) — over a dormant 8-color accent palette (clay #d97757, fig #c46686, cactus #bcd1ca, sky #6a9bcc, heather, olive, manilla, kraft) that paints only on research, news, and Economic Index sub-pages. The system rests on a three-typeface stack: Anthropic Serif for 90px section displays and 24px body prose, Anthropic Sans bold for the impact hero and nav, and Anthropic Mono uppercase for eyebrow metadata. Pages alternate cream and full-bleed true-black bands; the wordmark replaces the letter "I" with a literal backslash glyph (ANTHROP\\C). It reads as the antithesis of the cool-blue AI category — editorial, restrained, almost academic.

Apple

24 componentsalpha

A photography-first interface that turns marketing into a museum gallery. Edge-to-edge product tiles alternate light and dark canvases, framed by SF Pro Display headlines with negative letter-spacing and a single Action Blue (#0066cc) interactive color. UI chrome recedes so the product can speak — no decorative gradients, no shadows on chrome, only the one signature drop-shadow under product imagery resting on a surface.

Apple Music

20 componentsalpha

Apple's marketing surface for its streaming service, where the standard Apple.com chrome (white parchment, near-black ink, Action Blue #0066cc) gets reshaped around a saturated radial gradient hero that runs from Apple Music Red (#fa243c) through magenta (#ff4dc3) into a deep aubergine (#591962). The headline lands at SF Pro Display 128px / 600 with -0.256px tracking — a typographic scale Apple reserves for product moments it wants felt, not read. The page keeps Apple's pill-CTA geometry (#0066cc on white, 10px and 980px radii), the global nav at #1d1d1f, and SF Pro Text 17px body, then layers chromatic gradient bands between dark photographic tiles for editorial music-app rhythm.

Arc

21 componentsalpha

A cream-canvas browser marketing system from The Browser Company anchored on Arc Offwhite ("#fffcec") and a high-voltage royal blue ("#3139fb") that flashes across one full-bleed band per page, then disappears. Display type runs Marlin Soft SQ at weight 700 with tight negative tracking pulled to "-1.8204px" on the 45.5px hero, paired with ABC Oracle for secondary body lines and ABC Favorit Mono for the uppercase eyebrows. The primary CTA is unusual — a 76px-tall black pill at radius "22px" advertising Dia, the AI browser successor — and the page rhythm leans on photographic browser captures rather than typographic muscle. The system carries a separate students sub-palette ("#f25e6b" arc pinkish, "#f2c2ac" salmon, "#0c50ff" arc blue) that surfaces only in the student section, never on the core chrome.

Aritzia

20 componentsalpha

A women's-fashion storefront anchored on pure white (#ffffff) and pure black (#000000), with a single proprietary grotesque — Non-Seasonal Geo — carrying every nav cap, product label, hero overlay, and footer link from 12px / 20px line-height up through a 48px / 56px display tier at "-0.48px" tracking; the radius vocabulary is a single value (24px on the announcement-bar pill), every other surface holds 0px corners, and the only saturated hex in the system is a `#db1215` error red declared in `--gle-red` that never appears in the captured chrome.

Asana

18 componentsalpha

Asana's marketing canvas pairs an off-white page floor with a saturated deep-indigo brand voltage at "#222875" — used as the "What sets Asana apart" panel fill, the hero AI Teammate Gallery band, and the workspace-mockup chrome inside the fold. The primary CTA geometry is a near-black pill ("#0d0d0d", 100px radius, 14/500 type at +0.5px tracking), the secondary CTA inverts to white with a hairline border, and a coral-leaning support palette ("#e1bbc7", "#ffeaec", "#690031", "#ff584a") fills mockup chips and decorative dots. Display type runs Ghost at 60–72px weight 500 against TWK Lausanne body at weight 300 with a +0.4px letterspacing — the weight pairing flips the conventional fintech ramp.

Atlassian

22 componentsalpha

Atlassian's homepage runs the company's open Atlassian Design System tokens live in the DOM — 468 `--ds-*` custom properties on `:root`, a white canvas (#ffffff) anchored on near-black ink (#101214), navy display headlines, and a single Atlassian Blue (#1868db) reserved for the primary "Get started with Jira" pill that sits at 10000px corner radius. Display type is Charlie Display at weight 500–600 (up to 84px on the hero), with Charlie Text running the body and nav at 16–20px. The system reads as the work-platform pattern at scale — quiet chrome, dense semantic token vocabulary, one chromatic gate for the action.

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 --:--:--→