CORPORATE DESIGN · DIVI 5
Die zentrale visuelle Sprache.
Diese Seite dokumentiert die globalen Farben, Schriften, Hierarchien, Zustände und wiederverwendbaren Komponenten des Demo-Projekts.
FARB-TOKENS
Marke, Oberfläche und Zustände.
Primär · Orange
#F26A21
Basis · Anthrazit
#111315
Fläche · Creme
#FFF8F2
Fläche · Hellgrau
#F3F4F6
Akzent · Petrol
#137C78
Text
#202428
Text · gedämpft
#667085
Information
#2F6BFF
Erfolg
#16865C
Warnung
#D99000
Fehler
#C93C37
TYPOGRAFIE
Klar in der Hierarchie. Stark in der Wirkung.
Playfair Display trägt die Überschriften. Inter bleibt in längeren Texten, Bedienelementen und Formularen ruhig und präzise.
H1 · Große Bühne
H2 · Abschnitt
H3 · Komponente
Leadtext: 20 px, großzügige Zeilenhöhe für Einleitungen.
Fließtext: 17 px mit einer Zeilenhöhe von 1,7 em für gute Lesbarkeit auf langen Seiten.
Kleine Information: 14 px für Meta- und Hilfstexte.
KOMPONENTEN
Buttons und Oberflächen.
Die globalen Presets bilden den Ausgangspunkt. Projektbezogene Varianten werden als weitere Presets ergänzt, nicht als unverbundene Einzelstyles.
FORMULARSYSTEM
Felder und Rückmeldungen.
Formulare nutzen dieselbe Typografie und definierte Zustandsfarben für Fokus, Erfolg, Warnung, Fehler und Information.
Erfolg
Formular wurde erfolgreich versendet.
Warnung
Bitte prüfen Sie Ihre Angaben.
Fehler
Dieses Feld ist erforderlich.
Kontaktformular
Das System ist die Vorlage.
Für ein neues Projekt werden zentrale Werte ersetzt, während Struktur und Komponentenlogik erhalten bleiben.