Colors
Reference color palettes and semantic tokens with practical usage guidance for consistent UI theming.
Overview
The VD color system is built on a comprehensive palette of colors organized by semantic meaning. Colors are theme-aware and adapt automatically between light and dark modes while maintaining accessibility standards. The colors are divided into three tiers:
Root colors
Root colors, contains color definitin in the pureset form of colors. In this tier, the color tokens are mapped to the hex color value.
Brand colors
Brand colors contains the mapping of semantic color tokens to the root colors. The different brands can have different mapped root colors for same semantic color.
Mapped colors
Mapped colors are the actual colors that are used in the UI. These colors are mapped to the brand colors and are used to create the UI.
All the colors are not available from mapped variables.Colors that doesn't depends on dark and light mode like Opaque colors (Black and White) are not available on mapped tokens, those are available from brand tokens
Root Color Palettes
BlueGlow
Grey
Green
Red
Orange
Blue
Opaque White
Opaque Black
Opaque Neutral
Brand Color Palettes
The brand color palettes can be different based on the brand. You can change the color for different brand from the theme configuration on the navbar.
Primary
Error
Success
Warning
Info
Neutral
White
Black
Utilities
Mapped Color Palettes
The brand color palettes can be different based on the theme (Light and dark). You can change the color for different theme from the theme configuration on the navbar.
Content
Default
Primary
Success
Error
Warning
Info
Neutral
Background
Default
Primary
Success
Error
Warning
Info
Neutral
Overlay
Border
Default
Primary
Success
Neutral
Error
Warning
Info
Usage Guidelines
Basic Color Implementation
Apply color tokens using CSS custom properties:
colors-usage.css
Copy code
Theme Switching
Toggle between light and dark themes by setting the data-theme attribute on the root HTML element. All semantic colors automatically adjust.
theme-switching.html
Copy code
Best Practices
General Rules
- All colors must be applied using VD tokens — never hardcode hex, RGB, or HSL values in CSS, HTML, or component templates.
- Apply colors semantically, reflecting status, state, or purpose (e.g., use
errortokens for errors, not a raw red). - Differentiate usage across text, background, border, and icon categories — each has its own set of tokens.
- Always prefer mapped tokens over brand or root tokens in application code, as they are theme-aware.
Token Naming Convention
All mapped color tokens follow a consistent naming pattern:
token-pattern
Copy code
Category:
content, background, border
Semantic:
default,primary,success,error,warning,info,neutral
Variant:
base,secondary,tertiary,disabled,on-base/on-secondary/on-tertiary,base-hover/ secondary-hover/tertiary-hover where applicable
Content Colors
Use --vd-color-content-{semantic}-{variant} tokens for both text and icons. Available semantics: default, primary, success, error, warning, info, neutral. Each offers base, secondary, tertiary variants. The default semantic also includes a disabled variant.
Use -on-* tokens (e.g., --vd-color-content-primary-on-base) when placing content on colored backgrounds to ensure proper contrast.
Background Colors
Use --vd-color-background-{semantic}-{variant} tokens for surfaces and containers. Each semantic (primary, success, error, warning, info, neutral) provides base, secondary, tertiary variants plus corresponding *-hover states. Use --vd-color-background-overlay-default for modals, tooltips, and overlay backdrops.
Border Colors
Use --vd-color-border-{semantic}-{variant} tokens for all borders and outlines. Each semantic provides base, secondary, and tertiary variants. The default semantic also includes a disabled variant for inactive UI elements.
White & Black Tokens
For opaque color scales, use --vd-color-white-100 through --vd-color-white-1000 and --vd-color-black-100 through --vd-color-black-1000. These are available from brand tokens only (not mapped), as they do not change between light and dark themes. Never use raw hex codes.
Do's and Don'ts
do.css
Copy code
dont.css
Copy code