Farben

Das Farb-Kapitel zeigt die Farben der Marke mit allen Werten, die Druckerei, Webentwicklung und Agentur brauchen. Leser kopieren jeden Wert im Guide mit einem Klick.

Farbpaletten

Eine Palette fasst Farben zusammen, die zusammengehören, etwa Primärfarben und Sekundärfarben. Pro Palette gibt es einen Namen, Hinweise zur Anwendung und die Farben selbst.

Felder, die du leer lässt, erscheinen im Guide nicht. Die erste Palette färbt auch die Kachel des Guides in der Übersicht, solange er kein Key Visual hat.

Spezialfarben

Für Farben, die ein Bildschirm nicht zeigen kann: Pantone, HKS, Neon oder Metallic-Lacke. Mit dem Schalter «Spezialfarben aktivieren» erscheint eine eigene Palette. Statt exakter Werte erfasst du Annäherungen für HEX, RGB und CMYK und den eigentlichen Code der Sonderfarbe.

Darstellung im Guide

Ob Farbfelder eckig oder rund erscheinen, stellst du für den ganzen Guide unter «Einstellungen» › «Darstellung» ein, siehe Layout und Erscheinungsbild. Weitere Inhalte wie ein Do's & Don'ts zur Farbverwendung setzt du mit «Block hinzufügen» unter die Paletten.

Für die Entwicklung

Ab dem Abo Pro gibt es Farben und Schriften als Design Tokens, einmal als JSON im Format des W3C und einmal als CSS mit Custom Properties. Du musst dafür nichts ausfüllen, der Inhalt entsteht aus Farben und Typografie.

• Mit dem Block «Design Tokens» zeigst du beide Dateien im Guide nebeneinander, zum Kopieren und Herunterladen. Du setzt ihn mit «Block hinzufügen» an jede Stelle, etwa unter die Paletten oder in eine eigene Sektion für die Entwicklung, siehe Blöcke.
• Im Footer des Guides steht neben den Assets die Spalte «Design Tokens» mit beiden Dateien.

Die Dateien sind hinter demselben Passwort wie der Guide.

Die Namen der Tokens kommen aus den Namen im Guide, «Rheinblau» in der Palette «Hauptfarben» wird zu --color-hauptfarben-rheinblau. Sie bleiben in jeder Sprache des Guides gleich. Farben ohne gültigen HEX-Code fehlen, ebenso ausgeblendete Einträge. Schriftdateien sind nicht dabei: Sie brauchen eine eigene Webfont-Lizenz.

Wer eine Farbe umbenennt, ändert damit auch ihre Variable, und eine Website, die sie nutzt, findet sie nicht mehr. Dafür gibt es an jeder Farbe und jeder Stufe der Hierarchie das Feld «Token-Name». Steht dort brand-blue, heisst die Variable --color-hauptfarben-brand-blue, egal wie die Farbe heisst oder übersetzt wird. Erlaubt sind Kleinbuchstaben, Ziffern und Bindestriche. Leer gelassen zeigt das Feld den Namen, der automatisch entsteht. Der Name der Palette bleibt Teil der Variable.