Design system examples

How to read a design system

Before opening any of the examples below, know what you are looking for. Every real system, whatever its size, answers three questions: what are the named values everything is built from (tokens), what are the components assembled from them and the rules for using each one (recipes), and what must never change (hard rules). The components are the most visible part and the least interesting - the value is in the decisions written around them.

A useful habit: in each example, find one decision and trace it down. Take a button's background color and follow it to the token that names it, the palette that token lives in, and the rule that says when the button may be used at all. That vertical slice - pixel to token to rule - is the system. If you can't trace it, what you're reading is a component gallery, not a design system. (New to the concept entirely? Start with What is a design system? and come back.)

The big public systems

Four systems from teams that run them at serious scale, each worth studying for a different reason:

• Material Design 3 (Google) - the most complete public example of the token-component-pattern stack. Study its design tokens section: dynamic color derives a whole palette from named roles, the clearest large-scale demonstration of tokens as the system's atoms.
• Apple Human Interface Guidelines - less a component kit, more the deepest public documentation of platform interaction rules and the reasoning behind them. Study how every guideline explains why - the "one sentence per decision" habit at full scale.
• Carbon (IBM) - open source end to end. Study the governance: how changes are proposed, reviewed, and shipped, and how design and code stay in lockstep. This is the "treat it like a product" idea, documented.
• Polaris (Shopify) - notable for how much of it is writing guidance: voice, labels, error messages. Proof that words are part of the interface, and the reason a system file should include copy rules.

Notice what all four spend most of their pages on: not the components, but the rules for using them. That ratio is the tell of a real system.

Example files to download

The public systems are websites maintained by teams. A system can also be one markdown file - small enough to read in ten minutes, complete enough to hand to a new teammate or an AI design tool. This page ships three: two teaching examples below, and a real product's system - Wise - in the next section.

Abstract until you see one. Here is a complete design-system document for a fictional brand ("Meridian") - typography scale, dark and light token tables, spacing and radius scales, component recipes, motion, accessibility constraints, and a hard-rules list, all as exact values. Read it to see what "decisions with the ambiguity removed" actually looks like on the page.

And the same document structure read straight from a real brand's stylesheet - the public Paris Baguette site theme. Read the two side by side: same sections, opposite decisions (dark editorial vs light and photography-first, one warm accent vs a single blue action color) - which is exactly what a design system is for.

Ready to write your own - or to hand one to an AI design tool? The How-to walks through it step by step: Set up your design system in Claude Design.

A real system as markdown

Between the fictional files and the corporate sites sits the most instructive kind of example: a real product's system, written as a single document. getdesign.md collects these - live brands documented in the same markdown-file spirit. The one to study is Wise, the fintech with one of the most recognizable identities in the category:

Read it the way you read the example files: trace one decision from value to rule. A real brand has more constraints than a teaching example - accessibility across currencies and scripts, a voice that survives regulation - and you can watch the document absorb them without losing the plot.

A real Claude Design project

The markdown files above are the input you hand to an AI design tool. This is the output: a complete design-system project as Claude Design actually generates and stores it - the form a published system really takes (see Set up your design system in Claude Design for how one is made). Generated from the Paris Baguette source above, it is a working export you can open and pick apart:

• Tokens as real CSS - tokens/colors.css, fonts.css, radius.css, spacing.css, typography.css - plus a compiled styles.css.
• Components as JSX with types and per-component prompts - Button, Card, Input, Link, NavBar.
• Guideline cards (the browsable specimens), a website UI kit, a readme.md, and the SKILL.md + manifest that let a project consume the system.

Open it next to parisbaguette-ds.md and you can see the whole arc: a plain-language document goes in, and this structured, componentised project comes out. And you can see the generated site running live - the website UI kit from this export, rendered straight from its own tokens and components.