Skip to main contenteBay Playbook

Color tokens

Semantic

Background

TitleValue on lightValue on dark
color.background.primary
color.core.neutral.100
color.core.neutral.900
color.background.secondary
color.core.neutral.200
color.core.neutral.800
color.background.tertiary
color.core.neutral.300
color.core.neutral.700
color.background.accent
color.core.blue.500
color.core.blue.400
color.background.attention
color.core.red.600
color.core.red.400
color.background.success
color.core.kiwi.600
color.core.kiwi.500
color.background.disabled
color.core.neutral.400
color.core.neutral.600
color.background.elevated
color.core.neutral.100
color.core.neutral.800
color.background.secondaryOnElevated
color.core.neutral.200
color.core.neutral.900
color.background.onSecondary
color.core.neutral.100
color.core.neutral.900
color.background.inverse
color.core.neutral.700
color.core.neutral.300
color.background.strong
color.core.neutral.800
color.core.neutral.200
color.background.education
color.core.blue.100
color.core.indigo.800
color.background.onImage
rgba(color.core.neutral.100, 0.90)
rgba(color.core.neutral.900, 0.90)
color.background.transparent
color.core.clear
color.core.clear

Foreground

TitleValue on lightValue on dark
color.foreground.primary
color.core.neutral.800
color.core.neutral.200
color.foreground.secondary
color.core.neutral.600
color.core.neutral.500
color.foreground.disabled
color.core.neutral.400
color.core.neutral.600
color.foreground.accent
color.core.blue.500
color.core.blue.400
color.foreground.attention
color.core.red.600
color.core.red.400
color.foreground.success
color.core.kiwi.600
color.core.kiwi.400
color.foreground.onAccent
color.core.neutral.100
color.core.neutral.800
color.foreground.onAttention
color.core.neutral.100
color.core.neutral.800
color.foreground.onSuccess
color.core.neutral.100
color.core.neutral.800
color.foreground.onInverse
color.core.neutral.100
color.core.neutral.800
color.foreground.onStrong
color.core.neutral.100
color.core.neutral.800
color.foreground.onDisabled
color.core.neutral.100
color.core.neutral.800
color.foreground.link.visited
color.core.pink.600
color.core.pink.400
color.foreground.link.legal
color.core.blue.650
color.core.blue.400
color.foreground.link.primary
color.foreground.primary
color.foreground.primary

Border

TitleValue on lightValue on dark
color.border.strong
color.core.neutral.700
color.core.neutral.100
color.border.medium
color.core.neutral.500
color.core.neutral.600
color.border.subtle
color.core.neutral.300
color.core.neutral.700
color.border.accent
color.core.blue.500
color.core.blue.400
color.border.attention
color.core.red.600
color.core.red.400
color.border.success
color.core.kiwi.600
color.core.kiwi.500
color.border.inverse
color.core.neutral.100
color.core.neutral.900
color.border.onAccent
color.core.neutral.100
color.core.neutral.800
color.border.onAttention
color.core.neutral.100
color.core.neutral.800
color.border.onSuccess
color.core.neutral.100
color.core.neutral.800
color.border.onInverse
color.core.neutral.100
color.core.neutral.800
color.border.onDisabled
color.core.neutral.100
color.core.neutral.800
color.border.disabled
color.core.neutral.400
color.core.neutral.700

State layer

TitleValue on lightValue on dark
color.stateLayer.hover
rgba(color.core.neutral.900, 0.04)
rgba(color.core.neutral.100, 0.08)
color.stateLayer.hoverOnStrong
rgba(color.core.neutral.100, 0.12)
rgba(color.core.neutral.900, 0.08)
color.stateLayer.pressed
rgba(color.core.neutral.900, 0.08)
rgba(color.core.neutral.100, 0.12)
color.stateLayer.pressedOnStrong
rgba(color.core.neutral.100, 0.16)
rgba(color.core.neutral.900, 0.12)
color.stateLayer.selected
rgba(color.core.neutral.900, 0.12)
rgba(color.core.neutral.100, 0.16)
color.stateLayer.selectedOnStrong
rgba(color.core.neutral.100, 0.2)
rgba(color.core.neutral.900, 0.16)
color.stateLayer.focus
rgba(color.core.neutral.900, 0.04)
rgba(color.core.neutral.100, 0.08)
color.stateLayer.focusOnStrong
rgba(color.core.neutral.100, 0.12)
rgba(color.core.neutral.900, 0.08)

