Urban Sharing Design
Charts
ColorsTheme colorsPaletteLight paletteDark paletteNeutralAccentRaw
Components
Getting startedIconsTechnical setupTypography

Colors

A set of colors used across our designs to ensure consistency.

Theme colors

The dark version is used for hover colors. Accessible from designTokens.theme.{color}. In react-ui-kit each active theme's primary color can be accessed from theme.colors.primary.

  • Reinrot
  • red01
  • RAL 3028
#E42C00
#b12200
  • Verkehrsorange
  • orange01
  • RAL 2009
#D93E01
#a72f00
  • BikeMi Milan
  • bikeMi
  • RAL ???
#FFC72C
#f8b600
  • Green machine
  • greenMachine
  • RAL ???
#55efc4
#25ecb5
  • Gelbgrün
  • green01
  • RAL 6018
#4C9107
#336104
  • Reingrün
  • green02
  • RAL 6037
#008A34
#005721
  • Wasserblau
  • green03
  • RAL 5021
#018580
#01524f
  • Himmelblau
  • blue01
  • RAL 5015
#0074E6
#005ab3
  • Verkehrsblau
  • blue02
  • RAL 5017
#005FC9
#004796
  • Ultramarine blau
  • purple01
  • RAL 5002
#3A05B7
#2a0386
  • Signalviolett
  • purple02
  • RAL 4008
#BA1ABD
#8f1391
  • Telemagenta
  • pink01
  • RAL 4010
#CA007D
#97005d
  • Himberrod
  • red02
  • RAL 3027
#E02344
#b71934
  • Just Eat Cycles
  • edinburghCityBike
  • RAL ???
#EB0027
#b8001f

Palette

These colors are accessible as designTokens.palette.{color}, or as theme.colors.palette.{color} in react-ui-kit.

red01
#f6bfb2
orange01
#f3c5b2
green01
#c9deb4
green02
#b2dbc2
green03
#b2dad8
blue01
#b2d5f7
blue02
#b2cfee
purple01
#c3b4e9
purple02
#eabaeb
pink01
#efb2d8
red02
#f5bdc6
edinburghCityBike
#f9b2be
bikeMi
#ffeebf
greenMachine
#ccfaed

Light palette

These colors are accessible as designTokens.paletteLight.{color}, or as theme.colors.paletteLight.{color} in react-ui-kit.

red01
#ff5f39
orange01
#fe6c33
green01
#81d132
green02
#2dcc68
green03
#2ec8c3
blue01
#3a9dff
blue02
#318ef4
purple01
#6a34e8
purple02
#e744ea
pink01
#f431ab
red02
#ff4f6e
edinburghCityBike
#ff3e5e
bikeMi
#ffd76b
greenMachine
#7cffda

Dark palette

These colors are accessible as designTokens.paletteDark.{color}, or as theme.colors.paletteDark.{color} in react-ui-kit.

red01
#7e1800
orange01
#732101
green01
#193002
green02
#00240e
green03
#00201f
blue01
#004180
blue02
#002f63
purple01
#1b0254
purple02
#620e63
pink01
#64003e
red02
#8a1328
edinburghCityBike
#850016
bikeMi
#c59100
greenMachine
#13cb98

Neutral

These colors are accessible as designTokens.neutral.{color}, or as theme.colors.neutral[{key}] in react-ui-kit.

white
#ffffff
dark01
#0B163F
gray01
#F5F8F9
gray02
#E3E6EB
gray02b
#EFF1F4
gray03
#D2D4DD
gray04
#C1C2CF
gray05
#72718E

Accent

These colors are accessible as designTokens.accent.{color}, or as theme.colors.accent.{color}. in react-ui-kit.

Accent
aubergine
#75647B
green
#6E9D88
purple
#556889
blue
#4B7A8A

Raw