Color

FrontAlign color utilities are designed for readable interfaces, theme-aware components, and fast visual refinement directly in markup. Use them to style body text, links, labels, metadata, states, icons, badges, pricing details, alerts, dashboards, and interactive elements without writing custom CSS.

All color utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Group	Classes	Token / Pattern	Common use
Body	`text-body`	`--body-text`	Default readable text.
Semantic	`text-primary`, `text-success`, `text-danger`, `text-warning`, `text-info`, `text-light`, `text-dark`, `text-white`	`--primary`, `--success`, `--danger` …	UI states, brand, alerts, overlays.
Palette	`text-slate`, `text-blue`, `text-red`, `text-green`, `text-indigo`, `text-purple`, `text-yellow`, `text-orange`, `text-teal`	`text--`	Precise shade control for custom visual systems.
Hover	`hover:text-primary`, `hover:text-blue`, `hover:text-blue-700` …	`--fa-hover-color`	Links, navigation items, interactive labels.

Usage

<p class="text-body">Default body text color.</p>
<p class="text-primary">Brand colored text.</p>
<p class="text-success">Successful state message.</p>
<p class="text-danger">Error or destructive message.</p>
<a class="text-slate-700 hover:text-primary" href="#">Readable link with hover color</a>

How it works

Text color utilities set the internal --fa-color variable. FrontAlign then applies the actual color value through its shared text-color engine.

[class*=" text-"],
[class^="text-"] {
  color: var(--fa-color) !important;
}

Hover utilities use --fa-hover-color and activate only on devices that support hover.

@media (hover: hover) {
  [class*="hover\:text-"]:hover {
    color: var(--fa-hover-color) !important;
  }
}

This keeps color behavior consistent across normal text, links, icons, headings, and component states.

Semantic colors

Semantic colors connect directly to design tokens. When the theme changes, the same class adapts globally.

<div class="bg-surface border rounded-2 p-4">
  <h3 class="text-primary">Project synced</h3>
  <p class="text-body">Your latest changes were saved successfully.</p>
  <p class="text-success">All systems are operational.</p>
</div>

State messaging

Use semantic colors for UI states instead of raw palette shades. This makes your interface easier to theme and maintain.

<div class="is-grid gap-3">
  <p class="text-success">Payment completed successfully.</p>
  <p class="text-danger">Your card could not be verified.</p>
  <p class="text-warning">Your subscription renews tomorrow.</p>
  <p class="text-info">Invoices are generated automatically.</p>
</div>

Palette colors

Palette colors provide precise shade control when semantic tokens are not enough. Each palette includes a base class and shade classes from 100 to 900, where 500 is represented by the unsuffixed base class.

<p class="text-blue">Blue 500 text</p>
<p class="text-blue-100">Blue 100 text</p>
<p class="text-blue-900">Blue 900 text</p>

Links and hover colors

Every semantic and palette text color has a matching hover utility. Hover activation is scoped to pointer devices with @media (hover: hover).

<nav class="is-flex gap-4">
  <a class="text-body hover:text-primary" href="#">Docs</a>
  <a class="text-body hover:text-primary" href="#">Components</a>
  <a class="text-body hover:text-primary" href="#">Templates</a>
</nav>

Semantic color tokens

Class	Token	Recommended use
`text-body`	`--body-text`	Default readable text.
`text-primary`	`--primary`	Brand emphasis, links, active UI.
`text-success`	`--success`	Successful actions and positive states.
`text-danger`	`--danger`	Errors, destructive actions, critical warnings.
`text-warning`	`--warning`	Caution, pending states, attention messages.
`text-info`	`--info`	Informational content and neutral notices.
`text-light`	`--light`	Text on dark or strong backgrounds.
`text-dark`	`--dark`	Strong text on light surfaces.
`text-white`	`--white`	White text for dark surfaces and overlays.

Hover color reference

Base class	Hover class
`text-primary`	`hover:text-primary`
`text-success`	`hover:text-success`
`text-danger`	`hover:text-danger`
`text-warning`	`hover:text-warning`
`text-info`	`hover:text-info`
`text-light`	`hover:text-light`
`text-dark`	`hover:text-dark`
`text-white`	`hover:text-white`

Palette naming pattern

Pattern	Example	Result
`text-`	`text-blue`	`--blue-500`
`text--`	`text-blue-700`	`--blue-700`
`hover:text-`	`hover:text-blue`	Changes to `--blue-500` on hover.
`hover:text--`	`hover:text-blue-700`	Changes to `--blue-700` on hover.

Available palettes

Palette	Base class	Shade classes	Common use
Slate	`text-slate`	`text-slate-100` to `text-slate-900`	Neutral text, metadata, captions.
Red	`text-red`	`text-red-100` to `text-red-900`	Errors, destructive actions, risk states.
Blue	`text-blue`	`text-blue-100` to `text-blue-900`	Links, brand accents, selected states.
Indigo	`text-indigo`	`text-indigo-100` to `text-indigo-900`	AI, dashboards, premium product accents.
Green	`text-green`	`text-green-100` to `text-green-900`	Success, growth, completed states.
Purple	`text-purple`	`text-purple-100` to `text-purple-900`	Creative, premium, feature highlights.
Yellow	`text-yellow`	`text-yellow-100` to `text-yellow-900`	Warnings, highlights, attention states.
Orange	`text-orange`	`text-orange-100` to `text-orange-900`	Promotions, alerts, warm emphasis.
Teal	`text-teal`	`text-teal-100` to `text-teal-900`	Info, calm product states, data UI.

