Die 60-30-10-Regel ist kaputt: Moderne Farbsysteme, die wirklich funktionieren
Die 60-30-10-Regel ist eine Interior-Design-Abkürzung, die Designer immer wieder auf Produktarbeit pressen. Hier ist, was moderne Farbsysteme stattdessen tun.
Die 60-30-10-Regel ist das Erste, was die meisten Designer über Farbe lernen, und das Erste, was die meisten ernsthaften Product-Teams still und leise aufgeben, sobald sie eine echte Benutzeroberfläche ausliefern. Sechzig Prozent dominant, dreißig Prozent sekundär, zehn Prozent Akzent.
Sauber. Zitierbar. Völlig unbrauchbar, sobald eine Marke Buttons, deaktivierte Zustände, Benachrichtigungen, Diagramme, Dark Mode und eine Dokumentationsseite hat.
Die Regel ist nicht falsch. Sie ist nur für ein anderes Problem gebaut. Was die besten Design-Systeme stattdessen verwenden, ist keine Proportion, sondern ein rollenbasiertes Token-System. Dieser Artikel erklärt, warum 60-30-10 bricht, was es ersetzte, und fünf echte Design-Systeme, die den Austausch im großen Maßstab vollziehen.
Woher die 60-30-10-Regel stammt
Die 60-30-10-Regel ist eine Inneneinrichtungs-Abkürzung aus der Mitte des zwanzigsten Jahrhunderts, die von Leuten, die eine Regel zum Zitieren brauchten, auf digitales Design übertragen wurde.
Ihr Ursprung liegt im Wohndesign. Ein Raum hat eine dominante Farbe (Wände), eine sekundäre Farbe (Polster, Vorhänge) und einen Akzent (Kissen, Kunst). Sechzig, dreißig, zehn. Es funktioniert für Räume, weil Räume einzelne statische Flächen sind, die von einem einzelnen Menschen auf einmal betrachtet werden, und sie behalten ihre Farbe, bis jemand neu streicht.
Keine dieser Annahmen überlebt den Kontakt mit Product Design. Ein digitales Produkt ist keine statische Fläche. Es sind Hunderte von Flächen, jede mit eigenen Zuständen, Themes und Kontexten. Die Regel war nie für diese Welt gedacht, und das merkt man.
Warum sie im Product Design auseinanderfällt
Die 60-30-10-Regel setzt eine einzelne statische Fläche und einen einzelnen Betrachter voraus, was exakt nichts damit zu tun hat, wie Product Design funktioniert.
Echte Benutzeroberflächen haben deaktivierte Buttons, Hover-Zustände, Focus Rings, Fehler-Banner, Erfolgs-Toasts, Diagramm-Datenreihen, leere Zustände, Lade-Skelette und semantische Farben für destruktive Aktionen. Nichts davon lässt sich sauber auf "60, 30 oder 10 Prozent der Leinwand" abbilden. Sie sind keine Leinwand. Sie sind Verhalten.
Die Regel kollabiert auch in dem Moment, in dem man Dark Mode hinzufügt. Das 60-Prozent-helle Neutral muss nun ein 60-Prozent-dunkles Neutral werden, das 30-Prozent-Sekundär muss sich in der Tonalität verschieben, um die Hierarchie zu erhalten, und der 10-Prozent-Akzent muss meist aufgehellt oder komplett in der Farbe verschoben werden, um barrierefrei zu bleiben. Das ist kein Proportionsproblem. Das ist ein Systemproblem.
Barrierefreiheit ist der letzte Nagel im Sarg. WCAG-Kontrastverhältnisse interessieren sich nicht dafür, wie viel Prozent deiner Seite blau ist. Sie interessieren sich dafür, ob das spezifische Blau auf dem spezifischen Button genug Kontrast gegen den spezifischen Hintergrund dahinter hat. Das lässt sich nicht mit Flächenverhältnissen lösen.
Was moderne Farbsysteme stattdessen verwenden
Die Systeme, die die besten ausgelieferten Benutzeroberflächen antreiben, ersetzen Proportionsregeln durch rollenbasierte Token-Tiers, die beschreiben, was eine Farbe tut, nicht wie viel davon existiert.
| Tier | Was er tut | Beispiele für Tokens |
|---|---|---|
| Surface | Hintergrundebenen und Erhebungen | bg-default, bg-subtle, bg-raised, bg-overlay |
| Content | Text und Icons auf Flächen | text-default, text-muted, text-on-accent |
| Accent | Marken- und primäre Aktionsfarben | accent-primary, accent-primary-hover, accent-secondary |
| State | Interaktive und Feedback-Zustände | state-hover, state-focus, state-disabled |
| Semantic | Bedeutungsgeladene Signale | success, warning, critical, info |
Jeder Token beschreibt eine Rolle. "Diese Farbe ist die Fläche hinter einer Karte." "Diese Farbe ist der Text auf dem Akzent."
Der Designer wählt nie zwischen "Sekundär oder Akzent bei 30 Prozent." Er wählt zwischen Rollen, die das System bereits definiert.
Der Vorteil summiert sich. Dark Mode hinzuzufügen wird zu einer Frage, dieselben Tokens auf andere Rohwerte abzubilden, nicht die Benutzeroberfläche neu zu streichen. Ein neues Marken-Theme hinzuzufügen wird zu einem einzigen Token-Tausch auf der Akzent-Ebene. Barrierefreiheit wird auf Token-Ebene durchgesetzt, nicht Seite für Seite geprüft.
Fünf Design-Systeme, die es richtig machen
Diese werden im großen Maßstab ausgeliefert mit rollenbasierten Paletten, die über Light Mode, Dark Mode und jede Fläche, die ein Nutzer berührt, standhalten.
Material Design 3
Live ansehen auf m3.material.io
Material 3 ist am explizitesten über den Wandel. Das System definiert Farbrollen wie "primary," "on-primary," "surface," "on-surface," "inverse-primary," wobei jede Rolle für Kontrast vorverknüpft ist. Designer wählen keine Farben. Sie wählen Rollen, und die Tokens lösen sich zu den richtigen Werten für das aktive Theme auf.
Was man stehlen sollte: die "on-"-Benennungskonvention. on-primary für Text und Icons, die auf einer primären Fläche sitzen, kodiert Barrierefreiheit direkt in den Token-Namen.
Radix Colors
Radix Colors liefert 12-Stufen-Skalen pro Farbton, wobei jede Stufe einer Rolle vorab zugewiesen ist (App-Hintergrund, subtiler Hintergrund, UI-Element, Hover, Focus, Aktiv, Vollton, Text, Hochkontrast-Text). Keine Proportionslogik. Jede Stufe ist eine Rolle.
Was man stehlen sollte: die nummerierte Skala mit Rollenannotationen. Sie gibt Designern ein gemeinsames Vokabular, das 90 Prozent der "Welches Grau benutze ich"-Debatte eliminiert.
Shopify Polaris
Live ansehen auf polaris.shopify.com
Polaris organisiert Farbe nach Komponentenrolle: bg (Surface), text (Content), icon, border und interactive. Jede hat Unterrollen für Hover, Pressed, Disabled, Selected. Das System macht es strukturell schwer für einen Designer, außerhalb der definierten Tokens zu greifen.
Was man stehlen sollte: die Rollengruppierung. Das Trennen von "border"-Tokens von "surface"-Tokens erzwingt absichtsvollen Farbeinsatz auf Komponentenebene.
Zwei Marken, die es in der Produktion einsetzen
Die Design-System-Dokumentationen oben sind die Referenz. Diese zwei Marken sind der Beweis. Stripe und Linear betreiben rollenbasierte Farbe täglich auf Produktebene, und beide beweisen, dass das Muster unter echtem Einsatz standhält.
Stripe
Stripe liefert eine ausgelieferte Marke, nicht nur eine Design-System-Dokumentation. Die öffentliche Website demonstriert, wie rollenbasierte Farbe in der Produktion aussieht.
Fast alles sind neutrale Flächen und neutrale Inhalte. Lila ist der Akzent-Tier und erscheint genau dort, wo Aktionen, Links und Markensignale leben. Keine Proportionslogik. Rollenlogik.
Was man stehlen sollte: die Disziplin, den Akzent-Tier schlank zu halten. Stripes Akzentfarbe wird sparsam eingesetzt, weil ihre Rolle reserviert ist. Wenn man Akzentfarben für Dekoration verwendet, verliert man die Möglichkeit, sie für Aktionen einzusetzen.
Linear
Linear setzt stärker auf Neutraltöne als fast jeder andere, der im großen Maßstab ausliefert. Das gesamte Produkt besteht aus Schichten von dunklen Surface-Tokens mit einem einzigen Akzentton (Lila), der alle Aktionsarbeit übernimmt. Keine Proportionsregel könnte das erzeugen. Es ist ein reines rollenbasiertes System, in dem der "Akzent"-Tier eine Farbe ist, die mit Zurückhaltung eingesetzt wird, und der "Surface"-Tier ein vollständiger Elevation-Stack ist.
Was man stehlen sollte: das Selbstvertrauen, den Akzent-Tier eine Farbe sein zu lassen. Viele neue Design-Systeme überallokieren Akzentfarben. Linear beweist, dass ein gut gewählter Akzent, konsequent eingesetzt, stärkere Wiedererkennung aufbaut als drei Akzente in Proportion.
Wie man eine rollenbasierte Palette aufbaut
Eine Palette auf diese Weise aufzubauen dauert länger als drei Farben auszuwählen und Prozentsätze zuzuweisen, und sie amortisiert sich beim ersten Mal, wenn ein Designer Dark Mode hinzufügt.
Der Prozess läuft rückwärts zu dem, was die meisten Designer gelernt haben. Statt zuerst Farben auszuwählen und Rollen für sie zu finden, wählt man zuerst Rollen und findet dann Farben dafür.
- Definiere die Rollen-Tiers. Beginne mit Surface, Content, Accent, State, Semantic. Die meisten Produkte brauchen genau diese fünf. Einige brauchen einen sechsten für Datenvisualisierung.
- Schreibe die Tokens, bevor du die Hex-Werte auswählst. Jeder Token sollte eine Rolle beschreiben (
surface-subtle,content-muted,accent-primary-hover). Wenn ein Token-Name eine Farbe beschreibt ("light-blue"), benenne ihn um. - Fülle zuerst die Neutralskala aus. Der Großteil einer echten Benutzeroberfläche besteht aus Neutraltönen. Baue eine vollständige Skala auf (Radix verwendet 12 Stufen aus gutem Grund), bevor du Markenfarbe anfasst.
- Füge den Akzent-Tier zuletzt hinzu. Die Akzentfarbe ist normalerweise der einzige Ort, wo Markenidentität aktiv lebt. Zurückhaltung hier ist das ganze Spiel.
- Mappe Dark Mode durch Neu-Auflösen von Tokens, nicht durch Neugestaltung. Wenn dein System rollenbasiert ist, ist Dark Mode ein Token-Wertetausch, keine Farbüberarbeitung.
- Erzwinge Barrierefreiheit auf der Token-Ebene. Jeder
on-surface-Token sollte 4.5:1 gegen seine gepaarte Fläche bestehen. Backe die Prüfung ein.
Die verlockende Abkürzung ist, drei Rollen zu definieren (primary, secondary, accent), den Sieg zu erklären und auszuliefern. Das ist die 60-30-10-Regel im Tokens-Kostüm. Sie fällt am genau gleichen Punkt auseinander: der ersten echten Komponente.
Für den größeren Kontext, wie Farbentscheidungen auf Nutzer wirken, bevor diese Token-Arbeit überhaupt ins Spiel kommt, deckt Farbpsychologie im Design die Bedeutungsebene ab. Den vollständigen Überblick, wie Farbsysteme in den größeren Design-System-Kontext eingebettet sind, gibt der Design-Systems-Leitfaden.
FAQ
Ist die 60-30-10-Regel jemals nützlich?
Ja. Einflächen-Design profitiert immer noch davon. Poster, Social-Posts, Marketing-Hero-Sections, Verpackungen, redaktionelle Spreads. Überall dort, wo das Ergebnis eine einmalig betrachtete Leinwand ist, gibt die Regel eine schnelle Proportionsabkürzung. Product Design ist nicht diese Welt.
Wie viele Farben sollte ein Design-System haben?
Weniger rohe Hex-Werte als du denkst, organisiert in mehr Tokens als du denkst. Die meisten ausgelieferten Systeme haben 8 bis 12 Neutral-Stufen, 8 bis 12 Akzent-Stufen und 3 bis 5 semantische Familien, alle in rollenbasierte Tokens aufgelöst. Die rohe Farbanzahl ist klein. Die Rollenanzahl ist groß.
Was ist der Unterschied zwischen einer Farbpalette und einem Farbsystem?
Eine Farbpalette ist eine Menge von Farben. Ein Farbsystem ist eine Menge von Rollen, eine Menge von Regeln, wie diese Rollen interagieren, und eine Abbildung von Rollen auf Farben, die sich pro Theme ändern kann. Eine Palette beantwortet "Welche Farben hat die Marke." Ein System beantwortet "Welche Farbe hat dieses Element in diesem Zustand in diesem Theme."
Hör auf, Farbe in Prozent zu messen
Die 60-30-10-Regel ist nicht böse. Sie ist schlicht außerhalb ihres Anwendungsbereichs.
Product Design ist kein Raum. Es ist ein System aus Flächen, Zuständen und Rollen, das sich verändert, während der Nutzer sich durch es bewegt.
Farbe in Prozent zu messen macht genauso viel Sinn wie Typografie nach Prozentsatz der Seite zu messen. Man sagt nicht "30 Prozent des Textes sind Überschriften." Man sagt "Überschriften sind eine Rolle mit einem definierten Stil." Farbe muss genauso funktionieren.
Die Marken, die die am besten skalierenden visuellen Identitäten ausliefern, Material, Radix, Polaris, Stripe, Linear, haben das herausgefunden und darum herum gebaut. Ihre Prozentzahlen zu kopieren verfehlt den Punkt. Ihre Rollenstruktur zu kopieren ist der ganze Punkt.
Wenn deine aktuelle Palette drei Farben und eine vage Zuteilungsregel ist, hast du kein Farbsystem. Du hast eine Farbpräferenz. Baue die Tiers auf, benenne die Rollen, und lass die Hex-Werte das Letzte sein, worüber du streitest.
Need a color system built to scale, not just to swatch? Brainy builds palettes with token tiers, dark mode, and accessibility baked in.
Get Started
