Design Variables

Colors

Customizing color variables or starting with the crafted palette.

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)
}