Farben · FWT Dokumentation

Anpassen / Farben

FWT-Farbpalette

Die Farbpalette ist die technische Grundlage des Farbsystems. Sie enthält die festen Rohfarben mit ihren Abstufungen.

Diese Rohfarben werden später über Bedeutungsvariablen wie --fwt-color-primary, --fwt-color-warning oder --fwt-color-danger nutzbar gemacht.

Neutral

Grundlage für Hintergründe, Texte, Rahmen und ruhige Flächen.

neutral-50

neutral-100

neutral-200

neutral-300

neutral-400

neutral-500

neutral-600

neutral-700

neutral-800

neutral-900

neutral-950

Petrol / Türkis

Hauptfarbe für FWT und Chasalla-nahe Oberflächen.

petrol-50

petrol-100

petrol-200

petrol-300

petrol-400

petrol-500

petrol-600

petrol-700

petrol-800

petrol-900

Blau

Für Info, Technik, Vertrauen und sachliche Bereiche.

blue-50

blue-100

blue-200

blue-300

blue-400

blue-500

blue-600

blue-700

blue-800

blue-900

Gold / Gelb

Für Akzente, Hinweise, Europa-Anmutung und Highlights.

gold-50

gold-100

gold-200

gold-300

gold-400

gold-500

gold-600

gold-700

gold-800

gold-900

Grün

Für Erfolg, Bestätigung, Freigabe und geprüfte Zustände.

green-50

green-100

green-200

green-300

green-400

green-500

green-600

green-700

green-800

green-900

Rot

Für Fehler, Gefahr, Ablehnung und kritische Hinweise.

red-50

red-100

red-200

red-300

red-400

red-500

red-600

red-700

red-800

red-900

Violett

Für kreative Module, besondere Werkzeuge und Highlights.

violet-50

violet-100

violet-200

violet-300

violet-400

violet-500

violet-600

violet-700

violet-800

violet-900

Diese Abstufungen sind die Grundlage. Normale Nutzer greifen später meist nicht direkt zu diesen Rohfarben, sondern verwenden fertige Klassen wie fwt-bg-primary oder fwt-text-danger.

Farbsystem

Klassen für Nutzer, Variablen für Anpassungen

FWT arbeitet auf zwei Ebenen: Nutzer verwenden einfache Klassen im HTML. Entwickler oder Projektbetreiber können über CSS-Variablen die Farben zentral anpassen.

Klassen

Für normale Inhalte und fertige Bausteine sind Klassen der einfache Weg.

<div class="fwt-bg-primary">Inhalt</div>

Variablen

Für eigene Komponenten oder Projektthemes werden CSS-Variablen genutzt.

background: var(--fwt-color-primary);

Regel

Sichtbare Beispiele und Code müssen immer zusammenpassen.

<p class="fwt-text-muted">Hilfetext</p>

Hintergrundklassen

Hintergrundfarben

Hintergrundklassen werden genutzt, wenn ein Bereich, eine Box oder ein Hinweis sichtbar eingefärbt werden soll.

Primary

Hauptfarbe für wichtige Flächen und Hervorhebungen.

<div class="fwt-bg-primary">Primary Fläche</div>

Secondary

Starke Nebenfarbe für Kontrastbereiche.

<div class="fwt-bg-secondary">Secondary Fläche</div>

Accent

Akzentfarbe für Highlights und besondere Hinweise.

<div class="fwt-bg-accent">Accent Fläche</div>

Surface

Normale helle Fläche für Karten und Inhaltsbereiche.

<div class="fwt-bg-surface">Surface Fläche</div>

Surface Soft

Sehr ruhige Fläche für dezente Bereiche.

<div class="fwt-bg-surface-soft">Surface Soft</div>

Dark

Dunkle Fläche für starke Kontraste.

<div class="fwt-bg-dark">Dark Fläche</div>

Statusklassen

Statusfarben

Statusfarben zeigen sofort, ob etwas erfolgreich war, geprüft werden muss oder kritisch ist.

Success

Für Erfolg, gespeicherte Änderungen oder erledigte Vorgänge.

<div class="fwt-bg-success">Erfolgreich gespeichert</div>

Info

Für neutrale Hinweise und Zusatzinformationen.

<div class="fwt-bg-info">Zusätzliche Information</div>

Warning

Für Warnungen, fehlende Angaben oder notwendige Prüfung.

<div class="fwt-bg-warning">Bitte prüfen</div>

Danger

Für Fehler, Löschen oder kritische Aktionen.

<div class="fwt-bg-danger">Kritischer Hinweis</div>

Creative

Für kreative oder besondere Bereiche. Wird später noch verfeinert.

<div class="fwt-bg-creative">Kreativer Bereich</div>

Textklassen

Textfarben

