Adaptive

Weiterleitung

Sie werden in Sekunden weitergeleitet.

Falls keine Weiterleitung erfolgt, klicken Sie auf den Link:

Es ist etwas schief gelaufen.

Upps - das Senden Deiner Anfrage ist fehlgeschlagen. Du kannst uns aber immer via E-Mail erreichen.

Prinzipien--Adaptive-Styles--Teaserbild

Adaptive

Adaptive bezieht sich auf die Fähigkeit des Design Systems, sich automatisch an verschiedene Kontexte oder Umgebungen anzupassen. Im Gegensatz zu statischen Styles, die für alle Situationen gleich bleiben, können adaptive Styles variieren und sich je nach Umgebung oder Bedarf ändern.

Adaptive Styles

Ende des oberhalb befindlichen Videos

Coloring

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-Styles--Visual-2

Sizing

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.

Tonalities--Visual-2

Tokens

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. 

Tokens

Ende des oberhalb befindlichen Videos

Border Width

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-3xsborder-width-2xsborder-width-xsborder-width-smborder-width-mdborder-width-lgborder-width-xlborder-width-2xlborder-width-3xlborder-width-full
Ende des Expander-Inhaltes
Border Radius

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-3xsborder-radius-2xsborder-radius-xsborder-radius-smborder-radius-mdborder-radius-lgborder-radius-xlborder-radius-2xlborder-radius-3xlborder-radius-full
Ende des Expander-Inhaltes
Colors

Colors

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-defaultdb-adaptive-bg-basic-level-1-hovereddb-adaptive-bg-basic-level-1-pressed

Level 2

db-adaptive-bg-basic-level-2-defaultdb-adaptive-bg-basic-level-2-hovereddb-adaptive-bg-basic-level-2-pressed

Level 3

db-adaptive-bg-basic-level-3-defaultdb-adaptive-bg-basic-level-3-hovereddb-adaptive-bg-basic-level-3-pressed

Transparent Full

db-adaptive-bg-basic-transparent-full-defaultdb-adaptive-bg-basic-transparent-full-hovereddb-adaptive-bg-basic-transparent-full-pressed

Transparent Semi

db-adaptive-bg-basic-transparent-semi-defaultdb-adaptive-bg-basic-transparent-semi-hovereddb-adaptive-bg-basic-semi-pressed

On Background Basic

Emphasis 100

db-adaptive-on-bg-basic-emphasis-100-defaultdb-adaptive-on-bg-basic-emphasis-100-hovereddb-adaptive-on-bg-basic-emphasis-100-pressed

Emphasis 90

db-adaptive-on-bg-basic-emphasis-90-defaultdb-adaptive-on-bg-basic-emphasis-90-hovereddb-adaptive-on-bg-basic-emphasis-90-pressed

Emphasis 80

db-adaptive-on-bg-basic-emphasis-80-defaultdb-adaptive-on-bg-basic-emphasis-80-hovereddb-adaptive-on-bg-basic-emphasis-80-pressed

Emphasis 70

db-adaptive-on-bg-basic-emphasis-70-defaultdb-adaptive-on-bg-basic-emphasis-70-hovereddb-adaptive-on-bg-basic-emphasis-70-pressed

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-defaultdb-adaptive-bg-inverted-contrast-max-hovereddb-adaptive-bg-inverted-contrast-max-pressed

Contrast High

db-adaptive-bg-inverted-contrast-low-defaultdb-adaptive-bg-inverted-contrast-low-hovereddb-adaptive-bg-inverted-contrast-low-pressed

Contrast Low

db-adaptive-bg-inverted-contrast-low-defaultdb-adaptive-bg-inverted-contrast-low-hovereddb-adaptive-bg-inverted-contrast-low-pressed

On Background inverted

db-adaptive-on-bg-inverted-defaultdb-adaptive-on-bg-inverted-hovereddb-adaptive-on-bg-inverted-pressed

Origin

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-enableddb-xxx-origin-hovereddb-xxx-origin-pressed

On Origin

db-xxx-on-origin-enableddb-xxx-on-origin-hovereddb-xxx-on-origin-pressed
Ende des Expander-Inhaltes
Elevation

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-smelevation-mdelevation-lg
Ende des Expander-Inhaltes
Border Width

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

Ende des Expander-Inhaltes
Sizing

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-3xssizing-fixed-2xssizing-fixed-xssizing-fixed-smsizing-fixed-mdsizing-fixed-lgsizing-fixed-xlsizing-fixed-2xlsizing-fixed-3xlsizing-fixed-full
Ende des Expander-Inhaltes
Spacing

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-3xsspacing-fixed-2xsspacing-fixed-xsspacing-fixed-smspacing-fixed-mdspacing-fixed-lgspacing-fixed-xlspacing-fixed-2xlspacing-fixed-3xlspacing-fixed-full

responsive

spacing-responsive-3xsspacing-responsive-2xsspacing-responsive-xsspacing-responsive-smspacing-responsive-mdspacing-responsive-lgspacing-responsive-xlspacing-responsive-2xlspacing-responsive-3xlspacing-responsive-full

Ende des Expander-Inhaltes
Typography

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-3xldb-type-headline-font-size-2xldb-type-headline-font-size-xldb-type-headline-font-size-lgdb-type-headline-font-size-mddb-type-headline-font-size-smdb-type-headline-font-size-xsdb-type-headline-font-size-2xsdb-type-headline-font-size-3xs

db-type-headline-line-height-3xldb-type-headline-line-height-2xldb-type-headline-line-height-xldb-type-headline-line-height-lgdb-type-headline-line-height-mddb-type-headline-line-height-smdb-type-headline-line-height-xsdb-type-headline-line-height-2xsdb-type-headline-line-height-3xs

Body

db-type-body-font-size-3xldb-type-body-font-size-2xldb-type-body-font-size-xldb-type-body-font-size-lgdb-type-body-font-size-mddb-type-body-font-size-smdb-type-body-font-size-xsdb-type-body-font-size-2xsdb-type-body-font-size-3xs

db-type-body-line-height-3xldb-type-body-line-height-2xldb-type-body-line-height-xldb-type-body-line-height-lgdb-type-body-line-height-mddb-type-body-line-height-smdb-type-body-line-height-xsdb-type-body-line-height-2xsdb-type-body-line-height-3xs

Ende des Expander-Inhaltes

Das könnte dich auch noch interessieren

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