Colors

Aurora's color system uses semantic tokens built on top of color primitives. Always reach for the semantic name (bg-cta, text-error) rather than a primitive (bg-blue-500, text-red-600) — the semantic tokens stay consistent across themes and refactors; primitives don't.

The semantic tokens are organized by:

• Purpose — background (bg-*), text (text-*), border (border-*), ring (ring-*)
• Context — primary, secondary, cta, success, warning, error, missing, ai
• State — default, -hover, -active, -disabled, -inverse

• bg-cta text-cta-inverse — semantic tokens that travel with the design system

• bg-blue-600 text-white — primitive colors that bypass the system

Background colors

Use with the bg- prefix. Most contexts also expose -hover, -secondary, and -inverse variants.

bg-primary

Default surface

bg-secondary

Subtle surface

bg-tertiary

Branded blue tint

bg-cta

Primary action

bg-success

Success state

bg-warning

Warning state

bg-error

Error state

bg-missing

Missing required

bg-ai

AI features

bg-disabled

Disabled state

Each context also has a -hover, -secondary (a softer tint), and -inverse (for dark surfaces). For example: bg-cta-hover, bg-success-secondary, bg-primary-inverse.

Text colors

Use with the text- prefix. Note: semantic text colors (success, warning, error, missing, ai) are exposed via -primary / -secondary / -core rather than as bare names — there's no text-error, only text-error-primary (and friends).

text-primary — default body copy

text-secondary — supporting copy

text-disabled — disabled state

text-cta — links and primary actions

text-success-primary — confirmation messages

text-warning-primary — non-blocking warnings

text-error-primary — error messages

text-missing-primary — missing required

text-ai-primary — AI-related copy

Border colors

Use with border- (and ring- shares the same tokens).

border-primary

border-secondary

border-tertiary

border-focus

border-success

border-warning

border-error

border-missing

border-cta

border-ai

Aspect colors

Domain-specific colors used for ESG categories. Each aspect color works as bg-*, text-*, and border-*.

aspect-energy

aspect-ghg

aspect-water

aspect-waste

aspect-certifications

aspect-tenant-engagement

aspect-esg-risk

Ghost & overlay variants

Two semi-transparent variants exist on most semantic tokens:

• Ghost — -ghost suffix, ~20% opacity. Use for subtle hover backgrounds and badges. Examples: bg-cta-ghost, bg-primary-ghost.
• Overlay — -overlay-* suffix, predefined transparency. Use for modal backdrops and layered surfaces. Example: bg-overlay-black-light.

State suffixes

Most semantic tokens support these state variants:

Suffix	Use for
(none)	Default state
-hover	Hover state
-active	Active / pressed state
-secondary	Softer tint of the same hue
-core	Stronger tint (e.g. bg-warning-core)
-inverse	On dark surfaces
-inverse-hover	Hover on dark surfaces

Not every suffix is available on every token — check src/theme/custom-colors.js for the canonical list.

See it in Figma

Aurora design tokens — Figma