Was ist Lyne?

Ich bin

Product-Owner

Entwickler:innen

UX-Architekt:innen

Folgt später

Lyne ist das Design System für Webanwendungen bei der SBB. Es stellt fertige, getestete und barrierefreie UI-Bausteine bereit, mit denen Teams schneller hochwertige Anwendungen entwickeln können.

Was bringt Lyne meinem Produkt?

Schnellere Produktentwicklung.

Schnellere Produktentwicklung. Vorgefertigte, dokumentierte Komponenten und klare Gestaltungsrichtlinien beschleunigen die Entwicklung neuer Produkte erheblich. Teams müssen wiederkehrende Elemente wie Buttons, Formulare oder Navigationen nicht jedes Mal neu konzipieren und können sich auf das konzentrieren, was ihr Produkt wirklich auszeichnet. Über Themes passt sich das UI an den Anwendungszweck an – ob kompakt für datenreiche Oberflächen oder mit neutraler Farbgebung für Branchen-Applikationen.

Höhere Produktqualität.

Höhere Produktqualität. Sorgfältig getestete und gepflegte Komponenten gewährleisten ein durchgängig hohes Qualitätsniveau über alle Anwendungen hinweg. Barrierefreiheit ist dabei von Anfang an integriert – so stellen wir sicher, dass unsere digitalen Angebote den WCAG-Standards entsprechen und für alle Nutzenden zugänglich sind. Und mit dem mitgelieferten Dark Mode wirken Anwendungen in jeder Umgebung angenehm und durchdacht.

Zukunftssichere Technologie.

Zukunftssichere Technologie. Mit Web Components setzen wir auf einen offenen, vom W3C standardisierten Webstandard, der unabhängig von einzelnen Frameworks funktioniert. Das macht unsere Komponenten langfristig wartbar und in jeder technologischen Umgebung einsetzbar – heute wie in zehn Jahren.

Konsistente User Experience & Marke.

Konsistente Marke. Einheitliche Gestaltung, Sprache und Interaktionsmuster über alle digitalen Touchpoints hinweg schaffen ein wiedererkennbares & einheitliches Erlebnis. Kundinnen, Kunden und Mitarbeitende finden sich in jeder SBB-Anwendung sofort zurecht – das stärkt Vertrauen und festigt die Marke nachhaltig.

Was bringt Lyne aus wirtschaftlicher und qualitativer Sicht?

Use Cases.	Wirtschaftlicher Effekt.	Qualitativer Effekt.
Neues internes Produkt für unsere Mitarbeitenden.	Sofort: Spart kosten durch fertige Komponenten.	Hochwertiges UI: barrierefrei, responsiv, Light- & Darkmode.
Neues Produkt für unsere Kundinnen und Kunden.	Sofort: Spart Kosten durch fertige Komponenten. Sofort: Weniger Aufwand für das Sicherstellen von Barrierefreiheit.	Hochwertiges UI: barrierefrei, responsiv, Light- & Darkmode.
Neues Produkt für die Branche.	Sofort: Spart Kosten durch fertige Komponenten. Sofort: Kein Aufwand für Branding-Anpassungen.	Flexibel wechseln zwischen SBB- und Branchenkleid. Hochwertiges UI: barrierefrei, responsiv, Light- & Darkmode.
1:1-Migration eines bestehenden Produkts.	Kurzfristig: Mehrkosten möglich für die Migration. Langfristig: Kosteineinsparung und weniger Betriebsaufwand.	Laufende Qualitätsverbesserungen und neue Komponenten. Hochwertiges UI: barrierefrei, responsiv, Light- & Darkmode.
Migration von Altsystem kombiniert mit Redesign.	Kurz- bis Mittelfristig: Mehrkosten. Langfristig: Kosteneinsparung und weniger Betriebsaufwand.	Laufende Qualitätsverbesserungen und neue Komponenten. Verbesserte User Experience durch Redesign. Hochwertiges UI: barrierefrei, responsiv, Light- & Darkmode.

Studien zu Design Systemen zeigen, dass Teams 20–50 % Entwicklungszeit bei UI-Features einsparen können, wenn wiederverwendbare Komponenten eingesetzt werden.

