Interface-Gestaltung: SMACSS & Gradient Mesh erklärt
SMACSS in Aktion
Wir strukturieren jede Seite mit atlas-layout-, atlas-module- und atlas-state-Klassen. Dadurch bleibt der Code wartbar, obwohl wir nur Vanilla CSS verwenden.
Gradient Mesh Workflow
Hero und Cards nutzen drei Radialverläufe plus lineare Übergänge. So entsteht die Aurora-Optik ohne große Assets. Jeder Verlauf reagiert auf Media Queries, damit Mobile-Geräte nicht überfordert werden.
Button-Design
Split-Color-Buttons laufen über CSS-Animationen statt GIFs. Das spart KBs und erlaubt Farbwechsel per Variablen. Der Hover-Effekt verschiebt die Gradient-Position, wodurch die Bewegung lebendig wirkt.
Design Tokens & Versionierung
Alle Farben, Schatten und Abstände liegen als Design Tokens in einem JSON-File vor. Bereits kleinste Änderungen erhalten eine Versionsnummer – so stellen wir sicher, dass das Look-and-Feel in jedem Build von 2026 konsistent bleibt.
Designerinnen exportieren die Token direkt aus Figma in unser Repo, wo ein CI-Check prüft, ob Namen und Werte den Guidelines entsprechen.
Performancefreundliche Animationen
Wir beschränken Animationen auf GPU-optimierte Eigenschaften wie transform und opacity. Für Nutzer mit eingeschränkter Bewegungswahrnehmung respektieren wir die Systempräferenz „Reduce Motion“ und stellen automatisch auf sanfte Fade-Effekte um.

