Skip to main contenteBay Playbook
  • Get started
  • Foundations
  • Design system
  • Expressions
  • Resources
  • Articles

Design system

  • Overview
    • Overview
    • Color
    • Dimension
    • Spacing
    • Typography
    • Breakpoints
    • Shadow
    • Shape
    • Opacity
    • Motion
    • Overview
    • Status
    • Accordion
    • Action bar
      • Overview
      • Inline notice
      • Page notice
      • Section notice
    • Avatar
    • Badge
    • Banner
    • Breadcrumb
      • Overview
      • Branded button
      • CTA button
      • Icon button
      • Link button
    • Carousel
    • CCD
      • Graphs
      • Metrics
    • Date picker
    • Dialog
    • Divider
    • Education notice
    • EEK rating and range
    • Expansion
      • Checkbox
      • Chip
      • Combobox
      • Dropdown
      • Numeric stepper
      • Password
      • Phone number
      • Radio button
      • Search field
      • Select list
      • Switch
      • Text area
      • Text field
    • Item tile
    • List row
      • Overview
      • Expressive loader
      • Skeleton loader
    • Media container
    • Pagination
    • Popover
    • Progress stepper
    • Quick filter
    • Section header
    • Segmented button
      • Bottom sheet
      • Panel
    • Signal
    • Snackbar
    • Tab
    • Table
      • Tooltip
      • Tourtip
    • Toggle button group
    • Video player
    • Overview
    • Bulk editing
    • File uploading
      • Text link

Color tokens

Color tokens
PreviousTokens: OverviewNextDimension
Things.People.Love.
  • Get started
  • Foundations
  • Design system
  • Expressions
  • Resources
  • Articles
  • Contributors
  • Careers
  • Press
  • Privacy policy
© 2025 eBay. All rights reserved.

eBay Evo, the eBay trademark, and the eBay logo are the intellectual property of eBay Inc.

    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.100
    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.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.08)
    rgba(color.core.neutral.100, 0.08)
    color.stateLayer.pressed
    rgba(color.core.neutral.900, 0.08)
    rgba(color.core.neutral.100, 0.08)
    color.stateLayer.selected
    rgba(color.core.neutral.900, 0.08)
    rgba(color.core.neutral.100, 0.08)
    color.stateLayer.focus
    rgba(color.core.neutral.900, 0.04)
    rgba(color.core.neutral.100, 0.04)

    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.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.800
    expressiveTheme.dijon.medium
    color.core.dijon.500
    color.core.dijon.800
    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.100
    expressiveTheme.jade.dark
    color.core.jade.700
    color.core.jade.200
    expressiveTheme.kiwi.light
    color.core.kiwi.400
    color.core.kiwi.700
    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.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)