Skip to main content
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

ClassHex
.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
.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.

​
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. 
<!-- 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. 
<!-- 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

Background Colors

Fill sections and cards with .background-* classes that share the same semantic palette.

Typography

Combine text colors with font size, weight, and leading utilities to build complete type styles.