Multi-Brand Token-Architektur

Ein Produkt, das mehrere Marken bedient — ein House of Brands, eine White-Label-Plattform, ein Portfolio aus Übernahmen — ist ein Problem der Token-Schichtung: Behalte eine gemeinsame semantische Schicht (das Rollen-Vokabular, das jede Marke ausfüllt), gib jeder Marke ihre eigene Primitive-Schicht (ihre Ausgangsfarbe und die daraus abgeleiteten Farbrampen) und lass Komponenten ausschließlich die semantische Schicht konsumieren. Ein Markenwechsel wird dann zum Austausch eines Primitive-Sets, der null Komponenten berührt.

Die Mechanik ist dieselbe wie beim Hell-Dunkel-Theming, nur eine Ebene höher: Ein dunkles Theme ist ein zweiter Satz Antworten hinter denselben Rollen, und eine zweite Marke ist derselbe Zug mit einer anderen Ausgangsfarbe. Dieser Artikel — Teil unseres Leitfadens zu Markenfarben — behandelt die Schichtung, das durchgearbeitete Zwei-Marken-Beispiel, was pro Marke getestet statt angenommen werden muss, und die Governance-Frage, die unter allem liegt.

Wie sieht die geschichtete Architektur aus?

Drei Schichten, mit strengen Verkehrsregeln dazwischen:

components         →   semantic roles    →   primitives (per brand)
button fill            accent                brand A: blue-600  |  brand B: green-700
button label           on-accent             brand A: white     |  brand B: white
page background        background            brand A: cool white|  brand B: green-tinted white

Primitives sind pro Marke: Die Ausgangsfarbe jeder Marke erzeugt ihre eigenen Farbrampen — die Tönungen und Abstufungen der Markenfarbe, eine aus derselben Ausgangsfarbe getönte Neutraltöne-Skala, die Funktionsfarben. Semantik ist geteilt: background, surface, text-primary, border, accent, on-accent und ihre Geschwister bilden ein Rollen-Vokabular, das jede Marke ausfüllen muss. Komponenten konsumieren ausschließlich Semantik — ein Button weiß, dass er mit accent gefüllt ist, aber nie, dass accent gerade ein bestimmtes Blau ist.

Die Intuition dahinter, warum das funktioniert: Komponenten stellen eine feste Liste von Fragen — Welche Farbe hat hier ein Seitenhintergrund? Welche Farbe hat Text auf einer accent-Füllung? — und eine Marke ist einfach ein vollständiger Satz von Antworten. Solange die Fragenliste fest ist und jede Marke sie vollständig beantwortet, können beliebig viele Marken hinter demselben Produkt sitzen, und eine hinzuzufügen bedeutet, Antworten zu schreiben, nicht Frager umzuschreiben.

Was ändert ein Markenwechsel eigentlich?

Nur das Primitive-Set. Hier sind zwei Marken, die dieselben sechs semantischen Slots ausfüllen — Marke A ausgehend von einem Blau, Marke B von einem Grün:

Fünf der sechs Zeilen sind genau das, was du erwarten würdest: Die getönten Neutraltöne neigen sich zum jeweiligen Farbton der Marke, Textfarbe und Ränder folgen. Die accent-Zeile ist der Haken.

Die Ausgangsfarbe von Marke A kann der accent sein: Weißer Text auf #2563eb misst ≈5,2:1, komfortabel über dem 4,5:1-Grenzwert für normalen Text. Die Ausgangsfarbe von Marke B kann das nicht: Grün an derselben nominalen Position ist eine hellere Farbe — #16a34a liegt bei ≈0,63 OKLCH-Helligkeit gegenüber ≈0,55 beim Blau — und Weiß darauf misst nur ≈3,3:1. Dieselbe Rolle, auf dieselbe naive Weise gemappt, besteht bei Marke A und fällt bei Marke B durch. Die Lösung ist markenspezifisches Mapping: Der accent von Marke B zeigt eine Stufe tiefer in ihre eigene Farbrampe (#15803d, ≈5,0:1 mit Weiß), oder behält alternativ die Ausgangsfarbe als Füllung und dreht on-accent auf eine dunkle Textfarbe. Beides ist legitim; anzunehmen, dass sich das Mapping zwischen Marken überträgt, ist es nicht.

