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
#ECF8F7
Product Light :hover
#D6F0EE
Product Light :active
#C0E8E4
Product Normal
#00A991
Product Normal :hover
#009882
Product Normal :active
#008F7B
Product Dark
#007F6D
Product Dark :hover
#007060
Product Dark :active
#006657
Product Darker
#005C4E

If you need also information for brand/marketing uses, 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
#5F738C
Ink Light :hover
#52647A
Ink Light :active
#465567
Ink Normal
#252A31
Ink Normal :hover
#181B20
Ink Normal :active
#0B0C0F

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
#EBF4EC
Green Light :hover
#D7EAD9
Green Light :active
#C3DFC7
Green Normal
#28A138
Green Normal :hover
#238B31
Green Normal :active
#1D7228
Green Dark
#235C2B
Green Dark :hover
#1B4621
Green Dark :active
#123016
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
#FDF0E3
Orange Light :hover
#FAE2C7
Orange Light :active
#F8D3AB
Orange Normal
#F9971E
Orange Normal :hover
#F38906
Orange Normal :active
#D67906
Orange Dark
#8E2A06
Orange Dark :hover
#712105
Orange Dark :active
#531904
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
#FAEAEA
Red Light :hover
#F4D2D2
Red Light :active
#EEB9B9
Red Normal
#D21C1C
Red Normal :hover
#B91919
Red Normal :active
#9D1515
Red Dark
#760909
Red Dark :hover
#5A0707
Red Dark :active
#3E0505
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
#E5F7FF
Blue Light :hover
#C7EEFF
Blue Light :active
#A8E5FF
Blue Normal
#0172CB
Blue Normal :hover
#0161AC
Blue Normal :active
#01508E
Blue Dark
#004680
Blue Dark :hover
#003561
Blue Dark :active
#002442
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.