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

Contact

Do you have any questions? Maybe our FAQ or our help will be helpful, otherwise you can post your question on the corresponding board on Github.

Imprint Contact Cookie settings