Öffne zwei Marken, die dieselbe Rollenstruktur ausfüllen, im Scale Composer — die Token-Werte der blauen Marke importiert, das grüne System daneben aus seiner eigenen Ausgangsfarbe abgeleitet, und die Kontrastprüfungen, die genau zeigen, wo sich das Mapping der grünen Marke unterscheiden muss.

Was muss pro Marke getestet statt angenommen werden?

Drei Dinge, allesamt Variationen des Hakens von oben:

• Kontrast, pro Marke, pro Paarung. Jede Füllungs-Rolle muss die Grenzwerte mit ihren eigenen On-Farben erfüllen. Die Helligkeit einer Ausgangsfarbe entscheidet, welche Rampenstufen weißen Text tragen können, und Ausgangsfarben unterscheiden sich — daher ist das Mapping von Rolle zu Stufe eine markenspezifische Entscheidung, die gegen die Grenzwerte geprüft und niemals einfach übernommen wird.
• Funktionsfarben, auf die Marke abgestimmt. Erfolg, Warnung, Fehler und Info brauchen markenspezifische Aufmerksamkeit auf zwei Achsen. Chroma-Stärke: Eine gedämpfte Marke, deren Palette flüstert, wird von einem Fehler-Rot mit vollem Chroma übertönt, während eine lebendige Marke stärkere Funktionsfarben braucht, um als System und nicht als mehr Marke wahrgenommen zu werden. Und Kollision: Bei der grün-basierten Marke von oben liegt ein Standard-Erfolgsgrün gefährlich nah an der Markenfarbe selbst — es muss so weit auseinandergeschoben werden, bis beide als unterschiedliche Botschaften lesbar sind.
• Dark-Varianten, pro Marke abgeleitet. Eine dunkle Palette wird aus einer Ausgangsfarbe abgeleitet, und jede Marke hat ihre eigene — ein einziges Dark-Theme über alle Marken hinweg zu teilen verwirft stillschweigend die Markentönung, die jede Palette überhaupt erst kohärent gemacht hat.

Wem gehört das Rollen-Vokabular?

Der Organisation, nicht irgendeiner einzelnen Marke — denn das geteilte Rollen-Vokabular ist das eigentliche Kapital. Marken kommen und gehen: Übernahmen bringen ihre eigenen Paletten mit, White-Label-Kunden wechseln, Sub-Marken werden eingestellt. Die Rollen überdauern all das, und sie sind der Grund, warum sich die nächste Marke günstig hinzufügen lässt.

Deshalb zählt Rollen-Disziplin mehr als jede einzelne Farbentscheidung. Eine Rolle nur hinzuzufügen, weil die Kampagne einer Marke einen speziellen Verlaufs-Slot will, verschmutzt jede Marke: Jede muss nun eine Frage beantworten, die nur eine von ihnen gestellt hat, und jede Komponente könnte anfangen, die Antwort zu konsumieren. Eine neue Rolle sollte nur dann ins Vokabular aufgenommen werden, wenn der zugrunde liegende UI-Bedarf über alle Marken hinweg besteht; alles Engere gehört in das Primitive-Set einer einzelnen Marke, wo es mit dieser Marke sterben kann, statt sie zu überleben.

Wie siehst du den Austausch selbst?

Indem du die Struktur festhältst und nur die Ausgangsfarbe änderst. Tausche das Primitive-Set hinter einer festen Rollenstruktur aus — setze eine neue Ausgangsfarbe, beobachte, wie sich jede Rolle aus den neuen Farbrampen neu füllt, und prüfe, welche Mappings von Rolle zu Stufe die Kontrast-Grenzwerte zu verschieben zwingen.