Color

highly recommended following the guidelines for color is encouraged as it will improve the user experience 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 docid\ gen6xrrap5pilraqcdept how to use the colors 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 docid\ wfsmn utuozdt74 dr1sr industry colors 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 primary colors 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 brand primary 950 #17293a brand primary 900 #233f57 brand primary 800 #254a67 brand primary 700 #28577c brand primary 600 (base) #306b97 brand primary 500 #4287b5 brand primary 400 #65a3cb brand primary 300 #9bc2de brand primary 200 #cadeed brand primary 100 #e7f0f7 brand primary 50 #f4f7fb neutral colors 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 neutral black 100 \#000000 neutral 1000 #1a1a1a neutral 950 (base) #242424 neutral 900 #333333 neutral 800 \#545454 neutral 700 #666666 neutral 600 #808080 neutral 500 \#999999 neutral 400 \#b3b3b3 neutral 300 \#cccccc neutral 200 \#e6e6e6 neutral 100 \#f2f2f2 neutral 50 \#f7f7f7 neutral white \#ffffff success color 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 semantic success 950 \#0b2815 semantic success 900 #1d4a2d semantic success 800 #215a34 semantic success 700 #24713d semantic success 600 #29904a semantic success 500 (base) #35a458 semantic success 400 #5eca80 semantic success 300 #94e1ac semantic success 200 #c3efd0 semantic success 100 #e0f8e7 semantic success 50 #f2fbf5 warning colors 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 semantic warning 950 #461502 semantic warning 900 #792e0e semantic warning 800 #94370c semantic warning 700 #b64707 semantic warning 600 #db6904 semantic warning 500 #f88f08 semantic warning 400 #fdb122 semantic warning 300 (base) #fec84b semantic warning 200 #fedf89 semantic warning 100 #ffefc6 semantic warning 50 #fffaeb error colors 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 semantic error 950 #3e0e0c semantic error 900 #73221b semantic error 800 #8f251d semantic error 700 #b32c1b semantic error 600 (base) #ca391c semantic error 500 #e75428 semantic error 400 #ec784b semantic error 300 #f2a67f semantic error 200 #f7cbb1 semantic error 100 #fce7d8 semantic error 50 #fef4ee