Skip to main content
Odyssey Design System

Color

Odyssey colors consist of a variety of neutral, semantic, and brand values used in all UIs for utmost clarity and readability.


Available Colors
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

Have questions? Ask us on slack! #odyssey