Real-world examples

Hero section

<section class="bg-surface rounded-4 p-5">
  <p class="text-primary">FrontAlign UI Engine</p>
  <h1 class="text-dark">Build modern interfaces without framework chaos.</h1>
  <p class="text-slate-600">
    Utilities, components, runtime behavior, and semantic tokens in one lightweight engine.
  </p>
  <a class="button is-primary" href="#">Get Started</a>
</section>

Article card

<article class="bg-surface border rounded-2 p-4">
  <p class="text-slate-500">Updated 2 minutes ago</p>
  <h3 class="text-slate-900">Runtime-first interface engine</h3>
  <p class="text-slate-700">
    Build consistent UI with utilities, components, tokens, and runtime behavior.
  </p>
</article>

Pricing card

<div class="bg-surface border rounded-3 p-5">
  <p class="text-primary">Pro</p>
  <h3 class="text-dark">$29/month</h3>
  <p class="text-slate-600">For teams building production interfaces.</p>

  <ul class="is-grid gap-2">
    <li class="text-green-600">Unlimited projects</li>
    <li class="text-green-600">Premium UI blocks</li>
    <li class="text-green-600">Runtime components</li>
  </ul>

  <a class="button is-primary" href="#">Start building</a>
</div>

Dashboard metrics

<div class="is-grid md:grid-cols-3 gap-4">
  <div class="bg-surface border rounded-2 p-4">
    <p class="text-slate-500">Revenue</p>
    <strong class="text-green-600">+18.4%</strong>
  </div>

  <div class="bg-surface border rounded-2 p-4">
    <p class="text-slate-500">Errors</p>
    <strong class="text-red-600">12</strong>
  </div>

  <div class="bg-surface border rounded-2 p-4">
    <p class="text-slate-500">Deployments</p>
    <strong class="text-blue-600">42</strong>
  </div>
</div>

Alert banner

<div class="bg-red-100 border border-danger rounded-2 p-4">
  <h3 class="text-red-800">Authentication failed</h3>
  <p class="text-red-700">Check your API key and try again.</p>
</div>

Badges and labels

<div class="is-flex gap-2">
  <span class="bg-green-100 text-green-700 border border-success rounded-pill px-3 py-1">Live</span>
  <span class="bg-yellow-100 text-yellow-800 border border-warning rounded-pill px-3 py-1">Pending</span>
  <span class="bg-red-100 text-red-700 border border-danger rounded-pill px-3 py-1">Failed</span>
</div>

Icon color

<button class="button is-light is-flex align-items-center gap-2">
  <svg class="text-success" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
    <path fill="currentColor" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z" />
  </svg>
  <span>Verified</span>
</button>

Form validation

<form class="is-grid gap-2">
  <label for="email" class="text-slate-800">Email</label>
  <input id="email" class="form-control border-danger" type="email" value="wrong-email" />
  <p class="text-red-600">Please enter a valid email address.</p>
</form>

Hover navigation

<div class="is-flex gap-4">
  <a class="text-slate-700 hover:text-blue" href="#">Documentation</a>
  <a class="text-slate-700 hover:text-green-600" href="#">Status</a>
  <a class="text-slate-700 hover:text-indigo-600" href="#">Templates</a>
  <a class="text-slate-700 hover:text-red-600" href="#">Delete</a>
</div>

Accent palette combination

<section class="bg-surface border rounded-3 p-5">
  <p class="text-indigo-600">AI-assisted workflow</p>
  <h2 class="text-slate-900">Generate production-ready interfaces faster.</h2>
  <p class="text-teal-700">Runtime intelligence keeps components predictable.</p>
  <p class="text-indigo-600">Premium templates are powered by the same token system.</p>
</section>

Accessibility notes

Color should support meaning, not carry it alone. Always pair color with readable text that describes the state.

<!-- Correct: color + descriptive text -->
<p class="text-danger">
  Error: Password must contain at least 8 characters.
</p>

<!-- Avoid: color without context -->
<p class="text-danger">Invalid</p>

<!-- Better: full message makes the state clear regardless of color -->
<p class="text-danger">Invalid email address. Please enter a valid email.</p>

Use darker shades for text on light backgrounds and lighter shades for text on dark backgrounds.

<div class="bg-white p-4">
  <p class="text-slate-800">Readable on light backgrounds.</p>
</div>

<div class="bg-dark p-4">
  <p class="text-slate-100">Readable on dark backgrounds.</p>
</div>

Usage notes

Prefer semantic classes (text-primary, text-danger) for product UI states — they adapt automatically when the theme changes.
Use palette classes (text-indigo-600, text-teal-700) for visual styling, custom components, and design-specific accents.
Use text-body for all regular content text.
Avoid very light palette shades (text-yellow-200, text-slate-100) for small text on light backgrounds — contrast will be insufficient.
Prefer stronger shades (text-yellow-800, text-slate-700) for readable warning or muted text.
Text utilities work with inline SVG icons because most icons inherit currentColor — just apply the text utility to the <svg> element.
Hover utilities only activate on pointer devices via @media (hover: hover) — they will not fire on touch-only interfaces.
Do not combine multiple palette text- classes on the same element — the last declared class wins.