Sizing
Sizings beinflussen die Größe von Elementen und Komponenten, die in unseren Designs verwendet werden. Eine sorgfältige Auswahl und konsistente Anwendung von Größen ist entscheidend für eine harmonische und ausgewogene Ästhetik. In unserem Sizing-System haben wir daher verschiedene Größen definiert, die sich an einem gemeinsamen Raster orientieren und miteinander kombinierbar sind, um eine breite Palette von Layouts und Designs zu ermöglichen.
Scale
Unsere Sizing 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 Sizings 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 Größen, um sicherzustellen, dass die 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. Die Sizings verhalten sich nicht responsiv, d.h. bleiben über die verschiedenen Media Queries immer gleich.
Noch mehr Variationen bietet sonst noch der flexible Einsatz von den Densities, welche direkt die hinter den Größen liegenden Werte beeinflusst.
Size | Functional | Regular | Expressive |
|---|---|---|---|
480 | 3xl | ||
240 | 3xl | 2xl | |
160 | 3xl | 2xl | |
120 | 2xl | xl | |
96 | xl | ||
80 | xl | lg | |
64 | lg | ||
48 | lg | md | |
40 | md | ||
32 | md | ||
28 | sm | ||
24 | sm | ||
20 | sm | xs | |
16 | xs | ||
14 | xs | 2xs | |
12 | 2xs | 3xs | |
10 | 2xs | 3xs | |
8 | 3xs |
Tokens
Unsere Sizing-Tokens sind benannte Variablen, die wir verwenden, um konsistente Sizings 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