Skip to main content

Documentation Index

Fetch the complete documentation index at: https://skelementorcss.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

Use text color utilities for hierarchy, links, and status without leaving the shared palette.
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
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