Background Color

FrontAlign background color utilities let you apply design-token based colors directly in your markup. The system is built on CSS custom properties, so every utility stays connected to your theme, dark mode, and global design tokens.

Use background color utilities for sections, cards, badges, alerts, dashboards, empty states, navigation surfaces, feature blocks, and interactive hover states.

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

Quick reference

Class	Token	Common use
`bg-primary`	`--primary`	Brand surfaces, CTAs, selected states.
`bg-success`	`--success`	Positive feedback, completed states.
`bg-danger`	`--danger`	Errors, destructive actions, critical states.
`bg-warning`	`--warning`	Warnings, pending states, attention blocks.
`bg-info`	`--info`	Helpful notes, neutral information.
`bg-surface`	`--surface`	Page sections, neutral blocks, cards.
`bg-surface-raised`	`--surface-raised`	Raised cards, panels, dropdown surfaces.
`bg-blue-[shade]`	`100 – 900`	Decorative accents, badges, custom surfaces.
`bg-purple-[shade]`	`100 – 900`	Decorative accents, badges, custom surfaces.
`bg-indigo-[shade]`	`50 – 900`	Brand & action accents, interactive highlights.
`bg-teal-[shade]`	`100 – 900`	Calm accents, secondary success indicators.
`bg-green-[shade]`	`100 – 900`	Positive states, success badges, growth indicators.
`bg-yellow-[shade]`	`100 – 900`	Warnings, highlights, attention-drawing surfaces.
`bg-orange-[shade]`	`100 – 900`	Warm accents, promotional badges, energy states.
`bg-red-[shade]`	`100 – 900`	Errors, destructive states, alert surfaces.
`bg-pink-[shade]`	`100 – 900`	Decorative highlights, tags, feminine-tone surfaces.
`bg-slate-[shade]`	`100 – 900`	Neutral backgrounds, borders, muted UI elements.

Basic usage

Apply any semantic utility directly to an element. The utility sets the internal --fa-bg variable which the shared background rule applies.

<div class="bg-primary text-white p-4 rounded-md">
  Primary background
</div>

Surface background

Use bg-surface and bg-surface-rised for layout structure. They adapt to light and dark themes automatically.

<section class="bg-surface p-6 rounded-lg">
  <h2>Surface section</h2>
  <p>This block uses the current theme surface token.</p>
</section>

Hoverable panel

Every semantic and palette background has a matching hover:bg-* utility.

<div class="bg-blue-600 text-white p-4 rounded-md hover:bg-blue-700">
  Hoverable blue panel
</div>

Semantic backgrounds

Semantic backgrounds map to your theme tokens instead of fixed palette values. Use them when the color communicates meaning.

<div class="is-grid md:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="bg-primary text-white p-4 rounded-md">Primary</div>
  <div class="bg-success text-white p-4 rounded-md">Success</div>
  <div class="bg-danger text-white p-4 rounded-md">Danger</div>
  <div class="bg-warning text-dark p-4 rounded-md">Warning</div>
</div>

Palette backgrounds

Palette backgrounds give direct access to FrontAlign color scales. The base class uses the 500 shade; append a shade suffix for finer control.

<div class="bg-blue-100">Blue 100</div>
<div class="bg-blue-400">Blue 400</div>
<div class="bg-blue">Blue 500</div>
<div class="bg-blue-700">Blue 700</div>
<div class="bg-blue-900">Blue 900</div>

Shade scale

Use lighter shades for subtle surfaces and darker shades for strong emphasis.

<div class="is-grid md:grid-cols-3 gap-3">
  <div class="bg-blue-100 text-dark p-3 rounded-md">Soft</div>
  <div class="bg-blue text-white p-3 rounded-md">Base</div>
  <div class="bg-blue-900 text-white p-3 rounded-md">Deep</div>
</div>

Hover backgrounds

Use hover:bg-* for interactive states. Hover utilities only apply on devices that support hover behavior.

<button class="bg-primary hover:bg-blue-700 text-white p-3 rounded-md">
  Hover me
</button>

<button class="bg-slate-900 hover:bg-blue-600 text-white p-3 rounded-md">
  Deploy project
