Colors play a crucial role in establishing a consistent and harmonious visual language across our products and experiences, ensuring a cohesive look and feel. Please utilize the colors listed below to enhance the overall visual experience. Examples of usage will be explained below each section.

For information about colors used in icons, refer to Iconography.

In this design system, saturated colors derive from a base color, serving as the anchor for various hues. Achieving a visual balance between foreground and background, select different hues strategically. When referring to a color in this system, whether in conversation or documentation, use the assigned code, such as P500 or S600, as tokens to ensure consistency across the design. All colors are carefully checked to make sure they have enough contrast according to WCAG standards. The higher the number, the better the contrast. This is especially important for text, where a higher contrast makes it easier to read against both black and white backgrounds.

To read more about WCAG standards, follow the links in Accessibility.

The industry colors are intended for use in different editions within CET. They should be applied to highlight the edition, either in the title bar or on the splash screen. It's important to note that these colors are not meant to be incorporated into the overall UI. Our primary color for the CET interface is the standard Commercial Interiors color theme.

Primary Brand (also used semantically for information, neutral interaction)

For primary actions or elements that communicate the Configura brand. You'll use these tints in buttons, borders, hover backgrounds, and other key elements throughout the interface.



Neutral colors are often used for backgrounds, borders, and text. These can range from light to dark and generally aren’t tied to specific actions or meanings.



The success color serves as the designated alert color for successful actions or positive communication within our design system. Green is applied to confirm completed actions, convey success messages in alert banners, indicate online connectivity, and signify the addition or completion of tasks. While green is vibrant and effective in small proportions, it's important to use it wisely to avoid eye strain when incorporated in larger elements or quantities.

Usages:



The warning color, in yellow, is a crucial alert in our design system, signaling potential issues and conveying warnings effectively. It's vital to use yellow thoughtfully to prevent unnecessary alerts, especially in larger elements. Careful consideration ensures its selective application for significant alerts, prioritizing critical information without causing eye strain or unnecessary alarms for minor notifications.

Usages:

The red color serves as a prominent alert in our design system, specifically designated for highlighting errors, critical issues, and instances where actions result in the permanent removal of content or features. Red is strategically applied to draw immediate attention to potential problems, communicate error messages, and indicate actions that lead to lasting content removal. While red is impactful in conveying the need for immediate attention and the lasting consequences of certain actions, it's crucial to use it thoughtfully to avoid unnecessary alarm.

Usage: