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
#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
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
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
#f18c37
textSuccess
custom color
#008546
custom color
#2bbe76
textDanger
custom color
#cf3f40
custom color
#ff8070
textInfo
custom color
#007ab1
custom color
#2eafeb
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
#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