Zur Navigation Zum Inhalt Kontakt Menu Find component Overview Lyne 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 Base Components Overview Base Components Overview Design Tokens Components Overview Base Informationen Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines App Icons
Find component

Lyne

Basics Animation

Animation

Border

Border

Grid

Grid

Spacings

Spacings

Typography

Typography

Components Action-Group

Action-Group

Alert

Alert

Alert-Group

Alert-Group

Autocomplete

Autocomplete

Button

Button

Calendar

Calendar

Card

Card

Card-Badge

Card-Badge

Checkbox

Checkbox

Checkbox-Group

Checkbox-Group

Chip

Chip

Clock

Clock

Datepicker

Datepicker

Dialog

Dialog

Divider

Divider

Footer

Footer

Form-Error

Form-Error

Form-Field

Form-Field

Header

Header

Header-Action

Header-Action

Icon

Icon

Image

Image

Journey-Header

Journey-Header

Link

Link

Link-List

Link-List

Logo

Logo

Menu

Menu

Menu-Action

Menu-Action

Radio-Button

Radio-Button

Radio-Button-Group

Radio-Button-Group

Selection-Panel

Selection-Panel

Signet

Signet

Slider

Slider

Tab-Group

Tab-Group

Tab Title

Tab Title

Tag

Tag

Tag-Group

Tag-Group

Teaser

Teaser

Teaser-Hero

Teaser-Hero

Time-Input

Time-Input

Title

Title

Toggle

Toggle

Toggle-Check

Toggle-Check

Tooltip

Tooltip

Tooltip-Trigger

Tooltip-Trigger

Typography Type Face

sbb-typo-type-face-sbb-light

"SBBWeb Light", "Helvetica Neue", Helvetica, Arial, sans-serif

Face

sbb-typo-type-face-sbb-roman

"SBBWeb Roman", "Helvetica Neue", Helvetica, Arial, sans-serif

Face

sbb-typo-type-face-sbb-bold

"SBBWeb Bold", "Helvetica Neue", Helvetica, Arial, sans-serif

Face

sbb-typo-type-face-i18n-traditional-chinese

"Example for possible i18n structure"

Face

Scale

sbb-typo-scale-0-75x

12pxpx

Scale

sbb-typo-scale-0-8125x

13pxpx

Scale

sbb-typo-scale-0-875x

14pxpx

Scale

sbb-typo-scale-default

16pxpx

Scale

sbb-typo-scale-1-125x

18pxpx

Scale

sbb-typo-scale-1-25x

20pxpx

Scale

sbb-typo-scale-1-5x

24pxpx

Scale

sbb-typo-scale-2x

32pxpx

Scale

sbb-typo-scale-2-5x

40pxpx

Scale

sbb-typo-scale-3x

48pxpx

Scale

sbb-typo-scale-3-5x

56pxpx

Scale

sbb-typo-scale-4x

64pxpx

Scale

Letter Spacing

sbb-typo-letter-spacing-titles

0

Letter Spacing

sbb-typo-letter-spacing-body-text

0.03em

Letter Spacing

Line Height

sbb-typo-line-height-titles

1.3

Line Height

sbb-typo-line-height-body-text

1.75

Line Height

Übriges

sbb-typo-font-family-fallback

"Helvetica Neue", Helvetica, Arial, sans-serif

Imprint Contact Cookie settings