Design Variables

Base Colors

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

Token	Keywords
Semantic
`base`	background for page, modal
`invert`	inverted color of the background
Primitive
`gray`	neutral, subtle, muted
`slate`	cool, calm, sophisticated
`brown`	earthy, warm, rustic
`orange`	vibrant, energetic, lively
`amber`	warm, glowing, radiant
`yellow`	cheerful, sunny, bright
`lime`	fresh, lively, zesty
`green`	nature, growth, harmony
`beryl`	calm, soothing, tranquil
`teal`	sophisticated, elegant, refined
`cyan`	modern, futuristic, technological
`sky`	peaceful, serene, tranquil
`blue`	calm, trustworthy, reliable
`indigo`	mysterious, deep, spiritual
`violet`	creative, imaginative, magical
`purple`	royal, luxurious, majestic
`fuchsia`	vibrant, bold, playful
`pink`	feminine, romantic, delicate
`crimson`	passionate, intense, powerful
`red`	bold, energetic, attention-grabbing

By default, theme modes drive base color variables meticulously adjusted in light and dark modes.

<div class="light">
    <div class="bg:yellow"></div>
</div>
<div class="dark">
    <div class="bg:yellow"></div>
</div>

Basic usage

By default, all base colors are set at the top level of variables and accessed as a global variable.

<html class="light">
    <body class="bg:$(base)">equals</body>
    <body class="bg:base"></body>
</html>

Add a color to the base variables group.

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

Apply the custom color:

<p class="bg:primary"></p>

See the Color Customization documentation to learn more about color variable behavior.

Use bg:red to create a nice-looking delete button.

Delete Project

The project will be permanently deleted, including its products and teams. This action is irreversible and can not be undone.

Learn more about the disclaimer

<button class="bg:red fg:white …">Delete</button>