Colors

Nuvex UI organizes color into semantic tokens for product meaning, surface tokens for structural context, and primitive palettes for tonal range. Use this page to choose the right layer, apply helper classes correctly, and reference the CSS variables behind each token family.

Open Theming OverviewOpen Surfaces

Background helpers

Background helpers such as .primary or .success apply background color with matching contrast treatment from the token system. Use them for fast prototyping, status emphasis, and simple UI states without custom CSS.

.primary
.secondary
.success
.warning
.error
.info

Text helpers

Use --text helpers when the surrounding surface should remain neutral but the content still needs semantic or tonal emphasis. These helpers affect text color, caret color, and SVG fill inheritance.

Use text color helpers to add emphasis without changing the surrounding surface. Apply .primary--text for primary actions, .secondary--text for supporting information, .success--text for success feedback, .warning--text for warnings, .error--text for errors, and .info--text for informational states. When a design needs more tonal range, use primitive helpers such as .blue-500--text, .teal-600--text, .purple-400--text, and .neutral-700--text.

Semantic colors

Use these tokens for actions, feedback, and status meanings that should remain consistent across the product.

primary

var(--e-color-primary)

secondary

var(--e-color-secondary)

tertiary

var(--e-color-tertiary)

success

var(--e-color-success)

warning

var(--e-color-warning)

error

var(--e-color-error)

info

var(--e-color-info)

Surface and utility tokens

Use these tokens for canvas, panels, fields, labels, borders, and disabled states so structural surfaces stay predictable across themes.

surface-canvas

var(--e-color-surface-canvas)

surface-base

var(--e-color-surface-base)

surface-raised

var(--e-color-surface-raised)

surface-subtle

var(--e-color-surface-subtle)

input

var(--e-color-input)

label

var(--e-color-label)

disabled

var(--e-color-disabled)

border

var(--e-color-border)

Primitive palettes

Use primitive palettes when a design needs additional tonal range beyond the semantic layer, whether through helper classes or direct CSS variable references.

red

red
red-50
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900

pink

pink
pink-50
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900

purple

purple
purple-50
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900

indigo

indigo
indigo-50
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900

blue

blue
blue-50
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900

cyan

cyan
cyan-50
cyan-100
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900

teal

teal
teal-50
teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900

green

green
green-50
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900

lime

lime
lime-50
lime-100
lime-200
lime-300
lime-400
lime-500
lime-600
lime-700
lime-800
lime-900

yellow

yellow
yellow-50
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900

amber

amber
amber-50
amber-100
amber-200
amber-300
amber-400
amber-500
amber-600
amber-700
amber-800
amber-900

orange

orange
orange-50
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900

brown

brown
brown-50
brown-100
brown-200
brown-300
brown-400
brown-500
brown-600
brown-700
brown-800
brown-900

neutral

neutral
neutral-50
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900