Colors

Color tokens

At Xata we use semantic naming for our colors. This means that we use names like primary and danger instead of purple and red. This makes it easier to change the colors in the future. For example, if we want to change the primary color from purple to blue, we only have to change the color value of the primary token.

Also, we use a limited set of colors. This makes it easier to maintain the colors and it makes sure that the colors are consistent throughout the application.

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

#2bbe76

green.300

#6be0a8

danger

Danger state

red.500

#bb2b2a

red.300

#df6d6d

warning

Warning state

yellow.500

#d5ab18

yellow.300

#f2d25b

info

Info state

blue.500

#1ea8e3

blue.300

#51cffe

ghost

white

#FFFFFF

white

#FFFFFF

ink

gray.900

#0D091D

gray.900

#0D091D

Background colors

Token and description

Light value

Dark value

bg

custom color

#FDFDFF

gray.900

#0D091D

bgPrimary

purple.500

#6c53cd

purple.500

#6c53cd

bgSelected

primary.100

#dacaff

primary.800

#251f42

bgInfo

blue.50

#e4f9ff

blue.700

#00435c

bgSuccess

green.50

#e7fbf2

green.700

#0d4c2f

bgWarning

orange.50

#fff2e5

orange.700

#542c07

bgDanger

red.50

#fde9e9

red.700

#4c1010

bgInvert

gray.800

#252133

white

#FFFFFF

Contrast colors

Token and description

Light value

Dark value

contrastEmpty

white

#FFFFFF

custom color

#110f21

contrastLowest

custom color

#f6f5fa

custom color

#1c1b2c

contrastLow

custom color

#ebeaef

custom color

#2d283b

contrastMedium

gray.300

#a6a4ac

gray.500

#6f6c78

contrastHigh

gray.600

#555260

gray.300

#a6a4ac

contrastHighest

gray.800

#252133

gray.200

#c3c2c7

contrastFull

gray.800

#252133

gray.100

#e0e0e2

Text colors

Token and description

Light value

Dark value

text

gray.800

#252133

gray.50

#fbfaff

textSubtle

custom color

#555260

custom color

#a6a4ae

textPlaceholder

gray.500

#6f6c78

gray.500

#6f6c78

title

gray.900

#0D091D

white

#FFFFFF

titleAccent

purple.800

#251f42

pink.100

#f7e2fd

titleInvert

white

#FFFFFF

gray.900

#0D091D

textInvert

gray.50

#fbfaff

gray.800

#252133

textPrimary

custom color

#6c53cd

custom color

#b394ff

textAccent

custom color

#945daa

custom color

#cb8ee2

textWarning

custom color

#b15b00

custom color

#f18c37

textSuccess

custom color

#008546

custom color

#2bbe76

textDanger

custom color

#cf3f40

custom color

#ff8070

textInfo

custom color

#007ab1

custom color

#2eafeb

Border colors

Token and description

Light value

Dark value

stroke

custom color

#ebeaef

custom color

#292437

strokeHover

custom color

#e1e0e5

custom color

#353043

Illustrations colors

Token and description

Light value

Dark value

illustrationBg

custom color

#F0EDFF

custom color

#1c1b2c

illustrationElement

custom color

#AAA1D6

custom color

#595178

All colors

gray.50

#fbfaff

gray.100

#e0e0e2

gray.200

#c3c2c7

gray.300

#a6a4ac

gray.400

#8a8891

gray.500

#6f6c78

gray.600

#555260

gray.700

#3c3949

gray.800

#252133

gray.900

#0D091D

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

#0D091D

teal.50

#e2ffff

teal.100

#afffff

teal.200

#7cffff

teal.300

#4cffff

teal.400

#27ffff

teal.500

#18e5e5

teal.600

#00b2b3

teal.700

#005c5c

teal.800

#003e3e

teal.900

#002929

blue.50

#e4f9ff

blue.100

#b2ebff

blue.200

#80ddff

blue.300

#51cffe

blue.400

#2dc1fd

blue.500

#1ea8e3

blue.600

#0e83b1

blue.700

#00435c

blue.800

#002d3e

blue.900

#001e2a

green.50

#e7fbf2

green.100

#bef2d9

green.200

#94e9c0

green.300

#6be0a8

green.400

#44d790

green.500

#2bbe76

green.600

#1f945b

green.700

#0d4c2f

green.800

#07331f

green.900

#042214

yellow.50

#fef9e6

yellow.100

#faecb7

yellow.200

#f6df89

yellow.300

#f2d25b

yellow.400

#eec52f

yellow.500

#d5ab18

yellow.600

#a68510

yellow.700

#554407

yellow.800

#392e03

yellow.900

#261e01

orange.50

#fff2e5

orange.100

#f9d7b8

orange.200

#f4bd8a

orange.300

#eea35d

orange.400

#e98931

orange.500

#cf7018

orange.600

#a25711

orange.700

#542c07

orange.800

#381d03

orange.900

#261301

red.50

#fde9e9

red.100

#f3c0c0

red.200

#e99696

red.300

#df6d6d

red.400

#d54444

red.500

#bb2b2a

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

Colors

Brand colors

Background colors

Contrast colors

Text colors

Border colors

Illustrations colors

All colors

On this page