Die Farbschemas sind keine eigene Komponente, sondern eine globale Design-Einstellung innerhalb deines headful-Projekts.
Du findest sie im Dashboard unter:
Projekt bearbeiten → Design → Farbschemas
Hier kannst du verschiedene Farbkombinationen definieren, die anschließend in Komponenten ausgewählt und angewendet werden können.
Vordefinierte Farbschemas
Es gibt drei Farbschemas, die immer vorhanden sind: Colored, Light und Dark.
Diese drei können nicht gelöscht, aber in ihren Farbwerten flexibel angepasst werden.
Colored
Colored ist in der Regel die primäre Akzentfarbe im Projekt.
Der Badge in der Header-Komponente zieht seine Farbe automatisch aus der Hintergrundfarbe der Hauptfarben im Colored-Schema. Diese Farbe ist nicht separat einstellbar.
Light
Das Light-Farbschema beeinflusst stark die Grundstruktur des Templates.
Die Hintergrundfarbe der Hauptfarben bestimmt unter anderem:
die Navigationsleiste
sogenannte Negative Spaces
grundlegende Template-Bereiche
Es wird empfohlen, diese Farbe sehr hell (idealerweise weiß) zu halten, da sie großflächig im Hintergrund eingesetzt wird und nicht unabhängig überschrieben werden kann.
Dark
Das Dark-Farbschema beeinflusst zentrale Designelemente.
Beispielsweise übernimmt der Footer seine Farbgestaltung aus diesem Farbschema. Wird hier die Hauptfarbe geändert, passt sich der Footer entsprechend an.
Aufbau eines Farbschemas
Jedes Farbschema besteht aus zwei Bereichen:
Hauptfarben
Hintergrund
Text
Highlight
Highlight wird in der Regel für Titel oder hervorgehobene Textelemente genutzt.
Text bezieht sich auf den Fließtext.
Boxfarben
Auch hier gibt es:
Hintergrund
Text
Highlight
Die Boxfarben wirken innerhalb von Komponenten, die visuell „gerahmt“ sind.
Man kann sich die Boxfarben als gestalterische Ebene innerhalb der Hauptfarben vorstellen.
Zusammenspiel von Haupt- und Boxfarben
Hauptfarben definieren die Grundfläche einer Komponente.
Boxfarben definieren Elemente innerhalb dieser Fläche.
Beispiel:
Ist die Haupt-Hintergrundfarbe dunkel, erhält die Komponente einen dunklen Hintergrund.
Ist die Box-Hintergrundfarbe hell, erscheinen Box-Elemente (z. B. Teaser-Elemente) hell auf dunklem Grund.
Dieses Prinzip gilt für alle Farbschemas.
Eigene Farbschemas
Neben Light, Colored und Dark kannst du beliebig viele eigene Farbschemas anlegen.
Es empfiehlt sich, zusätzlich zu den drei Standards mindestens zwei weitere Schemas zu definieren, um:
mehr gestalterische Flexibilität zu erhalten
Inhalte visuell stärker zu strukturieren
klare Farbkontraste innerhalb einer Seite zu schaffen
Speichern & Testen
Änderungen müssen gespeichert werden, damit sie im Projekt wirksam werden.
Du kannst Farben ausprobieren und jederzeit wieder anpassen.
Gerade zu Beginn sind vordefinierte Beispiel-Farben hinterlegt, anhand derer sich das Zusammenspiel gut nachvollziehen lässt.
Tipps & Tricks
Definiere deine Hauptfarben vorab und halte die Hex-Codes fest.
Arbeite konsistent mit festen Farbwerten, um ein farbtreues Gesamtbild zu gewährleisten.
Achte besonders bei Light darauf, dass die Hintergrundfarbe sehr hell bleibt.
Teste Farbkontraste bei Text auf Hintergrund sorgfältig, insbesondere bei Dark-Varianten.
Nutze zusätzliche Farbschemas strategisch zur visuellen Strukturierung von Seiten.