Colors
Use color to signal structure, highlight or emphasize important information or elements, and display different states.
Use color intentionally. It’s not decoration. Color is supposed to be functional.
We have different shades for every defined color in Orbit. For most of our colorsnote, the following points should apply:
- Every color has specific guidelines for meaning. We honor these guidelines in order to maintain consistency across the product.
- It’s usually safe to combine the Light and Dark shades of any color. Text in the Dark shade should be readable on the Light background of its color.
- No Dark shade should be used as a background.
- Every non-Dark color has two additional shades defined:
:activeand:hover. These additional shades should only be used for very specific cases. - All of our colors are also defined as design tokens, so non-Orbit components can use Orbit colors directly and they don’t need to define colors again in their local codebase.
We use two main colors for backgrounds:
And four colors to create status backgrounds:
These are mostly used for backgrounds for any elevation level or component. These colors are accessible with dark foreground colors, so we recommended using Light shades for backgrounds and Dark shades for foregrounds. You can also use complementary and minor colors from our palette, which should give you enough colors to work with.
Interactive colors are used in components with some indication of state that do not move you forward in the flow or redirect you to another page. All of these elements should be colored in BlueNormal. This mostly means hover, focus, select, active, press, and drag states.
Actionable colors are used in components that include an action (such as moving you forward in the flow). This means the Button, ButtonLink, and TextLink components. For the actionable color, we use our main ProductNormal. Elements that aren’t actionable shouldn’t be in this color.
The color palette contains every one of the colors we use in our designs. These colors are also used by default in white label solutions for our partners and can be modified to their brand colors (see more about theming).
As you might have noticed, our basic color palette is quite simple—just a few shades. If you need multiple layers for the UI, you can use the additional shades. Using just the basic shades would make the UI heavy. Use the additional shades to make the UI more layered and subtle. They’re also useful for specific interaction states, such as hovering and focusing. Do not use these addition shades alone. Use the basic shade as the primary color and only use the additional shades when needed to create more depth or interactions.
We’re aware of a slight contrast issue with our Product Normal color and the issues when using it for Primary buttons. We’re exploring possible solutions. We highly recommend against using it for text and we recommend using darker shades when possible.
Bigger font sizes and heavier font weights help highlight. See typography for more.
This is exactly what Orbit Blue was designed for.
Cloud colors are generally used for backgrounds or borders.
- It’s possible to use Cloud colors as backgrounds for inputs in mobile apps, where it’s a common pattern.
For more information about usage, see Typography and Icons.
Ink colors are generally used for typography and icons.
If you really need to highlight something with color, use Blue.
That basically means that we use the Facebook color only for Facebook login buttons.
There aren’t any specific colors for Google. We just use the colored version of their logo and colorTextPrimary for text.
- Shades are an exception because they’re usually used for general use cases like texts, headings, and borders.↩
Social color palette