Lyne

Das Design System Lyne beschreibt die Vorgaben für Webseiten, sowie für Kunden- und Business-Anwendungen. Es besteht aus dieser Dokumentation, einer Figma- und einer WebComponent-Library. Lyne ist mit Version 1.0 für alle Kunden-Anwendungen der SBB einsetzbar. Mit Version 2.0 (Release Winter 2024) wird Lyne auch für Business-Anwendungen optimiert. Die Dokumentation wird fortlaufend verbessert.

Colors

Icons

Piktogramme

Design Tokens

Components

Annotations

Getting started guide

SBB Icons

Design Tokens

Components

Storybook

Bug Report

Request for contributing

Feature request

Question

Suchbegriff eingeben

Design Tokens
Animation
Border
Breakpoint
Color
Layout
Shadow
Size
Spacing
Typografie
Components
Accordion
- Accordion
- Expansion-Panel
Action-Group
Alert
- Alert
- Alert-Group
Autocomplete
- Autocomplete
Breadcrumb
- Breadcrumb
- Breadcrumb-Group
Button
- Primary-Button
- Secondary-Button
- Tertiary-Button
- Transparent-Button
- Mini-Button
Card
- Card
- Card-Badge
Checkbox
- Checkbox
- Checkbox-Panel
- Checkbox-Group
Chip
Clock
Container
- Container
- Sticky-Bar
Datepicker
- Datepicker
- Calendar
Dialog
- Dialog
- Dialog-Title
- Dialog-Content
- Dialog-Actions
Divider
File-Selector
Footer
Form-Field
- Form-Field
- Form-Error
Header
- Header
- Header-Button
- Header-Link
Icon
Image
Journey-Header
Link
- Block-Link
- Link
Link-List
Loading-Indicator
Logo
Menu
- Menu
- Menu-Button
- Menu-Link
Message
Navigation
- Navigation
- Navigation-Button
- Navigation-Link
Notification
Overlay
Popover
- Popover
- Popover-Trigger
Radio-Button
- Radio-Button
- Radio-Button-Panel
- Radio-Button-Group
Select
Selection-Expansion-Panel
Skiplink-List
Slider
Status
Tab
- Tab-Group
- Tab-Label
- Tab
Table-Wrapper
Tag
- Tag
- Tag-Group
Teaser
- Teaser
- Teaser-Hero
- Teaser-Paid
Time-Input
Title
Toast
Toggle
- Toggle
- Toggle-Check