Overview – digital.sbb.ch

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

Design Tokens

Components

Overview

Base

Informationen

Sense & Purpose

Community Assets

Instructions

Power-Apps

Digital banner ads

SAP Design Guidelines

App Icons

Lyne

The Lyne design system describes the specifications for websites and consists of this UX documentation and the WebComponent Library. Lyne is currently under construction and will one day replace Web (Legacy). Until the official release of version 1.0, the library will not be used productively. The documentation will be supplemented continuously.

Colors

Icons

Pictograms

Design Tokens

Components

Layout Helpers

SBB Icons on Github

Design Tokens on Github

Components on Github

Storybook

Bug Report

Request for contributing

Feature request

Question

Basics

Animation

Animation

Border

Border

Grid

Grid

Spacings

Spacings

Typography

Typography

Components

Action-Group

Action-Group

Alert

Alert

Alert-Group

Alert-Group

Autocomplete

Autocomplete

Button

Calendar

Card

Card

Card-Badge

Checkbox

Checkbox

Checkbox-Group

Checkbox-Group

Chip

Chip

Clock

Datepicker

Datepicker

Dialog

Dialog

Divider

Divider

Footer

Footer

Form-Error

Form-Error

Form-Field

Form-Field

Header

Header

Header-Action

Header-Action

Icon

Image

Journey-Header

Journey-Header

Link

Link

Link-List

Link-List

Logo

Menu

Menu-Action

Radio-Button

Radio-Button-Group

Radio-Button-Group

Selection-Panel

Selection-Panel

Signet

Signet

Slider

Slider

Tab-Group

Tab-Group

Tab Title

Tab Title

Tag

Tag

Tag-Group

Tag-Group

Teaser

Teaser

Teaser-Hero

Teaser-Hero

Time-Input

Time-Input

Title

Title

Toggle

Toggle

Toggle-Check

Toggle-Check

Tooltip

Tooltip

Tooltip-Trigger

Tooltip-Trigger

Do you have any questions? Maybe our FAQ or our help will be helpful, otherwise you can post your question on the corresponding board on Github.

Imprint

Contact

Cookie settings