Ende des oberhalb befindlichen Videos
Adaptive Coloring bezieht sich auf die Fähigkeit von Komponenten, ihre Farben automatisch an verschiedene Kontexte oder Umgebungen anzupassen. Im Gegensatz zu statischen Farben, die für alle Situationen gleich bleiben, können adaptive Farben variieren und sich je nach Umgebung oder Bedarf ändern.
Adaptive Coloring ermöglicht Komponenten, ihre Farbschemata an die Umgebung anzupassen, in der sie sich befinden. Zum Beispiel könnte ein Button in einem bestimmten Kontext eine andere Farbe aufweisen als in einem anderen Kontext. Adaptive Coloring trägt auch dazu bei, dass das Design System barrierefrei bleibt, indem es eine ausreichende Kontraststärke zwischen Hintergrund- und Textfarben sicherstellt.
Adaptive Sizing ist ein Konzept des Design Systems, bei dem sich die Größe von Komponenten automatisch an die umgebende Design Densities anpasst. Dies ermöglicht eine flexibler Gewichtung der einzelnen Bestandteile des Produkts.
Durch die Größenverhältnisse der Komponenten wird in der Regular Density ein ausgewogenes Verhältnis von Form und Funktion erreicht, das für die meisten Einsatzzwecke sinnvoll ist.
Die gezielte Verkleinerung funktionaler Komponenten in der Functional Density legt den Fokus auf deren Funktion und ermöglicht die Darstellung vieler Informationen gleichzeitig. Diese Vorgehensweise eignet sich am besten für sehr technische Anwendungen.
In der Expressive Density kann eine hohe visuelle Wirkung von Komponenten durch deren Vergrößerung erreicht werden, was insbesondere für Marketingzwecke von Vorteil sein kann.
Design-Tokens sind benannte Variablen, die bestimmte Werte für verschiedene Design-Eigenschaften wie Farben, Schriftarten, Abstände und Größen speichern. Indem wir Design-Elemente auf diese Weise standardisieren und systematisieren, können wir eine konsistente visuelle Sprache aufrechterhalten und gleichzeitig die Flexibilität und Effizienz in der Design-Entwicklung erhöhen.
Ende des oberhalb befindlichen Videos
Diese Tokens definieren die verschiedenen Strichstärken, die in der Design-Sprache verwendet werden. Sie ermöglichen einheitliche Gestaltung der Linien innerhalb des Design Systems.
Border Width |
---|
border-width-3xs border-width-2xs border-width-xs border-width-sm border-width-md border-width-lg border-width-xl border-width-2xl border-width-3xl border-width-full |
Diese Tokens definieren die verschiedenen Eckenabrundungen, die in der Design-Sprache verwendet werden. Sie beeinflussen die visuelle Ästhetik der Elemente und ermöglichen einheitliche Eigenschaften der Ecken für eine harmonische Benutzeroberfläche.
Border Radius |
---|
border-radius-3xs border-radius-2xs border-radius-xs border-radius-sm border-radius-md border-radius-lg border-radius-xl border-radius-2xl border-radius-3xl border-radius-full |
Diese Tokens definieren die verschiedenen Farben, die in der Design-Sprache verwendet werden. Sie ermöglichen eine konsistente Farbpalette und eine klare Semantik für die verschiedenen Farben, die in der Anwendung verwendet werden.
Alle Farbtokens sind nach dem gleichen Prinzip aufgebaut, anbei alle Tokens der adaptive Palette.
Die restlichen Farbpaletten bauen sich identisch auf, anstatt "adaptive" den jeweiligen Palettennamen verwenden.
semantische Farben: neutral, critical, informational, successful, warning, brand,
zusätzliche Farben: yellow, orange, red, pink, violet, blue, cyan, turquoise, green
Background Basic | |
---|---|
Level 1 | db-adaptive-bg-basic-level-1-default |
Level 2 | db-adaptive-bg-basic-level-2-default |
Level 3 | db-adaptive-bg-basic-level-3-default |
Transparent Full | db-adaptive-bg-basic-transparent-full-default |
Transparent Semi | db-adaptive-bg-basic-transparent-semi-default |
On Background Basic | |
---|---|
Emphasis 100 | db-adaptive-on-bg-basic-emphasis-100-default |
Emphasis 90 | db-adaptive-on-bg-basic-emphasis-90-default |
Emphasis 80 | db-adaptive-on-bg-basic-emphasis-80-default |
Emphasis 70 | db-adaptive-on-bg-basic-emphasis-70-default |
Emphasis 60 | db-adaptive-on-bg-basic-emphasis-60-default |
Emphasis 50 | db-adaptive-on-bg-basic-emphasis-50-default |
Background inverted | |
---|---|
Contrast Max | db-adaptive-bg-inverted-contrast-max-default db-adaptive-bg-inverted-contrast-max-hovered db-adaptive-bg-inverted-contrast-max-pressed |
Contrast High | db-adaptive-bg-inverted-contrast-low-default db-adaptive-bg-inverted-contrast-low-hovered db-adaptive-bg-inverted-contrast-low-pressed |
Contrast Low | db-adaptive-bg-inverted-contrast-low-default db-adaptive-bg-inverted-contrast-low-hovered db-adaptive-bg-inverted-contrast-low-pressed |
On Background inverted |
---|
db-adaptive-on-bg-inverted-default |
Die jeweiligen Origin-Farben, die die Grundlage der 15-stufigen Farbpaletten sind, stehen auch als Token zur Verfügung.
Bitte beachten: das Design System garantiert für die Verwendung außerhalb expliziter Core Components dafür KEINE Barrierefreiheit. Der Einsatz muss in den jeweiligen Produkten eigenständig geprüft werden!
xxx = neutral, critical, informational, successful, warning, brand, yellow, orange, red, pink, violet, blue, cyan, turquoise, green
Origin |
---|
db-xxx-origin-enabled |
On Origin |
---|
db-xxx-on-origin-enabled db-xxx-on-origin-hovered db-xxx-on-origin-pressed |
Diese Tokens definieren die verschiedenen Schattierungen und Erhebungen, die in der Design-Sprache verwendet werden. Sie erleichtern die Erstellung von visuellen Hierarchien und ermöglichen eine konsistente und ansprechende Gestaltung von Elementen.
Elevation |
---|
elevation-sm elevation-md elevation-lg |
Diese Tokens definieren die verschiedenen Tranzparentstufen, die in der Design-Sprache verwendet werden. Sie ermöglichen einheitliche Gestaltung der Transparenzen innerhalb des Design Systems.
Opacity |
---|
none |
3xs |
2xs |
xs |
sm |
md |
lg |
xl |
2xl |
3xl |
full |
Diese Tokens definieren die verschiedenen Größen, die in der Design-Sprache verwendet werden. Sie ermöglichen eine konsistente Größenverteilung von Design-Elementen und erleichtern die Skalierung von Komponenten.
Sizing | |
---|---|
fixed | sizing-fixed-3xs sizing-fixed-2xs sizing-fixed-xs sizing-fixed-sm sizing-fixed-md sizing-fixed-lg sizing-fixed-xl sizing-fixed-2xl sizing-fixed-3xl sizing-fixed-full |
Diese Tokens definieren die verschiedenen Abstände, die in der Design-Sprache verwendet werden. Sie ermöglichen eine konsistente Abstandsverteilung in der Anwendung und erleichtern die Platzierung von Design-Elementen.
Spacing | |
---|---|
fixed | spacing-fixed-3xs spacing-fixed-2xs spacing-fixed-xs spacing-fixed-sm spacing-fixed-md spacing-fixed-lg spacing-fixed-xl spacing-fixed-2xl spacing-fixed-3xl spacing-fixed-full |
responsive | spacing-responsive-3xs |
Diese Tokens definieren die verschiedenen Schriftgrößen, Schriftarten und Schriftstile, die in der Design-Sprache verwendet werden. Sie ermöglichen eine einheitliche Typografie und eine konsistente Lesbarkeit in der gesamten Anwendung.
Font Size | Line Height | |
---|---|---|
Headline | db-type-headline-font-size-3xl | db-type-headline-line-height-3xl |
Body | db-type-body-font-size-3xl | db-type-body-line-height-3xl |
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 GithubMöchten Sie zu weitergeleitet werden?