07 — Design / Colors
25 Felder, eine Seite. Alles, was der Site ihre Farbe gibt.
Markenfarben (8 Felder)
| Feld | Wo es sichtbar wird |
|---|---|
| Primary color | Navigation, Buttons, Akzente |
| Secondary color | Symbole, Links, Hover-Effekte |
| Tertiary color | Verläufe, Buttons |
| Quaternary color | Helle Sekundär- und Hover-Töne |
| Success · Info · Warning · Danger | Statusfarben |
Diese vier Markenfarben und vier Statusfarben sind SCSS-Variablen des Bootstrap Package (plugin.bootstrap_package.settings.scss.*), keine Custom Properties. Sie werden ins Stylesheet kompiliert; eine Änderung braucht also einen Cache-Flush, um vollständig sichtbar zu werden.
Aus der Primärfarbe leitet das Theme eine ganze Familie ab — hellere und dunklere Varianten, Farbstopps der Verläufe, den Hintergrund der Navigation, Hover-Zustände. Deshalb ändert eine einzige gesetzte Farbe meist mehr als erwartet: Die Ableitungen ziehen mit.
Abgeleitete Töne, die sich überschreiben lassen (4 Felder)
| Feld | Verhalten in der Vorgabe |
|---|---|
| Primary dark | aus der Primärfarbe abgeleitet |
| Primary light | aus der Primärfarbe abgeleitet |
| Footer background | abgeleitet |
| Muted text | abgeleitet |
Bleiben sie leer, folgen sie der Primärfarbe. Wird eines gefüllt, hört es auf zu folgen — was genau richtig ist für einen Footer, der eine bestimmte Farbe haben muss, und genau falsch, wenn die Site später umgefärbt werden soll.
Farbe für Wörter in der Überschrift
Headline word color ist die Farbe für Wörter, die innerhalb einer Überschrift markiert sind. Die Redaktion markiert sie, indem sie sie in eckige Klammern setzt:
Building business [with purpose]rendert „with purpose“ in dieser Farbe. Siehe 12 — Inhaltselemente.
Verläufe (12 Felder)
Die Verlaufsfelder haben einen visuellen Editor: Farbstopps ziehen, den Winkel setzen, per Doppelklick auf den Balken einen Stopp hinzufügen.
| Gruppe | Felder |
|---|---|
| Hintergründe | Primary gradient, Secondary gradient, Topbar gradient, Header background |
| Buttons | Primary / Secondary button gradient, jeweils mit einer Hover-Variante |
| Überschriftsbänder | Header BG (primary), Header BG (secondary) |
| Überschriftstext | Headline gradient (primary), Headline gradient (secondary) |
Die eine Regel für Verläufe
Sobald ein Wert gespeichert ist, ist dieser Verlauf eingefroren: Eine Änderung der Primärfarbe bewegt ihn nicht mehr. Der Editor zeigt den abgeleiteten Verlauf als Vorschau, damit sichtbar ist, was gerade eingefroren wird, und die Schaltfläche Follow palette leert das Feld wieder und gibt es an die Ableitung zurück.
Am meisten zählt das beim Header background. Er ist in der Vorgabe aus der Primärfarbe abgeleitet; wird er eingefroren, bleibt der Header bei einem späteren Farbwechsel zurück.
Winkel
Der Winkel steht in Grad, 0–360, genau wie in CSS: 0deg läuft von unten nach oben, 90deg von links nach rechts, 180deg von oben nach unten.
Die Reihenfolge der Felder
Die Seite folgt einer bewussten Ordnung: erst die Markenfarben, dann die Statusfarben, dann die abgeleiteten Töne, dann die Verläufe, gruppiert danach, was sie einfärben. Headline word color steht bei den Statusfarben, weil es dieselbe Art von Entscheidung ist — ein einzelnes Wort in Farbe, keine Fläche.
Aus der Praxis
- Zuerst Primary und Secondary setzen, dann die Site ansehen. Weil so vieles abgeleitet ist, bringen diese beiden Farben oft schon 80 % des Weges.
- Einen Verlauf nur einfrieren, wenn die Ableitung wirklich falsch ist. Jeder eingefrorene Verlauf ist eine Stelle, an die ein künftiger Markenwechsel denken muss.
- Nach dem Ändern der Markenfarben den Cache leeren. Die Custom Properties aktualisieren sich sofort, das kompilierte SCSS nicht.