Color 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 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.
Background & Foreground colors
We use two main colors for backgrounds:
White
Cloud / Light
And four colors to create status backgrounds:
Blue / Light
Green / Light
Orange / Light
Red / Light
These are used most of the time for backgrounds for any elevation level or component. These colors are accessible with dark foreground colors, so we recommended using Light shadesfor backgrounds and Dark shades for foregrounds. You can also use complementary and minor colors from our palette, which should help you have enough colors to work with.
Interactive colors
Interactive colors are used in components with some indication of the state that do not move you forward in the flow or redirect you to another page. All of these elements should be colored in Blue / Normal. The majority of these interactive elements cover hover, focus, select, active, press, and drag states.
Actionable colors
Actionable colors are used in components that include an action (such as moving you forward in the flow). That means the Button, ButtonLink, and TextLink components. For the actionable color, we are use our main Product / Normal. Elements that are not actionable should not be in this color.
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 the additional shades As you might have noticed, our basic color palette is quite simple β just a few shades.
If you need multiple layers for the UI, you can use the additional shades. Using just the basic shades would make the UI heavy. Use the additional shares to make the UI more layered and subtle at the same time.
They’re also useful for specific interaction states, such as hovering and focusing.
Do not use these addition shades alone. Use the basic shade as the primary color and, only when needed, use the additional shades to create more depth or interactions.
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.
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.
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.
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.