Your bookmarks

Colors

Colos is used to signal structure on a page, to highlight or emphasize important information or elements, and to display different states of an interface.

Use color intentionally. It’s not decoration. Color is supposed to be functional.

General 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.
  • 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.

Orbit 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 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.

Product

Product Light
paletteProductLight
#ECF8F7
rgb(236, 248, 247)
Product Light :hover
paletteProductLightHover
#D6F0EE
rgb(214, 240, 238)
Product Light :active
paletteProductLightActive
#C0E8E4
rgb(192, 232, 228)
Product Normal
paletteProductNormal
#00A991
rgb(0, 169, 145)
Product Normal :hover
paletteProductNormalHover
#009882
rgb(0, 152, 130)
Product Normal :active
paletteProductNormalActive
#008F7B
rgb(0, 143, 123)
Product Dark
paletteProductDark
#007F6D
rgb(0, 127, 109)
Product Dark :hover
paletteProductDarkHover
#007060
rgb(0, 112, 96)
Product Dark :active
paletteProductDarkActive
#006657
rgb(0, 102, 87)
Product Darker
paletteProductDarker
#005C4E
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.
Guidelines
  # 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.

Shades

White

White
paletteWhite
#FFFFFF
rgb(255, 255, 255)
White :hover
paletteWhiteHover
#F5F7F9
rgb(245, 247, 249)
White :active
paletteWhiteActive
#E5EAEF
rgb(229, 234, 239)
Guidelines
  # 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.

Cloud

Cloud Light
paletteCloudLight
#F5F7F9
rgb(245, 247, 249)
Cloud Light :hover
paletteCloudLightHover
#E5EAEF
rgb(229, 234, 239)
Cloud Light :active
paletteCloudLightActive
#D6DEE6
rgb(214, 222, 230)
Cloud Normal
paletteCloudNormal
#EFF2F5
rgb(239, 242, 245)
Cloud Normal :hover
paletteCloudNormalHover
#DCE3E9
rgb(220, 227, 233)
Cloud Normal :active
paletteCloudNormalActive
#CAD4DE
rgb(202, 212, 222)
Cloud Dark
paletteCloudDark
#E8EDF1
rgb(232, 237, 241)
Guidelines

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.

Exceptions
  • It’s possible to use Cloud colors as backgrounds for inputs in the iOS application. It’s a common pattern on mobile phones.

Ink

Ink Lighter
paletteInkLighter
#BAC7D5
rgb(186, 199, 213)
Ink Lighter :hover
paletteInkLighterHover
#A6B6C8
rgb(166, 182, 200)
Ink Lighter :active
paletteInkLighterActive
#94A8BE
rgb(148, 168, 190)
Ink Light
paletteInkLight
#5F738C
rgb(95, 115, 140)
Ink Light :hover
paletteInkLightHover
#52647A
rgb(82, 100, 122)
Ink Light :active
paletteInkLightActive
#465567
rgb(70, 85, 103)
Ink Normal
paletteInkNormal
#252A31
rgb(37, 42, 49)
Ink Normal :hover
paletteInkNormalHover
#181B20
rgb(24, 27, 32)
Ink Normal :active
paletteInkNormalActive
#0B0C0F
rgb(11, 12, 15)

For more information about usage, visit the Typography or Icons pages.

Guidelines

Ink color is generally used for typography or icons.

  # Use Ink Normal as the main text color

Even better, rely on the value of colorTextPrimary token as it will support theming correctly.

  # Don’t use any Ink color for backgrounds

We like our interface light and this would really mess with visual priorities.

Status colors

Green

Green Light
paletteGreenLight
#EBF4EC
rgb(235, 244, 236)
Green Light :hover
paletteGreenLightHover
#D7EAD9
rgb(215, 234, 217)
Green Light :active
paletteGreenLightActive
#C3DFC7
rgb(195, 223, 199)
Green Normal
paletteGreenNormal
#28A138
rgb(40, 161, 56)
Green Normal :hover
paletteGreenNormalHover
#238B31
rgb(35, 139, 49)
Green Normal :active
paletteGreenNormalActive
#1D7228
rgb(29, 114, 40)
Green Dark
paletteGreenDark
#2D7738
rgb(45, 119, 56)
Green Dark :hover
paletteGreenDarkHover
#276831
rgb(39, 104, 49)
Green Dark :active
paletteGreenDarkActive
#1F5126
rgb(31, 81, 38)
Green Darker
paletteGreenDarker
#235C2B
rgb(35, 92, 43)
Guidelines
  # Use the Green color to communicate success

