Color

Components use roles only. Each role has a light and a dark value, so a screen themes by switching modes, not colors. The palette below feeds the roles and is never used directly.

Background

What things sit on.

Role	Light	Dark	Use
bg `--v-bg`			Screen background.
bg-raised `--v-bg-raised`			Anything that sits on bg: cards, sheets, boxed rows, white icon buttons, the selected segment.
bg-glass `--v-bg-glass`			Translucent bg-raised for bars and surfaces over content (bottom nav, floating headers). Pair with blur-backdrop and shadow-raised (Figma: the glass-floating effect style).

Fill

Controls and chips inside content.

Role	Light	Dark	Use
fill `--v-fill`			Fill of controls inside content: fields, chips, tonal buttons, tracks, icon circles, calendar days.
fill-pressed `--v-fill-pressed`			Hover and pressed state of fill. Also the off track of a toggle.
fill-strong `--v-fill-strong`			Solid neutral fill: neutral avatars, neutral progress, the toast timer.

Ink

Text and icons.

Role	Light	Dark	Use
ink `--v-ink`			Headings, primary text and icons.
ink-muted `--v-ink-muted`			Body copy.
ink-subtle `--v-ink-subtle`			Captions, hints, placeholders, inactive tabs.
ink-disabled `--v-ink-disabled`			Disabled text and icons.

Line

Borders, dividers, focus.

Role	Light	Dark	Use
line `--v-line`			Hairlines, dividers, quiet borders.
line-strong `--v-line-strong`			Dashed outlines, control borders (checkbox, radio), the sheet grip.
focus-ring `--v-focus-ring`			Keyboard focus outline and focused field border.

Inverse

High-contrast surfaces. Flip in dark mode.

Role	Light	Dark	Use
inverse `--v-inverse`			High-contrast fill: inverse cards, toasts, the strong segment. Flips in dark mode.
inverse-raised `--v-inverse-raised`			Secondary buttons, inverse banners, controls on an inverse surface.
on-inverse `--v-on-inverse`			Text and icons on inverse.
on-inverse-muted `--v-on-inverse-muted`			Secondary text on inverse.
inverse-line `--v-inverse-line`			Borders on inverse.

Accent

Brand green.

Role	Light	Dark	Use
accent `--v-accent`			Brand green. The one main action, the user's own bubbles, selection outlines.
accent-strong `--v-accent-strong`			Pressed green, selected radio.
accent-tint `--v-accent-tint`			Soft green background: pending badges, banners, tinted cards and panels.
accent-tint-strong `--v-accent-tint-strong`			Stronger green tint: selected chips, disabled primary button.
accent-border `--v-accent-border`			Green borders and decorative shapes.
accent-text `--v-accent-text`			Green text on bg or bg-raised. The brand green itself fails contrast as text.
on-accent `--v-on-accent`			Text and icons on accent. Dark in both themes.
on-accent-muted `--v-on-accent-muted`			Secondary text on accent.
on-accent-tint `--v-on-accent-tint`			Text and icons on accent-tint and accent-tint-strong.
accent-on-inverse `--v-accent-on-inverse`			Green text on inverse surfaces (overlines, text buttons in toasts).
accent-overlay `--v-accent-overlay`			Translucent white on accent fills: tonal button on a solid card.
accent-on-code `--v-accent-on-code`			Highlighted tokens on code (action names, keys).
accent-gradient-end `--v-accent-gradient-end`			Outer stop of accent-gradient. Gradients only.

Accent 2

Brand purple.

Role	Light	Dark	Use
accent-2 `--v-accent-2`			Brand purple. The bot, selection, progress, checked controls.
accent-2-strong `--v-accent-2-strong`			Deep purple fill: strong badges, deep avatars, typing dots.
accent-2-tint `--v-accent-2-tint`			Soft purple background: bot bubbles, selected rows and tiles, maps.
accent-2-tint-strong `--v-accent-2-tint-strong`			Stronger purple tint: icon circles, image placeholders.
accent-2-border `--v-accent-2-border`			Purple borders and decorative shapes.
accent-2-text `--v-accent-2-text`			Purple text on bg or bg-raised.
on-accent-2 `--v-on-accent-2`			Text and icons on accent-2 and accent-2-strong. White in both themes.
on-accent-2-tint `--v-on-accent-2-tint`			Text and icons on accent-2-tint and accent-2-tint-strong.
accent-2-on-inverse `--v-accent-2-on-inverse`			Purple text and icons on inverse surfaces (toast icons).
accent-2-gradient-end `--v-accent-2-gradient-end`			Outer stop of accent-2-gradient. Gradients only.

