Design Token

Text Colors

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

Token	Descriptions
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
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 are 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>

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

Setting the accent color of user interface elements or controls.

Default