Colors
Semantic color tokens on the theme. Retune globals and highlights and product UI follows.
Color ships as CSS custom properties on your theme. Start with global tokens for most text, backgrounds, and surfaces. Pair them with highlights when color carries meaning, and with primitives (--color-*) when the swatch must stay the same in light and dark.
@viraui/react already binds to these names. Retune the theme and chrome, actions, and status follow.
Global
--global-* are the main colors for product UI: page and panel backgrounds, body and muted text, primary actions, borders, disabled states, and similar chrome. Names are plain and job-shaped (--global-background, --global-text, --global-primary, …) so you can pick the right token without memorizing a palette.
Use them for most custom surfaces that should track brand chrome across modes. ViraUI parts already read the same names, so you do not restyle those controls with globals. Combine globals with highlights for status or accent meaning, and with primitives when a color must not flip between light and dark.
foreground
Default text and icons on the page background
background
Page and shell fill
primary
Brand action color for filled buttons and key accents
muted
Secondary, de-emphasized text
interactive text
Links and interactive labels
disabled foreground
Text on disabled controls
disabled background
Fill behind disabled controls
contrast
Subtle separators and reduced-contrast chrome
outline
Focus and outline strokes tied to foreground
.feature-callout {
border-left: 3px solid var(--global-primary);
background: oklab(from var(--global-primary) l a b / 8%);
}Highlight
Named status and accent colors for meaning: success, danger, tags, decorative badges. Components such as Badge, Chip, Text tones, and Beam map prop colors onto these tokens (red → --highlight-red, and so on).
Reach for a highlight when the color carries meaning next to global chrome, not as a replacement for backgrounds and body text.
gray
slate
yellow
green
blue
red
cyan
purple
indigo
acid
salmon
magenta
.invoice-overdue-banner {
color: var(--highlight-red);
background: oklab(from var(--highlight-red) l a b / 12%);
}Primitives
--color-{palette}-{step} are stepped ramps (steps 0–70 by tens). Values stay fixed across light and dark; they do not flip with data-mode. Built-in themes ship named palettes; browse the ramps below when you author a sheet or need a mode-stable swatch beside globals and highlights.
On a custom theme, themes also wire these ramps into --global-* and --highlight-*. Prefer those semantics for mode-aware chrome; use --color-* in product CSS when the color must stay constant between modes.
acid
0
10
20
30
40
50
60
70
blue
0
10
20
30
40
50
60
70
cyan
0
10
20
30
40
50
60
70
green
0
10
20
30
40
50
60
70
indigo
0
10
20
30
40
50
60
70
magenta
0
10
20
30
40
50
60
70
purple
0
10
20
30
40
50
60
70
red
0
10
20
30
40
50
60
70
salmon
0
10
20
30
40
50
60
70
slate
0
10
20
30
40
50
60
70
stone
0
10
20
30
40
50
60
70
yellow
0
10
20
30
40
50
60
70
Tune
App Studio in ViraUI Pro is the easiest path when you want to reshape color: tweak globals and highlights on a live ViraUI canvas, share the theme with the team, and export CSS that already matches the contract. Drop the export into the app as a custom theme. Components keep reading --global-* / --highlight-* and adapt.
Without Studio, paste a prompt into your agent or edit those semantics on a custom theme sheet (or switch a built-in preset). Wire primitives into semantics on the sheet when you author a brand, not as one-off product CSS.
Shift the theme primary toward our brand blue. Light and dark mode should both still look good.Last updated on