Spacing
Spacings sind ein wichtiges Element unseres Design Systems, das die Abstände zwischen den verschiedenen Elementen auf unserer Website oder App definiert. Durch die Verwendung konsistenter Spacings können wir ein harmonisches und ausgewogenes Design erreichen, das Nutzer:innen ein angenehmes und intuitives Erlebnis bietet.
Scale
Unsere Spacing Scale basiert auf einem 4px Grid, das mit unserem Schriftsystem abgestimmt ist. Dies gewährleistet ein konsistentes Erscheinungsbild und eine einheitliche Abstandsgestaltung. Ab einer Größe von 96 werden die nachfolgenden Spacings von der ursprünglichen Scale abgeleitet und um das Zehnfache skaliert (120, 160, 240, usw.).
Größen
Unser Design System bietet eine breite Palette an Abständen, um sicherzustellen, dass Ihre Inhalte optimal präsentiert werden. Von der kleinsten Größe 3xs bis hin zur größten Größe 3xl haben wir eine Vielzahl von Möglichkeiten für jeden Bedarf.
Noch mehr Variationen bietet sonst noch der flexible Einsatz von den Densities, welche direkt die hinter den Größen liegenden Werte beeinflusst.
Fixed Spacings
Im Gegensatz zu Responsive Spacings, die sich an die Größe des Screens anpassen, bleiben Fixed Spacings immer gleich groß und sind besonders für Abstände innerhalb von Komponenten oder Modulen geeignet.
Size | Functional | Regular | Expressive | |
|---|---|---|---|---|
120 | 3xl | |||
80 | 3xl | 2xl | ||
48 | 3xl | 2xl | xl | |
32 | 2xl | xl | lg | |
24 | xl | lg | md | |
16 | lg | md | sm | |
12 | md | sm | xs | |
8 | sm | xs | 2xs | |
6 | xs | |||
4 | 2xs | 2xs | 3xs | |
2 | 3xs | 3xs | ||
Responsive Spacing
Responsive Spacings sind Abstände, die sich im Gegensatz zum Fixed Spacing an die Größe des Screens anpassen. Sie eignen sich besonders für Abstände zwischen einzelnen Bereichen. Durch die Verwendung von Responsive Spacings wird ein konsistentes Erscheinungsbild auf verschiedenen Geräten und Bildschirmgrößen gewährleistet.
Size | Functional | Regular | Expressive | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
Mobile | Tablet | Desktop | Mobile | Tablet | Desktop | Mobile | Tablet | Desktop | |||
800 | 3xl | ||||||||||
640 | 3xl | 3xl | 2xl | ||||||||
480 | 3xl | 3xl | 2xl | 3xl | 2xl | xl | |||||
240 | 3xl | 2xl | 3xl | 2xl | xl | 2xl | xl | lg | |||
160 | 3xl | 2xl | xl | 2xl | xl | xl | lg | ||||
120 | 2xl | xl | xl | lg | lg | md | |||||
96 | xl | lg | lg | md | |||||||
80 | lg | lg | md | md | sm | ||||||
64 | lg | md | md | sm | |||||||
48 | md | md | sm | sm | xs | ||||||
40 | md | sm | sm | xs | |||||||
32 | sm | sm | xs | xs | 2xs | ||||||
28 | sm | xs | xs | 2xs | 3xs | ||||||
24 | xs | xs | 2xs | 2xs | 3xs | ||||||
20 | xs, 2xs | 2xs | 2xs | 2xs | 2xs | 3xs | 3xs | ||||
16 | 3xs | 3xs | 3xs | 3xs | 3xs |
Tokens
Unsere Spacing-Tokens sind benannte Variablen, die wir verwenden, um konsistente Spacings in unseren digitalen Produkten sicherzustellen. Jeder Spacing-Token repräsentiert ein bestimmtes Spacing, die wir in unserem Design System definieren. Diese benannten Spacing-Tokens erleichtern die Arbeit in der Entwicklung, da sie einfach zu referenzieren und zu ändern sind. Für mehr Information lese alles über unsere Tokens.
Du hast Fragen oder Input?
Wir haben alles dafür gegeben, dass unser Design System mit möglichst wenigen Regeln auskommt. So wird es einfach in der Anwendung, führt zu konsistenten Ergebnissen und stärkt die Marke Deutsche Bahn! Solltest du dir jedoch unsicher sein, Fragen oder einfach nur eine gute Verbesserungsidee haben, so sind wir gerne für dich da!
E-Mail schreiben Feedback in Github
Weiter