# digital.sbb.ch – SBB Design Systems

> Official guidelines of SBB (Swiss Federal Railways) for digital products. SBB has several design systems: Lyne for the web, the mobile design system for native apps and the legacy Angular library Lean. Principles, foundations, accessibility and writing rules apply to all of them.

This file was generated on 2026-11-06T16:28:25.138Z and is rebuilt daily; if your copy is clearly older, it comes from a cache (yours or your fetch tool's), not from this server.

## Choose the design system first

Read the file for your platform before writing code. Check the project to decide:

- [Lyne (web)](https://digital.sbb.ch/design-system/lyne/llms.txt): Websites and web applications, web components `@sbb-esta/lyne-elements` and the Angular wrapper `@sbb-esta/lyne-angular`. Use it if `package.json` contains one of these packages, or for any new web project.
- [Mobile (native apps)](https://digital.sbb.ch/design-system/mobile/llms.txt): iOS, Android and Flutter apps. Use it if the project contains `pubspec.yaml` (Flutter), an `.xcodeproj` or `Package.swift` (SwiftUI) or `build.gradle.kts` with Jetpack Compose (Android).
- [Lean (legacy)](https://digital.sbb.ch/design-system/lean/llms.txt): Only for existing applications that depend on `@sbb-esta/angular`. Not for new projects.
- [Maps](https://digital.sbb.ch/design-system/maps/llms.txt): A separate design system for map experiences, with its own guidance and components. Its implementation documentation is linked from the Maps index.

Do not mix design systems: Lyne components do not exist in native apps, and Lean components are not Lyne components even though both use the prefix `sbb-`.

## Markdown versions

- Markdown versions (`index.md`) are currently generated only for English and German pages. The lists below link to the English versions; the corresponding German versions use the same paths with `/de/` instead of `/en/`.
- Pages that only redirect (e.g. `/en/foundation/`, `/en/foundation/colors/`) have no Markdown version; use the sub pages listed below (e.g. `/en/foundation/colors/base-colors/index.md`).
- Servers answer `Accept: text/markdown` on a page URL (ending with `/`) with the Markdown version if one exists (`Vary: Accept`).
- [UI icon names](https://digital.sbb.ch/icons-ui.json): All valid SBB UI icon names with sizes, category and keywords.

## Principles (all design systems)

- [Appropriate](https://digital.sbb.ch/en/principles/ux-principles/appropriate/index.md): We shape work so that it suits people’s abilities and enables them to make the most of their potential.
- [Holistic](https://digital.sbb.ch/en/principles/ux-principles/holistic/index.md): Considers the entire user journey, including upstream and downstream processes and other applications, when designing a solution.
- [Inclusive](https://digital.sbb.ch/en/principles/ux-principles/inclusive/index.md): Accounts for permanent and temporary impairments so that as many people as possible can use the solution in different situations.
- [Our design principles](https://digital.sbb.ch/en/principles/ux-principles/overview/index.md): This overview introduces the SBB design principles and explains how teams can apply them when designing customer- and employee-centred products and services.
- [Recognisable](https://digital.sbb.ch/en/principles/ux-principles/recognisable/index.md): Uses consistent interaction patterns and design elements across SBB digital channels so users can find their way and access information quickly.
- [Reduced](https://digital.sbb.ch/en/principles/ux-principles/reduced/index.md): Shows only the information and functions needed for a task, keeping use simple and preventing cognitive overload.
- [Self-explanatory](https://digital.sbb.ch/en/principles/ux-principles/self-explanatory/index.md): Guides users through the process with familiar terminology and supports them with input errors and personal adjustments.
- [Task-oriented](https://digital.sbb.ch/en/principles/ux-principles/task-oriented/index.md): Based on the task we are working on, we model the interplay of people, technology and the organisation in a meaningful way.
- [User-centred](https://digital.sbb.ch/en/principles/ux-principles/user-centred/index.md): Involves real users early and regularly in product development to understand their needs and identify problems early.

## Foundation (all design systems)

- [Timetable icons](https://digital.sbb.ch/en/foundation/assets/fpl/index.md): Lists the official SBB timetable icons with usage guidance, permitted modifications, and download links.
- [Icons](https://digital.sbb.ch/en/foundation/assets/icons/index.md): Describes the SBB icon style and its use, including implementation links and project-specific icons.
- [Pictograms](https://digital.sbb.ch/en/foundation/assets/pictos/index.md): Lists SBB public transport pictograms for timetables and digital wayfinding, with guidance on permitted use.
- [Rights of use](https://digital.sbb.ch/en/foundation/brand/copyrights/index.md): Explains usage rights and restrictions for SBB icons, public transport pictograms, timetable icons, the SBB clock and logo, including when approval is required.
- [Logo](https://digital.sbb.ch/en/foundation/brand/logo/index.md): Explains SBB umbrella branding and use of the logo and emblem, including the conditions for using the standalone emblem.
- [Digital clock](https://digital.sbb.ch/en/foundation/brand/watch/index.md): Describes when and how to use the digital SBB clock, including eligibility, sizing and placement rules.
- [Additional colors](https://digital.sbb.ch/en/foundation/colors/additional-colors/index.md): Lists the available additional colours and explains the exceptional cases in which they may be used, subject to prior approval from Communications.
- [Base colors](https://digital.sbb.ch/en/foundation/colors/base-colors/index.md): Lists SBB base colours with HEX and RGB values, explains their restrained use and gives recommended colour ratios.
- [Off brand colors](https://digital.sbb.ch/en/foundation/colors/off-brand-colors/index.md): Explains when SBB red may exceptionally be replaced with alternative primary colours, lists the available colours and links to implementation guidance.
- [About UX Writing](https://digital.sbb.ch/en/foundation/language/about/index.md): Provides guidance for clear, consistent and accessible UX writing, covering tone of voice, microcopy and word choice.
- [Button and link texts](https://digital.sbb.ch/en/foundation/language/button-and-links/index.md): Provides rules and examples for short, action-oriented button labels and clear, descriptive links.
- [Forms and inputs](https://digital.sbb.ch/en/foundation/language/forms/index.md): Provides rules and examples for clear form labels and helpful placeholders, and explains why placeholders do not replace labels.
- [Notifications](https://digital.sbb.ch/en/foundation/language/notifications/index.md): Provides guidance and examples for success, error and warning messages, including notifications, toasts, dialogs and form errors.
- [Progress indicators](https://digital.sbb.ch/en/foundation/language/progress-indicator/index.md): Explains how progress indicators guide users with clear step labels, an explicit final action and information about later changes.
- [Digital word list](https://digital.sbb.ch/en/foundation/language/wordlist/index.md): Provides context-specific term recommendations and alternatives, while clarifying that the suggestions are not binding.

## Accessibility (all design systems)

- [About accessibility](https://digital.sbb.ch/en/accessibility/introduction/about-accessibility/index.md): Explains why accessibility matters to everyone, states SBB's WCAG 2.2 AA standard and lists helpful measures for different impairments.
- [About this guide](https://digital.sbb.ch/en/accessibility/introduction/about-this-guide/index.md): Introduces digital accessibility for product teams and groups foundational recommendations by team role.
- [Contact](https://digital.sbb.ch/en/accessibility/introduction/contact/index.md): Lists contacts for digital accessibility questions and support, organised by division and topic.
- [Further information](https://digital.sbb.ch/en/accessibility/introduction/further-information/index.md): Collects further digital accessibility resources, including developer guides, WCAG, certification checklists and review materials.
- [Content Design](https://digital.sbb.ch/en/accessibility/roles/content-design/index.md): Provides four recommendations for accessible content design: prioritise content, use clear language, write alternative text and use descriptive links.
- [Development](https://digital.sbb.ch/en/accessibility/roles/development/index.md): Provides four recommendations for accessible development: semantic and native elements, a meaningful reading order, and navigation aids such as skip links and landmarks.
- [Interaction Design](https://digital.sbb.ch/en/accessibility/roles/interaction-design/index.md): Provides four recommendations for accessible interactions: keyboard access, clear input guidance, cues beyond colour and accessible alternatives.
- [Product Owner](https://digital.sbb.ch/en/accessibility/roles/product-owner/index.md): Provides four recommendations for product owners: educate the team, include accessibility in stories and prioritisation, and plan reviews early.
- [Testing](https://digital.sbb.ch/en/accessibility/roles/testing/index.md): Provides four practical recommendations for testing digital accessibility with tools, keyboard and screen reader, and for checking content structure.
- [User Research](https://digital.sbb.ch/en/accessibility/roles/user-research/index.md): Provides four recommendations for accessible user research: understand needs, involve people with disabilities, consider usage contexts and make personas inclusive.
- [Visual Design](https://digital.sbb.ch/en/accessibility/roles/visual-design/index.md): Provides four recommendations for accessible visual design: clear structure and 200% zoom, sufficient contrast and target sizes, and visible keyboard focus.

## AI design (all design systems)

- [AI Design: Basics](https://digital.sbb.ch/en/guidelines/guides/ai-design-guide/index.md): Explains how AI fits into products, the challenges and risks it creates for users, and when augmentation is preferable to automation.

## Pattern library (UX patterns for AI features)

- [Overview](https://digital.sbb.ch/en/design-system/patternlibrary/overview/index.md): Lists conceptual UX patterns for AI features and explains when to use them; these patterns are design guidance, not Lyne components.
- [Actions for AI output](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/action-on-output/index.md): Offers relevant follow-up actions for an AI output, such as copying or regenerating it.
- [AI work indicator](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/ai-work-indicator/index.md): Keeps users informed during longer AI generation or search tasks and can offer a stop action.
- [Author](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/author/index.md): Indicates whether a text was written by AI or a person, for example in chats and chatbots.
- [Autofill](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/autofill/index.md): Explains how to apply AI actions or prompts to multiple cells or objects, with guidance on previews and protecting existing entries.
- [Data privacy](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/data-privacy/index.md): Explains how users' data will be used and lets them decide whether to allow it and change that decision later.
- [Filter](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/filter/index.md): Helps users narrow AI inputs such as sources or outputs such as format.
- [History](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/history/index.md): Stores search queries and preferences in AI chats as an interactive history that users can revisit or delete.
- [Inline action](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/inline-action/index.md): Lets users edit selected parts of an AI output or use them as context for a new prompt.
- [Limitation](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/limitation/index.md): Explains how to tell users when AI lacks relevant data or cannot answer, and guide them toward a useful next question.
- [Open input](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/open-input/index.md): Allows flexible free-form AI requests and recommends examples to keep the open input from overwhelming users.
- [Parameter](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/parameter/index.md): Lets users set parameters such as tone, style, references or image format for an AI output.
- [Primary reference](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/primary-reference/index.md): Lets users attach specific files or links as references for an AI request.
- [Prompt quality](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/prompt-quality/index.md): Provides live feedback on prompt quality, helping users, especially beginners, improve their prompts.
- [Questions to the user](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/questions-to-the-user/index.md): Asks follow-up questions or offers ready-made answer options when an AI request is unclear.
- [Reliability](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/reliability/index.md): Shows how confident the AI is in an answer, especially in high-risk contexts or when decisions depend on it.
- [Sources](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/sources/index.md): Shows and links the sources behind an AI output so users can trace and verify its claims.
- [Suggestions](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/suggestions/index.md): Shows contextual suggestions that help users get started with AI features or choose a relevant follow-up question.
- [Summary](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/summary/index.md): Summarises lengthy AI outputs automatically or on request.
- [System steps](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/system-steps/index.md): Shows how AI interprets a prompt and the steps it takes to produce an output, helping users understand and influence the process.
- [Templates](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/templates/index.md): Simplifies complex AI input with predefined or user-created prompt templates.
- [User feedback](https://digital.sbb.ch/en/design-system/patternlibrary/patterns/user-feedback/index.md): Lets users give direct feedback on AI outputs and explains how that feedback will be used.

## Getting started

- [Coding](https://digital.sbb.ch/en/design-system/getting-started/coding/index.md): Links to development documentation and code repositories for Lyne and the Mobile Design System.
- [Designing](https://digital.sbb.ch/en/design-system/getting-started/designing/index.md): Explains how to choose the right design system and access the required Figma libraries and design resources.
- [FAQ](https://digital.sbb.ch/en/design-system/getting-started/faq/index.md): Answers common questions about Figma access, icons, design tokens, Lyne and Mobile, as well as contributions, bugs and the roadmap.
- [Help](https://digital.sbb.ch/en/design-system/getting-started/help/index.md): Shows where to check for existing answers and where to direct technical or general questions about the SBB design system.
- [What is a design system?](https://digital.sbb.ch/en/design-system/getting-started/intro/index.md): Explains the purpose and benefits of the SBB design system, who develops it, and how teams can use components or contribute to its development.
- [Skills](https://digital.sbb.ch/en/design-system/getting-started/skills/index.md): Announces the skills of the UX toolkit. Skills extend GitHub Copilot with Lyne, the SBB icons and Figma, and the toolkit bundles them. SBB employees use them to build realistic Lyne prototypes. For SBB employees only (SBB network or VPN required).

## Organisation

- [Contact](https://digital.sbb.ch/en/design-system/organisation/contacts/index.md): Lists the Lyne and Mobile contacts for product ownership, UX and development, and directs questions to the contribution boards.
- [Contribution](https://digital.sbb.ch/en/design-system/organisation/contributing/index.md): Explains how to contribute to Lyne and Mobile, links to the contribution boards and lists criteria for adding components and design tokens.
- [Process](https://digital.sbb.ch/en/design-system/organisation/process/index.md): Explains how Lyne and Mobile work in Kanban, links to their boards and describes how bugs, contributions and feature requests are handled.

## Optional

- [Sitemap](https://digital.sbb.ch/sitemap.xml): All pages of digital.sbb.ch
- [digital.sbb.ch on GitHub](https://github.com/sbb-design-systems/digital.sbb.ch): Source of this website
- [Full documentation (English)](https://digital.sbb.ch/llms-full.txt): All available English Markdown documentation pages from digital.sbb.ch in one file, including Lyne component API pages