Zur Navigation Zum Inhalt Kontakt Menu
Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Additional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Releases Design Tokens Components Overview Base Informations Overview App Icons Power-Apps Digital banner ads SAP Design Guidelines AI Design: Basics
Off brand colors

In a few cases, SBB red cannot be used as the primary color. For example, the color red may only be used in safety-related applications to communicate errors. In these cases, the primary color (Red, Red125, Red150) may be replaced by the following colors:

Royal-Dark

HEX: #0053EF

RGB: R:0 G:83 B:239

Royal-Light

HEX: #06348B

RGB: R:6 G:52 B:139

Royal125-Dark

HEX: #245ECB

RGB: R:36 G:94 B:203

Royal125-Light

HEX: #032668

RGB: R:3 G:38 B:104

Royal150-Dark

HEX: #3C65B3

RGB: R:60 G:101 B:179

Royal150-Light

HEX: #021C4E

RGB: R:2 G:28 B:78

Royal85-Dark

HEX: #4077DF

RGB: R:64 G:119 B:223

Royal85-Light

HEX: #4077DF

RGB: R:64 G:119 B:223

Please note that this color set may only be used in exceptional cases. It requires clarification with the DSRV UX.

Conception in Figma

The colors are available in the Figma library, but are not used in the components. However, the colors can be conveniently replaced in Figma using the "Selection Colors" function.

Implementation in the frontend

In the Angular Library, the colors can be swapped as follows: To the instruction.