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 Functional 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 Komponenten Overview Base Informationen Overview Base Components Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines App Icons 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

HEX: #06348B

RGB: R: 6 G: 52 B: 139

Royal125

HEX: #032668

RGB: R: 3 G: 38 B: 104

Royal150

HEX: #021C4E

RGB: R: 2 G: 28 B: 78

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.

Imprint Contact Cookie settings