Color
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.
Commercial Interiors #306B97
Material Handling #F9D24A
Kitchen & Bath #00773E
The essence of CET revolves around the primary color, a versatile blue presented in various shades. You'll encounter this color in buttons, borders, hover backgrounds, and other key elements throughout the interface.
P950 #17293A
P900 #233F57
P800 #254A67
P700 #28577C
P600 (BASE) #306B97
P500 #4287B5
P400 #65A3CB
P300 #9BC2DE
P200 #CADEED
P100 #E7F0F7
P50 #F4F7FB
Neutral colors serve primarily as backgrounds in both dark* and light themes within CET. Additionally, elements like borders can be derived from the neutral color palette. * We dont have dark themes currently, but if we decide to implement them in the future.
Black 100 #000000
Grey 90 #1A1A1A
Grey 86 (BASE) #242424
Grey 80 #333333
Grey 66 #545454
Grey 60 #666666
Grey 50 #808080
Grey 40 #999999
Grey 30 #B3B3B3
Grey 20 #CCCCCC
Grey 10 #E6E6E6
Grey 5 #F2F2F2
White 100 #FFFFFF
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:
- Confirming an action (e.g., Button)
- Messaging a success (e.g., In alert banner)
- Indicating connectivity (e.g., to show when something or someone is online)
- Displaying status, such as something being added or completed.
S950 #0B2815
S900 #1D4A2D
S800 #215A34
S700 #24713D
S600 #29904A
S500 (BASE) #35A458
S400 #5ECA80
S300 #94E1AC
S200 #C3EFD0
S100 #E0F8E7
S50 #F2FBF5
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:
- Warnings while performing an action
- Warning messages
- Medium to blocker system events
W950 #461502
W900 #792E0E
W800 #94370C
W700 #B64707
W600 #DB6904
W500 #F88F08
W400 #FDB122
W300 (BASE) #FEC84B
W200 #FEDF89
W100 #FFEFC6
W50 #FFFAEB
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:
- For remove or delete actions
- Error messages
- To show busy status
- Displaying status, such as something have failed or been removed.
- Major to critical system events
E950 #3E0E0C
E900 #73221B
E800 #8F251D
E700 #B32C1B
E600 (BASE) #CA391C
E500 #E75428
E400 #EC784B
E300 #F2A67F
E200 #F7CBB1
E100 #FCE7D8
E50 #FEF4EE
We don't have dark mode at the moment, but the colors have been developed to also be used the day we decide to introduce dark mode into CET.