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.