What is Lyne?
I am a Product-Owner Developer UX architect Coming soon Coming soon

Lyne is the design system for web applications at SBB. It provides ready-made, tested and accessible UI building blocks that help teams develop high-quality applications faster.

What does Lyne do for my product?
Faster product development. Faster product development. Ready-made, documented components and clear design guidelines considerably speed up the development of new products. Teams do not have to design recurring elements such as buttons, forms or navigation from scratch every time and can focus on what really sets their product apart. Themes adapt the UI to its purpose – compact for data-rich interfaces or with neutral colours for industry applications. Higher product quality. Higher product quality. Carefully tested and maintained components ensure a consistently high level of quality across all applications. Accessibility is built in from the start – this is how we make sure that our digital services meet the WCAG standards and are accessible to all users. And with the included dark mode, applications look pleasant and well thought out in any environment. Future-proof technology. Future-proof technology. With web components, we rely on an open web standard standardised by the W3C that works independently of individual frameworks. This makes our components maintainable in the long term and usable in any technological environment – today and in ten years. Consistent user experience & brand. Consistent brand. Consistent design, language and interaction patterns across all digital touchpoints create a recognisable and uniform experience. Customers and employees immediately find their way around every SBB application – this builds trust and strengthens the brand in the long term.
What are the economic and qualitative benefits of Lyne?
Use cases. Economic effect. Qualitative effect.
New internal product for our employees.
  • Immediately: saves costs thanks to ready-made components.
  • High-quality UI: accessible, responsive, light & dark mode.
New product for our customers.
  • Immediately: saves costs thanks to ready-made components.
  • Immediately: less effort to ensure accessibility.
  • High-quality UI: accessible, responsive, light & dark mode.
New product for the industry.
  • Immediately: saves costs thanks to ready-made components.
  • Immediately: no effort for branding adjustments.
  • Switch flexibly between SBB and industry branding.
  • High-quality UI: accessible, responsive, light & dark mode.
1:1 migration of an existing product.
  • Short term: possible additional costs for the migration.
  • Long term: cost savings and less operating effort.
  • Ongoing quality improvements and new components.
  • High-quality UI: accessible, responsive, light & dark mode.
Migration of a legacy system combined with a redesign.
  • Short to medium term: additional costs.
  • Long term: cost savings and less operating effort.
  • Ongoing quality improvements and new components.
  • Improved user experience thanks to the redesign.
  • High-quality UI: accessible, responsive, light & dark mode.

Studies on design systems show that teams can save 20–50 % of development time on UI features when they use reusable components.
Migrating to Lyne. Do I have to migrate my product? That depends on the lifecycle of your product or platform. If your product will be in operation beyond 2028, we recommend migrating – primarily because the Angular library will no longer be maintained after that. If your product reaches its end of life before 2029, a migration is hardly worthwhile. When is a good time to migrate? There is no general recommendation for the ideal time to migrate. If larger conceptual changes are planned anyway – such as reworking several views – it can be worth carrying out the migration before or at the same time. Either way, the migration is a chance to consider improvements to usability and user experience right away. The UX Service will be happy to advise you. Is there technical support? We expect to clarify the needs for migration support in more detail in Q4 2026. If there is broad demand, we will build tools in Q1 2027 that help with a migration or automate certain tasks. How long will the old Angular library be supported? The old Angular library will be maintained until 31 December 2028. After that, the library remains available, but maintenance ends. If your product or platform has a longer lifecycle, a migration is recommended. Can I use the old Angular library and Lyne at the same time? No. The libraries are not compatible and interfere with each other.

Not sure when or whether to migrate? The UX Service will be happy to advise you.
5 reasons for Lyne.
  1. Consistency.

    Interactions, look and feel, design and patterns are the same everywhere. This reduces the learning effort for customers and employees.

  2. Efficient collaboration.

    Shared standards speed up development and make it easier for UX, POs, business and development to work together. Recurring design and implementation questions have already been solved, and teams are better aligned from the start.

  3. Accessibility.

    All components meet the current accessibility standards according to WCAG 2.2.

  4. Flexible components.

    Components are available in several sizes and can be adapted to different usage scenarios. This also allows complex user interfaces for expert applications.

  5. Technology independence.

    Lyne can be used with Angular, React and other front-end stacks – or without any framework at all.

 How is Lyne evolving?
Roadmap. Overview Milestones Releases GitHub Technology.

Lyne is based on modern web standards and can therefore be used in the long term.

 Funding.

The funding of the design system is secured in the long term.
Collaboration and contribution.
Requirements for components
Contribute new requirements.

Does your team need a new component? Find out whether it fits into Lyne.

Check criteria
Contribute
Lyne is open source.

Teams can suggest improvements, report bugs and contribute code.

Contribute on GitHub
Discover contributions
Experimental components.

Contributions from other projects and teams can also be used.

Discover components
Advice and support.
Request advice
Advice on design and user experience.

The UX Service is happy to help with questions about design and user experience.

Request advice
Ask a question in the Teams channel
Advice on development.

Questions about development can be asked in our Teams channel.

Join the Teams channel
Roadmap 2026 – 2028
Lyne Elements

  • Pearl-Chain

  • AI-Agent Evaluation

  • CSS Optimization

  • Enhanced Calendar

  • Refactoring Time-Table Components

  • Layout Überarbeitung

  • Kleinere / Mittlere Feature-Wünsche aus DSO

Lyne Angular

  • Blueprint-Integration

  • Showcase

  • Schematics

  • Migrationshilfe

Betrieb & Support

  • SACL (Legacy Angular Library)

  • Lyne Elements

  • Lyne Angular

Roadmap as a list

Lyne Elements

  • Pearl-Chain – Juli – September 2026
  • AI-Agent Evaluation – Juli – September 2026
  • CSS Optimization – Januar – Juni 2026
  • Enhanced Calendar – Januar – März 2026
  • Refactoring Time-Table Components – Oktober 2026 – Juni 2027
  • Layout Überarbeitung – Oktober 2026 – März 2027
  • Kleinere / Mittlere Feature-Wünsche aus DSO – Januar 2026 – März 2029

Lyne Angular

  • Blueprint-Integration – Januar – März 2026
  • Showcase – Januar – März 2026
  • Schematics – April – Juni 2026
  • Migrationshilfe – August 2026 – März 2027

Betrieb & Support

  • SACL (Legacy Angular Library) – Januar 2026 – Dezember 2028
  • Lyne Elements – Januar 2026 – März 2029
  • Lyne Angular – Januar 2026 – März 2029