Our color system is optimized for aesthetics, hierarchy, accessibility, and effective use in our most widely used components and UIs. The following guidance, much of which is baked into components, ensures that colors will be deployed consistently and accessibly.
Color anatomy
Neutral palette
Neutral colors are the core of our UI. Tables, text, inputs, backgrounds, and more use our neutral palette.
Neutral colors were made without any warm or cool saturation to better harmonize with the brand’s use of both warm and cool tones. They were also created on sine wave with an ease in/out to provide more light- and dark-end fidelity.
Neutrals are optimized to create a distinct range between the two type colors, 900 (dark type) and 600 (light type).
Semantic palette
Each semantic hue — the color tint and subsequent color family itself — is based off of a brand color, or a slightly modified brand color. Semantic colors are used for actions and to convey a specific state. These colors should be used with intent and purpose. Their semantic meanings shouldn’t be changed.
All semantic colors have consistent lightness per value. This means that Blue 50, Yellow 50, and Green 50 will all have the same contrast ratios against white, black, or the 600 value of the respective color family.
Semantic colors have a unique color stop at 500. The new color value allows our primary use cases for semantic colors — buttons and alerts — to be as light as possible. This provides the clearest semantic read, the most aesthetically pleasing experience, and still meets WCAG accessibility requirements when coupled with white text labels.
Brand palette
The brand palette is used predominantly for marketing materials. It has only a tertiary role in product UI. This palette can be used in less functional, more decorative moments, such as logos, illustrations, and splash screen backgrounds. See brand guidelines
The brand palette isn’t interchangeable with neutral and semantic palettes.
Implementing color
Using the palette
In our color palette, each numbered swatch within a given color is a value.
Other colors and opacities
- Don’t use additional color swatches or hexes that aren’t in the Figma library. Contact the Odyssey design system team with new color needs.
- Avoid using transparencies.
Tokens
Tokens make Odyssey’s visual style consistent and easier to update. Tokens replace static values to assign color.
Get the palette
Accessibility and color
In general, accessible color contrast ratios are baked into all components for use on both white and Gray 50 backgrounds. If you need to check or document accessibility, these are our primary accessibility requirements:
- Body text should have a 4.5:1 contrast ratio with the background. Use either of our two text colors, Gray 600 or 900.
Gray 600 is as light as possible while still satisfying AA accessibility requirements on both white and Gray 50 backgrounds.
- Heading text should have a 3:1 contrast ratio with the background. Use Gray 900.
- Input field borders should have a 3:1 contrast ratio with the background. Use Gray 500.
- Disabled states don’t have contrast ratio requirements.
Gray 500 is optimized for input fields on both White and Gray 50 backgrounds by yielding greater than a 3.0 ratio per WCAG AA requirements. It is as light as it possibly can be on Gray 50 backgrounds while still meeting contrast ratio requirements.
Our 600 values, especially blue, were optimized to meet accessibility requirements for non-underlined links. This value is as light as possible while still meeting both accessibility requirements:
- a 3:1 contrast ratio with Gray 900, our adjacent text color.
- a 4.5:1 contrast ratio with both White and Gray 50 background colors.
Learn more about accessible color.
Have questions or need support?
Oktanauts can use the following resources when building with Odyssey components:
- Check the Odyssey 1.0 FAQs.
- Join #odyssey in Slack to ask questions and stay up to date about the design system.
- Attend Odyssey Office Hours on Mondays and Wednesdays from 1-1:30 p.m. PT / 4-4:30 p.m. ET.
- Submit bug reports and feature requests to the Odyssey Jira board.