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.
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
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
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
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
stroke
custom color
#ebeaef
custom color
#292437
strokeHover
custom color
#e1e0e5
custom color
#353043
illustrationBg
custom color
#F0EDFF
custom color
#1c1b2c
illustrationElement
custom color
#AAA1D6
custom color
#595178
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