Design Variables

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

Basic usage

Use default colors

The official default color palette is Master Colors. Each color comes with a hue scale ranging from 5 to 95, which you can directly apply through the related syntax:

<div class="bg:blue-60 fg:red-70"></div>

Customization

Add a color

Add color variables using #000, rgb(0 0 0), or hsl(0 0% 0%).

export default {
variables: {
primary: '
#000
'
}
}

Apply it using color-related syntax and even change the opacity.

<div class="fg:primary bg:primary/.5"></div>
Generated CSS
.bg\:primary\/\.5 {
background-color: rgb(0 0 0/.5)
}
.fg\:primary {
color: rgb(0 0 0)
}

If a color is used only once in all markups, you can optionally not abstract it into a token.

<button class="bg:
#ceb195
"
>
Milk Tea</button>

Add a color with opacity

Add color variables with opacity using #00000080, rgb(0 0 0/.5), or hsl(0 0% 0%/.5).

export default {
variables: {
primary: 'rgb(0 0 0/0.5)'
}
}

Apply it using color-related syntax like fg:.

<div class="fg:primary"></div>
Generated CSS
.fg\:primary {
color: rgb(0 0 0 / .5)
}

Color variables with opacity cannot use /alpha to change the opacity.

<div class="fg:primary/.5"></div>

Add an alias

Create an alias for a color to link its value to an existing color.

export default {
variables: {
secondary: '$(blue-60)'
}
}

Apply it using color-related syntax.

<div class="fg:secondary"></div>
Generated CSS
.fg\:secondary {
color: rgb(37 99 253)
}

For example, say you have multiple color variables referencing the same color token. If that color needs updating, you would only need to update the source instead of manually updating every instance of the color.

Add an alias with opacity

Create an alias for a color with opacity to link its value to an existing color.

export default {
variables: {
primary: '$(black)/.5', // <─┐
secondary: '$(primary)/.5' // ──┘ linked to primary
}
}

Apply it using color-related syntax like fg:.

<div class="bg:primary fg:secondary"></div>
Generated CSS
.bg\:primary {
background-color: rgb(0 0 0 / .5)
}
.fg\:secondary {
color: rgb(0 0 0 / .25)
}

As shown above, creating an alias secondary linked to an existing alias primary with opacity /.5 is possible, and the opacity will be multiplied 0.5 * 0.5 = 0.25.

Add color shades

Sets multiple shades for a single color.

export default {
variables: {
primary: {
'': '
#1192e8
'
, // primary
10: '
#e5f6ff
'
, // primary-10
20: '
#bae6ff
'
, // primary-20
}
}
}

Apply it using color-related syntax like fill:.

<svg class="fill:primary-20 ">20</svg>

Add colors by theme

Add color variables based on different themes.

export default {
variables: {
primary: {
'': '
#ff0000
'
, // There is usually no need to give a fallback.
'@light': '
#fff
'
,
'@dark': '
#000
'
}
}
}

Using modes for variables, you can access a single source of truth and simplify the markup.

<html class="light">
<body class="bg:
#fff
@light
bg:
#000
@dark
"
>
</body>
<body class="bg:primary"></body>
</html>
Generated CSS
:root {
--primary: 255 0 0
}
.light {
--primary: 255 255 255
}
.dark {
--primary: 0 0 0
}
.bg\:primary {
background-color: rgb(var(--primary))
}

By default, theme variables drive inheritance by adding .light or .dark to the parent element.

Override default colors

Access the same key as the preset to override default colors, like blue-5 ~ blue-95.

export default {
variables: {
blue: '
#4589ff
'
}
}

Use app-* to avoid conflicts with defaults and keep blue-* colors consistent.

export default {
variables: {
app: {
blue: '
#4589ff
'
// app-blue
}
}
}

Apply custom colors for the current application.

<div class="fg:app-blue"></div>
Generated CSS
.fg\:app-blue {
color: rgb(69 137 255)
}
Fundamentals
Variables and Theme Modes

Use design tokens to switch between different theme modes.

Design Variables
Base Colors

Customizing base color variables or starting with the official design system.

© Aoyue Design LLC.