Lyne provides colors on two levels: as base colors and as semantic CSS variables. Use the semantic variables for components and layouts. They adapt automatically to light and dark mode and to the theme variant.

• Base colors such as --sbb-color-milk or --sbb-color-red are the values of the SBB color palette. When to use which color is described on the pages Base colors, Off brand colors and Additional colors.
• Semantic variables such as --sbb-background-color-1 or --sbb-color-error describe a purpose. They point to a base color that changes with the mode and theme.

Context colors stand for the primary color, the brand and states such as error, warning or success.

The theme variants swap the base colors behind the context colors. Off-brand is meant for applications that do not appear under the SBB brand. Safety is meant for safety-relevant applications. If you use --sbb-color-primary instead of --sbb-color-red, nothing needs to change when you switch themes.

The variants are included with the theme files off-brand-theme.css and safety-theme.css (or lean-off-brand-theme.css and lean-safety-theme.css).

Backgrounds come in four levels. Level 1 is the base surface, the higher levels stand out more and more from it.

Level 1 has the highest contrast. Level 5 is the same in both modes and has no variants.

Borders use the same base colors as the text of the same level.

Background, text and border colors are also available with three suffixes (except level 5). They let you design surfaces that stay dark or light regardless of the mode.

Shadows come in soft and hard colors on two levels, each also with the suffix -negative. The easiest way to add a shadow is with the Sass mixins described on the Shadow page.

Lyne uses the native CSS property color-scheme. By default, components follow the operating system setting. With the CSS classes sbb-light or sbb-dark you set a fixed mode, for the whole page or for single areas.

Your own colors also need values for both modes. Use the CSS function light-dark() and put the light color in front of it as a fallback for older browsers:

.class {
  color: var(--sbb-color-cloud);
  color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
}

The semantic variables and the additional colors such as --sbb-color-sky switch on their own. The JavaScript tokens only contain the base colors. There you have to handle the mode yourself, so CSS variables are preferred.

For transparent colors, Lyne recommends the CSS function color-mix():

.class {
  /* Primary color with 40% opacity */
  color: color-mix(in srgb, var(--sbb-color-primary) 40%, transparent);
}

These tokens from the package @sbb-esta/lyne-design-tokens contain the fixed color values. The additional and off-brand colors each have a value for light (-light) and dark (-dark). The CSS variable without suffix, such as --sbb-color-sky, picks the right value automatically.