Foundations
The building blocks of the design system — colors, typography, and spacing scale that ensure consistency across all Vroxal products.
Colors
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.
Typography
The Vroxal typography system provides a comprehensive set of predefined semantic mappings and typography classes. All text must use these predefined scales — never choose size based on visual preference. Choose based on semantic intent.
19 Text Styles
A complete type scale with pre-defined styles for headings, body, captions, and more — ready to use across your designs.
Controlled from variables
Typography is driven by variables, making it easy to update and maintain consistency at scale.
Responsiveness baked in
Typography are mapped to the variables that have different break points making the typography responsive for every screen size.
Scale
The VD scale system provides a comprehensive set of predefined tokens for spacing, borders, radius, and icons. All sizing must be applied via these tokens — never choose size based on visual preference. Choose based on semantic intent and layout rhythm.
Spacing
Consistent spacing tokens for padding, margins, and gaps to keep your layouts aligned and visually balanced.
Border width
Predefined border width values to maintain uniform stroke styling across all components and UI elements.
Border Radius
A set of border radius tokens for consistent corner rounding, from subtle to fully rounded.