Color
Odyssey colors consist of a variety of neutral, semantic, and brand values used in all UIs for utmost clarity and readability.
| Palette | Swatch | Name | Hex | Do | Don't |
|---|---|---|---|---|---|
| Neutral | Gray 900 | #1d1d21 | Titles, body copy, icons, shadows, tooltips | Background colors, buttons, strokes | |
| Gray 600 | #6e6e78 | Caption text, Status label, disabled Overlay Buttons | Titles, body copy, borders, icons | ||
| Gray 500 | #8c8c96 | Interactive UI borders | Non-interactive borders, titles, body copy, borders, icons | ||
| Gray 200 | #d7d7dc | Display borders | Interactive UI borders, background colors, buttons, titles, body copy | ||
| Gray 100 | #ebebed | Read-only/disabled states | Background colors, borders, buttons, titles, body copy | ||
| Gray 000 | #f5f5f6 | Backgrounds, read-only & disabled input fills | Buttons, borders, titles, body copy, borders | ||
| White | #ffffff | Page backgrounds, text | Titles, body copy | ||
| Blue | Blue 900 | #00297a | Okta logo, brand moments, button hovers | Plain text | |
| Blue 500 | #1662dd | Links, buttons, icons, hover states, selected states | Non-interactive UI | ||
| Blue 400 | #788ee2 | A11y-friendly UI backgrounds | N/A | ||
| Blue 300 | #a7b5ec | Buttons disabled state fills & borders, focus rings | N/A | ||
| Blue 000 | #f2f5ff | Clear button hover, backgrounds | N/A | ||
| Green | Green 900 | #00503c | Moments of success, validation, wayfinding | N/A | |
| Green 600 | #008055 | Background color for success messaging | Headlines, body copy, fail states, buttons | ||
| Green 500 | #00b478 | Moments of success, validation, wayfinding, status | Headlines, body copy, fail states, buttons | ||
| Green 300 | #84d2b1 | N/A | N/A | ||
| Green 000 | #e5faf3 | Moments of success, validation, wayfinding | N/A | ||
| Red | Red 900 | #640019 | Destructive button & invalid input hovers | N/A | |
| Red 500 | #da372c | System errors, danger buttons, error states, status dot | N/A | ||
| Red 300 | #f88c90 | Danger button disabled state fills, borders, & focus ring | N/A | ||
| Red 000 | #ffdfe2 | System errors, danger buttons, error states | Headlines, body copy, links, buttons | ||
| Yellow | Yellow 900 | #663800 | Moments of caution | Headlines, body copy, links, buttons | |
| Yellow 500 | #ffc61c | Moments of caution, status dot | Headlines, body copy, links, buttons | ||
| Yellow 300 | #f9dc77 | N/A | Headlines, body copy, links, buttons | ||
| Yellow 000 | #faf5dc | Moments of caution | Headlines, body copy, links, buttons | ||
| Orange | Orange 500 | #e97107 | N/A | Headlines, body copy, links, buttons | |
| Purple | Purple 500 | #8d6e97 | Moments of learning, tips, brand moments | Headlines, body copy, links, buttons | |
| Turquoise | Turquoise 500 | #2d8c9e | Brand moments | Headlines, body copy, links, buttons | |
| Turquoise 400 | #65adb7 | Background Color | Headlines, body copy, links, buttons |