Zur Navigation Zum Inhalt Kontakt Menu
Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Übersicht Basis Informationen Übersicht Basis Komponenten Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons Lyne

v2.7.0

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. Die Dokumentation wird fortlaufend verbessert.

ColorsIconsPiktogrammeComponentsAnnotations 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
  • 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
Kontakt

Haben Sie Fragen? Evtl. Hilft unser FAQ oder unsere Hilfe weiter, ansonten können Sie Ihre Frage gerne im entsprechenden Board auf Github platzieren.

Impressum Kontakt Datenschutz Cookie Einstellungen