Lyne v1.10.0
The Lyne design system describes the specifications for websites as well as for customer and business applications. It consists of this documentation, a Figma library and a WebComponent library. Lyne version 1.0 can be used for all SBB customer applications. With version 2.0 (release winter 2024), Lyne will also be optimised for business applications. The documentation is continuously improved.
ColorsIconsPictogramsDesign TokensComponentsAnnotations Getting started guideIconsDesign TokensComponentsStorybook Bug ReportRequest for contributingFeature requestQuestion
- Design Tokens
- Animation
Animation
- Border
Border
- Breakpoint
Breakpoint
- Color
Color
- Layout
Layout
- Shadow
Shadow
- Size
Size
- Spacings
Spacings
- Typography
Typography
- 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