Unify your design
Single source of truth
Welcome to the central design resource for our SaaS products. This system ensures consistency, boosts efficiency, and allows for scalability. Its structure uses a four-layer model: core values, alias groups, semantic roles, and UI components. Core values define alias groups, which inform semantic roles, which build components. This structure provides a cohesive design across all products.
Build on strong basics
explore the key components of our design system: color, typography, spacing, and radius for consistency across products.
  • Color
    Explore our defined color palettes and their applications.
  • Typography
    Understand the typefaces and styles used for clear communication.
  • Spacing
    Learn about the consistent spacing rules for visual harmony.
  • Radius
    Examine the defined corner radius values for consistent design.
Master the color palette
explore our color system with core primitives, mappings, semantic tokens, light and dark themes, and white-label overrides.
  • Core palette
    Explore fundamental color values.
  • Alias mappings
    Understand brand, neutral, and feedback color groups.
  • Semantic tokens
    Discover contextual roles for color application.
  • Theming support
    Implement light, dark, and white-label customization.
Define your typography
explore our typography system with a core font scale and roles for seamless remapping while maintaining component integrity.
  • Font scale
    The core font scale ranges from 10 to 48, providing a foundation for all text elements.
  • Semantic roles
    Roles such as display, h1, body-md, and label map to the core font values.
  • Remapping
    The system allows remapping without affecting component integrity.
  • Unified look
    This structure maintains a consistent appearance across all products.
Structure your spacing
discover our pixel-based spacing system, utilizing a 4px baseline grid to ensure layout consistency and visual harmony across all components.
  • Pixel-based scale
    Spacing uses a pixel-based scale from 2 to 80.
  • Baseline grid
    A 4px baseline grid ensures layout consistency.
Harmonize your radius
understand the usage levels and consistency of radius values across all components, creating a visually appealing and unified experience.
  • Consistency
    Maintain visual harmony through standardized radius values.
  • Usage
    Understand how radius is applied across all components.
  • Levels
    Define the different radius levels for various UI elements.
  • Visual appeal
    Enhance the user experience with consistent rounded corners.
Explore key ui elements
display key UI elements like buttons, inputs, cards, tables, and modals with consistent behavior, using semantic tokens for each component's states.
  • Button
    Demonstrates various states and semantic token usage.
  • Input
    Shows consistent behavior across all products.
  • Card
    Highlights the use of semantic tokens.
  • Table
    Ensures a unified user experience.
Customize your themes
discover light and dark modes, product branding, and white-label customization. Alias tokens allow brand overrides while keeping the semantic structure.
  • Modes
    Light and dark modes implementation.
  • Branding
    Product-specific branding capabilities.
  • Customization
    White-label customization options.
  • Adaptability
    Ensuring a consistent design system.
Govern your design system
understand versioning, change management, and contribution guidelines for our design ecosystem's consistency.
  • Versioning
    Learn about the system's versioning practices.
  • Change management
    Understand the process of implementing changes.
  • Contribution guidelines
    Explore the guidelines for contributing.
  • Integration
    Learn how new products integrate with the system.