Skip to main content

Branding

Croma Design System is built with flexibility and scalability in mind, providing seamless support for two primary brands while remaining fully customizable to meet client-specific branding needs. Through a centralized configuration project file, we ensure that styles, colors, and typographies are consistently applied for each brand, offering a cohesive and polished experience across all digital products.

Croma Design System currently supports two distinct brands:

  • Circutor
  • Circontrol

Each brand has its own unique identity, reflected in its color palette, typography, and component styles.

The design system ensures that both brands maintain a consistent yet differentiated look, adapting seamlessly to their respective audiences and use cases. Below is an example of how the design system applies these styles to create distinct interfaces for each brand.

Brand configuration​

At the core of our design system lies a configuration project file, which defines the active brand and serves as the single source of truth for brand-specific styles. By selecting the desired brand in the configuration file, the design system automatically applies:

  • Color Palettes: Each brand has a unique color scheme, including primary, secondary, and neutral palettes.
  • Typography: Brand-specific fonts, weights, and sizes are dynamically assigned to match the identity of the selected brand.
  • Component Styles: All components inherit styles that align with the chosen brand, ensuring a consistent user experience.

This streamlined approach eliminates the need for manual overrides, enabling teams to switch between brands effortlessly during the design and development process.

Full customization​

While the design system is tailored to support our two main brands, it is also fully customizable to accommodate additional branding requirements. This flexibility empowers client brands to:

  • Define Unique Colors: Clients can customize the core color palette and generate shades that align with their identity.
  • Adjust Typography: Custom fonts, weights, and sizes can be added to reflect a brand’s personality.
  • Modify Components: Theming options allow clients to adapt components to better suit their needs while maintaining system coherence.

By leveraging the same foundational design tokens and principles, the design system ensures that customizations are both consistent and scalable.

Benefits of Multi-Brand support​

  • Efficiency: The configuration file enables rapid switching between brand styles, saving time during development.
  • Consistency: Ensures a unified look and feel across all applications, even with custom branding.
  • Flexibility: Supports diverse branding needs without compromising the integrity of the design system.

With multi-brand support and full customization capabilities, our design system adapts to a wide range of branding scenarios, empowering teams to deliver polished, brand-aligned experiences with ease.