Use color intentionally. It’s not decoration. Color is functional. It’s used to signal structure on a page, to highlight or emphasize important information or elements, and to display different states of an interface.
1. General color guidelines
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.
A 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 these two 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.
2. The Orbit color palette
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. We can modify their hex codes for any partner (in Nest).
You’ve probably noticed a difference in the colors used for marketing and those used for product. For more information, please visit our Brand Kiwi.com page.
Use Product Normal for primary buttons together with white text
Use Product Normal for text links in paragraph
Use Product Normal for communicating active or selected state
Don't use any Productcolor for highlighting information
It may cause confusion.
The bigger font size, font weight or Attention color helps to highlight something.
Don't use any Productcolor for the focus state of form elements
It may be confused with the success color.
Use Status Blue color instead.
Don’t use Brand Normal as a block background
It can interfer with the visual priorities on the page and draw attention to non-action elements. Generally, buttons should be the only elements with dark backrounds. Nothing on the page should draw attention away from them.
Use White as a background color for content sections on the page
It allows primary information to appear on the page without interference.
Use White as a background color for modal windows
Use White as background color for inputs
Use White as a text color for cards with photo backgrounds
However, it's important to have a relatively dark gradient beneath the text so the text is readable even on brighter images.
Cloud Light :hover
Cloud Light :active
Cloud Normal :hover
Cloud Normal :active
Use Cloud Light as a background color for page
The page doesn't blind users with bright white and it works good with white background sections.
Use Cloud Normal as a background color for disabled inputs
Don't use Cloud Normal as a border color for inputs
If an input is used on a non-white background, then the border wont be visible.
Use Ink Lighter instead.
Don't use Cloud Light as a background color for inputs
Any grey color for inputs with grey text can confuse users and lead them to believe that the input is in a disabled state.
Use White color for background and Cloud Normal for borders instead.
We use Cloud Light as a background color for inputs on our experimental Search page. Currently, we are testing how it performs and will decide on this later.
It’s possible to use Cloud colors as backgrounds for inputs in the iOS application. It’s a common pattern on mobile phones.
Ink Lighter :hover
Ink Ligter :active
Ink Light :hover
Ink Light :active
Ink Normal :hover
Ink Normal :active
The Ink color palette is mostly for texts and icons. For more information about usage, visit the Typography or Icons pages.
Use Ink Normal as the main text color
Don't use the Ink color palette for any backgrounds
2.3 Status colors
Green Light :hover
Green Light :active
Green Normal :hover
Green Normal :active
Use the Green color palette for success messages
Use Green Normal to communicate a successful booking
Don't use Green for primary buttons
We currently use the Brand color for communicating good prices on the map or calendar.
Orange Light :hover
Orange Light :active
Orange Normal :hover
Orange Normal :active
Use the Orange color palette for warning messages
Don't use Orange for highlighting information
Users may misunderstand the message as an error.
Use Attention instead.
Red Light :hover
Red Light :active
Red Normal :hover
Red Normal :active
Use the Red color palette for critical messages
Use Red for error messages in forms
Use Red for showing negative information
It's great to use Red color for showing high prices on a map or calendar.
Use Red for destructive buttons
It communicates that something important and negative will happen when selected
Blue Light :hover
Blue Light :active
Blue Normal :hover
Blue Normal :active
Use the Blue color palette for info messages
Use Blue for informative texts in forms
Use Blue for showing focus in forms
We use Blue for focus states of inputs, buttons, and other form elements.
Don't use Blue for links or primary buttons
For active elements use the Brand color instead.
2.4 Social color palette
Use the Facebook color for the Facebook login button
Don't use the Facebook color for anything unrelated to Facebook
We don’t have specific colors for Google, we just use the colored version of their logo and we use Ink for text.