A design system for Claude sets your brand down as rules that Claude can read. It contains tokens for colour, type and spacing, components with their usage, and what is never allowed. Without that set, Claude guesses again with every task; with it, your site, your decks and your ads look like one brand.
We made our own system in Claude Design, and it drives our website, our decks and our ads. If you want a website built with AI, ask whether your builder uses one. Below you will read what belongs in it, why it makes Claude work more consistently, and how our own system, Editorial, is put together.
What belongs in it: tokens, components and rules
A usable design system has three layers. Tokens are the smallest building blocks: colours, typefaces, sizes, white space. The W3C community group for design tokens calls them the single source of truth for such choices, and released a first stable format in October 2025 [1].
Components are the building blocks: button, card, label, table. For each component, it says when you use it and what it looks like. Rules say what is never allowed, in sentences you can check.
| Layer | What | Example from Editorial |
|---|---|---|
| Tokens | Colours, typefaces, sizes | Paper #F6EFD6, ink #191405, canary #FFD60A |
| Semantic tokens | A role instead of a colour | --on-kanarie: text on canary, equally dark in both themes |
| Components | Building blocks with a usage rule | The marker: an italic word on a canary bar |
| Rules | What is never allowed | Canary never as a text colour on paper |
Why it makes Claude more consistent
Claude carries nothing over from one session to the next unless you give it along. In Claude Code, a CLAUDE.md does that: the file is loaded at the start of every session [2]. Anthropic writes that Claude follows instructions more consistently the more specific and concise they are [2].
So "use our house style" works badly. "Canary never as a text colour on paper" works well. There are two more ways to give Claude your system:
- As a Skill. A folder with a
SKILL.md, instructions and files that Claude only loads when a task calls for it [3]. Custom Skills work in Claude Code, the API and claude.ai; on claude.ai each user uploads them themselves [3]. - In Claude Design. In research preview since 17 April 2026 for Pro, Max, Team and Enterprise. At the start it builds a design system from your codebase and design files, and every following project automatically uses your colours, typography and components [4].
The principle stays the same: one source, read everywhere. Only use Skills from a source you trust, though, because a Skill can also make Claude run code [3].
How Editorial is put together
Our system is called Editorial. Claude Design delivered it as one package: a design.md with the rules, a set of tokens, components each with a short instruction for Claude, a brand book in HTML and a SKILL.md. For the other channels it includes templates for decks in Dutch and French, for social posts and for motion ads.
How we built izoard.be with it is covered in how we built izoard.be.
The main choices:
- A highlight colour and a text colour. Canary is a surface: marker bars, tape, buttons. Text accents are gold. By our calculation with the WCAG formula, canary on paper reaches 1.23:1 and gold 4.77:1. WCAG requires at least 4.5:1 for normal text [5].
- Semantic tokens for the dark theme.
--on-kanariestays warm black in both themes. Dark bands stay dark via--ink-bandand--on-band. - Evolution colours for data only. Green, amber and red (
--pos,--mid,--neg) only colour the difference column in tables, and the signs +, ± and − stay in place. - Two typefaces, self-hosted. Chakra Petch for titles in capitals, JetBrains Mono for labels. There is no separate italic file; the browser creates the italic.
- Scroll animations in CSS only, without a script per page.
That last one looks like a detail, but it keeps pages light. Why that matters is covered in Core Web Vitals explained.
The proof: a rebrand in tokens
In July 2026 our orange accent clashed with that of parent brand ClickTrust. We replaced it with canary and gold. Because the pages used tokens and not loose colour codes, the switch happened largely in one place.
The old names --acc and --acc2 became aliases for gold and canary, so older rules kept working. One stylesheet then gave the whole site, in three languages, the new colours.
How to start your own design system
You don't need a team of designers to start. Start small and let it grow:
- Start from what exists: your logo, your brand book, the page that feels best.
- Give tokens a name that states their role, such as
--on-kanarie, not just the colour. - Write every rule as a checkable sentence with "never" or "always".
- Give one good and one wrong example per component.
- Check the contrast of every text colour on its background.
- Put it where Claude reads it and keep one version as the source.
Ads require the same discipline. How to make images and videos with AI that match your brand is covered by Clément in from product photo to video ad.
Not sure whether your current site is built consistently, and whether AI crawlers and Google read it properly? The free website scan maps it out.
Frequently asked questions
What is the difference between a brand book and a design system?
A brand book describes your brand for people: logo, colours, tone. A design system turns that into usable parts: tokens with fixed names and values, components and rules you can check. Claude can do much more with the second, because it does not have to interpret anything.
Where do you put a design system so that Claude reads it?
In Claude Code, in a CLAUDE.md in your project folder, which is loaded in every session. You can also package it as a Skill, or have it built in Claude Design. Keep one version as the source and refer to it from everywhere else.
Does an SME need a design system?
A small version, yes, as soon as you make copy, pages or ads with AI. One page with colours, typefaces, a handful of components and ten rules is enough to start. It grows with what you make.
Does a design system also work for ads and presentations?
Yes, if the tokens and rules are separate from the website. The same colours, typefaces and rules then apply to a landing page, a deck or a motion ad. Only the components and templates differ per channel. At Izoard all three come from one system.
Sources
- Design Tokens specification reaches first stable version — W3C Design Tokens Community Group, 28 Oct 2025, accessed 27 Sep 2026
- How Claude remembers your project — Claude Code Docs (Anthropic), accessed 27 Sep 2026
- Agent Skills — Claude Platform Docs (Anthropic), accessed 27 Sep 2026
- Introducing Claude Design by Anthropic Labs — Anthropic, 17 Apr 2026, accessed 27 Sep 2026
- Understanding Success Criterion 1.4.3: Contrast (Minimum) — W3C WAI, accessed 27 Sep 2026