Vers la navigation Vers le contenu Contact
Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles Deutsch English Was ist Lyne? Was ist Lyne?
Ich bin Product-Owner Entwickler:innen UX-Architekt:innen Folgt später 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. alt-Text 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. alt-Text 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. alt-Text 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. alt-Text 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 ich 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.
  1. Konsistenz.

    Interaktionen, Look-and-Feel, Design und Patterns sehen überall gleich aus. Das verringert den Lernaufwand für Kundinnen, Kunden und Mitarbeitende.

  2. 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.

  3. Barrierefreiheit.

    Alle Komponenten erfüllen die aktuellen Barrierefreiheits-Standards nach WCAG 2.2.

  4. 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.

  5. 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

Roadmap als Liste

Lyne Elements

Lyne Angular

Betrieb & Support
Contact.

Vous avez des questions ? Vous trouverez peut-être une réponse dans notre FAQ ou notre aide, sinon vous pouvez poser votre question sur le board correspondant sur Github.

Impressum Contact Protection des données Paramètres des cookies