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 Releases Design Tokens Components Overview Base Informationen Overview Base Components Sense & Purpose Community Assets Instructions App Icons Power-Apps Digital banner ads SAP Design Guidelines Lyne

v2.7.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. The documentation is continuously improved.

ColorsIconsPictogramsComponentsAnnotations 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
  • More Info
    Block-Link
    Figma Code
  • More Info
    Button
    Figma Code
  • More Info
    Link
    Figma Code
  • More Info
    Mini-Button-Group
    Figma Code
  • More Info
    Secondary-Button
    Figma Code
  • More Info
    Teaser
    Figma Code
  • More Info
    Teaser-Hero
    Figma Code
  • More Info
    Teaser-Product
    Figma Code
  • More Info
    Teaser-Product-Static
    Figma Code
  • More Info
    Accent-Button
    Figma Code
  • More Info
    Transparent-Button
    Figma Code
  • Brand
  • More Info
    Clock
    Figma Code
  • More Info
    Logo
    Figma Code
  • Collection
  • More Info
    Link-List
    Figma Code
  • More Info
    Link-List-Anchor
    Figma Code
  • More Info
    Paginator
    Figma Code
  • More Info
    Compact-Paginator
    Figma Code
  • More Info
    Skiplink-List
    Figma Code
  • More Info
    Table-Wrapper
    Figma Code
  • Form
  • More Info
    Autocomplete
    Figma Code
  • More Info
    Autocomplete-Grid
    Figma Code
  • More Info
    Calendar
    Figma Code
  • More Info
    Checkbox
    Figma Code
  • More Info
    Checkbox-Group
    Figma Code
  • More Info
    Checkbox-Panel
    Figma Code
  • More Info
    Chip
    Figma Code
  • More Info
    Datepicker
    Figma Code
  • More Info
    File-Selector-Dropzone
    Figma Code
  • More Info
    File-Selector
    Figma Code
  • More Info
    Form-Field
    Figma Code
  • More Info
    Radio-Button
    Figma Code
  • More Info
    Radio-Button-Group
    Figma Code
  • More Info
    Radio-Button-Panel
    Figma Code
  • More Info
    Select
    Figma Code
  • More Info
    Selection-Expansion-Panel
    Figma Code
  • More Info
    Slider
    Figma Code
  • More Info
    Toggle
    Figma Code
  • More Info
    Toggle-Check
    Figma Code
  • Indicator
  • More Info
    Alert
    Figma Code
  • More Info
    Alert-Group
    Figma Code
  • More Info
    Chip-Label
    Figma Code
  • More Info
    Loading-Indicator
    Figma Code
  • More Info
    Loading-Indicator-Circle
    Figma Code
  • More Info
    Message
    Figma Code
  • More Info
    Notification
    Figma Code
  • More Info
    Status
    Figma Code
  • More Info
    Stepper
    Figma Code
  • More Info
    Tag-Group
    Figma Code
  • More Info
    Toast
    Figma Code
  • Layout
  • More Info
    Accordion
    Figma Code
  • More Info
    Card
    Figma Code
  • More Info
    Container
    Figma Code
  • More Info
    Divider
    Figma Code
  • More Info
    Footer
    Figma Code
  • More Info
    Header
    Figma Code
  • More Info
    Map-Container
    Figma Code Documentation
  • More Info
    Title
    Figma Code
  • Navigation
  • More Info
    Breadcrumb
    Figma Code
  • More Info
    Breadcrumb-Group
    Figma Code
  • More Info
    Menu
    Figma Code
  • More Info
    Navigation
    Figma Code
  • More Info
    Sidebar
    Figma Code
  • More Info
    Icon-Sidebar
    Figma Code
  • More Info
    Tab-Group
    Figma Code
  • Overlay
  • More Info
    Dialog
    Figma Code
  • More Info
    Overlay
    Figma Code
  • More Info
    Popover
    Figma Code
  • Time-Table
  • More Info
    Journey-Header
    Figma Code
  • Visual asset
  • More Info
    Icon
    Figma Code
  • More Info
    Image
    Figma Code
Contact

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 Data privacy Cookie settings