Design Variables

Text Colors

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


Aatext-strongpage titles, subheadings, emphasized fields
Aatext-neutralbody text, descriptions, and general content
Aatext-lightlight color, icons
Aatext-lighterlighter color, icons
Aatext-lightestdim color, placeholder, disabled text
Aatext-invertinverted color of the foreground
Aatext-grayneutral, subtle, muted
Aatext-slatecool, calm, sophisticated
Aatext-brownearthy, warm, rustic
Aatext-orangevibrant, energetic, lively
Aatext-amberwarm, glowing, radiant
Aatext-yellowcheerful, sunny, bright
Aatext-limefresh, lively, zesty
Aatext-greennature, growth, harmony
Aatext-berylcalm, soothing, tranquil
Aatext-tealsophisticated, elegant, refined
Aatext-cyanmodern, futuristic, technological
Aatext-skypeaceful, serene, tranquil
Aatext-bluecalm, trustworthy, reliable
Aatext-indigomysterious, deep, spiritual
Aatext-violetcreative, imaginative, magical
Aatext-purpleroyal, luxurious, majestic
Aatext-fuchsiavibrant, bold, playful
Aatext-pinkfeminine, romantic, delicate
Aatext-crimsonpassionate, intense, powerful
Aatext-redbold, energetic, attention-grabbing

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

<div class="light">
<span class="fg:yellow">M</span>
<div class="dark">
<span class="fg:yellow">M</span>

View the default variables on GitHub

Basic usage

Apply a text color

Apply the defined text-* variables using the inherited rules color, text-decoration-color, text-decoration, text-fill-color, text-stroke-color, caret-color.

<html class="light">
<body class="fg:$(text-neutral)">equals</body>
<body class="fg:text-neutral">equals</body>
<body class="fg:neutral"></body>

Typically, we set the foreground color of elements using fg:color rather than the text-specific text:color.

<p class="text:pink">text-fill-color properity</p>
<p class="fg:pink">color properity</p>

Apply text color to any syntax

Besides inheriting the above rules, you can use text-* to access global text color variables in other syntax.

<svg class="stroke:text-light"></svg>

Escape inherited text colors

Use $(blue) to apply instead of

<p class="fg:$(blue)"></p>


Add a text color

Add a color to the text variables group.

export default {
variables: {
text: {
primary: '

Apply the custom color:

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

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

Design Variables
Base Colors

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

Design Variables

Customizing fonts for your design system.

© Aoyue Design LLC.