Colors

Versa UI provides a robust, multi-theme semantic color system. Every color token automatically updates when switching themes or toggling between Light and Dark modes.

Brand Colors

Core colors representing the product identity, used for primary actions, links, and key highlights.

Primary

Used for primary call-to-actions, main interactive controls, and key brand highlights.

Secondary

Supporting brand color for secondary buttons, tags, badges, and complementary UI elements.

Tertiary

Optional accent colors used for charts, sub-navigation, selection indicators, and additional highlights.

Quaternary

Optional accent colors used for charts, category markers, feature badges, and additional highlights.

Neutral Colors

Foundation colors used for typography, backgrounds, surfaces, borders, and structural dividers.

Text

Typography colors for headings, body copy, captions, disabled labels, and inverse text.

Icon

Color tokens for UI icons, status glyphs, interactive controls, and static white symbols.

Surface

Background fills for cards, modals, popovers, dropdown menus, and component containers.

Outline

Border tokens for component perimeter rings, structural boundaries, and input fields.

Background

Canvas background colors for main page layouts and inverse dark/light background layers.

State Colors

Semantic state indicators for user feedback, validation, alerts, and system statuses.

Error

Semantic feedback for destructive actions, validation errors, danger alerts, and critical badges.

Warning

Cautionary feedback for pending states, attention banners, risk warnings, and status badges.

Success

Positive feedback for completed actions, success confirmations, valid inputs, and checkmarks.

Usage in Code

React Component Usage

Reference semantic color tokens using CSS variables directly in utility classes or component style props:

// ✅ Recommended: Semantic tokens in utility classes
<div className="bg-[var(--color-neutral-surface-subtle)] border border-[var(--color-neutral-outline-subtle)] p-6 rounded-lg">
  <h3 className="text-[var(--color-neutral-text-strong)] font-semibold">
    Card Title
  </h3>
  <p className="text-[var(--color-neutral-text-medium)] text-sm mt-1">
    Supporting description text using semantic neutral tokens.
  </p>
  <button className="bg-[var(--color-brand-primary-medium)] text-[var(--color-neutral-text-inverse)] px-4 py-2 rounded-md hover:bg-[var(--color-brand-primary-strong)] mt-4">
    Primary Action
  </button>
</div>

CSS Token Usage

If writing custom CSS rule blocks, reference semantic color design tokens via var():

.custom-action-card {
  background-color: var(--color-neutral-surface-medium);
  border: 1px solid var(--color-neutral-outline-subtle);
  color: var(--color-neutral-text-strong);
}

.custom-action-card:hover {
  background-color: var(--color-neutral-surface-strong);
  border-color: var(--color-brand-primary-medium);
}