Einheitliche Appearance-Logik für Sektionen – von Container bis Full-Bleed Background.
Hintergründe werden in ATLAS nicht als dekoratives Beiwerk verstanden, sondern als wiederverwendbares Design-Pattern.
Jeder Hintergrund basiert auf demselben strukturellen Aufbau und denselben Optionen:
Das sorgt dafür, dass Seiten auch bei wachsendem Umfang visuell ruhig und nachvollziehbar bleiben – selbst wenn mehrere Redakteure daran arbeiten.
Kernidee des Systems ist die saubere Trennung zwischen Inhalt und Fläche:
So lassen sich Sektionen klar gliedern, Akzente setzen oder Themenblöcke hervorheben, ohne den Lesefluss oder das Layout-Raster zu brechen. Das Grid bleibt stabil – die Bühne wird größer.
Ein zentrales Element des Systems sind die SVG-Patterns.
Sie sind bewusst als dezente Hintergrund-Layer konzipiert:
Typische Einsatzszenarien:
Große Hintergrundbilder oder projektspezifisches Sonder-CSS werden dadurch oft überflüssig.
Tiefe statt Dekoration
Zusätzlich zu Farben, Medien und Patterns stehen optionale Effekt-Layer zur Verfügung.
Diese Effekte sind bewusst als Finish gedacht – sie unterstützen Lesbarkeit und Tiefe, ohne Content zu überlagern.
| Verfügbare Effekte | Erklärung |
|---|---|
| Dim | Transparenter Overlay zur Beruhigung kräftiger Farben oder Bilder |
| Gradient | Verlauf-Overlay zur gezielten Kontraststeuerung (z. B. Richtung Headline oder CTA) |
| Noise | Dezente Körnung für natürlichere, weniger „digitale“ Flächen |
| Blur | Weichzeichnung für moderne Glass- oder Highlight-Looks |
| Fixed | Fixierter Hintergrund für subtile Parallax-Effekte und mehr räumliche Tiefe |
Alle Effekte sind kontrolliert einsetzbar.
Statt unendlicher Kombinationsmöglichkeiten gibt es eine kuratierte Auswahl, die auch langfristig konsistent bleibt.
Gerade im Dark Mode zeigt sich die Stärke des Systems:
Textfarben über Auto-Kontrast oder theme-adaptive Klassen (z. B. text-body) und gezielt eingesetzte Dim- oder Gradient-Overlays sorgen für stabile Lesbarkeit in jeder Kombination.
Organische Übergänge zwischen Sektionen
Als Erweiterung des Background-Systems bietet ATLAS SVG Wave Dividers – eine elegante Alternative zu harten Schnittkanten.
Die Wellen können am Anfang und/oder Ende eines Content-Elements eingesetzt werden und passen sich automatisch an die Hintergrundfarbe des folgenden Frames an.
Die Wave Dividers basieren auf mask-image mit Data-URI-kodierten SVGs:
Besonders praktisch:
Wave Dividers funktionieren nahtlos mit Fullwidth-Layouts, Parallax-Hintergründen, SVG-Patterns und Effekt-Layern – ohne visuelle Konflikte oder Sonderlogik.
Das Background & Fullwidth-System ist kein einzelnes Feature, sondern ein tragendes Gestaltungsfundament von ATLAS.
Es verbindet technische Sauberkeit mit gestalterischer Freiheit und sorgt dafür, dass auch komplexe Seiten über Jahre hinweg wie aus einem Guss wirken.