Semantic Tokens
Purpose-based color naming system
Semantic tokens provide meaningful names for colors based on their purpose, not their appearance.
Action
primarycyanPrimary color for main actions and highlights (primary buttons, form submissions, state-changing actions)
Usage:
--color-primaryprominentamberSpecially decorated action elements for more prominent cosmetic appearance (hero CTAs, featured product actions)
Usage:
--color-prominentsecondaryemeraldSecondary color for supporting actions (secondary buttons, supporting UI elements)
Usage:
--color-secondaryInternal
neutralpaperInternal Nuxt UI neutral variant — not for direct use
Usage:
--color-neutralNavigation
navigationbrandPrimary actionable elements that cause navigation to another location (links, buttons, breadcrumbs, menu items)
Usage:
--color-navigationPhase
phase-activeskyIn progress
Usage:
--color-phase-activephase-archivedspaceSoft-deleted or moved to cold storage
Usage:
--color-phase-archivedphase-doneemeraldCompleted successfully
Usage:
--color-phase-donephase-expiredyellowTime-based termination
Usage:
--color-phase-expiredphase-failedroseTerminal failure
Usage:
--color-phase-failedphase-idlepaperNot started or pending
Usage:
--color-phase-idlephase-queuedindigoWaiting in queue
Usage:
--color-phase-queuedphase-retryvioletRe-processing after a transient failure
Usage:
--color-phase-retryPolarity
polarity-mixedamberMixed or ambiguous judgment (partial, conflicting, debatable)
Usage:
--color-polarity-mixedpolarity-negativeredNegative judgment (bad, false, rejected, denied)
Usage:
--color-polarity-negativepolarity-neutralpaperNeutral or unknown judgment (N/A, unresolved, no opinion)
Usage:
--color-polarity-neutralpolarity-positivegreenPositive judgment (good, true, resolved, approved)
Usage:
--color-polarity-positiveQuality
quality-badorangeBelow standard quality (0.15–0.50)
Usage:
--color-quality-badquality-excellentgreenStrong performance (0.80–1.0)
Usage:
--color-quality-excellentquality-goodlimeMeets standard (0.65–0.80)
Usage:
--color-quality-goodquality-insufficientredUnacceptable quality (0–0.15)
Usage:
--color-quality-insufficientquality-nonepaperNo data or not evaluated
Usage:
--color-quality-nonequality-perfectbrandFlawless quality (exactly 1.0)
Usage:
--color-quality-perfectquality-regularamberBelow expectations (0.50–0.65)
Usage:
--color-quality-regularStatus
errorredError states and destructive actions
Usage:
--color-errorinfoskyInformational messages and neutral actions
Usage:
--color-infosuccessgreenSuccess states and confirmations
Usage:
--color-successwarningorangeWarning states and cautions
Usage:
--color-warningUi
brandbrandBrand color for the primary brand logo and branding
Usage:
--color-brandpaperpaperNeutral grayscale color for text, borders, and backgrounds, in light mode
Usage:
--color-paperspacespaceNeutral grayscale color for text, borders, and backgrounds, in dark mode
Usage:
--color-space