Skip to main content

Configuration

Croma Design System offers two flexible methods for configuring colors, catering to different levels of customization needs. These options are designed to make it easy for external clients to align the UI with their brand identity.

  • Using a Brand: This approach allows you to set all colors for a brand in a single step by defining a brand variable. This method is perfect for quick and cohesive theming, as it automatically applies a predefined palette associated with the brand.
  • Full Customization: For more granular control, you can individually customize each color variable. This option provides the flexibility to fine-tune every aspect of the color scheme, ensuring it perfectly meets your specific requirements.

Using a brand​

When importing the bundle or core in your scss project, custom colors can be configured. Using the $config-brand variable, the branding colors are predefined, and manual configuration is unnecessary.

Using predefined brand
@use '@circutor/ui/scss/common/cds-bundle' with ( 
    $config-brand: 'circutor';
);

We strongly recommend to use the $config-brand variable to ensure brand consistency across all components. Color costumization is only recommended for specific use cases for costumers that need to use their own brand colors.

Full Customization​

If you want to customize you project with your own colors, you can override the config color variables individually instead of using the $config-brand variable.

Custom configuration
@use '@circutor/ui/scss/common/cds-bundle' with ( 
    //Set your custom config-variables here
);

Foreground and background​

The foreground and background colors establish the primary contrast foundation for both dark and light modes.

  • The foreground color sets the primary color for main text and essential content, ensuring readability and contrast.
  • The background color defines the main background color and its tonal variations.

Each of these core colors is provided in two versions: one for light mode and the other for dark mode.

//Light mode
$config-light-foreground: #20262C;
$config-light-background: #fbfafa;

//Dark mode
$config-dark-foreground: #dbdfe0;
$config-dark-background: #1f2020;

These two core colors form the foundation for the neutral palette and are used to generate all color shades by blending them with the main colors through color.mix().

Branding Primary Color​

The primary branding color defines the core identity of the brand, representing its key visual element.

//Light mode
$config-light-accent-primary: #e40040;

//Dark mode
$config-dark-accent-primary: #56d8ff;

Only one primary color is supported, ensuring a consistent and recognizable brand presence across all design elements.

Feedback Colors​

Feedback colors communicate different states or messages within the system. They provide clear visual cues for user interaction and feedback.

The system includes four feedback types:

  • Info: To convey informational messages.
  • Success: To indicate positive outcomes or achievements.
  • Alert: For warnings or attention-required scenarios.
  • Error: To signal issues or critical problems.
//Light mode
$config-light-feedback-information: #4c8fc5;
$config-light-feedback-success: #00B388;
$config-light-feedback-alert: #e08c00;
$config-light-feedback-error: #ca3f38;

//Dark mode
$config-dark-feedback-information: #51A5E9;
$config-dark-feedback-success: #01c698;
$config-dark-feedback-alert: #eea72e;
$config-dark-feedback-error: #d4544e;

Alternative Colors​

Alternative colors are used for components like badges, avatars, and more. The system includes ten alternative colors, offering flexibility for diverse use cases and ensuring a vibrant, adaptable design system.

//Light mode
$config-light-alternative-1: #FCB150;
$config-light-alternative-2: #DD6A37;
...

//Dark mode
$config-dark-alternative-1: #F3B86C;
$config-dark-alternative-2: #E8875D;
...