Skip to main content

Foundations

The foundations establish the core principles and resources that ensure consistency, scalability, and flexibility across all components. These elements define the visual language and functional behavior of the system, serving as the building blocks for design and development.

Base Tokens​

Base tokens are the raw, platform-agnostic values representing fundamental styles such as dimensions, colors, typography, and shadows. These immutable tokens form the backbone of the system, allowing for precise and predictable styling.

Colors​

Our color system is designed to be dynamic and adaptable. With CSS variables, colors are easily customizable and support runtime theming for light, dark, and custom modes. These tokens ensure a consistent palette that evolves seamlessly across different contexts and themes.

Typography​

Typography tokens maintain the visual hierarchy and readability of our system. They include font families, sizes, weights, line heights, and spacing, ensuring that text remains clear, accessible, and cohesive throughout.

Icons​

Icons are a critical part of the design system, enhancing usability and visual clarity. Each icon is built to align with the overall style and scale of the system, ensuring a polished and unified experience.

Semantic Tokens​

Semantic tokens translate base tokens into meaningful styles for specific UI elements. These include spacing, sizes, border-radius, and z-index values. By mapping abstract tokens to concrete use cases, semantic tokens simplify maintenance and enable consistent application across components.

Why Foundations Matter​

The foundation layer of the design system is where we define the rules and resources that make everything else possible. With a strong foundations, teams can build confidently, knowing the system will remain consistent and adaptable as it grows.