Von einer Markenfarbe zum kompletten Designsystem

Das Rebranding kommt als sechzigseitiges PDF, und es ist wirklich schön. Der Farbabschnitt enthält das freigegebene Blau, seinen Hex-Code und eine einzige Anweisung: „20 % Tints für Hintergründe verwenden.” Alle nachgelagerten Teams geben ehrlich ihr Bestes. Auditiere das Produkt ein paar Monate später und zähle die Blautöne — neunzehn, dreiundzwanzig, einunddreißig; die Zahl variiert je nach Unternehmen, das Muster kaum. Niemand hat sich der Richtlinie widersetzt. Die Richtlinie endete nur zwanzig Entscheidungen zu früh.

Eine Markenfarbpalette, die den Kontakt mit einem echten Produkt übersteht, ist ein System, kein Farbmuster: die Markenfarbe, ausgedehnt zu einer Farbrampe aus Tints und Shades, eine darauf abgestimmte Neutraltöne-Skala, unterstützende Farben und Funktionsfarben mit benannten Aufgaben, und Textpaarungen, die auf Kontrast geprüft sind — ausgeliefert als benannte Tokens, die Software lesen kann, nicht als Seiten in einem PDF. Dieser Artikel zeigt, was ein vollständiges System enthält und warum jeder Teil existiert; er ist Teil unseres Leitfadens zu Markenfarben.

Warum zerfällt „ein Hex-Wert plus 20 % Tints”?

Weil diese Anweisung kein Wert ist — sie ist ein Algorithmus, den die Richtlinie jeden Leser allein ausführen lässt. Ein 20-%-Tint von #2563EB über Weiß gelegt ergibt ungefähr ≈#D3E0FB; über einem warmen Off-White landet er woanders; in einem Tool erzeugt, das Farben anders mischt, wieder woanders. Jedes Ergebnis ist die ehrliche Antwort eines vernünftigen Menschen, und jede ehrliche Antwort ist eine Verzweigung. Multipliziere die Verzweigungen mit jedem Screen, jedem Deck und jeder Kampagne, und die dreiundzwanzig Blautöne sind kein Rätsel mehr: Niemand ist abgedriftet, der Raum der richtigen Antworten war einfach so weit.

Die Kosten sind keine abstrakte Ordnungsliebe. Marken wirken durch Wiederholung — dieselbe Farbe, die derselben Person in denselben Rollen begegnet, bis die Farbe allein die Marke auslöst — weshalb Konsistenz als ein Kernmechanismus der Wiedererkennung im Markenmanagement behandelt wird. Dreiundzwanzig Beinahe-Blautöne lesen sich noch immer als Blau, aber nicht mehr als eine Stimme. Ein nützlicher Vergleich ist ein leicht verstimmtes Klavier: Wenige Zuhörer können das Intervall benennen, das danebenliegt, aber die meisten spüren, dass etwas nicht stimmt.

Was braucht die Produktoberfläche von der Markenfarbe?

Die Oberfläche ist der Ort, an dem das einzelne Farbmuster am stärksten gedehnt wird. Ein Button braucht die Markenfarbe als Füllung — plus einen Hover-, einen Pressed- und einen Disabled-Zustand, die in einem System benachbarte Stufen auf der Markenrampe sind statt vier separater Improvisationen. Text braucht Paarungen, die geprüft und nicht angenommen sind: Weiß auf #2563EB misst ≈5,2:1, komfortabel über der 4,5:1-Grenze für Labels in Textgröße — eine Tatsache, die einmal verifiziert und kodiert wird, damit niemand sie pro Screen neu errät. Darum herum sitzen Rahmen, Fokusringe und getönte Auswahlzustände; unter allem liegt eine Neutraltöne-Skala, deren Grautöne den Großteil der Arbeit der Oberfläche leisten — leicht in Richtung des Markenfarbtons getönt, damit Seiten und Karten als dieselbe Familie gelesen werden statt als geliehenes Mobiliar. Dann wiederholt sich die gesamte Anordnung für den Dark Mode — nach eigenen Regeln abgeleitet, nicht invertiert, denn das Umkehren heller Werte erzeugt Blendung, wo Ruhe herrschen sollte.

