Responsive Design & Gestaltung

Der Responsive Designer speichert Desktop als Basis und Tablet/Mobile als gezielte Overrides.

Tablet erbt von Desktop, Mobile erbt von Tablet; nur gesetzte Abweichungen überschreiben die breitere Ansicht.

Pro Breakpoint kann ein Element den Wert Vererbt, Anzeigen oder Ausblenden erhalten.

Die responsive Reihenfolge kann pro Breakpoint mit Werten von -99 bis 99 überschrieben werden.

Außen- und Innenabstand können über die Token Kein, XS, S, M, L und XL responsiv gesetzt werden.

Breite und maximale Breite können je Breakpoint vererbt oder aus sicheren vorgegebenen Werten gewählt werden.

Tablet und Mobile können Spalten, Gap, Richtung, Umbruch sowie Haupt-/Querachsenausrichtung überschreiben.

Schriftgröße, Gewicht und Zeilenhöhe lassen sich responsiv über kontrollierte Werte steuern.

Text kann responsiv auf Start, Zentriert, Ende oder Blocksatz gesetzt werden.

Das Design System definiert zentrale Tokens für Farben, Typografie, Spacing, Rahmen, Radius, Schatten und Container.

Vordefinierte Farb-Tokens umfassen Primär, Sekundär, Akzent, Text, gedämpften Text, Fläche und Rahmen.

Für Fließtext und Überschriften kann das Template geerbt oder System Sans Serif, Serif beziehungsweise Monospace gewählt werden.

Die Spacing-Tokens reichen von none über xs, sm, md, lg bis xl und werden in responsiven Abständen wiederverwendet.

Rahmenbreiten und Radien stehen als sichere Tokenwerte zur Verfügung, ergänzt durch den Rahmenstil am Element.

Schatten werden über die Tokens none, sm, md und lg gesteuert.

Container-Tokens reichen von sm über md, lg und xl bis full sowie default.

Design Tokens verbinden zentrale Designwerte mit einzelnen Elementen und sorgen für wiederholbare, konsistente Gestaltung.