Status

Success, warning, danger. Never brand colors.

Role	Light	Dark	Use
success `--v-success`			Success fill: dots, icons, solid badges.
success-tint `--v-success-tint`			Soft success background: badges, banners.
on-success-tint `--v-on-success-tint`			Text and icons on success-tint.
success-text `--v-success-text`			Success text on bg or bg-raised (confirmations, helper text).
warning `--v-warning`			Warning fill: dots, icons, solid badges.
warning-tint `--v-warning-tint`			Soft warning background: badges, banners.
on-warning-tint `--v-on-warning-tint`			Text and icons on warning-tint.
warning-text `--v-warning-text`			Warning text on bg or bg-raised (helper text).
danger `--v-danger`			Danger fill: dots, icons, solid badges.
danger-tint `--v-danger-tint`			Soft danger background: badges, banners.
on-danger-tint `--v-on-danger-tint`			Text and icons on danger-tint.
danger-text `--v-danger-text`			Danger text on bg or bg-raised (helper text, destructive text buttons).

Overlay and fixed

Over photos and fills; the same in both themes unless noted.

Role	Light	Dark	Use
on-trust `--v-on-trust`			Text on the trust gradient.
knob `--v-knob`			Toggle and progress knobs. White in both themes.
scrim `--v-scrim`			Overlay behind sheets and modals.
overlay-on-image `--v-overlay-on-image`			Translucent fill for controls over photos. Pair with a backdrop blur.
overlay-on-image-pressed `--v-overlay-on-image-pressed`			Hover and pressed state of overlay-on-image.
on-image `--v-on-image`			Text and icons over photos.
code `--v-code`			Code blocks and the actions log. The same in both themes.
on-code `--v-on-code`			Text on code.
on-code-muted `--v-on-code-muted`			Secondary text on code.
code-line `--v-code-line`			Dividers and inset rows on code.
trust-gradient-start `--v-trust-gradient-start`			Start of trust-gradient. Gradients only.
trust-gradient-end `--v-trust-gradient-end`			End of trust-gradient. Gradients only.
shadow-color-raised `--v-shadow-color-raised`			Shadow color for raised surfaces. None in dark mode: the lighter bg-raised carries the layering.
shadow-color-floating `--v-shadow-color-floating`			Shadow color for floating surfaces. None in dark mode.
highlight `--v-highlight`			Inner white highlight on light surfaces. None in dark mode.
highlight-soft `--v-highlight-soft`			Softer inner highlight. None in dark mode.
glow-accent-2 `--v-glow-accent-2`			Purple glow: the bot thinking or remembering.

Gradients

Each stays within one hue. Use the token, never a hand-written gradient.

accent-gradient--v-accent-gradientGreen fill: primary button, green icon button, solid cards.

accent-2-gradient--v-accent-2-gradientPurple fill: purple avatars and solid purple surfaces.

trust-gradient--v-trust-gradientTrust and verified badges.

Palette

Named by hue. Roles point here; components never do (npm run check fails if they do).

50100200300400500600700800900950 neutralgreenpurpleemeraldamberred

Base: --v-white #ffffff, outside the ramps.

All color tokens

