Design Token

Colors

Customizing color variables or starting with the crafted palette.

Default

gray
5#f6f5f7
10#efeef0
20#cdccce
30#a2a1a3
40#89888a
50#737274
60#585759
70#444345
80#323133
90#29282a
95#222123
slate
5#f8f9fb
10#eff2f9
20#c8d0e3
30#9fabc6
40#7c8cab
50#5f7395
60#455572
70#37455d
80#283348
90#1d273a
95#182030
brown
5#fff6f0
10#feefe3
20#f3bea4
30#e7976e
40#da7c4d
50#cc6633
60#b65325
70#9d4119
80#833111
90#692007
95#431304
orange
5#fff5ea
10#fff5df
20#ffcb9e
30#ff9b47
40#ff8528
50#ff6c0a
60#e05200
70#bc3e00
80#992d00
90#701d00
95#471100
amber
5#fff9eb
10#fff4db
20#ffe099
30#ffc133
40#ffb10a
50#f99e00
60#e57e00
70#c15d00
80#a34900
90#753200
95#4c1f00
yellow
5#fffae5
10#fffed1
20#ffe993
30#ffd233
40#ffc300
50#efaf00
60#d69200
70#b77400
80#9e5c00
90#753c00
95#4c2600
lime
5#f5ffe5
10#f5ffd6
20#d1fb8d
30#acec46
40#91d91a
50#77c012
60#61a60c
70#4c8d07
80#367604
90#256000
95#1b3d00
green
5#e7fdea
10#dbfee4
20#a5f7b8
30#35ed66
40#00d655
50#00c147
60#00ad3f
70#008e34
80#007a2c
90#006023
95#003d16
beryl
5#e0fef2
10#d2fff7
20#6cffd4
30#0fefa4
40#04e09e
50#04cb8f
60#00b277
70#009360
80#007f50
90#00663e
95#003d24
teal
5#dbfefd
10#cfffff
20#7ffff6
30#00f4e4
40#00e4d4
50#00ccc8
60#00aeb7
70#0092a3
80#00798e
90#005d75
95#003747
cyan
5#e0ffff
10#d1ffff
20#7ff6ff
30#1ee1ff
40#00ccf9
50#00b3ea
60#0099d6
70#007dbc
80#0067a8
90#005089
95#003156
sky
5#e5f5ff
10#d9f8ff
20#a3deff
30#6bc6ff
40#34b2fd
50#059fff
60#008df9
70#0073e0
80#005cc6
90#0041a3
95#002566
blue
5#e5f3fe
10#dbf2fe
20#add7ff
30#70b0ff
40#4c93fd
50#3a7cff
60#2563fd
70#1b53ec
80#1947d1
90#1735a2
95#102069
indigo
5#f0f1fe
10#e9ecfe
20#c8cdfe
30#939eff
40#7e81fe
50#7068ff
60#5b4cfd
70#4e39ed
80#4732d2
90#3623a3
95#26176c
violet
5#f2efff
10#efe8ff
20#d7c5ff
30#b198fe
40#9a70ff
50#8e56fe
60#812fff
70#7407f2
80#6405d1
90#4f05a3
95#35036e
purple
5#f6f0ff
10#f6e8fe
20#e2bffe
30#c492fd
40#b266ff
50#a849fe
60#9514ff
70#8200e5
80#7100c1
90#58008e
95#3e0060
fuchsia
5#faf0ff
10#fde8fe
20#f0baff
30#dd89fe
40#d760fe
50#cf33ff
60#b700e5
70#a200c6
80#8700a3
90#660175
95#480051
pink
5#fef1f9
10#fee9f8
20#ffb8df
30#f986c1
40#fa65b2
50#f747a2
60#ef2188
70#d61673
80#b80c5c
90#8f0543
95#64032f
crimson
5#ffeff2
10#ffe8ec
20#ffbac7
30#ff849d
40#ff6684
50#fc4065
60#ed2a51
70#d7173e
80#bb1536
90#8f132c
95#620e1f
red
5#ffefef
10#fee8e8
20#ffbcbc
30#ff8787
40#fd5f5f
50#f73f3f
60#e52e2e
70#d01b1b
80#b81919
90#921515
95#650f0f

Semantic Tokens

TokenKeywords
white
black
base
background for page, modal
invert
inverted color of the background
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.