Lyne v1.11.3
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.X 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.
ColorsIconsPiktogrammeDesign TokensComponentsAnnotations Getting started guideSBB IconsDesign TokensComponentsStorybook Bug ReportRequest for contributingFeature requestQuestion
- Design Tokens
- Animation
Animation
- Border
Border
- Breakpoint
Breakpoint
- Color
Color
- Layout
Layout
- Shadow
Shadow
- Size
Size
- Spacing
Spacing
- Typografie
Typografie
- Action
- More Info
Action-Group Figma Code Business-Context
- More Info
Block-Link Figma Code Business-Context
- More Info
Button Figma Code Business-Context
- More Info
Link Figma Code Business-Context
- More Info
Mini-Button-Group Figma Code Business-Context
- More Info
Secondary-Button Figma Code Business-Context
- More Info
- More Info
- More Info
Teaser-Product Figma Code
- More Info
Teaser-Product-Static Figma Code
- More Info
Tertiary-Button Figma Code Business-Context
- More Info
Transparent-Button Figma Code Business-Context
- Brand
- More Info
- More Info
- Collection
- More Info
Link-List Figma Code Business-Context
- More Info
Link-List-Anchor Figma Code Business-Context
- More Info
- More Info
- Form
- More Info
Autocomplete Figma Code Business-Context
- More Info
Autocomplete-Grid Figma Code Business-Context
- More Info
- More Info
Checkbox Figma Code Business-Context
- More Info
Checkbox-Group Figma Code Business-Context
- More Info
Checkbox-Panel Figma Code Business-Context
- More Info
Datepicker Figma Code Business-Context
- More Info
File-Selector Figma Code Business-Context
- More Info
Form-Field Figma Code Business-Context
- More Info
Radio-Button Figma Code Business-Context
- More Info
Radio-Button-Group Figma Code Business-Context
- More Info
Radio-Button-Panel Figma Code Business-Context
- More Info
Select Figma Code Business-Context
- More Info
Selection-Expansion-Panel Figma Code Business-Context
- More Info
Slider Figma Code Business-Context
- More Info
Toggle Figma Code Business-Context
- More Info
Toggle-Check Figma Code Business-Context
- Indicator
- More Info
Alert Figma Code Business-Context
- More Info
Alert-Group Figma Code Business-Context
- More Info
Chip Figma Code Business-Context
- More Info
Loading-Indicator Figma Code
- More Info
Message Figma Code Business-Context
- More Info
Notification Figma Code Business-Context
- More Info
- More Info
Stepper Figma Code Documentation Business-Context
- More Info
Tag-Group Figma Code Business-Context
- More Info
- Layout
- More Info
Accordion Figma Code Business-Context
- More Info
Card Figma Code Business-Context
- More Info
- More Info
- More Info
Footer Figma Code Business-Context
- More Info
Header Figma Code Business-Context
- More Info
- Navigation
- More Info
- More Info
Breadcrumb-Group Figma Code
- More Info
Menu Figma Code Business-Context
- More Info
- More Info
Tab-Group Figma Code Business-Context
- Overlay
- More Info
- More Info
- More Info
- Time-Table
- More Info
Journey-Header Figma Code
- More Info
Pearl-Chain Figma Code Documentation
- Visual asset
- More Info
- More Info