Foundations
The building blocks of the design system — colors, typography, and spacing scale that ensure consistency across all Vroxal products.
Tokens
Design tokens are the single source of truth for all visual decisions in the Vroxal Design System. They encode colors, typography, spacing, borders, and radii — each following a consistent naming pattern that makes the intent immediately clear.
Color Tokens
Color tokens contains the tokens for the colors used on the design. Colors tokens defined based on the usage.
Typography Tokens
Typography tokens define the font family, size, weight, line-height, and letter-spacing used across every text style.
Scale Tokens
Scale tokens cover spacing, sizing, and icon dimensions, giving every layout a consistent rhythm and proportion.
Border Tokens
Border tokens define stroke width and radius values, keeping edges and corners consistent across components.
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 definition in the purest 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 is mapped to variables that have different breakpoints, 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.