Zur Navigation Zum Inhalt Kontakt Menu Trouver un composant Aperçu Lyne Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs fonctionnelles Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Overview Releases Design Tokens Composants Roadmap Aperçu Base Informations Aperçu Base Composants Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles Deutsch English Color

sbb-color-black

#000000

sbb-color-black-alpha-0

rgba(0, 0, 0, 0)

sbb-color-black-alpha-10

rgba(0, 0, 0, 0.1)

sbb-color-black-alpha-15

rgba(0, 0, 0, 0.15)

sbb-color-black-alpha-20

rgba(0, 0, 0, 0.2)

sbb-color-black-alpha-30

rgba(0, 0, 0, 0.3)

sbb-color-black-alpha-40

rgba(0, 0, 0, 0.4)

sbb-color-black-alpha-50

rgba(0, 0, 0, 0.5)

sbb-color-black-alpha-60

rgba(0, 0, 0, 0.6)

sbb-color-black-alpha-70

rgba(0, 0, 0, 0.7)

sbb-color-midnight

#151515

sbb-color-charcoal

#212121

sbb-color-iron

#444444

sbb-color-anthracite

#5a5a5a

sbb-color-granite

#686868

sbb-color-metal

#767676

sbb-color-metal-alpha-0

rgba(118, 118, 118, 0)

sbb-color-metal-alpha-20

rgba(118, 118, 118, 0.2)

sbb-color-smoke

#8d8d8d

sbb-color-smoke-alpha-0

rgba(141, 141, 141, 0)

sbb-color-smoke-alpha-5

rgba(141, 141, 141, 0.05)

sbb-color-smoke-alpha-10

rgba(141, 141, 141, 0.1)

sbb-color-smoke-alpha-20

rgba(141, 141, 141, 0.2)

sbb-color-storm

#a8a8a8

sbb-color-graphite

#b7b7b7

sbb-color-cement

#bdbdbd

sbb-color-cement-alpha-0

rgba(189, 189, 189, 0)

sbb-color-cement-alpha-20

rgba(189, 189, 189, 0.2)

sbb-color-platinum

#cdcdcd

sbb-color-platinum-alpha-0

rgba(205, 205, 205, 0)

sbb-color-platinum-alpha-20

rgba(205, 205, 205, 0.2)

sbb-color-aluminium

#d2d2d2

sbb-color-silver

#dcdcdc

sbb-color-cloud

#e5e5e5

sbb-color-cloud-alpha-80

rgba(229, 229, 229, 0.8)

sbb-color-milk

#f6f6f6

sbb-color-red

#eb0000

sbb-color-red-alpha-0

rgba(235, 0, 0, 0)

sbb-color-red-alpha-20

rgba(235, 0, 0, 0.2)

sbb-color-red-alpha-90

rgba(235, 0, 0, 0.9)

sbb-color-red-mode-dark

#ff3838

sbb-color-red125

#c60018

sbb-color-red125-alpha-0

rgba(198, 0, 24, 0)

sbb-color-red125-alpha-20

rgba(198, 0, 24, 0.2)

sbb-color-red150

#a20013

sbb-color-white

#ffffff

sbb-color-white-alpha-0

rgba(255, 255, 255, 0)

sbb-color-white-alpha-20

rgba(255, 255, 255, 0.2)

sbb-color-white-alpha-30

rgba(255, 255, 255, 0.3)

sbb-color-white-alpha-50

rgba(255, 255, 255, 0.5)

sbb-color-white-alpha-60

rgba(255, 255, 255, 0.6)

sbb-color-white-alpha-70

rgba(255, 255, 255, 0.7)

sbb-color-sky

#0079c7

sbb-color-night

#143a85

sbb-color-violet

#6f2282

sbb-color-pink

#cf4082

sbb-color-autumn

#e84e10

sbb-color-orange

#f27e00

sbb-color-peach

#fcbb00

sbb-color-lemon

#ffde15

sbb-color-brown

#b76000

sbb-color-green

#008a36

sbb-color-turquoise

#00a59b

Trouver un composant

Lyne

  • Design Tokens
  • Animation
    Animation
  • Border
    Border
  • Breakpoint
    Breakpoint
  • Color
    Color
  • Layout
    Layout
  • Shadow
    Shadow
  • Size
    Size
  • Spacing
    Spacing
  • Typography
    Typography
  • Action
  • More Info
    Action-Group
  • More Info
    Block-Link
  • More Info
    Button
  • More Info
    Link
  • More Info
    Mini-Button-Group
  • More Info
    Secondary-Button
  • More Info
    Teaser
  • More Info
    Teasser-Hero
  • More Info
    Teaser-Product
  • More Info
    Teaser-Product-Static
  • More Info
    Tertiary-Button
  • More Info
    Transparent-Button
  • Brand
  • More Info
    Clock
  • More Info
    Logo
  • Collection
  • More Info
    Link-List
  • More Info
    Link-List-Anchor
  • More Info
    Skiplink-List
  • More Info
    Table-Wrapper
  • Form
  • More Info
    Autocomplete
  • More Info
    Autocomplete-Grid
  • More Info
    Calendar
  • More Info
    Checkbox
  • More Info
    Checkbox-Group
  • More Info
    Checkbox-Panel
  • More Info
    Datepicker
  • More Info
    File-Selector
  • More Info
    Form-Field
  • More Info
    Radio-Button
  • More Info
    Radio-Button-Group
  • More Info
    Radio-Button-Panel
  • More Info
    Select
  • More Info
    Selection-Expansion-Panel
  • More Info
    Slider
  • More Info
    Toggle
  • More Info
    Toggle-Check
  • Indicator
  • More Info
    Alert
  • More Info
    Alert-Group
  • More Info
    Chip
  • More Info
    Loading-Indicator
  • More Info
    Message
  • More Info
    Notification
  • More Info
    Status
  • More Info
    Stepper
  • More Info
    Tag-Group
  • More Info
    Toast
  • Layout
  • More Info
    Accordion
  • More Info
    Card
  • More Info
    Container
  • More Info
    Divider
  • More Info
    Footer
  • More Info
    Header
  • More Info
    Title
  • Navigation
  • More Info
    Breadcrumb
  • More Info
    Breadcrumb-Group
  • More Info
    Menu
  • More Info
    Navigation
  • More Info
    Tab-Group
  • Overlay
  • More Info
    Dialog
  • More Info
    Overlay
  • More Info
    Popover
  • Time-Table
  • More Info
    Journey-Header
  • More Info
    Pearl-Chain
  • Visual asset
  • More Info
    Icon
  • More Info
    Image
Contact

Vous avez des questions ? Vous trouverez peut-être une réponse dans notre FAQ ou notre aide, sinon vous pouvez poser votre question sur le board correspondant sur Github.

Impressum Contact Paramètres des cookies