Scrim

TitleValue on lightValue on dark
color.scrim.background
rgba(color.core.neutral.900, 0.3)
rgba(color.core.neutral.900, 0.64)

Loading

TitleValue on lightValue on dark
color.loading.fill
#ededed
#2d2d2d
color.loading.fillOnSecondary
#e4e4e4
#353535

AI

TitleValue on lightValue on dark
color.ai.solid.red.strong
#ff4242
#ff4242
color.ai.solid.red.subtle
#FFF4F4
#321919
color.ai.solid.yellow.strong
#FFD80E
#FFD80E
color.ai.solid.purple.strong
#993EE0
#993EE0
color.ai.solid.purple.subtle
#F9F3FD
#20172F
color.ai.solid.blue.strong
#0968F6
#0968F6
color.ai.solid.blue.subtle
#F0F6FE
#112C31
color.ai.solid.green.strong
#4EE04B
#4EE04B
color.ai.solid.green.subtle
#F1FDF1
#112611

Gradient

TitleValue on lightValue on dark
color.gradient.imageScrim
-
-
color.gradient.loading.shimmer
rgba(248, 248, 248, 0) @ 0%
rgba(248, 248, 248, 0.6) @ 25%
rgba(248, 248, 248, 0.85) @ 37%
rgba(248, 248, 248, 0.95) @ 48%
rgba(248, 248, 248, 0.95) @ 51%
rgba(248, 248, 248, 0.85) @ 61%
rgba(248, 248, 248, 0.6) @ 74%
rgba(248, 248, 248, 0) @ 100%
rgba(27, 27, 27, 0) @ 0%
rgba(27, 27, 27, 0.6) @ 25%
rgba(27, 27, 27, 0.85) @ 37%
rgba(27, 27, 27, 0.95) @ 48%
rgba(27, 27, 27, 0.95) @ 51%
rgba(27, 27, 27, 0.85) @ 61%
rgba(27, 27, 27, 0.6) @ 74%
rgba(27, 27, 27, 0) @ 100%
color.gradient.loading.shimmerOnSecondary
rgba(237, 237, 237, 0) @ 0%
rgba(237, 237, 237, 0.6) @ 25%
rgba(237, 237, 237, 0.85) @ 37%
rgba(237, 237, 237, 0.95) @ 48%
rgba(237, 237, 237, 0.95) @ 51%
rgba(237, 237, 237, 0.85) @ 61%
rgba(237, 237, 237, 0.6) @ 74%
rgba(237, 237, 237, 0) @ 100%
rgba(35, 35, 35, 0) @ 0%
rgba(35, 35, 35, 0.6) @ 25%
rgba(35, 35, 35, 0.85) @ 37%
rgba(35, 35, 35, 0.95) @ 48%
rgba(35, 35, 35, 0.95) @ 51%
rgba(35, 35, 35, 0.85) @ 61%
rgba(35, 35, 35, 0.6) @ 74%
rgba(35, 35, 35, 0) @ 100%
color.gradient.ai.fullColorDiagonal
color.ai.solid.green.strong @ 10%
color.ai.solid.blue.strong @ 27%
color.ai.solid.purple.strong @ 42%
color.ai.solid.red.strong @ 56%
color.ai.solid.yellow.strong @ 78%
color.ai.solid.green.strong @ 10%
color.ai.solid.blue.strong @ 27%
color.ai.solid.purple.strong @ 42%
color.ai.solid.red.strong @ 56%
color.ai.solid.yellow.strong @ 78%
color.gradient.ai.green.strong
color.ai.solid.blue.strong @ 0%
color.ai.solid.green.strong @ 100%
color.ai.solid.blue.strong @ 0%
color.ai.solid.green.strong @ 100%
color.gradient.ai.green.subtle
color.ai.solid.blue.subtle @ 0%
color.ai.solid.green.subtle @ 100%
color.ai.solid.blue.subtle @ 0%
color.ai.solid.green.subtle @ 100%
color.gradient.ai.blue.strong
color.ai.solid.purple.strong @ 0%
color.ai.solid.blue.strong @ 50%
color.ai.solid.green.strong @ 100%
color.ai.solid.purple.strong @ 0%
color.ai.solid.blue.strong @ 50%
color.ai.solid.green.strong @ 100%
color.gradient.ai.blue.subtle
color.ai.solid.purple.subtle @ 0%
color.ai.solid.blue.subtle @ 50%
color.ai.solid.green.subtle @ 100%
color.ai.solid.purple.subtle @ 0%
color.ai.solid.blue.subtle @ 50%
color.ai.solid.green.subtle @ 100%
color.gradient.ai.purple.strong
color.ai.solid.red.strong @ 0%
color.ai.solid.purple.strong @ 100%
color.ai.solid.red.strong @ 0%
color.ai.solid.purple.strong @ 100%
color.gradient.ai.purple.subtle
color.ai.solid.red.subtle @ 0%
color.ai.solid.purple.subtle @ 100%
color.ai.solid.red.subtle @ 0%
color.ai.solid.purple.subtle @ 100%

