Ik bouw een schaalbaar toegankelijke multi-brand ontwerp systeem

Stop met het opnieuw bouwen van je UI voor elke business unit en stop met falen voor toegankelijkheid audits.

De meeste ontwerp systemen breken op het moment dat een tweede merk of een dark mode verschijnt, omdat kleur hardcoded is in componenten in plaats van via tokens te lopen. En de meeste falen WCAG omdat toegankelijkheid een handmatige audit is die er aan het einde aan wordt toegevoegd.

Ik ontwerp je ontwerp systeem op een drie-laags token model, zodat één componentbibliotheek elke business unit die je bezit kan bedienen en tegelijkertijd compliant blijft:

Laag 1 Palet / merk tokens. Hier bevinden zich de merk kleuren. Dit is de enige laag die een nieuwe BU moet aanpassen. Geef me een palet, en je krijgt een volledig thematisch product

Laag 2 Semantische tokens (licht+donker modus). Paletwaarden worden gekoppeld aan rollen zoals surface, text-primary, border-subtle, action-default. Mode wisselen en rebranding gebeurt hier, zonder dat componenten aangepast hoeven te worden. Hier wordt ook toegankelijkheid afgedwongen: contrast wordt eenmaal per semantische koppeling gevalideerd, en wordt vervolgens door elke component geërfd.

Laag 3 Component tokens. Knoppen, invoervelden, kaarten en de rest verwijzen alleen naar semantische tokens.

Het resultaat: om een nieuwe BU te lanceren, wisselt je team Layer 1 en wordt de hele UI automatisch opnieuw gethemed, licht en donker, en blijft WCAG AA compliant.