Farben

Unsere Palette ist bewusst zurückhaltend. Wir verwenden Neutraltöne als Grundlage, mit Farbe für Bedeutung und Betonung.

Hintergrund: #FAFAFA (warmes Gebrochenweiß) für Seiten, #FFFFFF für Karten und erhöhte Oberflächen.
Text: #0A0A0A für primären Text, #71717A für sekundären, #A1A1AA für deaktiviert.
Akzent: Blau für Engineering, Violett für Design, Orange für Marketing, Smaragd für Kundenerfolg.
Semantisch: Grün für positiv, Gelb für Warnung, Rot für Fehler – sparsam verwendet.
Datenvisualisierung: Blauintensitätsskala für Besucherwert, Traffic-Quell-Farben für Zuordnungsdiagramme.

Typografie

Zwei Schriftarten decken alle unsere Anforderungen ab. Wir führen keine neuen Schriftarten ohne starke Begründung ein.

Inter: Unser Arbeitspferd. Fließtext, UI-Elemente, Buttons, Beschriftungen. Gewichtungen 400–700.
Instrument Serif: Für Dramatik. Hero-Überschriften, dekorative Zahlen, Pull-Quotes. Sparsam verwendet.

Typskala folgt einem modularen Verhältnis: 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72px. Zeilenhöhen sind 1,5 für Fließtext, 1,2 für Überschriften.

Abstände

Wir verwenden ein 8px-Basisraster. Häufige Abstandswerte: 8, 16, 24, 32, 48, 64, 96. Konsistenz in Abständen schafft visuellen Rhythmus.

Vertikaler Rhythmus ist wichtiger als horizontaler. Abschnitte haben großzügige Abstände (64–96px). Komponenten haben engere interne Abstände (16–24px).

Komponenten

Unsere Komponentenbibliothek ist bewusst minimal. Wir haben Buttons, Karten, Eingaben und einige spezialisierte Komponenten. Wenn Sie etwas Neues benötigen, fragen Sie zuerst, ob eine vorhandene Komponente funktionieren kann.

Buttons: Primär (solides Blau), Sekundär (umrandet), Ghost (nur Text). Drei Größen: sm, md, lg.
Karten: Weißer Hintergrund, subtiler Schatten, abgerundete Ecken (8px). Hover-Zustände heben sich leicht an.
Eingaben: Saubere Rahmen, großzügige Abstände, klare Fokuszustände mit blauem Ring.
Modals: Zentriert mit Hintergrundunschärfe. Sparsam für Bestätigungen und fokussierte Aufgaben verwendet.

Bewegung

Animationen dienen der Funktion, nicht der Dekoration:

Dauer: 150 ms für Mikrointeraktionen, 300 ms für Übergänge, 500 ms für Seitenwechsel.
Easing: ease-out für Eingänge, ease-in für Ausgänge, ease-in-out für Schleifen.
Reduzierte Bewegung: Alle Animationen respektieren Nutzerpräferenzen über prefers-reduced-motion.

Icons

Wir verwenden ausschließlich Lucide Icons. Sie sind konsistent, gut gestaltet und haben eine ausgezeichnete Abdeckung. Standardgröße ist 20px, Strichbreite 1,5.