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 Base Components Overview Base Components Overview Releases Design Tokens Komponenten Overview Base Informationen Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines App Icons FAQ Will the Angular Library be discontinued?

No, currently there are no such plans. However, as this rumor persists, ESTA Web's PO has written an internal blog post: https://confluence.sbb.ch/display/CLEW/2022/12/09/sbb-angular%3A+Rumors+of+its+death+have+been+greatly+exaggerated.

Going forward, two scenarios may occur:

  • Lyne web components will be used in the existing Angular library.
  • A migration to Lyne will be offered (automated or partially automated).

Should the second scenario be chosen in the long term, a mode of operation is still planned for several years. Which of the two scenarios will happen is currently difficult to answer, this depends heavily on the further development of Angular and other dependencies.

A figma update has destroyed my layout.

In general, we try to produce as few breaking changes as possible. However, it can still occur that exactly this happens. Sorry for that! But there are a few little tricks that can help you to minimize unwanted effects:

  • Read the update notes we publish. We mention when a breaking change is possible and when it is rather unlikely.
  • Schedule updates: Take your time for updates, the more recent your files are the higher the chance that nothing will break.
  • Pay attention to the date. Install older updates first, then the newer ones.
I want to report a bug.

Bugs can be reported here:

  • Lean
  • Lyne
  • iOS
  • Flutter/Android
I have found an error in the figma library.

The most convenient way for you and us is a simple comment in Figma. We will try to solve the bugs in a timely manner.

I want to develop a component.

Very cool! We are looking forward to your contribution. The first thing to determine is whether the component in question can be included in the design system. Here you can read how it's decided whether a component can be included or not.

In short form here:

  • Your component must comply with the design principles and visually fit into the system.
  • Your component must be accessible
  • Your component must meet the coding standards
  • Your component must be usable in other places as well
  • Your component may not contain business logic
I would like to submit a proposal for a component.

Very cool! We are looking forward to your contribution. The first thing to determine is whether the component in question can be included in the design system. Here you can read how it's decided whether a component can be included or not.

In short form here:

  • Your component must comply with the design principles and visually fit into the system.
  • Your component must be accessible
  • Your component must meet the coding standards
  • Your component must be usable in other places as well
  • Your component may not contain business logic
I want a dark mode!

Yes, we do too! This is already available for Mobile. Lean will get one as well. Please be patient for a little bit longer.

What are design tokens and how can I use them?

Design tokens are small, reusable variables used to keep design attributes or styles consistent within a digital product (e.g., websites, apps, or user interfaces). They are an important part of design systems and help ensure consistency and scalability of designs across different platforms and devices.

They typically represent basic design elements such as colors, fonts, spacing, shadows, animations, and other values used in CSS, JavaScript, or other programming languages. They are independent of specific technologies and can be easily used in different environments and repositories.

Some advantages

Consistency

Using design tokens ensures that design elements are applied consistently, creating a uniform look and feel.

Scalability

When design changes need to be made, they can be easily updated in one central location instead of having to change each individual element manually.

Collaboration

Design tokens allow for easier collaboration between designers and developers by establishing a common "design language" that is understood by both.

Applicability

Design tokens can be used across multiple technologies and platforms, simplifying the process of adjusting designs for different environments.

The documentation is incomplete, incorrect or missing.

This might very well be the case. We are grateful for every hint and are happy to correct errors/incompleteness. If you find a mistake on this platform, you can send a mail to ux@sbb.ch. If the documentation on Github or angular.app.sbb.ch is buggy, we ask you to open an Issue (Bug Report).

I need an adjustment of a component.

Please fill out the form for a feature enhancement on Github. Here you can find an overview with the necessary links.

I urgently need a component. What can I do?

The first thing we recommend is to contact us. Here you can find who to contact.
Our product owners are the best at estimating how fast a needed component can be delivered. Since digital.sbb.ch is a public platform, we choose not to display any contact information. However, as an internal/external SBB employee you will certainly know how to contact the corresponding product owner.

I need to access the figma libraries.

Have a look here.
In general, access is reserved for internal/external SBBers. Some libraries are accessible from outside, however they cannot be used. Thank you for your understanding.

I need a new icon.

If you are capable of creating an icon yourself, nothing stands in your way. An SBB icon is defined by a few features:

  • Predefined sizes (Small (24px), Medium (36px), Large (48px)).
  • 1px lines, no areas
  • No rounded lines
  • Reduced and clear. Show only the most necessary information

If you want to learn more about SBB Icons, you can sign up here for an icon instruction.
If you don't have any knowledge regarding icon design, the UX service (ux@sbb.ch) will be happy to assist you.

When can/should I start using Lyne?

Depending on the time horizon of your project, it can make sense to work with Lyne already. A first stable feature set is planned for the end of 2023 (without guarantee). Until then, Lyne will focus exclusively on customer applications. If you, or your project, are in a situation where you need to make a decision, please contact us. We will be happy to advise you and help you with the decision: mailto:ux@sbb.ch

I need the icons in other formats and sizes.

The Icons are available as follows:

  • as Figma library
  • as a download on Github
  • As CDN: Json with metadata Example
  • as webcomponent (see Lyne)

If you use other formats/sizes, you can export the corresponding assets directly from Figma. This instruction will help you.

Is there a channel/team to exchange information about the SBB design system?

Yes, you are welcome to join the SBB UX Community

I have a general question.

Wir helfen gerne. Damit deine Frage schnell beantwortet wird, hilft es, wenn du sie am richtigen Ort platzierst. Hier erfährst du mehr.

We are happy to help. To get your question answered quickly, it helps if you put it in the right place. Here you can find out more.

I have questions about the prioritization/roadmap.

A roadmap in the traditional sense doesn't exist at this time. However, you can see the priorization of the work on these boards:

  • Lean
  • Web
  • Lyne
  • Mobile (iOS)
  • Mobile (Android/Flutter)
Imprint Contact Cookie settings