Colors

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 combine Light 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).

Do you need quick overview of all Orbit colors? Check our Color Overview page!

2.1 Product color

Product Light
#E1F5F2
Product Light :hover
#bde9e2
Product Light :active
#9addd3
Product Normal
#00a991
Product Normal :hover
#009882
Product Normal :active
#008f7b
Product Dark
#00826f

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.

Guidelines

Use Product Normal for primary buttons together with white text
Use <em>Product Normal </em> for primary buttons together with white text
Use Product Normal for text links in paragraph
Use <em>Product</em><em> Normal </em>for text links in paragraph
Use Product Normal for communicating active or selected state
Use <em>Product</em><em> Normal </em>for communicating active or selected state

2.2 Shades

2.2.1 White

White
#ffffff
White :hover
#f1f4f7
White :active
#e7ecf1
Guidelines
Use White as a background color for content sections on the page
It allows primary information to appear on the page without interference.
Use <em>White</em> as a background color for content sections on the page
Use White as a background color for modal windows
Use <em>White</em> as a background color for modal windows
Use White as background color for inputs
Use <em>White</em> 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.

2.2.2 Cloud

Cloud Light
#f5f7f9
Cloud Light :hover
#e5eaef
Cloud Light :active
#d6dee6
Cloud Normal
#e8edf1
Cloud Normal :hover
#d9e1e8
Cloud Normal :active
#cad5df
Guidelines
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 <em>Cloud Light</em> as a background color for page
Use Cloud Normal as a background color for disabled inputs
Use <em>Cloud Normal</em> as a background color for disabled inputs
Exceptions
  • 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.

2.2.3 Ink

Ink Lighter
#bac7d5
Ink Lighter :hover
#a6b6c8
Ink Ligter :active
#94a8be
Ink Light
#7f91a8
Ink Light :hover
#6d819c
Ink Light :active
#5f738c
Ink Normal
#46515e
Ink Normal :hover
#3f4854
Ink Normal :active
#38404b
Ink Dark
#171b1e

The Ink color palette is mostly for texts and icons. For more information about usage, visit the Typography or Icons pages.

Guidelines
Use Ink Normal as the main text color
Use <em>Ink Normal </em> as the main text color

2.3 Status colors

2.3.1 Green

Green Light
#e7f3e8
Green Light :hover
#d7ebd8
Green Light :active
#c7e3c9
Green Normal
#46B655
Green Normal :hover
#42ac50
Green Normal :active
#3fa34c
Green Dark
#065d12
Guidelines
Use the Green color palette for success messages
Use the <em>Green </em>color palette for success messages
Use Green Normal to communicate a successful booking
Use <em>Green Normal </em> to communicate a successful booking
Exceptions
  • We currently use the Brand color for communicating good prices on the map or calendar.

2.3.2 Orange

Orange Light
#fcf1cd
Orange Light :hover
#faeab7
Orange Light :active
#f9e4a1
Orange Normal
#f9971e
Orange Normal :hover
#f48a06
Orange Normal :active
#e68206
Orange Dark
#a93610
Guidelines
Use the Orange color palette for warning messages
Use the <em>Orange </em>color palette for warning messages

2.3.3 Red

Red Light
#fae8e8
Red Light :hover
#f5d4d4
Red Light :active
#f1c0c0
Red Normal
#d21c1c
Red Normal :hover
#bd1919
Red Normal :active
#b21717
Red Dark
#650808
Guidelines
Use the Red color palette for critical messages
Use the <em>Red </em>color palette for critical messages
Use Red for error messages in forms
Use <em>Red </em> 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 <em>Red </em> for showing negative information
Use Red for destructive buttons
It communicates that something important and negative will happen when selected
Use <em>Red </em> for destructive buttons

2.3.4 Blue

Blue Light
#e0f6ff
Blue Light :hover
#c8effe
Blue Light :active
#b0e8fe
Blue Normal
#0176D2
Blue Normal :hover
#006abd
Blue Normal :active
#0064b2
Blue Dark
#003A69
Guidelines
Use the Blue color palette for info messages
Use the <em>Blue </em>color palette for info messages
Use Blue for informative texts in forms
Use <em>Blue </em> 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.
Use <em>Blue </em> for showing focus in forms

2.4 Social color palette

2.4.1 Facebook

Facebook
#3b5998
Facebook :hover
#385490
Facebook :active
#354f88
Guidelines
Use the Facebook color for the Facebook login button
Use the <em>Facebook </em>color for the Facebook login button

2.4.2 Google

We don’t have specific colors for Google, we just use the colored version of their logo and we use Ink for text.