Design Token

Primitive Colors

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

Default

TokenDescriptions
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
Aagray-texttext on primitive color
Aaslate-texttext on primitive color
Aabrown-texttext on primitive color
Aaorange-texttext on primitive color
Aaamber-texttext on primitive color
Aayellow-texttext on primitive color
Aalime-texttext on primitive color
Aagreen-texttext on primitive color
Aaberyl-texttext on primitive color
Aateal-texttext on primitive color
Aacyan-texttext on primitive color
Aasky-texttext on primitive color
Aablue-texttext on primitive color
Aaindigo-texttext on primitive color
Aaviolet-texttext on primitive color
Aapurple-texttext on primitive color
Aafuchsia-texttext on primitive color
Aapink-texttext on primitive color
Aacrimson-texttext on primitive color
Aared-texttext 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>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.