Skip to main content
Colors overview cover

​
Overview

Color utilities cover text, background, and border tokens built on the same semantic palette.

​
Base shades

NameBase hex
Primary#0740f9
Secondary#aaebfd
Neutral#6b7280
Success#3DC13C
Warning#F4BB1B
Error#F13737

​
Color Palette

Click a swatch to copy. Columns match l-5 … base … d-5.
The utility references split structural white/black/gray classes from the six semantic tokens (with optional -l-* / -d-* steps): Text colors, Background colors, Border colors.

Text Colors

Semantic text color utilities

Background Colors

Background color utilities for sections and surfaces

Border Colors

Border color utilities that pair with the border system

​
Quick Start

<h1 class="text-black">
  Primary Heading
</h1>
<p class="text-neutral">
  Supporting text
</p>
<a class="text-primary underline" href="#">
  Brand link
</a>
<div class="elementor-element bg-white p-6 rounded-lg">
  White background
</div>
<div class="elementor-element bg-primary text-white p-6 rounded-lg">
  Brand primary surface
</div>
<div class="elementor-element border-1 border-solid border-neutral p-4 rounded">
  Neutral border
</div>

​
Accessibility

Ensure text and interface colors preserve readable contrast. The palette is designed for sensible defaults, but context still matters.

Typography

Text utilities that work with colors

Borders

Border utilities with color support

Effects

Opacity utilities for layered color effects