A client asked me this last week, and it stopped me for a second:
"Why is this different from us just pasting the brand guidelines into Claude Design?"
It's not a dumb question. It's basically the right question, and it's the core of what a Taste Profile is trying to solve. So here's the long answer.
A brand has two parts. AI needs both.
If you think like a designer, every brand has two layers:
- Emotion (or "prose"). What the brand feels like. What it's communicating. The things you can only describe in words: "editorial but approachable", "warm authority", "we're not a fintech, we're a finance magazine that happens to ship code".
- Tokens. The actual values. Hex codes, font names, spacing units, button radii, the rules for how colour and type compose into a system.
A great brand has both, working together. The prose tells you why the blue is blue; the token tells you which blue. Drop either side and you stop generating consistent output. Brand guides usually carry the prose well and the tokens loosely. Tokens.json files carry the tokens precisely and the prose not at all. AI tools need both, encoded in a single source they can parse.
That's the whole job of a DESIGN.md.
What happens when you paste the brand guide
When you paste a brand guide into Claude (or any AI tool), three things happen:
The model interprets the prose. Brand guides are written for humans. They say things like "our blue is confident, never corporate" or "we use generous whitespace to convey calm". The AI reads that, paraphrases it, and makes a judgement call about what blue, how generous, how calm. Your brand becomes the model's interpretation of your brand. Different judgement, different session, different Claude version, different output.
The tokens get fuzzed. Most brand guides have a primary colour, a typeface, maybe a small palette. They almost never specify hover states, focus rings, disabled tints, the exact radius for a card vs a chip, the shadow on a primary button vs a secondary, or the spacing scale for a form. The model fills in the gaps the brand guide leaves silent. Half your design system is the model's guess.
The context disappears. Every new chat starts blank. You re-paste, or you don't. If you do, you're hoping you pasted the same version. If you don't, the AI defaults to the statistical mean of its training data, which is shadcn, Tailwind UI, and a million B2B dashboards painted lavender.
The result is consistent enough to feel okay on screen one. By screen four, the cracks show: a button radius drifts, a heading weight changes, a hover state appears in a slightly different blue. None of it is wrong. None of it is yours.
What DESIGN.md does that prose can't
DESIGN.md is a single Markdown file with two parts: a YAML frontmatter that holds the tokens (machine-readable, exact), and prose underneath that holds the reasoning (human-readable, motivational). Per the Google Labs spec, the YAML is normative; the prose explains how to apply it.
Here's the difference in one example. A brand guide says:
Our primary colour is Editorial Blue. It's confident, action-oriented, and reserved for moments where we want the user to take action. Our headlines are set in Source Serif, used at a light weight to convey authority without rigidity.
A DESIGN.md says the same thing twice. Once for the model to act on:
colors:
primary-600: "#2563EB"
primary-700: "#1D4ED8"
primary: "{colors.primary-600}"
accent: "{colors.primary-600}"
accent-hover: "{colors.primary-700}"
typography:
h1:
fontFamily: Source Serif 4
fontSize: 56px
fontWeight: 600
letterSpacing: -0.02em
components:
button-primary:
backgroundColor: "{colors.accent}"
textColor: "#FFFFFF"
rounded: 9999px
padding: 14px 24pxAnd once for the model to understand:
The Blue-Means-Action Rule.
accentis reserved for interactive elements only: primary buttons, links, focus rings. Why: when everything is accented, nothing is. Scarcity creates intentionality.
The first half is the spec. Same hex code, same hover, same radius, every time, in every tool. The second half is the why the AI quotes back to itself when picking what to colour blue and what not to. You don't get one without the other.
The detail gap
This is the thing brand guides quietly fail at, and it's where most of the AI inconsistency you've been seeing actually comes from.
A brand guide tells you the primary colour. A DESIGN.md tells you:
- Primary at rest, on hover, on press, when disabled
- The subtle fill (10% tint), the deep tint (for shadow glows)
- The focus-ring colour (a different shade entirely, at 24% opacity)
- The exact text colour on top of the primary fill (white, or a specific off-white?)
- Which neutral the primary sits on (white card, subtle grey section, dark navy block)
A brand guide tells you the typeface. A DESIGN.md tells you:
- Display weight (300, 400, or 600?)
- Body weight
- Tracking on display ≥ 24px (-0.02em)
- The eyebrow style (uppercase, 12px, 0.1em tracking, semibold)
- When to use display vs body vs eyebrow
A brand guide tells you "use generous whitespace". A DESIGN.md tells you 96px section padding, 32px card padding, 16px sibling gap, 64px between blocks. With names. Referenced from components.
If those details aren't written down, AI will guess. Different guesses every time. That's where the drift comes from.
A living document, not a paste buffer
Brand guides update once a year. Maybe.
A DESIGN.md lives in your repo (or hosted as a Taste Profile viewer) next to the code. When the team learns something, the file updates. When a new component pattern emerges, the YAML gains a token. The prose gets sharpened by the third designer who has to re-read it. The version history is in git.
Every AI tool you use reads the same file. Cursor, Claude Code, Claude Design, v0, Lovable. Same hex codes, same spacing, same voice rules, same nevers, every session, every team member, every project. You don't keep a clipboard of your brand. You point a tool at a URL.
When the brand evolves, you change one file. Every downstream AI tool picks it up the next time it's invoked. No redeployment, no re-pasting, no "wait, which version of the brand guide were you using?".
The shorthand
If I had to compress the whole answer into one sentence:
Pasting a brand guide is describing your brand to the AI. A
DESIGN.mdis the spec the AI reads.
A description is interpretation. A spec is contract.
The AI doesn't lose imagination by being given a contract. It loses guesswork. The imagination goes where it should: into the layout, the copy, the moments of delight that the brand was always pointing toward but couldn't enumerate. The places that benefited from interpretation in the first place.
When pasting is enough
To be honest: there's a version of this where pasting is fine.
If you're building a one-off prototype. If you're working on a brand new product where the brand isn't fixed yet and you're using AI to explore. If you're a solo founder iterating on a landing page in an afternoon. Pasting the brand guide and rolling with the model's interpretation is fine. You'll redo it tomorrow anyway.
The case for DESIGN.md shows up when:
- More than one person at your company uses AI tools
- More than one tool needs the same brand context (Cursor + Claude Design + a junior dev)
- You're shipping the same brand across more than one surface (web, mobile, marketing, product)
- You've noticed your AI output drifting between sessions, and you can't articulate exactly what's drifting
- Your brand guide doesn't actually specify hover states, focus rings, or eight-step neutral ramps
If two or more of those are true, you're already paying the cost of not having a DESIGN.md. You're just paying it in re-work, in inconsistency, and in the small daily friction of pasting the same six paragraphs into the same chat window.
Part of our series on design systems for the AI era. See also: Anatomy of a great DESIGN.md and DESIGN.md: the AI-era brand guide.
