Layout & Raster

„Viel Weißraum" ist das Prinzip der Marke. Hier wird es messbar, damit Ruhe reproduzierbar wird und nicht Gefühlssache bleibt.

Abstände

Alle Abstände sind Vielfache von 8, mit 4 als feinem Zwischenschritt. Ein festes Raster hält Layouts ruhig und konsistent. Hier die Skala, nicht beschrieben, sondern gesetzt:

--cd-space-14 px

--cd-space-28 px

--cd-space-316 px

--cd-space-424 px

--cd-space-532 px

--cd-space-648 px

--cd-space-764 px

--cd-space-896 px

Die Tokens stecken im Theme, du kannst sie direkt nutzen:

--cd-space-1: 4px;   --cd-space-2: 8px;   --cd-space-3: 16px;  --cd-space-4: 24px;
--cd-space-5: 32px;  --cd-space-6: 48px;  --cd-space-7: 64px;  --cd-space-8: 96px;

Weißraum

Im Zweifel mehr Abstand. Je größer die Einheit, desto mehr Luft: viel zwischen Sektionen, wenig innerhalb eines Elements. So wächst der Abstand mit (der blaue Spalt zwischen den Blöcken ist der Weißraum):

8–16 px · innerhalb eines Elements

16–24 px · zwischen Elementen einer Gruppe

64–96 px · zwischen Sektionen

Ein Element, das atmet, wirkt hochwertiger als ein volles. Weißraum ist kein verschenkter Platz, sondern Teil der Aussage.

Raster

12 Spalten, Gutter 24 px, maximale Inhaltsbreite rund 1152 px. Oben die zwölf Spalten, darunter ein Beispiel-Layout:

Inhalt · 8 Spalten

Aside · 4

Blau führt, Grün akzentuiert: der Hauptinhalt nimmt acht Spalten, der Akzent vier.

• Auf kleinen Schirmen auf 4 bis 6 Spalten reduzieren, Abstände beibehalten.
• Text in angenehmer Lesebreite halten, lange Zeilen umbrechen statt über die volle Breite ziehen.

Radius, Schatten und Bewegung

Damit Ecken, Tiefe und Bewegung nicht in jeder Komponente neu erfunden werden, sind auch sie Tokens. Quelle ist brand/tokens.json, im Theme als --cd-* verfügbar.

Eckenradien

sm · 6px

md · 12px

lg · 16px

pill · 999px

md ist der Standard für Karten, Buttons und Eingaben. sm für kleine Elemente, lg für große Flächen, pill für runde Buttons und Avatare.

Schatten

Drei Höhenstufen, getönt mit Marken-Schwarz statt reinem Schwarz.

shadow-1

shadow-2

shadow-3

shadow-1 trennt dezent, shadow-2 hebt Karten, shadow-3 ist für Schwebendes (Popover, Dialoge).

Bewegung

Kurz und ruhig. Immer prefers-reduced-motion respektieren (siehe Barrierefreiheit).

--cd-motion-fast: 150ms;   /* Hover, kleine Zustandswechsel */
--cd-motion-base: 250ms;   /* Standard-Übergang */
--cd-motion-slow: 400ms;   /* größere Ein- und Ausblendungen */
--cd-ease:      cubic-bezier(0.4, 0, 0.2, 1);   /* Standard */
--cd-ease-out:  cubic-bezier(0, 0, 0.2, 1);     /* für Hereinkommendes */

Schutzraum des Logos

Auch das Logo braucht seinen Abstand: rundum mindestens die Höhe des „M". Details und Mindestgrößen stehen unter Logo.

Stand

Das 8-Punkt-Raster ist gesetzt und als Token verfügbar. Die Rasterwerte (Spalten, Inhaltsbreite, Gutter) sind ein sinnvoller Vorschlag, vom Marketing bestätigen lassen.