Introduction

This page contains all the core variables used across the design system, ensuring consistency in colors, typography, spacing, and more.

This section displays all core color variables used across the design system. Each color represents a predefined role within the visual hierarchy, ensuring consistency and accessibility across all elements. The primary, secondary, and white colors serve as the default template colors, forming the foundation of the system. These colors can be adjusted to align with different brand identities, maintaining flexibility while ensuring a cohesive design language. Additional colors may be introduced as needed, dynamically adapting across themes and breakpoints to support evolving design needs.

This section displays all predefined font size variables used across the design system. Each size is assigned a scalable unit that adjusts dynamically across breakpoints, ensuring optimal readability on different screen sizes. These variables establish a structured typography hierarchy, ranging from small text elements to large headings, maintaining consistency, clarity, and visual balance throughout the project.

This section displays all spacing variables used throughout the design system. Each block represents a predefined spacing unit applied as a margin, ensuring consistent and scalable spacing across the project. These values adapt dynamically across breakpoints to maintain precision, responsiveness, and visual harmony in layouts.

This section displays all line height variables used throughout the design system. Each value defines a predefined spacing ratio applied to text, ensuring proper vertical rhythm and readability. These values maintain consistent text legibility across different font sizes, dynamically adapting to various breakpoints for scalability and aesthetic balance.

This section displays all font weight variables used throughout the design system. Each weight defines a specific level of emphasis, ranging from thin to extra bold. These values ensure a structured typographic hierarchy, improving readability and visual impact while maintaining consistency across different text elements. The predefined weights adapt dynamically across breakpoints, ensuring scalability and accessibility.

This section displays all border radius variables used throughout the design system. Each block represents a predefined radius value applied to a square element, demonstrating how rounding is handled at different levels. These values ensure consistent corner rounding across components, adapting dynamically for scalability and aesthetic cohesion.

This section displays all predefined z-index variables used throughout the design system. The z-index property controls the vertical stacking order of elements, determining which elements appear above or below others. Negative values push elements behind, while higher positive values bring elements forward. To visually reinforce this hierarchy, text weight is used to indicate depth:

‍Negative values (z-neg-1, z-neg-2) elements that are sent behind.

‍The default value (z-default) representing a neutral stacking layer.

‍Positive values (z-1 to z-5) elements that stack on top.