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.
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.
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.
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.
- 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 make Odyssey’s visual style consistent and easier to update. Tokens replace static values to assign 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.
- 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.
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.
Oktanauts can use the following resources when building with Odyssey components: