Design Token

Primitive Colors

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

Token	Descriptions
`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`	romantic, delicate
`crimson`	passionate, intense, powerful
`red`	bold, energetic, attention-grabbing
-> Active
`gray-active`	pressed, active, outline
`slate-active`	pressed, active, outline
`brown-active`	pressed, active, outline
`orange-active`	pressed, active, outline
`amber-active`	pressed, active, outline
`yellow-active`	pressed, active, outline
`lime-active`	pressed, active, outline
`green-active`	pressed, active, outline
`beryl-active`	pressed, active, outline
`teal-active`	pressed, active, outline
`cyan-active`	pressed, active, outline
`sky-active`	pressed, active, outline
`blue-active`	pressed, active, outline
`indigo-active`	pressed, active, outline
`violet-active`	pressed, active, outline
`purple-active`	pressed, active, outline
`fuchsia-active`	pressed, active, outline
`pink-active`	pressed, active, outline
`crimson-active`	pressed, active, outline
`red-active`	pressed, active, outline
-> Text
Aa`gray-text`	text on primitive color
Aa`slate-text`	text on primitive color
Aa`brown-text`	text on primitive color
Aa`orange-text`	text on primitive color
Aa`amber-text`	text on primitive color
Aa`yellow-text`	text on primitive color
Aa`lime-text`	text on primitive color
Aa`green-text`	text on primitive color
Aa`beryl-text`	text on primitive color
Aa`teal-text`	text on primitive color
Aa`cyan-text`	text on primitive color
Aa`sky-text`	text on primitive color
Aa`blue-text`	text on primitive color
Aa`indigo-text`	text on primitive color
Aa`violet-text`	text on primitive color
Aa`purple-text`	text on primitive color
Aa`fuchsia-text`	text on primitive color
Aa`pink-text`	text on primitive color
Aa`crimson-text`	text on primitive color
Aa`red-text`	text on primitive color

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

Add a primitive color

Add a color to the base variables group.

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

Apply the custom color:

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

Primitive Colors

Default

Basic usage

Add a primitive color