We have several components in Orbit that can help you – Alert, Badge or Text with success type.

  # Don’t use Green color for next buttons

You should use Buttons with primary type for every important action on the page, or secondary if the action isn’t primary.

Succcess buttons should be use only if you need following actions in Success Alert.

Exceptions
  • We currently use the Brand color for communicating good prices on the map or calendar.

Orange

Orange Light
paletteOrangeLight
#FDF0E3
rgb(253, 240, 227)
Orange Light :hover
paletteOrangeLightHover
#FAE2C7
rgb(250, 226, 199)
Orange Light :active
paletteOrangeLightActive
#F8D3AB
rgb(248, 211, 171)
Orange Normal
paletteOrangeNormal
#F9971E
rgb(249, 151, 30)
Orange Normal :hover
paletteOrangeNormalHover
#F38906
rgb(243, 137, 6)
Orange Normal :active
paletteOrangeNormalActive
#D67906
rgb(214, 121, 6)
Orange Dark
paletteOrangeDark
#AB3307
rgb(171, 51, 7)
Orange Dark :hover
paletteOrangeDarkHover
#972C07
rgb(151, 44, 7)
Orange Dark :active
paletteOrangeDarkActive
#7A2405
rgb(122, 36, 5)
Orange Darker
paletteOrangeDarker
#842706
rgb(132, 39, 6)
Guidelines
  # Use the Orange for warning states

We have several components in Orbit that can help you – Alert, Badge or Text with warning type. Be sure that you explain clearly what you are warning a user about.

  # Don’t use Orange for highlighting information

Users may misunderstand the message as an error.

If you really need to highlight something with color, go for Blue.

Red

Red Light
paletteRedLight
#FAEAEA
rgb(250, 234, 234)
Red Light :hover
paletteRedLightHover
#F4D2D2
rgb(244, 210, 210)
Red Light :active
paletteRedLightActive
#EEB9B9
rgb(238, 185, 185)
Red Normal
paletteRedNormal
#D21C1C
rgb(210, 28, 28)
Red Normal :hover
paletteRedNormalHover
#B91919
rgb(185, 25, 25)
Red Normal :active
paletteRedNormalActive
#9D1515
rgb(157, 21, 21)
Red Dark
paletteRedDark
#970C0C
rgb(151, 12, 12)
Red Dark :hover
paletteRedDarkHover
#890B0B
rgb(137, 11, 11)
Red Dark :active
paletteRedDarkActive
#6D0909
rgb(109, 9, 9)
Red Darker
paletteRedDarker
#760909
rgb(118, 9, 9)
Guidelines
  # Use the Red color palette for critical states

It’s great for error states, showing negative information or informing user about critical state of their actions.

  # Use Red for destructive buttons

It communicates that something important and negative will happen when triggered.

Blue

Blue Light
paletteBlueLight
#E5F7FF
rgb(229, 247, 255)
Blue Light :hover
paletteBlueLightHover
#C7EEFF
rgb(199, 238, 255)
Blue Light :active
paletteBlueLightActive
#A8E5FF
rgb(168, 229, 255)
Blue Normal
paletteBlueNormal
#0172CB
rgb(1, 114, 203)
Blue Normal :hover
paletteBlueNormalHover
#0161AC
rgb(1, 97, 172)
Blue Normal :active
paletteBlueNormalActive
#01508E
rgb(1, 80, 142)
Blue Dark
paletteBlueDark
#005AA3
rgb(0, 90, 163)
Blue Dark :hover
paletteBlueDarkHover
#004F8F
rgb(0, 79, 143)
Blue Dark :active
paletteBlueDarkActive
#003E70
rgb(0, 62, 112)
Blue Darker
paletteBlueDarker
#004680
rgb(0, 70, 128)
Guidelines
  # Use Blue for showing focus in forms

Orbit uses Blue for focus states of inputs, buttons, and other form elements.

  # Don’t use Blue for links or primary buttons

Even that blue color on links is quite common across the internet, we decided to use Product color on our active elements. We also use sometimes use Blue for highlighting elements.

Social color palette

Facebook

Facebook
paletteSocialFacebook
#3B5998
rgb(59, 89, 152)
Facebook :hover
paletteSocialFacebookHover
#385490
rgb(56, 84, 144)
Facebook :active
paletteSocialFacebookActive
#354F88
rgb(53, 79, 136)
Guidelines
  # Use Facebook color only for Facebook-related content

That basically means that we use Facebook color only on the Facebook login button.

Google

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