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

Here, we focus on intentional reduction: colors are only used in a subtle way. Red is used for the important navigation elements that offer the user a quick and understandable path through the page. Flows are not allowed.

Colors
Red
Red

HEX: #EB0000

RGB: R: 235 G: 0 B: 0

Red125

HEX: #C60018

RGB: R: 198 G: 0 B: 24

Red150

HEX: #A20013

RGB: R: 162 G: 0 B: 19

White, Grey, Black
White

HEX: #FFFFFF

RGB: R: 255 G: 255 B: 255

Milk

HEX: #F6F6F6

RGB: R: 246 G: 246 B: 246

Cloud

HEX: #E5E5E5

RGB: R: 229 G: 229 B: 229

Silver

HEX: #DCDCDC

RGB: R: 220 G: 220 B: 220

Aluminum

HEX: #D2D2D2

RGB: R: 210 G: 210 B: 210

Platinum

HEX: #CDCDCD

RGB: R: 205 G: 205 B: 205

Cement

HEX: #BDBDBD

RGB: R: 189 G: 189 B: 189

Graphite

HEX: #B7B7B7

RGB: R: 183 G: 183 B: 183

Storm

HEX: #A8A8A8

RGB: R: 168 G: 168 B: 168

Smoke

HEX: #8D8D8D

RGB: R: 141 G: 141 B: 141

Metal

HEX: #767676

RGB: R: 118 G: 118 B: 118

Granite

HEX: #686868

RGB: R: 104 G: 104 B: 104

Anthracite

HEX: #5A5A5A

RGB: R: 90 G: 90 B: 90

Iron

HEX: #444444

RGB: R: 68 G: 68 B: 68

Charcoal

HEX: #212121

RGB: R: 33 G: 33 B: 33

Midnight

HEX: #151515

RGB: R: 21 G: 21 B: 21

Black

HEX: #000000

RGB: R: 0 G: 0 B: 0

Blue
Blue

HEX: #2d327d

RGB: R: 45 G: 50 B: 125

Checking contrasts Colour ratios

SBB websites are designed with the following colour ratios. The quantities are to be take as guidelines – not as exact regulations – but significant deviations are to be avoided. If this is unavoidable, a check by SBB Brand Management is required.

60%
25%
10%
5%
Imprint Contact Cookie settings