Home

Tokens

Colors
Typography

Design System

Colors

All available color tokens.

Brand colors

Token and description
Light value
Dark value
primary

Primary brand color

purple.500

#6c53cd

purple.300

#a688ff

accent

Accent brand color

pink.500

#c88cdf

pink.300

#e9bafa

success

Success state

green.500

#2cbe77

green.300

#6be0a8

danger

Danger state

red.500

#bb2b2b

red.300

#df6d6d

warning

Warning state

yellow.500

#d5ab18

yellow.300

#f2d25b

info

Info state

blue.500

#1ea8e4

blue.300

#51cffe

ghost

white

#FFFFFF

white

#FFFFFF

ink

gray.900

#0f0c1b

gray.900

#0f0c1b

Text colors

Token and description
Light value
Dark value
text

gray.800

#252330

gray.50

#fbfaff

textSubtle

custom color

#595073

custom color

#f1d7ff

textPlaceholder

gray.500

#6d6c77

gray.500

#6d6c77

title

gray.900

#0f0c1b

white

#FFFFFF

titleInvert

white

#FFFFFF

gray.900

#0f0c1b

textInvert

gray.50

#fbfaff

gray.800

#252330

textPrimary

custom color

#6c53cd

custom color

#b394ff

textAccent

custom color

#945daa

custom color

#cb8ee2

textWarning

custom color

#b15b00

custom color

#f48d38

textSuccess

custom color

#008546

custom color

#2cbe77

textDanger

custom color

#ce3f40

custom color

#ff8071

textInfo

custom color

#007ab1

custom color

#33b2ee

Background colors

Token and description
Light value
Dark value
bg

custom color

#FDFDFF

gray.900

#0f0c1b

bgAlternate

custom color

#F6F4FF

custom color

#161522

bgAlternateMedium

custom color

#e4dffa

custom color

#21202e

bgPrimary

purple.500

#6c53cd

purple.200

#c1a9ff

bgHighlight

purple.500

#6c53cd

purple.500

#6c53cd

bgDanger

red.50

#fde9e9

red.700

#4c1010

bgWarning

orange.50

#fff2e5

orange.700

#532d07

bgSuccess

green.50

#e7fcf2

green.700

#0d4c2f

bgInfo

blue.50

#e3f8ff

blue.700

#00435c

bgInvert

gray.800

#252330

white

#FFFFFF

Contrast colors

Token and description
Light value
Dark value
contrastEmpty

white

#FFFFFF

gray.900

#0f0c1b

contrastLowest

custom color

#f6f5fa

custom color

#1a1926

contrastLow

custom color

#e1e0e5

custom color

#312e3c

contrastMedium

gray.300

#a3a2ab

gray.500

#6d6c77

contrastHigh

gray.600

#54525e

gray.300

#a3a2ab

contrastHighest

gray.800

#252330

gray.200

#c0bfc6

contrastFull

gray.800

#252330

gray.100

#dddce2

Colors

gray.50

#fbfaff

gray.100

#dddce2

gray.200

#c0bfc6

gray.300

#a3a2ab

gray.400

#888690

gray.500

#6d6c77

gray.600

#54525e

gray.700

#3c3a46

gray.800

#252330

gray.900

#0f0c1b

purple.50

#f0ecff

purple.100

#dacaff

purple.200

#c1a9ff

purple.300

#a688ff

purple.400

#8768ff

purple.500

#6c53cd

purple.600

#53419c

purple.700

#3c2f6d

purple.800

#251f42

purple.900

#0f0c1b

teal.50

#e3ffff

teal.100

#b2ffff

teal.200

#80ffff

teal.300

#52ffff

teal.400

#31fefe

teal.500

#24e5e4

teal.600

#12b3b2

teal.700

#005c5c

teal.800

#003d3d

teal.900

#002929

blue.50

#e3f8ff

blue.100

#b2eaff

blue.200

#80ddff

blue.300

#51cffe

blue.400

#2dc1fd

blue.500

#1ea8e4

blue.600

#0e83b2

blue.700

#00435c

blue.800

#002d3d

blue.900

#001e2a

green.50

#e7fcf2

green.100

#bef3d9

green.200

#93e9c1

green.300

#6be0a8

green.400

#44d790

green.500

#2cbe77

green.600

#1f945b

green.700

#0d4c2f

green.800

#08331e

green.900

#042214

yellow.50

#fdf9e6

yellow.100

#faecb7

yellow.200

#f6df89

yellow.300

#f2d25b

yellow.400

#efc52f

yellow.500

#d5ab18

yellow.600

#a68510

yellow.700

#554407

yellow.800

#392e03

yellow.900

#261e01

orange.50

#fff2e5

orange.100

#f9d8b8

orange.200

#f4bd8a

orange.300

#eea35d

orange.400

#e98931

orange.500

#cf6f17

orange.600

#a25711

orange.700

#532d07

orange.800

#381e04

orange.900

#261301

red.50

#fde9e9

red.100

#f3bfbf

red.200

#e99697

red.300

#df6d6d

red.400

#d44444

red.500

#bb2b2b

red.600

#922020

red.700

#4c1010

red.800

#330a0a

red.900

#230606

pink.50

#fef6ff

pink.100

#f7e2fd

pink.200

#f0cefb

pink.300

#e9bafa

pink.400

#e2a6f8

pink.500

#c88cdf

pink.600

#9a6cae

pink.700

#6b4c7d

pink.800

#3d2c4c

pink.900

#0f0c1b

Code Colors

deepIndigo

#27212E

white

#ffffff

whiteWithTransparency80

#ffffffcc

whiteWithTransparency20

#ffffff33

vibrantPink

#f67ac8

pinkWithTransparency50

#f67ac88f

pinkWithTransparency25

#f67ac840

pinkWithTransparency15

#f67ac827

limeGreen

#cce99b

limeGreenWithTransparency15

#cce99b8c

limeGreenWithTransparency10

#cce99b60

magenta

#ff3e7b

charcoalGray

#242029

turquoise

#74dfc4

turquoiseWithTransparency80

#74dfc4cc

turquoiseWithTransparency20

#74dfc433

limeGreenWithTransparency80

#cce99bcc

limeGreenWithTransparency20

#cce99b33

darkPurpleWithGray

#3e3549

purpleWithGray

#964c7b

lightBlue

#b4dce7

purple

#d195e7

lavander

#c1a9ff

yellow

#ffe261

goldenYellow

#ffb85b

lighterGray

#eee

lightGray

#ddd

grayishPurpleLighter

#92889d

grayishPurple

#7b6995

grayWithTransparency50

#91889b80

turquoiseWithTransparency40

#74dfc466

turquoiseWithTransparency15

#74dfc423

pinkishPurpleWithTransparency40

#eb64ba60

lightPurpleWithTransparency25

#40b5c449

lightPurpleWithTransparency40

#40b5c460

limeGreenWithTransparency25

#cce99b3f

darkBlue

#3a3242