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 colors*, 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 combineLight and Dark shades of any color. Text in Dark shade should be readable on a Light shade background of its related color.
Dark shade of any color shouldn’t be used as a background.
Every non-dark color has two additional shades defined – :active and :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.
*Colors in the Shades category are an exception because shades are usually used for general use cases like texts, headings, and borders.
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.
The reasoning behind additional color shades As you could notice, our basic color palette is quite simple – just a few shades.
However, for some specific interaction states and other visual perks, we defined additional color shades. It’s recommended to try design without using these shades, but when you feel you need to nudge some color a bit, additional color shades should help you.
rgb(236, 248, 247)
Product Light :hover
rgb(214, 240, 238)
Product Light :active
rgb(192, 232, 228)
rgb(0, 169, 145)
Product Normal :hover
rgb(0, 152, 130)
Product Normal :active
rgb(0, 143, 123)
rgb(0, 127, 109)
Product Dark :hover
rgb(0, 112, 96)
Product Dark :active
rgb(0, 102, 87)
rgb(0, 92, 78)
We are aware of a slight contrast issue with Kiwi.com’s Product Normal color and the issues when using it for Primary Buttons. We are exploring possible solutions.
We highly recommend against using it for text and we recommend using darker shades, if possible.
Use Product Normal for primary actions
When used only for primary actions on buttons or text links, they tend to stand out from the interface and brings the brand into the interface.
Use Product Normal for active or selected states
We use it in all selected states for checkboxes, active tabs or components like ChoiceTiles which allows users to pick something.
Don’t use Product color for highlighting information
Because of using Product colors for actions, it may cause confusion when used on something like highlighting some information or text.
The bigger font size, font weight helps to highlight something. Or blue color, when you really need to make something to stand out.
Don’t use any Product color for the focus state of form elements
When your Product color is green-ish or red-ish, it may be easily confused with the success or error states of input.
Orbit Blue color was designed exactly for this, use it instead.
Don’t use Product colors for backgrounds
It can interfere with the visual priorities on the page and draw attention to non-action elements. Generally, buttons should be the only elements with dark backgrounds. Nothing on the page should draw attention away from them.
We try to keep our UI light as possible, so we use only Cloud colors or Light shades for backgrounds.
rgb(255, 255, 255)
rgb(245, 247, 249)
rgb(229, 234, 239)
Use White as background color for content sections
It allows important information to appear on the page without interference.
Use White as background color for inputs
However, there is one exception for native mobile applications where we follow native best practices and use gray color for inputs backgrounds.
rgb(245, 247, 249)
Cloud Light :hover
rgb(229, 234, 239)
Cloud Light :active
rgb(214, 222, 230)
rgb(239, 242, 245)
Cloud Normal :hover
rgb(220, 227, 233)
Cloud Normal :active
rgb(202, 212, 222)
rgb(232, 237, 241)
Cloud color is generally used for backgrounds or borders.
Use Cloud Light as page background
The page doesn’t blind users with bright white and it works well with white Cards and sections.
Don’t use Cloud Normal as a border color for inputs
“If an input is used on a non-white background, then the border won’t be visible.
Use $colorInputBorder token instead.
It’s possible to use Cloud colors as backgrounds for inputs in the iOS application. It’s a common pattern on mobile phones.