Expressive theme

TitleBackgroundForeground
expressiveTheme.avocado.light
color.core.avocado.400
color.core.avocado.700
expressiveTheme.avocado.medium
color.core.avocado.500
color.core.avocado.700
expressiveTheme.avocado.dark
color.core.avocado.700
color.core.avocado.200
expressiveTheme.blue.light
color.core.blue.400
color.core.blue.800
expressiveTheme.blue.medium
color.core.blue.500
color.core.blue.100
expressiveTheme.blue.dark
color.core.blue.700
color.core.blue.200
expressiveTheme.coral.light
color.core.coral.400
color.core.coral.800
expressiveTheme.coral.medium
color.core.coral.500
color.core.coral.800
expressiveTheme.coral.dark
color.core.coral.700
color.core.coral.200
expressiveTheme.dijon.light
color.core.dijon.400
color.core.dijon.700
expressiveTheme.dijon.medium
color.core.dijon.500
color.core.dijon.700
expressiveTheme.dijon.dark
color.core.dijon.700
color.core.dijon.200
expressiveTheme.green.light
color.core.green.400
color.core.green.700
expressiveTheme.green.medium
color.core.green.500
color.core.green.700
expressiveTheme.green.dark
color.core.green.700
color.core.green.200
expressiveTheme.indigo.light
color.core.indigo.400
color.core.indigo.800
expressiveTheme.indigo.medium
color.core.indigo.500
color.core.indigo.800
expressiveTheme.indigo.dark
color.core.indigo.700
color.core.indigo.200
expressiveTheme.jade.light
color.core.jade.400
color.core.jade.800
expressiveTheme.jade.medium
color.core.jade.500
color.core.jade.800
expressiveTheme.jade.dark
color.core.jade.700
color.core.jade.200
expressiveTheme.kiwi.light
color.core.kiwi.400
color.core.kiwi.800
expressiveTheme.kiwi.medium
color.core.kiwi.500
color.core.kiwi.800
expressiveTheme.kiwi.dark
color.core.kiwi.700
color.core.kiwi.200
expressiveTheme.lilac.light
color.core.lilac.400
color.core.lilac.800
expressiveTheme.lilac.medium
color.core.lilac.500
color.core.lilac.100
expressiveTheme.lilac.dark
color.core.lilac.700
color.core.lilac.200
expressiveTheme.live.light
color.core.violet.600
color.core.violet.100
expressiveTheme.live.medium
color.core.violet.600
color.core.violet.100
expressiveTheme.live.dark
color.core.violet.600
color.core.violet.100
expressiveTheme.marigold.light
color.core.marigold.400
color.core.marigold.700
expressiveTheme.marigold.medium
color.core.marigold.500
color.core.marigold.700
expressiveTheme.marigold.dark
color.core.marigold.700
color.core.marigold.200
expressiveTheme.neutral.light
color.core.neutral.200
color.core.neutral.800
expressiveTheme.neutral.medium
color.core.neutral.200
color.core.neutral.800
expressiveTheme.neutral.dark
color.core.neutral.800
color.core.neutral.100
expressiveTheme.orange.light
color.core.orange.400
color.core.orange.700
expressiveTheme.orange.medium
color.core.orange.500
color.core.orange.800
expressiveTheme.orange.dark
color.core.orange.700
color.core.orange.200
expressiveTheme.pink.light
color.core.pink.400
color.core.pink.800
expressiveTheme.pink.medium
color.core.pink.500
color.core.pink.800
expressiveTheme.pink.dark
color.core.pink.700
color.core.pink.200
expressiveTheme.red.light
color.core.red.400
color.core.red.700
expressiveTheme.red.medium
color.core.red.500
color.core.red.800
expressiveTheme.red.dark
color.core.red.700
color.core.red.200
expressiveTheme.teal.light
color.core.teal.400
color.core.teal.700
expressiveTheme.teal.medium
color.core.teal.500
color.core.teal.700
expressiveTheme.teal.dark
color.core.teal.700
color.core.teal.200
expressiveTheme.violet.light
color.core.violet.400
color.core.violet.800
expressiveTheme.violet.medium
color.core.violet.500
color.core.violet.200
expressiveTheme.violet.dark
color.core.violet.700
color.core.violet.200
expressiveTheme.yellow.light
color.core.yellow.400
color.core.yellow.700
expressiveTheme.yellow.medium
color.core.yellow.500
color.core.yellow.700
expressiveTheme.yellow.dark
color.core.yellow.700
color.core.yellow.200

