The project in 90 seconds
Before this book, the brand lived in scattered decks, old PDFs, and people's memories. The goal was simple. Put everything in one place: voice, logo rules, color, type, photo, video, social, email, and AI policy. Get it approved by legal and leadership. Then make it useful in the age of AI assisted design.
The artifact
- A brand guidelines book with 54 pages and 12 chapters
- Covers foundations, logo and badge rules, and a complete visual identity system
- Includes channel guidelines and a closing chapter on AI and the brand
The teamwork
- Built cross functionally with senior stakeholders
- Reviewed by the legal team for licensing and usage language
- Taken through multiple VP review rounds to sign off
The persistence
- This was not an official priority
- It moved forward in the margins, over a long period
- A brand without a source of truth loses consistency every day
The payoff
- The book became the foundation of the company's Claude Design system
- Its tokens, type scale, and rules were translated into a machine readable system
- That system is used to create on brand design work with AI
A brand everyone used and nobody owned
No single source of truth
- Logo files, color values, and voice guidance lived in scattered decks and inherited PDFs
- Two teams could both be "on brand" and still disagree
Rules kept in people's heads
- Badge licensing, logo usage, and image rights carry real legal weight
- The rules lived in people's heads, not in a document legal had actually reviewed
A new reader arrived: machines
- AI design tools were entering the workflow with no brand knowledge at all
- A brand that is not written down cannot be read, by new hires or by AI
And officially, fixing this was nobody's job. So it became mine.
Shipping a book through an organization
The design work was the easy half. The other half was governance: alignment, legal, leadership, and patience.
{{ stop.title }}
{{ stop.body }}
Inside the guide, rendered live
What follows is not screenshots of the book. It is the book's actual system, rendered in code from its real tokens. That is exactly what makes it readable by machines. If it looks crisp at any zoom, that is the point.
The sentences everything hangs on
Voice and values came first. Every visual rule downstream is these sentences, enforced.
"Empower every person to make their best decisions."
"We help people, institutions and governments make decisions by taking complex information and making it simple through independent reporting, rankings, journalism, and advice."
"We help you make the best decisions."
A complete palette. Click any swatch to copy it.
"This palette is exhaustive; color choices should not extend outside of these options." That rule is what made it easy to turn into tokens.
{{ group.label }} · {{ group.desc }}
Two families, one scale, shown at true size
Montserrat Semi Bold carries headings and impact. Roboto Regular carries body and links. The scale below renders live at its real sizes.
- {{ row.spec }}
- Make the best decision
Clear space you can measure
The logo palette is exclusive: #005EA6, #C4212A, and #000000. "No other colors may be substituted." Clear space is defined with math, which is what makes it enforceable.
x = 1/3 of the logo height, on all sides
Never
The badges the rules protect
The Best badges are licensed marks. Their layout, typography, and usage rules take up a full chapter of the book, because they carry the most legal weight of anything the brand publishes.
Sample award badges, shown at a size where they stay sharp.
The artifact: 54 pages, governed
Selected spreads from the shipped book, rendered at 200 DPI so they stay sharp. The live specimens above are the system. These pages are its legal, licensed, signed off home.
From book to system
A brand guide that only humans can read solves half the problem. The second half: translate it into a design system an AI can execute.
Tokens, not paragraphs
The full palette, the two family type scale, and the spacing and elevation rules were restructured from prose into named tokens and constraints a design tool can apply without guessing.
Rules that execute
"Warm colors only for CTAs." "White holds 60%." "Clear space equals one third of the logo height." Written as enforceable defaults, these stop being reminders and start being behavior.
One source, two readers
The same source of truth now serves people and AI. Designers cite the book. The Claude Design system applies it. Chapter 12, AI and our brand, made that pipeline policy, not improvisation.
What's actually inside the system
Every token and rule below comes straight from the book. The system reads them and puts them to work:
- Brand foundations: voice and tone, logo usage, and the full color set, split into neutrals, primary and secondary, and semantic colors like success, warning, and error
- Type and spacing: the Montserrat heading scale and Roboto body styles, plus an 8 point spacing grid and a small set of corner radius rules, so nothing is placed by guesswork
- Real components: cards, chips, and badges, alerts, dialogs and tooltips, buttons and icon buttons, form controls, and tabs, each one built to match the brand rules exactly
- Accessibility built in: keyboard focus rings, labeled form fields, and screen reader support are part of every component by default, not an extra step
- A working example: a full insurance page built only from these components, showing the system holding up on a real, busy layout
Why this matters more than another Figma file
- A Figma file is a picture of the brand. Someone still has to look at it, understand it, and rebuild it by hand every time
- This system is a written set of rules an AI tool can read directly, so it can generate a new page, component, or mockup that already follows the brand, without anyone re-explaining the rules first
- As design tools like Claude Design, ChatGPT, and Gemini become part of everyday work, a brand only stays consistent if its rules are written somewhere those tools can read. This system is that place
Documentation is a design deliverable. Infrastructure is what it becomes.
What changed
One answer to "what is the hex?"
Color, type, logo, and badge questions now have a citable, versioned answer. No more digging through old decks.
Legal risk, written down
Licensing, distribution, and image rights rules live in legal reviewed language, not folklore.
On brand AI output by default
The Claude Design system built on the book means AI generated design work starts from the brand instead of being corrected toward it.
A pattern that repeats
Draft doc, then stakeholders, then legal, then VP, then ship, then translate. The pipeline is reusable for the next big document.
Impact is described in words on purpose. This page publishes no adoption metrics or usage numbers.
What this project proves
{{ row.title }}
{{ row.body }}
The book taught the company its own brand. The system made sure it never forgets.