Design Variables

Text Colors

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

Token	Keywords
Semantic
Aa`text-strong`	page titles, subheadings, emphasized fields
Aa`text-neutral`	body text, descriptions, and general content
Aa`text-light`	light color, icons
Aa`text-lighter`	lighter color, icons
Aa`text-lightest`	dim color, placeholder, disabled text
Aa`text-invert`	inverted color of the foreground
Primitive
Aa`text-gray`	neutral, subtle, muted
Aa`text-slate`	cool, calm, sophisticated
Aa`text-brown`	earthy, warm, rustic
Aa`text-orange`	vibrant, energetic, lively
Aa`text-amber`	warm, glowing, radiant
Aa`text-yellow`	cheerful, sunny, bright
Aa`text-lime`	fresh, lively, zesty
Aa`text-green`	nature, growth, harmony
Aa`text-beryl`	calm, soothing, tranquil
Aa`text-teal`	sophisticated, elegant, refined
Aa`text-cyan`	modern, futuristic, technological
Aa`text-sky`	peaceful, serene, tranquil
Aa`text-blue`	calm, trustworthy, reliable
Aa`text-indigo`	mysterious, deep, spiritual
Aa`text-violet`	creative, imaginative, magical
Aa`text-purple`	royal, luxurious, majestic
Aa`text-fuchsia`	vibrant, bold, playful
Aa`text-pink`	feminine, romantic, delicate
Aa`text-crimson`	passionate, intense, powerful
Aa`text-red`	bold, 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>
<div class="dark">
    <span class="fg:yellow">M</span>
</div>

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>
</html>

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 variables.blue instead of variables.text.blue.

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

Customization

Add a text color

Add a color to the text variables group.

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

Apply the custom color:

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

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