Core

TitleValue
color.core.avocado.100
#FDFEF6
color.core.avocado.200
#F8FCDE
color.core.avocado.300
#E9F5A0
color.core.avocado.400
#E3F13C
color.core.avocado.500
#C1D737
color.core.avocado.600
#68770D
color.core.avocado.700
#4E4E0C
color.core.avocado.800
#282306
color.core.blue.100
#F5F9FF
color.core.blue.200
#D4E5FE
color.core.blue.300
#84B4FB
color.core.blue.400
#4D93FC
color.core.blue.500
#0968F6
color.core.blue.600
#0049B8
color.core.blue.650
#003AA5
color.core.blue.700
#002A69
color.core.blue.800
#19133A
color.core.coral.100
#FFF7F5
color.core.coral.200
#FFE1D7
color.core.coral.300
#FFA78A
color.core.coral.400
#FF6A38
color.core.coral.500
#F3511B
color.core.coral.600
#D03706
color.core.coral.700
#5E1D08
color.core.coral.800
#2F0E04
color.core.dijon.100
#FFFDF5
color.core.dijon.200
#FCF9DE
color.core.dijon.300
#FAEF8A
color.core.dijon.400
#F6E016
color.core.dijon.500
#E8D20C
color.core.dijon.600
#766F28
color.core.dijon.700
#524500
color.core.dijon.800
#2E2400
color.core.green.100
#FBFEF6
color.core.green.200
#F0FCE1
color.core.green.300
#D5F6AA
color.core.green.400
#AAED56
color.core.green.500
#92C821
color.core.green.600
#507D17
color.core.green.700
#345110
color.core.green.800
#1C2D06
color.core.indigo.100
#F5FBFF
color.core.indigo.200
#D3EFFE
color.core.indigo.300
#80D0FD
color.core.indigo.400
#0AA7FF
color.core.indigo.500
#0099F0
color.core.indigo.600
#0364AB
color.core.indigo.700
#003C66
color.core.indigo.800
#01193D
color.core.jade.100
#F7FDFB
color.core.jade.200
#D8F8EE
color.core.jade.300
#8FEACE
color.core.jade.400
#1ED49E
color.core.jade.500
#17C28F
color.core.jade.600
#0F805E
color.core.jade.700
#055743
color.core.jade.800
#002B20
color.core.kiwi.100
#F6FEF6
color.core.kiwi.200
#E0FAE0
color.core.kiwi.300
#A6F0A5
color.core.kiwi.400
#4CE160
color.core.kiwi.500
#3CC14E
color.core.kiwi.600
#288034
color.core.kiwi.700
#1B561A
color.core.kiwi.800
#0C310D
color.core.lilac.100
#FAF5FE
color.core.lilac.200
#EFDDFD
color.core.lilac.300
#CC9EF0
color.core.lilac.400
#B56BF0
TitleValue
color.core.lilac.500
#8935CB
color.core.lilac.600
#631F99
color.core.lilac.700
#3E135F
color.core.lilac.800
#2F041E
color.core.marigold.100
#FFFBF5
color.core.marigold.200
#FFF0D3
color.core.marigold.300
#FFD480
color.core.marigold.400
#FFA800
color.core.marigold.500
#E99A02
color.core.marigold.600
#A36302
color.core.marigold.700
#562F01
color.core.marigold.800
#2F1B04
color.core.neutral.100
#FFFFFF
color.core.neutral.200
#F7F7F7
color.core.neutral.300
#E5E5E5
color.core.neutral.400
#C7C7C7
color.core.neutral.500
#8F8F8F
color.core.neutral.600
#707070
color.core.neutral.700
#363636
color.core.neutral.800
#191919
color.core.neutral.900
#000000
color.core.orange.100
#FFFAF5
color.core.orange.200
#FFEAD3
color.core.orange.300
#FFC382
color.core.orange.400
#FF8806
color.core.orange.500
#EC7303
color.core.orange.600
#C15100
color.core.orange.700
#562501
color.core.orange.800
#2F1604
color.core.pink.100
#FEF6FA
color.core.pink.200
#FCDCEC
color.core.pink.300
#F79CC8
color.core.pink.400
#F155A0
color.core.pink.500
#DE458E
color.core.pink.600
#A51359
color.core.pink.700
#4B112D
color.core.pink.800
#360606
color.core.red.100
#FFF5F5
color.core.red.200
#FFDEDE
color.core.red.300
#FFA0A0
color.core.red.400
#FF5C5C
color.core.red.500
#F02D2D
color.core.red.600
#D50B0B
color.core.red.700
#570303
color.core.red.800
#2A0303
color.core.teal.100
#F7FDFD
color.core.teal.200
#D7F4F6
color.core.teal.300
#8EDFE5
color.core.teal.400
#44CCD5
color.core.teal.500
#1BBFCA
color.core.teal.600
#006F93
color.core.teal.700
#07465A
color.core.teal.800
#04252F
color.core.violet.100
#F6F5FE
color.core.violet.200
#E2DDFD
color.core.violet.300
#AD9EFA
color.core.violet.400
#836BFF
color.core.violet.500
#583AEE
color.core.violet.600
#3B1FC6
color.core.violet.700
#271A68
color.core.violet.800
#20092B
color.core.yellow.100
#FFFCF5
color.core.yellow.200
#FFF8D5
color.core.yellow.300
#FFE58A
color.core.yellow.400
#FFBD14
color.core.yellow.500
#EEBB04
color.core.yellow.600
#855F00
color.core.yellow.700
#553B06
color.core.yellow.800
#312102
color.core.clear
rgba(color.core.neutral.100, 0)