Color palette goals
- Create a cohesive look across the entire suite of products
- Meet AA standards for WCAG
- Shades to be based on percentages for ease of use within code
- Have a vibrant secondary palette for improved illustrations
- Consistent usage of one primary color throughout all products
Primary Branding Colors
Zywave Green
Zywave green will remain our brand color to ensure continued recognition. However, the usage will be minimal within products. New usage guidelines should be put in place.
Blue 500
All products will take on the Blue 500 creating a consistent look across our entire suite of products. This blue was chosen for a number of reasons
Background, Surface and Text Colors
These colors will also be updated to match the new palette
- Background - Gray 50 or #F4F4F6
- Surface - White or #FFFFFF
- Text - Gray 800 or #31313A
Expanded Color Palette
The expanded palette should be used in illustrations and other minor places throughout the UI that brings attention to certain elements. Meaning is assigned to certain colors that should be considered when using the color in illustrations and throughout the UI.
Gray is used in a variety of places throughout our products and is often used to create subtle variations in shade and therefore has a larger palette compared to the other secondary colors.
We have updated the color palette to use the HSL color system in order to maintain some of the saturation throughout each palette. With this update, only the lightness value will increase/decrease by 10% for each tint/shade of a color. Below are listed the HEX color values
Blue | |||||
| Level | Color | HEX | HSL | RGB | CSS variable |
| 50 | #E5EFFA | (212, 69%, 94%) | (229, 239, 250) | --zui-blue-50 | |
| 100 | #D0E2F6 | (212, 69%, 89%) | (208, 226, 246) | --zui-blue-100 | |
| 200 | #A5C7EE | (212, 69%, 79%) | (165, 199, 238) | --zui-blue-200 | |
| 300 | #79ACE6 | (212, 69%, 69%) | (121, 172, 230) | --zui-blue-300 | |
| 400 | #4E92DF | (212, 69%, 59%) | (78, 146, 223) | --zui-blue-400 | |
| 500 | #2777D3 | (212, 69%, 49%) | (39, 119, 211) | --zui-blue-500 | |
| 600 | #1F5EA8 | (212, 69%, 39%) | (31, 95, 168) | --zui-blue-600 | |
| 700 | #17477D | (212, 69%, 29%) | (23, 71, 125) | --zui-blue-700 | |
Green | |||||
| Level | Color | HEX | HSL | RGB | CSS Variable |
| 100 | #B8E2A6 | (102, 51%, 77%) | (215, 239, 205) | --zui-green-100 | |
| 200 | #B8E2A6 | (102, 51%, 77%) | (184, 226, 166) | --zui-green-200 | |
| 300 | #9AD680 | (102, 51%, 67%) | (154, 214, 128) | --zui-green-300 | |
| 400 | #7BC959 | (102, 51%, 57%) | (123, 201, 89) | --zui-green-400 | |
| 500 | #5FB53B | (102, 51%, 47%) | (95, 181, 59) | --zui-green-500 | |
| 600 | #4B8E2E | (102, 51%, 37%) | (75, 142, 46) | --zui-green-600 | |
| 700 | #376822 | (102, 51%, 27%) | (55, 104, 34) | --zui-green-700 | |
Aqua | |||||
| Level | Color | HEX | HSL | RGB | CSS Variable |
| 100 | #C6F0EE | (167, 59%, 86%) | (198, 240, 238) | --zui-aqua-100 | |
| 200 | #9EE6E1 | (167, 59%, 76%) | (158, 230, 225) | --zui-aqua-200 | |
| 300 | #75DBD5 | (167, 59%, 66%) | (117, 219, 213) | --zui-aqua-300 | |
| 400 | #4DD1C8 | (167, 59%, 56%) | (77, 209, 200) | --zui-aqua-400 | |
| 500 | #30BBB1 | (167, 59%, 46%) | (48, 187,177) | --zui-aqua-500 | |
| 600 | #26928B | (167, 59%, 36%) | (38, 146, 139) | --zui-aqua-600 | |
| 700 | #1B6964 | (167, 59%, 26%) | (27, 105, 100) | --zui-aqua-700 | |
Purple | |||||
| Level | Color | HEX | HSL | RGB | CSS Variable |
| 100 | #E0D7EF | (263, 42%, 89%) | (224, 215, 239) | --zui-purple-100 | |
| 200 | #C4B3E0 | (263, 42%, 79%) | (196, 179, 224) | --zui-purple-200 | |
| 300 | #A88FD1 | (263, 42%, 69%) | (168, 143, 209) | --zui-purple-300 | |
| 400 | #8C6BC2 | (263, 42%, 59%) | (140, 107, 194) | --zui-purple-400 | |
| 500 | #6F48B0 | (263, 42%, 49%) | (113, 72, 177) | --zui-purple-500 | |
| 600 | #5A3A8D | (263, 42%, 39%) | (90, 58, 141) | --zui-purple-600 | |
| 700 | #432B69 | (263, 42%, 29%) | (67, 43, 105) | --zui-purple-700 | |
Rose | |||||
| Level | Color | HEX | HSL | RGB | CSS Variable |
| 100 | #F3CEE5 | (323, 60%, 88%) | (243, 206, 229) | --zui-rose-100 | |
| 200 | #E9A5CF | (323, 60%, 78%) | (233, 165, 207) | --zui-rose-200 | |
| 300 | #DE7CB9 | (323, 60%, 68%) | (222, 124, 185) | --zui-rose-300 | |
| 400 | #D454A3 | (323, 60%, 58%) | (212, 84, 163) | --zui-rose-400 | |
| 500 | #C6318C | (323, 60%, 48%) | (196, 49, 140) | --zui-rose-500 | |
| 600 | #9B276E | (323, 60%, 38%) | (155, 39, 110) | --zui-rose-600 | |
| 700 | #721D51 | (323, 60%, 28%) | (114, 29, 81) | --zui-rose-700 | |
Red | |||||
| Level | Color | HEX | HSL | RGB | CSS Variable |
| 100 | #FAC9BD | (12, 85%, 86%) | (250, 201, 189) | --zui-red-100 | |
| 200 | #F6A38E | (12, 85%, 76%) | (246, 163, 142) | --zui-red-200 | |
| 300 | #F27C5F | (12, 85%, 66%) | (242, 124, 95) | --zui-red-300 | |
| 400 | #EE562F | (12, 85%, 56%) | (238, 86, 47) | --zui-red-400 | |
| 500 | #D93911 | (12, 85%, 46%) | (217, 57, 18) | --zui-red-500 | |
| 600 | #AA2D0E | (12, 85%, 36%) | (170, 45, 14) | --zui-red-600 | |
| 700 | #7B200A | (12, 85%, 26%) | (123, 32, 10) | --zui-red-700 | |
Orange | |||||
| Level | Color | HEX | HSL | RGB | CSS Variable |
| 100 | #FDE5D3 | (25, 90%, 91%) | (253, 229, 211) | --zui-orange-100 | |
| 200 | #FAC7A3 | (25, 90%, 81%) | (250, 199, 163) | --zui-orange-200 | |
| 300 | #F8AA72 | (25, 90%, 71%) | (248, 170, 114) | --zui-orange-300 | |
| 400 | #F58D42 | (25, 90%, 61%) | (245, 141, 66) | --zui-orange-400 | |
| 500 | #F36F12 | (25, 90%, 51%) | (243, 111, 18) | --zui-orange-500 | |
| 600 | #C7590A | (25, 90%, 41%) | (199, 89, 10) | --zui-orange-600 | |
| 700 | #964308 | (25, 90%, 31%) | (150, 67, 8) | --zui-orange-700 | |
Yellow | |||||
| Level | Color | HEX | HSL | RGB | CSS Variable |
| 100 | #FEF1D7 | (40, 97%, 92%) | (254, 241, 215) | --zui-yellow-100 | |
| 200 | #FEE0A5 | (40, 97%, 82%) | (254, 224, 165) | --zui-yellow-200 | |
| 300 | #FDCF72 | (40, 97%, 72%) | (253, 207, 114) | --zui-yellow-300 | |
| 400 | #FCBD40 | (40, 97%, 62%) | (252, 189, 64) | --zui-yellow-400 | |
| 500 | #FBAC0E | (40, 97%, 52%) | (251, 172, 14) | --zui-yellow-500 | |
| 600 | #D38E03 | (40, 97%, 42%) | (211, 142, 3) | --zui-yellow-600 | |
| 700 | #A16C02 | (40, 97%, 32%) | (161, 108, 2) | --zui-yellow-700 | |
Gray | |||||
| Level | Color | HEX | HSL | RGB | CSS Variable |
| 25 | #F9F9FA | (240, 8%, 98%) | (249, 249, 250) | --zui-gray-25 | |
| 50 | #F4F4F6 | (240, 8%, 96%) | (244, 244, 246) | --zui-gray-50 | |
| 100 | #E6E6EA | (240, 8%, 91%) | (230, 230, 234) | --zui-gray-100 | |
| 200 | #CBCBD2 | (240, 8%, 81%) | (203, 203, 210) | --zui-gray-200 | |
| 300 | #AFAFBB | (240, 8%, 71%) | (175, 175, 187) | --zui-gray-300 | |
| 400 | #9494A4 | (240, 8%, 61%) | (148, 148, 164) | --zui-gray-400 | |
| 500 | #78788C | (240, 8%, 51%) | (120, 120, 140) | --zui-gray-500 | |
| 600 | #606071 | (240, 8%, 41%) | (96, 96, 113) | --zui-gray-600 | |
| 700 | #494955 | (240, 8%, 31%) | (73, 73, 85) | --zui-gray-700 | |
| 800 | #31313A | (240, 8%, 21%) | (49, 49, 58) | --zui-gray-800 | |
| 900 | #1A1A1E | (240, 8%, 11%) | (26, 26, 30) | --zui-gray-900 | |
Zywave Green Usage Guidelines
Zywave green still remains the main branding color of the company. It is how we've been recognized in the past and how we will continue to be recognized in the future. The way this color can be used within our products has changed, however, so that our products meet accessibility guidelines and we have more product branding consistency across all platforms.
Where should I use Zywave Green?
- Zywave logo
- Public-facing materials
- Anything, outside of our products, to be branded as Zywave
How should I use Zywave Green?
- As an accent color to highlight elements throughout a design
- For elements that do not contain text on top of the green color
What should I avoid?
- If possible, avoid using it for elements that contain text such as buttons or text boxes
- If you need to use it for an element with text, NEVER use a font smaller than 19px Bold or 24px Regular
- Do not use for large elements that take up a lot of space on the page. Instead, use it as an accent color to draw attention to certain elements.
Blue Usage Guidelines
Blue 500 will take over as the branding color within all of our products.
Where should I use Blue 500?
The following components will adopt the blue color within our products. This list will change as ZUI continues to evolve.
- App Bar
- Buttons and text links
- Progress indicators
- Date pickers
- Radio buttons
- Tabs
- Pagination
- Popovers
How should I use it?
- As the main color used within our suite of products
- To create a visual hierarchy within the UI and attract users to their next action
What should I avoid?
- Using it for large elements that take up a lot of space on the page. Instead, it should be used as an accent color to draw attention to elements and guide the user through different pages.
- Creating a "sea of blue" by highlighting too many actions on one page.
Color accessibility
ALL text on a colored background should meet a minimum of AA standards. Refer to the guidelines below for usage of GRAY 800 and WHITE text on each color.
The pass/fail rating is the same when using colored text on a WHITE or GRAY 800 background.
Small text = 19px/1.2em bold or smaller - OR - 24px/1.5em regular or smaller
Large text = 19px/1.2em bold or larger - OR - 24px1.5em regular or larger
Zywave Green
Blue
The color blue is primarily used to guide the user throughout the UI. It is often used to share information or general notifications as well. Since Blue 500 is our primary product color it will be used frequently throughout many different components. Follow the Blue usage guidelines.
Green
Green means success! It should be used to notify the user that they have completed something successfully.
Green 500 will often appear in components such as notifiers, wells and dialogues. It will also frequently appear in icons/illustrations to confirm that something was successful.
Aqua
Often associated with feelings such as refreshing, energy, sophistication and creativity, Aqua can be used in illustrations or as an accent color to add a bright splash of color and lightness.
Purple
Purple's primary placement in our products will be visited text links. However, it can also be used within illustrations/icons to add depth or a rich pop of color. Purple is often associated with royalty, power and wealth.
Rose
Often viewed as very feminine, pink can be used to add softness/playfulness to illustrations and icons.
Red
Red is primarily used to signify some sort of error or destructive action. It is used to draw the users' attention to important information that could possibly disrupt their workflow.
The color RED 500 is used in components like notifiers, wells, dialogues, text links and buttons.
The meaning behind the color red should be highly considered when using it within any illustrations.
Orange
Orange radiates warmth and happiness. It is a very energizing color and it is often associated with creativity, balance and health.
Yellow
Yellow indicates a warning. It is used to draw the user's attention to caution them before they proceed. It can also be used to inform users that a change has been made on their behalf.
Yellow 500 can be found in components like wells, dialogues and notifiers.
Color meanings
Certain colors will have meanings assigned to them. These meanings should be considered when using the color in any illustrations or marketing materials as well.
| Color | Meanings associated with color | Where is it used in the UI? | |
|---|---|---|---|
 | Red 500 | Error, Delete, Failed |
|
 | Green 500 | Success, Confirm |
|
 | Yellow 500 | Caution, Warning, Change(s) made |
|
 | Blue 500 | Information, notification, link, in-progress |
|
 | Gray 200 | Disabled/Unavailable |
|
 | Purple 500 | Visited link |
|