Foundations
The building blocks of the design system — color, typography, and scale tokens that keep every Vroxal product consistent.
Colors
The Vroxal color system is built on a comprehensive palette organized by semantic meaning. Colors are theme-aware and adapt automatically between light and dark modes while maintaining accessibility standards. Every color is defined in three tiers:
Root Colors
The purest form of the palette — raw hex values with no semantic meaning attached, the foundation everything else builds on.
Brand Colors
Semantic color tokens mapped to root colors. A different brand can point the same semantic token at a different root color.
Mapped Colors
The colors your UI actually consumes — mapped from brand colors and applied directly in components.
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
Each style maps to breakpoint-aware variables, so typography adapts automatically to every screen size.
Scale
The Vroxal 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.