Background colors define their own foreground color by so named on-colors. For using the DB Design System with SCSS, we provide a wide range of SCSS placeholders and utility
classes that automatically style e.g. text and links based on their current background color. For more information have a look at the usage section.
-
Color Scheme – Primary (Example)
The following example shows the available colors for the primary brand color.
Each defined color has an interactive mode which means that colors for hover and pressed states are defined.
-
-
Primary – base key color
-
On Primary – is applied to content (icons, text, etc.) that sits on top of primary
-
Primary Background-Light – background color for current key color. Only used for backrounds.
-
Primary Background-Transparent – Transparent or semi transparent backgrounds for current key color, e.g. used for form field backgrounds.
-
On Primary Background – is applied to content (icons, text, etc.) that sits on top of primary background colors (background light or transparent).
-
On Primary Background Weak – is applied to content (icons, text, etc.) that sits on top of primary background colors (background light or transparent) and is a variant to weaken content on primary backgrounds.
-
-
+
+
Primary
base key color
+
On Primary
is applied to content (icons, text, etc.) that sits on top of primary
+
Primary Background-Light
background color for current key color. Only used for backrounds.
+
Primary Background-Transparent
Transparent or semi transparent backgrounds for current key color, e.g. used for form field backgrounds.
+
On Primary Background
is applied to content (icons, text, etc.) that sits on top of primary background colors (background light or transparent).
+
On Primary Background Weak
is applied to content (icons, text, etc.) that sits on top of primary background colors (background light or transparent) and is a variant to weaken content on primary backgrounds.