Text Colors

Overview

Use text color utilities for hierarchy, links, and status without leaving the shared palette.

Class	Hex
`.text-white`	`#ffffff`
`.text-black`	`#000000`
`.text-gray-dark`	`#374151`
`.text-gray`	`#6b7280`
`.text-gray-light`	`#9ca3af`
`.text-primary`	`#0740f9`
`.text-secondary`	`#aaebfd`
`.text-neutral`	`#6b7280`
`.text-success`	`#3DC13C`
`.text-warning`	`#F4BB1B`
`.text-error`	`#F13737`

Semantic tokens also support .text-{token}-l-5 through .text-{token}-d-5; use the same shade steps shown in the Color Palette.

Examples

<h1 class="text-3xl font-bold text-black">Heading</h1>
<h2 class="text-2xl font-semibold text-gray-dark">Section</h2>
<p class="text-base text-gray">Body copy</p>
<p class="text-base text-neutral">Neutral line</p>
<a class="text-primary underline" href="#">Link</a>
<div class="elementor-element text-success">Success</div>
<div class="elementor-element text-error">Error</div>
<div class="elementor-element text-warning">Warning</div>

Usage Notes

Classes set color. Structural utilities are fixed grays for hierarchy; semantic utilities use the six tokens from Colors (primary, secondary, neutral, success, warning, error). For shades off the base, append -l-5…-l-1 or -d-1…-d-5 (see the palette). text-gray* is for typography tiers; text-neutral follows the neutral ramp like border-neutral / background-neutral.

Best practices

Use primary for links and brand emphasis; use success / error / warning for status.
Check contrast on colored backgrounds; see Colors — Accessibility.

Typography

Font size, weight, and layout

Background Colors

Background colors

Getting Started

Concepts

Typography

Layout

Spacing

Sizing

Background

Effects

Filters

Flexbox

Borders

Components

Overview

Examples

Usage Notes

Best practices

Typography

Background Colors

​Overview

​Examples

​Usage Notes

​Best practices

​Related utilities

Typography

Background Colors

Overview

Examples

Usage Notes

Best practices

Related utilities