CSS	Light	Dark	Notes
`--v-white`	`#ffffff`
`--v-neutral-50`	`#fcfcfc`
`--v-neutral-100`	`#f1f1f2`
`--v-neutral-200`	`#e6e6e9`
`--v-neutral-300`	`#d6d6db`
`--v-neutral-400`	`#a6a6ad`
`--v-neutral-500`	`#7e7e85`
`--v-neutral-600`	`#5a5a60`
`--v-neutral-700`	`#47474b`
`--v-neutral-800`	`#2a2a2c`
`--v-neutral-900`	`#1a1a1b`
`--v-neutral-950`	`#0a0a0a`
`--v-green-50`	`#f8fef3`
`--v-green-100`	`#f1fde7`
`--v-green-200`	`#dffac8`
`--v-green-300`	`#c2f39a`
`--v-green-400`	`#92ea52`
`--v-green-500`	`#66e515`
`--v-green-600`	`#4fbf0a`
`--v-green-700`	`#347d05`
`--v-green-800`	`#275f05`
`--v-green-900`	`#1a4004`
`--v-green-950`	`#102602`
`--v-purple-50`	`#fbf8ff`
`--v-purple-100`	`#f6f0ff`
`--v-purple-200`	`#ebdcfe`
`--v-purple-300`	`#d6bbfd`
`--v-purple-400`	`#bd92fd`
`--v-purple-500`	`#a467fc`
`--v-purple-600`	`#8a47ee`
`--v-purple-700`	`#6d2fcc`
`--v-purple-800`	`#52229b`
`--v-purple-900`	`#351665`
`--v-purple-950`	`#200d3d`
`--v-emerald-50`	`#f3fcf7`
`--v-emerald-100`	`#e7f8ef`
`--v-emerald-200`	`#c6efd9`
`--v-emerald-300`	`#8fdfb5`
`--v-emerald-400`	`#4cc98a`
`--v-emerald-500`	`#12b76a`
`--v-emerald-600`	`#079455`
`--v-emerald-700`	`#067647`
`--v-emerald-800`	`#085d3a`
`--v-emerald-900`	`#074d31`
`--v-emerald-950`	`#042e1d`
`--v-amber-50`	`#fffbf2`
`--v-amber-100`	`#fff6e5`
`--v-amber-200`	`#feecc4`
`--v-amber-300`	`#fdd68a`
`--v-amber-400`	`#fbb847`
`--v-amber-500`	`#f79009`
`--v-amber-600`	`#dc6803`
`--v-amber-700`	`#b54708`
`--v-amber-800`	`#93370d`
`--v-amber-900`	`#7a2e0e`
`--v-amber-950`	`#491c08`
`--v-red-50`	`#fff8f8`
`--v-red-100`	`#fef1f0`
`--v-red-200`	`#fddcd9`
`--v-red-300`	`#fbb5ae`
`--v-red-400`	`#f7857a`
`--v-red-500`	`#f04438`
`--v-red-600`	`#d92d20`
`--v-red-700`	`#b42318`
`--v-red-800`	`#912018`
`--v-red-900`	`#7a271a`
`--v-red-950`	`#491710`
`--v-bg`	`var(--v-neutral-50)`	`var(--v-neutral-950)`	Screen background.
`--v-bg-raised`	`var(--v-white)`	`var(--v-neutral-900)`	Anything that sits on bg: cards, sheets, boxed rows, white icon buttons, the selected segment.
`--v-bg-glass`	`rgba(255, 255, 255, .8)`	`rgba(26, 26, 27, .8)`	Translucent bg-raised for bars and surfaces over content (bottom nav, floating headers). Pair with blur-backdrop and shadow-raised (Figma: the glass-floating effect style).
`--v-fill`	`var(--v-neutral-100)`	`var(--v-neutral-800)`	Fill of controls inside content: fields, chips, tonal buttons, tracks, icon circles, calendar days.
`--v-fill-pressed`	`var(--v-neutral-200)`	`var(--v-neutral-700)`	Hover and pressed state of fill. Also the off track of a toggle.
`--v-fill-strong`	`var(--v-neutral-600)`	`var(--v-neutral-500)`	Solid neutral fill: neutral avatars, neutral progress, the toast timer.
`--v-ink`	`var(--v-neutral-950)`	`var(--v-neutral-50)`	Headings, primary text and icons.
`--v-ink-muted`	`rgba(0, 0, 0, .6)`	`rgba(255, 255, 255, .6)`	Body copy.
`--v-ink-subtle`	`rgba(0, 0, 0, .4)`	`rgba(255, 255, 255, .4)`	Captions, hints, placeholders, inactive tabs.
`--v-ink-disabled`	`rgba(0, 0, 0, .24)`	`rgba(255, 255, 255, .26)`	Disabled text and icons.
`--v-line`	`var(--v-neutral-100)`	`var(--v-neutral-800)`	Hairlines, dividers, quiet borders.
`--v-line-strong`	`var(--v-neutral-200)`	`var(--v-neutral-700)`	Dashed outlines, control borders (checkbox, radio), the sheet grip.
`--v-focus-ring`	`var(--v-purple-400)`	`var(--v-purple-400)`	Keyboard focus outline and focused field border.
`--v-inverse`	`var(--v-neutral-950)`	`var(--v-neutral-50)`	High-contrast fill: inverse cards, toasts, the strong segment. Flips in dark mode.
`--v-inverse-raised`	`var(--v-neutral-700)`	`var(--v-neutral-200)`	Secondary buttons, inverse banners, controls on an inverse surface.
`--v-on-inverse`	`var(--v-white)`	`var(--v-neutral-950)`	Text and icons on inverse.
`--v-on-inverse-muted`	`rgba(255, 255, 255, .6)`	`rgba(0, 0, 0, .55)`	Secondary text on inverse.
`--v-inverse-line`	`var(--v-neutral-600)`	`var(--v-neutral-300)`	Borders on inverse.
`--v-accent`	`var(--v-green-500)`	`var(--v-green-500)`	Brand green. The one main action, the user's own bubbles, selection outlines.
`--v-accent-strong`	`var(--v-green-600)`	`var(--v-green-600)`	Pressed green, selected radio.
`--v-accent-tint`	`var(--v-green-100)`	`var(--v-green-900)`	Soft green background: pending badges, banners, tinted cards and panels.
`--v-accent-tint-strong`	`var(--v-green-200)`	`var(--v-green-800)`	Stronger green tint: selected chips, disabled primary button.
`--v-accent-border`	`var(--v-green-300)`	`var(--v-green-700)`	Green borders and decorative shapes.
`--v-accent-text`	`var(--v-green-700)`	`var(--v-green-400)`	Green text on bg or bg-raised. The brand green itself fails contrast as text.
`--v-on-accent`	`var(--v-neutral-950)`	`var(--v-neutral-950)`	Text and icons on accent. Dark in both themes.
`--v-on-accent-muted`	`rgba(0, 0, 0, .6)`	`rgba(0, 0, 0, .6)`	Secondary text on accent.
`--v-on-accent-tint`	`var(--v-green-900)`	`var(--v-green-200)`	Text and icons on accent-tint and accent-tint-strong.
`--v-accent-on-inverse`	`var(--v-green-300)`	`var(--v-green-700)`	Green text on inverse surfaces (overlines, text buttons in toasts).
`--v-accent-overlay`	`rgba(255, 255, 255, .55)`	`rgba(255, 255, 255, .55)`	Translucent white on accent fills: tonal button on a solid card.
`--v-accent-2`	`var(--v-purple-500)`	`var(--v-purple-500)`	Brand purple. The bot, selection, progress, checked controls.
`--v-accent-2-strong`	`var(--v-purple-700)`	`var(--v-purple-600)`	Deep purple fill: strong badges, deep avatars, typing dots.
`--v-accent-2-tint`	`var(--v-purple-100)`	`var(--v-purple-900)`	Soft purple background: bot bubbles, selected rows and tiles, maps.
`--v-accent-2-tint-strong`	`var(--v-purple-200)`	`var(--v-purple-800)`	Stronger purple tint: icon circles, image placeholders.
`--v-accent-2-border`	`var(--v-purple-300)`	`var(--v-purple-700)`	Purple borders and decorative shapes.
`--v-accent-2-text`	`var(--v-purple-800)`	`var(--v-purple-300)`	Purple text on bg or bg-raised.
`--v-on-accent-2`	`var(--v-white)`	`var(--v-white)`	Text and icons on accent-2 and accent-2-strong. White in both themes.
`--v-on-accent-2-tint`	`var(--v-purple-900)`	`var(--v-purple-200)`	Text and icons on accent-2-tint and accent-2-tint-strong.
`--v-accent-2-on-inverse`	`var(--v-purple-300)`	`var(--v-purple-700)`	Purple text and icons on inverse surfaces (toast icons).
`--v-success`	`var(--v-emerald-500)`	`var(--v-emerald-500)`	Success fill: dots, icons, solid badges.
`--v-success-tint`	`var(--v-emerald-100)`	`var(--v-emerald-900)`	Soft success background: badges, banners.
`--v-on-success-tint`	`var(--v-emerald-800)`	`var(--v-emerald-200)`	Text and icons on success-tint.
`--v-success-text`	`var(--v-emerald-700)`	`var(--v-emerald-400)`	Success text on bg or bg-raised (confirmations, helper text).
`--v-warning`	`var(--v-amber-500)`	`var(--v-amber-500)`	Warning fill: dots, icons, solid badges.
`--v-warning-tint`	`var(--v-amber-100)`	`var(--v-amber-900)`	Soft warning background: badges, banners.
`--v-on-warning-tint`	`var(--v-amber-800)`	`var(--v-amber-200)`	Text and icons on warning-tint.
`--v-warning-text`	`var(--v-amber-700)`	`var(--v-amber-400)`	Warning text on bg or bg-raised (helper text).
`--v-danger`	`var(--v-red-500)`	`var(--v-red-500)`	Danger fill: dots, icons, solid badges.
`--v-danger-tint`	`var(--v-red-100)`	`var(--v-red-900)`	Soft danger background: badges, banners.
`--v-on-danger-tint`	`var(--v-red-800)`	`var(--v-red-200)`	Text and icons on danger-tint.
`--v-danger-text`	`var(--v-red-700)`	`var(--v-red-400)`	Danger text on bg or bg-raised (helper text, destructive text buttons).
`--v-on-trust`	`var(--v-white)`	`var(--v-white)`	Text on the trust gradient.
`--v-knob`	`var(--v-white)`	`var(--v-white)`	Toggle and progress knobs. White in both themes.
`--v-scrim`	`rgba(21, 21, 22, .32)`	`rgba(0, 0, 0, .6)`	Overlay behind sheets and modals.
`--v-overlay-on-image`	`rgba(255, 255, 255, .28)`	`rgba(255, 255, 255, .28)`	Translucent fill for controls over photos. Pair with a backdrop blur.
`--v-overlay-on-image-pressed`	`rgba(255, 255, 255, .4)`	`rgba(255, 255, 255, .4)`	Hover and pressed state of overlay-on-image.
`--v-on-image`	`rgba(255, 255, 255, .95)`	`rgba(255, 255, 255, .95)`	Text and icons over photos.
`--v-code`	`var(--v-neutral-950)`	`var(--v-neutral-950)`	Code blocks and the actions log. The same in both themes.
`--v-on-code`	`var(--v-neutral-50)`	`var(--v-neutral-50)`	Text on code.
`--v-on-code-muted`	`rgba(255, 255, 255, .6)`	`rgba(255, 255, 255, .6)`	Secondary text on code.
`--v-code-line`	`rgba(255, 255, 255, .1)`	`rgba(255, 255, 255, .1)`	Dividers and inset rows on code.
`--v-accent-on-code`	`var(--v-green-300)`	`var(--v-green-300)`	Highlighted tokens on code (action names, keys).
`--v-accent-gradient-end`	`#97e565`	`#97e565`	Outer stop of accent-gradient. Gradients only.
`--v-accent-2-gradient-end`	`rgba(164, 103, 252, .8)`	`rgba(164, 103, 252, .8)`	Outer stop of accent-2-gradient. Gradients only.
`--v-trust-gradient-start`	`#5ca3ff`	`#5ca3ff`	Start of trust-gradient. Gradients only.
`--v-trust-gradient-end`	`#8ba6ff`	`#8ba6ff`	End of trust-gradient. Gradients only.
`--v-shadow-color-raised`	`rgba(10, 10, 10, .04)`	`rgba(0, 0, 0, 0)`	Shadow color for raised surfaces. None in dark mode: the lighter bg-raised carries the layering.
`--v-shadow-color-floating`	`rgba(10, 10, 10, .05)`	`rgba(0, 0, 0, 0)`	Shadow color for floating surfaces. None in dark mode.
`--v-highlight`	`rgba(255, 255, 255, .8)`	`rgba(0, 0, 0, 0)`	Inner white highlight on light surfaces. None in dark mode.
`--v-highlight-soft`	`rgba(255, 255, 255, .4)`	`rgba(0, 0, 0, 0)`	Softer inner highlight. None in dark mode.
`--v-glow-accent-2`	`rgba(164, 103, 252, .56)`	`rgba(164, 103, 252, .56)`	Purple glow: the bot thinking or remembering.