Textfarben werden genutzt, wenn einzelne Texte eine Bedeutung bekommen sollen. Die ausführliche typografische Nutzung wird später unter Inhalt → Typografie erklärt.

Primary Text

Für Links, Hervorhebungen oder wichtige Begriffe.

<p class="fwt-text-primary">Dieser Text ist hervorgehoben.</p>

Secondary Text

Für starke, ruhige Nebeninformationen.

<p class="fwt-text-secondary">Dieser Text nutzt Secondary.</p>

Muted Text

Für Hilfetexte, Metaangaben und zurückhaltende Hinweise.

<p class="fwt-text-muted">Dies ist ein dezenter Hilfetext.</p>

Success Text

Für positive Rückmeldungen in Textform.

<p class="fwt-text-success">Die Änderung wurde gespeichert.</p>

Warning Text

Für Hinweise, die geprüft werden sollen.

<p class="fwt-text-warning">Bitte prüfe diese Angabe.</p>

Danger Text

Für Fehlertexte oder kritische Hinweise.

<p class="fwt-text-danger">Diese Eingabe ist fehlerhaft.</p>

Farben dürfen nicht allein Bedeutung tragen. Ein Fehler braucht zusätzlich einen klaren Text.

Rahmenfarben

Border-Colors / Rahmenfarben

Rahmenfarben werden genutzt, um Boxen, Hinweise, Karten oder Eingabebereiche dezent zu kennzeichnen.

Wichtig: Eine Rahmenfarbe allein erzeugt noch keinen sichtbaren Rahmen. Deshalb wird sie mit einer Rahmenklasse kombiniert.

Primary-Rahmen

Rahmen für wichtige oder aktive Bereiche.

<div class="fwt-border fwt-border-primary">Primary-Rahmen</div>

Success-Rahmen

Rahmen für bestätigte oder erfolgreiche Bereiche.

<div class="fwt-border fwt-border-success">Success-Rahmen</div>

Warning-Rahmen

Rahmen für Hinweise, die Aufmerksamkeit brauchen.

<div class="fwt-border fwt-border-warning">Warning-Rahmen</div>

Danger-Rahmen

Rahmen für kritische oder gefährliche Bereiche.

<div class="fwt-border fwt-border-danger">Danger-Rahmen</div>

Info-Rahmen

Rahmen für sachliche Zusatzinformationen.

<div class="fwt-border fwt-border-info">Info-Rahmen</div>

Creative-Rahmen

Rahmen für besondere kreative Bereiche. Noch nicht final.

<div class="fwt-border fwt-border-creative">Creative-Rahmen</div>

Merksatz: fwt-border erzeugt den Rahmen. fwt-border-primary, fwt-border-danger usw. färben diesen Rahmen ein.

Rainbow

Rainbow als besondere FWT-Farbe

Rainbow ist für besondere Hervorhebungen gedacht. Es soll auffallen, aber nicht überall eingesetzt werden.

fwt-rainbow

Rainbow

Fertige Rainbow-Fläche für besondere Marken- oder Highlightbereiche.

<div class="fwt-rainbow">Rainbow-Fläche</div>

fwt-rainbow-full

Rainbow Full

Kräftige Rainbow-Fläche für kleine starke Eyecatcher.

<div class="fwt-rainbow-full">Rainbow Full</div>

fwt-rainbow-bg

Rainbow BG

Hintergrundvariante ohne kompletten Container-Effekt.

<div class="fwt-rainbow-bg">Rainbow BG</div>

fwt-rainbow-soft

Rainbow Soft

Sehr weiche Rainbow-Variante für dezente Flächen.

<div class="fwt-rainbow-soft">Rainbow Soft</div>

Rainbow sollte sparsam eingesetzt werden, damit es besonders bleibt.

Nutzung

Wie Farben verwendet werden sollen

Für normale Inhalte und fertige Bausteine sind Klassen der bessere Weg. CSS-Variablen sind sinnvoll, wenn eigene Komponenten oder Projektthemes angepasst werden.

Live-Beispiel

Wichtiger Bereich

Dezenter Hilfetext

Hinweis mit sichtbarem Warnrahmen

HTML-Code anzeigen

<div class="fwt-bg-primary fwt-p-4 fwt-rounded-lg">
    Wichtiger Bereich
</div>

<p class="fwt-text-muted fwt-p-4 fwt-rounded-lg">
    Dezenter Hilfetext
</p>

<div class="fwt-border fwt-border-warning fwt-p-4 fwt-rounded-lg">
    Hinweis mit sichtbarem Warnrahmen
</div>

Für Nutzer: möglichst fertige Klassen verwenden.

Für eigene Komponenten: CSS-Variablen nutzen.

Farben dürfen nicht allein Bedeutung tragen. Ein Fehler braucht auch klaren Text.

Rainbow sparsam einsetzen, damit es besonders bleibt.