Design system voor Claude: zo blijft AI-werk on-brand

Een design system voor Claude legt je huisstijl vast als regels die Claude kan lezen. Het bevat tokens voor kleur, letter en ruimte, componenten met hun gebruik, en wat nooit mag. Zonder die set gokt Claude bij elke opdracht opnieuw; met die set lijken je site, je decks en je advertenties op één merk.

Wij maakten ons eigen systeem in Claude Design, en het stuurt onze website, onze decks en onze advertenties. Wil je een website laten maken met AI, vraag dan of je bouwer er een gebruikt. Hieronder lees je wat erin hoort, waarom Claude er consequenter door werkt, en hoe ons eigen systeem Editorial in elkaar zit.

Wat erin hoort: tokens, componenten en regels

Een bruikbaar design system heeft drie lagen. Tokens zijn de kleinste bouwstenen: kleuren, lettertypes, maten, witruimte. De W3C-gemeenschapsgroep voor design tokens noemt ze de enige bron van waarheid voor zulke keuzes, en bracht in oktober 2025 een eerste stabiel formaat uit ^[1].

Componenten zijn de bouwblokken: knop, kaart, label, tabel. Per component staat erbij wanneer je het gebruikt en hoe het eruitziet. Regels zeggen wat nooit mag, in zinnen die je kunt controleren.

Waarom Claude er consequenter door wordt

Claude neemt niets mee van de ene sessie naar de volgende, tenzij je het meegeeft. In Claude Code doet een CLAUDE.md dat: het bestand wordt bij de start van elke sessie ingeladen ^[2]. Anthropic schrijft dat Claude instructies consequenter volgt naarmate ze specifieker en beknopter zijn ^[2].

"Gebruik onze huisstijl" werkt dus slecht. "Kanarie nooit als tekstkleur op papier" werkt goed. Er zijn nog twee manieren om Claude je systeem mee te geven:

• Als Skill. Een map met een SKILL.md, instructies en bestanden die Claude pas inlaadt als een taak erom vraagt ^[3]. Eigen Skills werken in Claude Code, de API en claude.ai; op claude.ai laadt elke gebruiker ze zelf op ^[3].
• In Claude Design. Sinds 17 april 2026 in research preview voor Pro, Max, Team en Enterprise. Het bouwt bij de start een design system uit je codebase en designbestanden, en elk volgend project gebruikt automatisch je kleuren, typografie en componenten ^[4].

Het principe blijft hetzelfde: één bron, overal gelezen. Gebruik Skills wel alleen uit een bron die je vertrouwt, want een Skill kan Claude ook code laten uitvoeren ^[3].

Zo zit Editorial in elkaar

Ons systeem heet Editorial. Claude Design leverde het als één pakket: een design.md met de regels, een set tokens, componenten met elk een korte instructie voor Claude, een brand book in HTML en een SKILL.md. Voor de andere kanalen zitten er sjablonen in voor decks in het Nederlands en het Frans, voor social posts en voor bewegende advertenties.

Hoe we er izoard.be mee bouwden, lees je in zo bouwden we izoard.be.

De belangrijkste keuzes:

• Een markeerkleur en een tekstkleur. Kanarie is een vlak: markeerbalken, tape, knoppen. Tekstaccenten zijn goud. Volgens onze berekening met de WCAG-formule haalt kanarie op papier 1,23:1 en goud 4,77:1. WCAG vraagt minstens 4,5:1 voor gewone tekst ^[5].
• Semantische tokens voor het donkere thema. --on-kanarie blijft in beide thema's warm zwart. Donkere banden blijven donker via --ink-band en --on-band.
• Evolutiekleuren alleen voor data. Groen, amber en rood (--pos, --mid, --neg) kleuren enkel de verschilkolom in tabellen, en de tekens +, ± en − blijven staan.
• Twee lettertypes, zelf gehost. Chakra Petch voor titels in hoofdletters, JetBrains Mono voor labels. Er is geen apart cursief bestand; de browser maakt de cursief.
• Scroll-animaties alleen in CSS, zonder script per pagina.

Dat laatste lijkt een detail, maar het houdt pagina's licht. Waarom dat telt, lees je in Core Web Vitals uitgelegd.

De proef op de som: een rebrand in tokens

In juli 2026 botste ons oranje accent met dat van moedermerk ClickTrust. We vervingen het door kanarie en goud. Omdat de pagina's tokens gebruikten en geen losse kleurcodes, gebeurde de wissel grotendeels op één plek.

De oude namen --acc en --acc2 werden aliassen van goud en kanarie, zodat oudere regels bleven werken. Eén stylesheet gaf daarna de hele site in drie talen de nieuwe kleuren.

Zo begin je aan je eigen design system

Je hebt geen team van ontwerpers nodig om te starten. Begin klein en laat het meegroeien:

1. Vertrek van wat bestaat: je logo, je brand book, de pagina die het best aanvoelt.
2. Geef tokens een naam die hun rol zegt, zoals --on-kanarie, niet alleen de kleur.
3. Schrijf elke regel als een toetsbare zin met "nooit" of "altijd".
4. Geef per component één goed en één fout voorbeeld.
5. Controleer het contrast van elke tekstkleur op haar achtergrond.
6. Zet het waar Claude het leest en houd één versie als bron.

Advertenties vragen dezelfde discipline. Hoe je met AI beelden en video's maakt die kloppen met je merk, lees je bij Clément in van productfoto naar video-ad.

Twijfel je of je huidige site consequent is opgebouwd, en of AI-crawlers en Google haar goed lezen? De gratis websitescan brengt het in kaart.