</button>

Real-world examples

Product card

<article class="bg-surface-rised p-5 rounded-lg shadow-sm">
  <span class="bg-blue-100 text-blue-700 p-1 rounded-sm">
    New
  </span>

  <h3>FrontAlign Pro</h3>
  <p>Build production interfaces with semantic utilities and runtime components.</p>

  <a class="bg-primary hover:bg-blue-700 text-white p-2 rounded-md">
    View details
  </a>
</article>

Status cards

<div class="is-grid md:grid-cols-3 gap-4">
  <div class="bg-success text-white p-4 rounded-md">
    Payment completed
  </div>

  <div class="bg-warning text-dark p-4 rounded-md">
    Subscription pending
  </div>

  <div class="bg-danger text-white p-4 rounded-md">
    Deployment failed
  </div>
</div>

Dashboard metric

<div class="bg-slate-900 text-white p-5 rounded-lg">
  <span class="bg-green-400 text-dark p-1 rounded-sm">
    +18%
  </span>
  <h3>Revenue</h3>
  <p>$24,800 this month</p>
</div>

Pricing highlight

<div class="is-grid md:grid-cols-3 gap-4">
  <article class="bg-surface p-5 rounded-lg">
    <h3>Starter</h3>
    <p>For small projects.</p>
  </article>

  <article class="bg-primary text-white p-5 rounded-lg shadow-lg">
    <span class="bg-white text-primary p-1 rounded-sm">Popular</span>
    <h3>Pro</h3>
    <p>For production teams.</p>
  </article>

  <article class="bg-surface p-5 rounded-lg">
    <h3>Enterprise</h3>
    <p>For advanced systems.</p>
  </article>
</div>

Alert stack

<div class="is-grid gap-3">
  <div class="bg-info text-white p-3 rounded-md">
    Your profile was updated successfully.
  </div>

  <div class="bg-warning text-dark p-3 rounded-md">
    Your trial expires soon.
  </div>

  <div class="bg-danger text-white p-3 rounded-md">
    Payment method required.
  </div>
</div>

Navigation item

<nav class="bg-surface-rised p-2 rounded-lg">
  <a class="bg-primary text-white p-2 rounded-md">Overview</a>
  <a class="hover:bg-surface text-dark p-2 rounded-md">Components</a>
  <a class="hover:bg-surface text-dark p-2 rounded-md">Utilities</a>
</nav>

Marketing band

<section class="bg-indigo-900 text-white p-6 rounded-xl">
  <span class="bg-indigo-400 text-dark p-1 rounded-sm">
    Runtime engine
  </span>
  <h2>One engine for CDN, NPM, React, and any stack.</h2>
  <p>Use semantic tokens, utility classes, and runtime behavior from the same system.</p>
</section>

Choosing the right utility

Use case	Recommended utility
Main CTA	`bg-primary`
Success message	`bg-success`
Danger action	`bg-danger`
Decorative hero accent	`bg-blue-700`
App card surface	`bg-surface-rised`
Interactive hover state	`hover:bg-*`

Accessibility notes

Background utilities only control the background. They do not automatically set text color. Always pair strong backgrounds with readable text colors and verify contrast ratios meet WCAG AA standards.

<div class="bg-blue-700 text-white p-4 rounded-md">
  Strong blue background with readable white text.
</div>

<div class="bg-yellow-300 text-dark p-4 rounded-md">
  Light yellow background with dark text.
</div>

Avoid low-contrast combinations where text color is too close to the background.

<div class="bg-yellow-100 text-white p-4 rounded-md">
  This is hard to read and should be avoided.
</div>

Usage notes

Use bg-surface and bg-surface-rised for application structure; they adapt to light and dark themes automatically.
Use semantic backgrounds (bg-primary, bg-success, bg-danger) when the color communicates a product meaning.
Use palette backgrounds (bg-blue-700, bg-indigo-900) for decorative or brand-specific visual details.
Prefer hover:bg-* for interactive states instead of writing custom CSS.
Always check text contrast when using strong or very light background colors.
Hover utilities only apply on devices that support hover behavior — they will not fire unexpectedly on touch-first devices.