Design Variables

Base Colors

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

Default

TokenKeywords
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>

View the default variables on GitHub


Basic usage

Apply a base color

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>

Customization

Add a base color

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 cases

Create a 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>
Design Variables
Colors

Customizing color variables or starting with the crafted palette.

Design Variables
Text Colors

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

© Aoyue Design LLC.