> ## Documentation Index
> Fetch the complete documentation index at: https://atomickit.copyelement.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Text Color Utilities: Semantic and Structural Classes

> Apply semantic and structural text colors in Elementor using AtomicKit's text-* classes for hierarchy, links, status indicators, and brand emphasis.

Text color utilities let you control the `color` property on any Elementor element by adding a single class. AtomicKit provides two groups: structural grays for typographic hierarchy (white through gray-light) and six semantic tokens tied to your brand and status palette. Every semantic token also supports an 11-step shade ramp, so you can fine-tune tints and shades without reaching for custom CSS.

## Available Text Color Classes

| 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` |

<Note>
  `.text-gray` and `.text-neutral` both resolve to `#6b7280` at their base value, but they serve different purposes. Use the `text-gray-*` classes for fixed typographic tiers. Use `text-neutral` (and its shade variants) when you need to step through the neutral ramp programmatically.
</Note>

## Heading Hierarchy and Status Text

Use the structural grays to establish visual hierarchy across headings and body copy, and reach for semantic tokens on elements that carry specific meaning.

```html theme={null}
<!-- Typographic hierarchy using structural grays -->
<h1 class="text-black">Page Title</h1>
<h2 class="text-gray-dark">Section Heading</h2>
<p class="text-gray-dark">Primary body copy sits at gray-dark for comfortable reading contrast.</p>
<p class="text-gray">Secondary or supporting copy uses the mid gray.</p>
<span class="text-gray-light">Metadata, timestamps, and fine print.</span>

<!-- Semantic status indicators -->
<span class="text-success">Payment confirmed</span>
<span class="text-warning">Review required</span>
<span class="text-error">Submission failed</span>

<!-- Brand emphasis -->
<a class="text-primary">Learn more →</a>
```

## Using Shade Variants

Append `-l-1` through `-l-5` for lighter steps or `-d-1` through `-d-5` for darker steps on any semantic token. This is useful for hover states, pressed states, or ensuring readable contrast against a colored background.

```html theme={null}
<!-- Lighter primary for a subtle link in a dark header -->
<a class="text-primary-l-3">Documentation</a>

<!-- Darker success shade for text on a light success background -->
<p class="background-success-l-5 text-success-d-3">
  Your account is active.
</p>

<!-- Error shade ramp for an inline validation message -->
<span class="text-error-d-2">This field is required.</span>
```

The full ramp runs from `-l-5` (lightest) through the base to `-d-5` (darkest). Only semantic tokens — primary, secondary, neutral, success, warning, error — support shade variants. The structural gray classes (white, black, gray-dark, gray, gray-light) are fixed values.

## Best Practices

* **Use `.text-primary` for links and brand emphasis.** It provides a clear visual affordance for interactive elements and keeps your brand color consistent across a page.
* **Reserve semantic tokens for their intended meaning.** Apply `.text-success`, `.text-warning`, and `.text-error` to status messages, validation feedback, and alert labels — not for decorative color variety.
* **Always verify contrast on colored backgrounds.** When placing text on a non-white surface, check that your text/background pairing meets WCAG AA (4.5:1 for normal text). Use a shade variant to increase contrast if needed.
* **Establish hierarchy before reaching for color.** Size and weight differences communicate structure effectively on their own. Add text color as a secondary signal, not the primary one.

## Related

<CardGroup cols={2}>
  <Card title="Background Colors" icon="paintbrush" href="/colors/background-colors">
    Fill sections and cards with `.background-*` classes that share the same semantic palette.
  </Card>

  <Card title="Typography" icon="text-size" href="/concepts/typography">
    Combine text colors with font size, weight, and leading utilities to build complete type styles.
  </Card>
</CardGroup>