Migration auf Lyne.

Muss mein Produkt migrieren?

Das hängt vom Lifecycle deines Produkts oder deiner Plattform ab. Sofern dein Produkt länger als bis 2028 in Betrieb ist, empfehlen wir eine Migration – in erster Linie, weil die Angular Library danach nicht mehr gewartet wird. Erreicht dein Produkt sein End-of-Life vor 2029, lohnt sich eine Migration kaum.

Wann ist ein guter Zeitpunkt für eine Migration?

Der ideale Zeitpunkt für eine Migration lässt sich nicht pauschal empfehlen. Wenn ohnehin grössere konzeptuelle Anpassungen geplant sind – etwa die Überarbeitung mehrerer Views – kann es sich lohnen, die Migration davor oder gleichzeitig umzusetzen. So oder so bietet die Migration die Chance, Verbesserungen bei Usability und User Experience direkt mitzudenken. Der UX Service berät dich dazu gerne.

Gibt es eine technische Unterstützung?

Voraussichtlich im Q4 2026 führen wir eine genauere Bedürfnisklärung zur Migrationsunterstützung durch. Bei breitem Bedürfnis bauen wir im Q1 2027 Tools, die bei einer Migration helfen oder gewisse Aufgaben automatisieren.

Wie lange läuft die alte Angular Library noch?

Die alte Angular Library wird noch bis zum 31. Dezember 2028 gewartet. Danach bleibt die Library zwar verfügbar, die Wartung wird aber eingestellt. Sofern dein Produkt oder deine Plattform einen längeren Lifecycle hat, ist eine Migration empfohlen.

Kann ich die alte Angular Library mit Lyne gleichzeitg nutzen?

Nein. Die Libraries sind nicht kompatibel und stören sich gegenseitig.

Du bist unsicher, wann oder ob du migrieren willst? Der UX Service berät dich gerne.

5 Gründe für Lyne.

Konsistenz.
Interaktionen, Look-and-Feel, Design und Patterns sehen überall gleich aus. Das verringert den Lernaufwand für Kundinnen, Kunden und Mitarbeitende.
Effiziente Zusammenarbeit.
Gemeinsame Standards beschleunigen die Entwicklung und erleichtern das Zusammenspiel von UX, PO, Business und Entwicklung. Wiederkehrende Design- und Umsetzungsfragen sind bereits gelöst und Teams sind von Anfang an besser abgestimmt.
Barrierefreiheit.
Alle Komponenten erfüllen die aktuellen Barrierefreiheits-Standards nach WCAG 2.2.
Flexible Komponenten.
Komponenten sind in mehreren Grössen verfügbar und lassen sich an unterschiedliche Nutzungsszenarien anpassen. Das erlaubt auch komplexe User Interfaces für Experten-Anwendungen.
Technologieunabhängigkeit.
Lyne lässt sich mit Angular, React und anderen Frontend-Stacks – oder ganz ohne Framework – nutzen.

Wie entwickelt sich Lyne weiter?

Roadmap.

Übersicht

Milestones

Releases

GitHub

Technologie.

Lyne basiert auf modernen Webstandards und ist damit langfristig nutzbar.

Finanzierung.

Die Finanzierung des Design Systems ist langfristig gesichert.

Zusammenarbeit und Contribution.

Anforderungen an Komponenten

Neue Anforderungen einbringen.

Dein Team braucht eine neue Komponente? Finde heraus, ob diese zu Lyne passt.

Kriterien prüfen

Contributen

Lyne ist Open Source.

Teams können Verbesserungen vorschlagen, Bugs melden und Code beitragen.

Auf Github beitragen

Contributions entdecken

Experimental Components.

Beiträge aus anderen Projekten und Teams können ebenfalls genutzt werden.

Components entdecken

Beratung und Unterstützung.

Beratung anfragen

Beratung zu Design und User Experience.

Der UX Service hilft gerne bei Fragen rund um Design und User Experience.

Beratung anfragen

Frage im Teams-Kanal stellen

Beratung zur Entwicklung.

Fragen rund um die Entwicklung können in unserem Teams-Kanal gestellt werden.

Teams-Kanal beitreten

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