02 · Systems: 152 brands, or your own

A design system is a DESIGN.md — a Markdown file that writes a visual language down as machine-readable contract. The official library ships 152, each built from a real brand.

Get started chapter 6 covers what they are and how to choose. This one is about turning them into an asset you own.

Why the library is worth something

Each preset takes a real brand — Stripe, Linear, Vercel, Airbnb, Tesla, Notion, Apple — and codifies it against one standardised schema: real brand colours, real typefaces, real spacing. Not a generic material-design fallback.

The difference is obvious in the output. Hand it a generic system and you get "generically modern UI". Hand it a brand-grade one and you get something with a specific register, because those values were argued over by a design team before they got written down.

Extracting your own

Highest return per hour in the tool. Pay once, benefit on every generation afterwards.

From a screenshot

The fastest path. One product screenshot, or a screen of your marketing site.

This is a screenshot of our product interface.

Extract a complete DESIGN.md, covering:

1. Palette
   - Primary, secondary, semantic (success/warning/error/info)
   - Neutral ramp from lightest to darkest, as hex
   - Note where in the screenshot each colour appears

2. Type
   - Families (name them if identifiable; describe them if not)
   - Size scale, with what each step is used for
   - Weights, line heights, tracking

3. Spacing
   - Base unit
   - Common steps
   - Radii, shadows

4. Components
   - Buttons (primary/secondary/text, all states)
   - Default styling for cards, inputs, tables

5. Motion personality
   - Durations, easing
   - Which interactions animate

Mark anything you're unsure about explicitly. Do not invent a value
to fill a gap. Anything not visible in the screenshot (error states,
empty states) goes in a to-do list instead.

The last two sentences are load-bearing. Without them it will invent the parts it couldn't see, and you end up with a specification that looks complete and is half fiction.

From Figma

If you have the file, export it and feed that instead. A Figma export carries more than a screenshot — variables, styles, component names — so the extracted DESIGN.md is considerably more accurate.

Where it lives

your-project/
└── design-systems/
    └── your-brand/
        └── DESIGN.md

From then on, every skill renders in that brand without re-describing it.

Verifying the extraction

Don't use it straight away. Run a comparison:

1. Generate a page with the new system.
2. Put it beside your real product.
3. Check four things: how much of the surface the primary colour occupies, the heading-to-body size ratio, card radii, and button height and padding.

Those four go wrong most often — especially the first. Many brands use their primary colour only on the action button, but an extracted system frequently promotes it to a large background fill.

If it's off, edit the DESIGN.md by hand. It's Markdown; that's faster than re-extracting.

What a system can't govern

DESIGN.md decides what it looks like. It doesn't decide what counts as acceptable.

The design system says what colour the button is. Craft says the button must have disabled and loading states. The split is deliberate — when you change brands, the quality floor shouldn't move.

See 04 · Craft.

Multiple brands

For client work, one per client:

design-systems/
├── client-a/DESIGN.md
├── client-b/DESIGN.md
└── our-own/DESIGN.md

Switching is switching a directory. The same skill under a different system produces work with a completely different register but the same structure and the same quality.

This is the most practical property of the architecture on real projects: your method is reusable; your clients' brands stay separate.

Where it goes wrong

Trap	How it shows	Fix
Using the first extraction as-is	Output is visibly off-brand	Run the comparison and edit the file
Primary colour everywhere	The page drowns in brand colour	Write the usage ratio and contexts into the system
Light mode only	Dark mode is mud	Ask for both sets of values up front
A typeface that doesn't exist	Silent fallback to a default	Use fonts you have, and write the fallback stack
Re-extracting per project	Wasted effort	Extract once, commit, reuse

Related

• Get started / Design systems — the basics and how to choose
• Playbooks / Extract a brand from a screenshot — the full run
• 04 · Craft — the layer brands can't override