> ## Content Index
> Fetch the complete content index at: https://www.livain.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# The brand book didn't exist. The website had been writing one for years.
- URL: https://www.livain.com/blog/the-brand-book-didnt-exist/
- Published: 2026-08-17T07:00:00.000Z
- Updated: 2026-08-17T06:59:59.000Z
- Description: Three design systems reverse-engineered from live sites in one week. The trick isn't reading the theme settings — it's measuring what actually gets painted.
- Author: Remco Livain
- Tags: Design Systems, AI, Branding, Web Design

Three different clients asked me for the same thing inside one week: a design system they could actually hand to someone. A private clinic, a natural-stone retailer, and a home & living shop running four European storefronts. Not one of them had a brand book.

They all had something better, and none of them knew it. They had a live site that had been making the same decisions, consistently, for years.

### The trap is reading what the site declares

The fast route is to open the theme settings and copy the global styles out. It looks like the source of truth. It has swatches and font pickers and everything.

On the natural-stone site, that route would have handed me a bright blue, a mint green and two greys. Stock defaults from the starter theme, declared in the builder, painted on precisely nothing. The actual site is charcoal type, one orange accent, one border grey. Had I trusted the settings panel, I'd have delivered a beautiful, internally consistent specification for a website that has never existed.

So I stopped reading declarations and started measuring paint. Sample the computed styles off every element that actually renders, then look for what repeats. Repetition is the signal that something was a decision rather than an accident. The open-source tooling around this has got good — extractors now render the page and score tokens by how systematically they recur — and the [Design Tokens Format Module](https://www.designtokens.org/tr/drafts/format/?ref=livain.com) from the [W3C community group](https://www.w3.org/community/design-tokens/?ref=livain.com) reached its [first stable version](https://www.w3.org/community/design-tokens/2025/10/28/design-tokens-specification-reaches-first-stable-version/?ref=livain.com) last autumn, so the output finally lands somewhere portable instead of in a bespoke JSON blob.

> A design system built from what a site declares, rather than from what it paints, is a flawless specification for a website nobody has ever visited.

### The interesting output isn't the colours

Colours take an afternoon. The value is in the rules you can only see once you've looked at everything at once.

On the stone retailer: headings are weight 500, never 700, and they run tight — a 32px heading on a 32px line. There are no shadows anywhere on that site; elevation is done with a single hairline border. Three pixels is the house radius, and the two places it drops to zero are deliberate, not sloppy. None of that is written down anywhere. All of it is unmistakable once you measure a hundred elements instead of eyeballing three.

You also have to be honest about what you couldn't observe. The stone site ships no hover state for its accent colour, so I invented one — and labelled it, along with two other derived values, in a provenance section. A system that quietly mixes observed facts with plausible guesses is worse than one with gaps, because nobody knows which parts to trust. That's the same discipline as [not pretending a site is working before it has traffic](https://www.livain.com/blog/beautiful-before-the-site-had-traffic/).

### Where it stops being decoration

The clinic build is the one that changed how I think about this. Their customer research had turned up an uncomfortable finding: a low headline price reads as low quality to a patient who hasn't been treated yet. Credentials reassure, discounts alarm.

The old way to handle that is a line in a copy guideline nobody opens. Instead I made it structural. The component that carries practitioner credentials sits directly under the hero call to action, and price lives quietly in a small floating tag, never in the headline. Status colours are deliberately dull and unbranded, because in a medical setting a patient must never read a promotional red as a clinical warning.

Now the positioning is enforceable by anyone who builds with the kit — an agency, a freelancer, a model generating a landing page at two in the morning. It survives the people who were in the room when it was decided. Healthcare buyers behave differently from retail buyers, which is also why clinics [count the wrong things when they measure demand](https://www.livain.com/blog/count-patients-not-bookings/), and why furniture shoppers [take weeks over a purchase that analytics reads as one session](https://www.livain.com/blog/people-spend-weeks-choosing-a-sofa/).

### The extraction is cheap now. The judgement isn't.

A tool can pull tokens off a site in seconds, and that part genuinely is a solved problem. What it can't do is tell you that four of the colours it just found are junk left behind by a theme, that the licensed display face can't be redistributed and needs a documented fallback, or that a trust component should outrank a price component on a medical page.

That's the whole pattern I keep running into: the tooling removes the labour and leaves the discretion exactly where it was, which is [why domain expertise got more valuable, not less](https://www.livain.com/blog/the-death-of-generic-ai-why-deep-domain-expertise-is-the-only-real-leverage-left/). Someone without the reps gets the same extraction, ships the mint green, and never finds out.

Nobody had a brand book. All three had been writing one in public for years.

### Sources & further reading

**External:** [Design Tokens Format Module (DTCG)](https://www.designtokens.org/tr/drafts/format/?ref=livain.com) · [Design Tokens Community Group, W3C](https://www.w3.org/community/design-tokens/?ref=livain.com) · [Design Tokens specification reaches first stable version](https://www.w3.org/community/design-tokens/2025/10/28/design-tokens-specification-reaches-first-stable-version/?ref=livain.com)

**Related posts:** [It was beautiful before the site had traffic](https://www.livain.com/blog/beautiful-before-the-site-had-traffic/) · [The death of generic AI](https://www.livain.com/blog/the-death-of-generic-ai-why-deep-domain-expertise-is-the-only-real-leverage-left/) · [Every clinic counts new patients](https://www.livain.com/blog/count-patients-not-bookings/) · [People spend weeks choosing a sofa](https://www.livain.com/blog/people-spend-weeks-choosing-a-sofa/)