Colors

A collection of colors used in the design system. The colors are grouped by brand and core colors. The brand colors directly map to the brand colors used in the design system. The core colors are the option tokens to create new brand colors.

Core Colors

The core colors are the option tokens to create new brand colors.

  1. Black
  2. Blue
  3. Cyan
  4. Green
  5. Grey
  6. Orange
  7. Red
  8. White
  9. Yellow

Black

  • Black

    var(--color-black)
     #000

Blue

  • Blue-50

    var(--color-blue-50)
     #d9e2fc

  • Blue-100

    var(--color-blue-100)
     #cbd7fb

  • Blue-200

    var(--color-blue-200)
     #739ddd

  • Blue-300

    var(--color-blue-300)
     #083273

  • Blue-400

    var(--color-blue-400)
     #062656

  • Blue-500

    var(--color-blue-500)
     #061647

  • Blue-600

    var(--color-blue-600)
     #04133e

  • Blue-700

    var(--color-blue-700)
     #031035

  • Blue-800

    var(--color-blue-800)
     #020b27

  • Blue-900

    var(--color-blue-900)
     #01081e

  • Blue-950

    var(--color-blue-950)
     #000719

Cyan

  • Cyan-100

    var(--color-cyan-100)
     #e6fcff

  • Cyan-200

    var(--color-cyan-200)
     #b6f4ff

  • Cyan-300

    var(--color-cyan-300)
     #74eaff

  • Cyan-400

    var(--color-cyan-400)
     #0dd3f5

  • Cyan-500

    var(--color-cyan-500)
     #0cc0df

  • Cyan-600

    var(--color-cyan-600)
     #0bafcb

  • Cyan-700

    var(--color-cyan-700)
     #088095

  • Cyan-800

    var(--color-cyan-800)
     #077183

Green

  • Green-50

    var(--color-green-50)
     #f4fcf0

  • Green-100

    var(--color-green-100)
     #e6f8dd

  • Green-200

    var(--color-green-200)
     #befb98

  • Green-400

    var(--color-green-400)
     #99f660

  • Green-500

    var(--color-green-500)
     #86db51

  • Green-600

    var(--color-green-600)
     #68ac3e

  • Green-700

    var(--color-green-700)
     #49782b

Grey

  • Grey-50

    var(--color-grey-50)
     #f9fafb

  • Grey-100

    var(--color-grey-100)
     #f0f2f4

  • Grey-200

    var(--color-grey-200)
     #e7ebee

  • Grey-300

    var(--color-grey-300)
     #dfe3e7

  • Grey-400

    var(--color-grey-400)
     #d6dbe0

  • Grey-500

    var(--color-grey-500)
     #c6ccd2

  • Grey-600

    var(--color-grey-600)
     #9299a0

  • Grey-700

    var(--color-grey-700)
     #474f57

  • Grey-800

    var(--color-grey-800)
     #32383e

  • Grey-900

    var(--color-grey-900)
     #1b1f22

  • Grey-950

    var(--color-grey-950)
     #14171a

Orange

  • Orange-100

    var(--color-orange-100)
     #fff4e6

  • Orange-200

    var(--color-orange-200)
     #ffd8a8

  • Orange-300

    var(--color-orange-300)
     #ffc078

  • Orange-400

    var(--color-orange-400)
     #ffa94d

  • Orange-500

    var(--color-orange-500)
     #ff922b

  • Orange-600

    var(--color-orange-600)
     #ff7a05

  • Orange-700

    var(--color-orange-700)
     #de6500

  • Orange-800

    var(--color-orange-800)
     #b85000

  • Orange-900

    var(--color-orange-900)
     #923d00

Red

  • Red-50

    var(--color-red-50)
     #ffecec

  • Red-100

    var(--color-red-100)
     #ffdbdb

  • Red-200

    var(--color-red-200)
     #ffbdbd

  • Red-300

    var(--color-red-300)
     #f99

  • Red-400

    var(--color-red-400)
     #ff7a7a

  • Red-500

    var(--color-red-500)
     #ff5252

  • Red-600

    var(--color-red-600)
     #e60000

  • Red-700

    var(--color-red-700)
     #ad0000

  • Red-800

    var(--color-red-800)
     #7a0000

White

  • White

    var(--color-white)
     #fff

Yellow

  • Yellow-50

    var(--color-yellow-50)
     #fffcf0

  • Yellow-100

    var(--color-yellow-100)
     #fff9e0

  • Yellow-200

    var(--color-yellow-200)
     #fff2bd

  • Yellow-300

    var(--color-yellow-300)
     #ffe785

  • Yellow-400

    var(--color-yellow-400)
     #ffde5c

  • Yellow-500

    var(--color-yellow-500)
     #ffd633

  • Yellow-600

    var(--color-yellow-600)
     #ffd11a

  • Yellow-700

    var(--color-yellow-700)
     #fc0

  • Yellow-800

    var(--color-yellow-800)
     #dbaf00

  • Yellow-900

    var(--color-yellow-900)
     #bd9700