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

#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

#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

#e3f8ff

blue.700

#00435c

bgSuccess

green.50

#e7fcf2

green.700

#0d4c2f

bgWarning

orange.50

#fff2e5

orange.700

#532d07

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

#f18b36

textSuccess

custom color

#008546

custom color

#2cbe77

textDanger

custom color

#ce3f40

custom color

#ff8071

textInfo

custom color

#007ab1

custom color

#2eafec

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

#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

Colors

Brand colors

Background colors

Contrast colors

Text colors

Border colors

Illustrations colors

All colors

On this page