Zur Navigation Zum Inhalt Kontakt Komponente finden Übersicht Lyne
Deutsch Français Italiano 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-blue

#2d327d

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-royal

#06348b

sbb-color-royal125

#032668

sbb-color-royal150

#021c4e

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

Komponente finden

Lyne

  • 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
  • More Info
    Block-Link
  • More Info
    Button
  • More Info
    Link
  • More Info
    Mini-Button-Group
  • More Info
    Secondary-Button
  • More Info
    Teaser
  • More Info
    Teaser-Hero
  • More Info
    Teaser-Product
  • More Info
    Teaser-Product-Static
  • More Info
    Accent-Button
  • More Info
    Transparent-Button
  • Brand
  • More Info
    Clock
  • More Info
    Logo
  • Collection
  • More Info
    Link-List
  • More Info
    Link-List-Anchor
  • More Info
    Paginator
  • More Info
    Compact-Paginator
  • 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-Dropzone
  • 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-Label
  • More Info
    Loading-Indicator
  • More Info
    Loading-Indicator-Circle
  • 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
    Map-Container
  • 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
  • Visual asset
  • More Info
    Icon
  • More Info
    Image
Impressum Kontakt Datenschutz Cookie Einstellungen