Was brauchen Marketing, Kommunikation und Print, das die UI nicht braucht?

Andere Flächen, dasselbe Prinzip. Marketing stützt sich auf das helle Ende der Farbrampe: seitenbreite Tints und Lasuren, die auch bei sehr geringer Intensität erkennbar die Marke bleiben müssen, plus ein oder zwei unterstützende Farbtöne, damit Illustrationen atmen können, ohne mit der Identität zu konkurrieren. Kommunikation verlangt, dass die Palette im Miniaturformat und in der Summe funktioniert — Diagrammserien, die nebeneinander unterscheidbar bleiben, Social-Templates, die Komprimierung und kleine Screens überstehen. Print ist ein eigenes Übersetzungsproblem, hier eine Zeile wert: Manche Druckfarben haben kein exaktes Bildschirm-Pendant, also besteht die Aufgabe des Systems darin, sich auf einen Bildschirmwert festzulegen und alles daraus abzuleiten, statt mit fünf Näherungen zu leben.

Die Inventare unterscheiden sich; der Bedarf ist ein und derselbe. Jede Fläche konsumiert Werte mit Aufgaben — und jeder Wert, den das System nicht benennt, wird unter Zeitdruck improvisiert.

Öffne ein vollständiges Markensystem, generiert aus einem einzigen Blau — die Farbrampe, die getönten Neutraltöne, die unterstützenden Farben und Funktionsfarben und die benannten Rollen, gruppiert so, wie dieser Artikel sie auflistet.

Wie sieht das Deliverable eines modernen Markenfarbsystems aus?

Drei Substitutionen trennen es vom klassischen PDF.

Farbrampen statt Farbmuster. Das Markenblau wird zu zehn verwandten Stufen, von einem fast weißen Tint (≈#F1F5FE) hinunter zu einem Blauschwarz (≈#192233), sodass Tints, Zustände und Dark-Theme-Werte von einer Skala abgelesen statt erfunden werden.

Benannte Rollen statt Werte. In der Größenordnung von siebzehn Aufgaben pro Fläche — Hintergrund, Textebenen, Rahmen, Aktionsfarben — jede auf eine Stufe zeigend, jede mit ihrer Kontrastanforderung. Eine Rolle überlebt jeden konkreten Hex-Wert.

Tokens statt PDFs. Das System wird in Formaten ausgeliefert, die Design-Dateien und Code gemeinsam nutzen — DTCG, CSS, Tailwind, Figma Variables, hex daneben — sodass der Wert, den ein Designer auswählt, und der Wert, mit dem ein Entwickler baut, derselbe Wert sind.

Hier ist dasselbe Markenblau in beiden Dialekten:

Jede Zeile auf der rechten Seite ist eine Entscheidung, die einmal getroffen, benannt und in einem Format ausgeliefert wird, das Maschinen konsumieren können. Werkzeuge können dieses gesamte Inventar aus der einen freigegebenen Farbe ableiten — diese Ableitung ist ein eigenes Thema — aber worauf es hier ankommt, ist die Form des Deliverables: Wo die linke Spalte endet und die Improvisation beginnt, gibt die rechte Spalte weiter Antworten.

Wo fängst du mit deiner eigenen Farbe an?

Nicht, indem du das größere PDF schreibst. Der schnellste Weg, das Inventar zu verstehen, ist zuzusehen, wie deine eigene Markenfarbe es füllt: lade deine Farbe und sieh, wie sich das System um sie herum zusammensetzt — die Farbrampe, zu der sie wird, die Neutraltöne, die sie tönt, die Paarungen, die bestehen und die durchfallen. Jeder benannte Wert, den es erzeugt, ist eine Entscheidung weniger, die darauf wartet, zu Verzweigung Nummer vierundzwanzig improvisiert zu werden.