Developer mode
Opens components on the React tab by default.
Your bookmarks

Design tokens

Design tokens store visual design attributes. They help us make our UI more consistent and we support custom themes.

⚠️
Design tokens and theming is still work in progress.
We are preparing new specification of how we want theming work in Orbit. More soon.

We use tokens instead of static values (like HEX codes) for color or sizing units.

Installation

If you are already using @kiwicom/orbit-components, you don’t need to install the tokens because they’re included as a dependency to ensure compatibility.

You can install the package on its own.

// Using npm
npm install --save @kiwicom/orbit-design-tokens

// Using yarn
yarn add @kiwicom/orbit-design-tokens

How to use

Using @kiwicom/orbit-components

To use the default tokens, add an import in the file where you want to use the design tokens.

import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme";

Now you can use tokens by entering defaultTheme.orbit and continuing the dot-notation with the token name you want to use, e.g. defaultTheme.orbit.colorTextPrimary. More advanced text editors should suggest which tokens are available to you so you can find tokens quicker than by typing the entire token name.

You can also create your own tokens for themes using getTokens from @kiwicom/orbit-components and create custom uses in styled-components. See more at Theming.

Independently

To use the default tokens, add an import in the file where you want to use the design tokens.

import { defaultTokens } from "@kiwicom/orbit-design-tokens";

Now you can use tokens by typing defaultTokens and continuing the dot-notation with the token name you want to use, e.g. defaultTokens.colorTextPrimary. More advanced text editors should suggest which tokens are available to you so you can find tokens quicker than by typing the entire token name.

You can also create your own tokens for themes using getTokens from @kiwicom/orbit-design-tokens and create custom uses in styled-components. See more at Theming.

As XML

You can download the tokens as XML.

Formats

The main structure of the package is written in JavaScript for better usage in JavaScript projects. We are also able to generate a JSON file which will allow us to transform this type of file into different ones. It should be possible to transform JSON into SASSLESSStylusXML or others.

Naming conventions

Every design token in the package has a name according to the Orbit naming conventions. These conventions should be systematic and work according to the following template:

property_usage-type--state

Every token name starts with its related CSS property, like color, background, or fontSize. This should help in using them more naturally.

Full list of design tokens

Colors

Use these tokens for text or icon colors. Don’t use these for borders and background colors.

colorTextPrimary
#252A31
colorTextSecondary
#5F738C
colorTextAttention
#252A31
colorTextError
#D21C1C
colorTextInfo
#0172CB
colorTextSuccess
#28A138
colorTextWarning
#E98305
colorTextCritical
#D21C1C
colorTextWhite
#FFFFFF
colorIconPrimary
#252A31
colorIconSecondary
#5F738C
colorIconAttention
#252A31
colorIconTertiary
#BAC7D5
colorIconInfo
#0172CB
colorIconSuccess
#28A138
colorIconWarning
#E98305
colorIconCritical
#D21C1C
colorHeading
#252A31
colorHeadingInverted
#FFFFFF
colorTextLinkPrimary
#007F6D
colorTextLinkPrimaryHover
#00A991
colorTextLinkSecondary
#252A31
colorTextLinkSecondaryHover
#00A991
colorAlertIconSuccess
#28A138
colorTextAlertSuccess
#2B7336
colorAlertIconInfo
#0172CB
colorTextAlertInfo
#005AA3
colorAlertIconWarning
#E98305
colorTextAlertWarning
#A25100
colorAlertIconCritical
#D21C1C
colorTextAlertCritical
#970C0C
colorTextButtonFilled
#FFFFFF
colorTextButtonFilledHover
#FFFFFF
colorTextButtonFilledActive
#FFFFFF
colorTextButtonPrimary
#FFFFFF
colorTextButtonPrimaryHover
#FFFFFF
colorTextButtonPrimaryActive
#FFFFFF
colorTextButtonSecondary
#252A31
colorTextButtonSecondaryHover
#181B20
colorTextButtonSecondaryActive
#0B0C0F
colorTextButtonInfo
#FFFFFF
colorTextButtonInfoHover
#FFFFFF
colorTextButtonInfoActive
#FFFFFF
colorTextButtonSuccess
#FFFFFF
colorTextButtonSuccessHover
#FFFFFF
colorTextButtonSuccessActive
#FFFFFF
colorTextButtonWarning
#FFFFFF
colorTextButtonWarningHover
#FFFFFF
colorTextButtonWarningActive
#FFFFFF
colorTextButtonCritical
#FFFFFF
colorTextButtonCriticalHover
#FFFFFF
colorTextButtonCriticalActive
#FFFFFF
colorTextButtonFacebook
#FFFFFF
colorTextButtonFacebookHover
#FFFFFF
colorTextButtonFacebookActive
#FFFFFF
colorTextButtonGoogle
#252A31
colorTextButtonGoogleHover
#181B20
colorTextButtonGoogleActive
#0B0C0F
colorTextButtonWhite
#252A31
colorTextButtonWhiteHover
#181B20
colorTextButtonWhiteActive
#0B0C0F
colorTextButtonPrimaryBordered
#00A991
colorTextButtonPrimaryBorderedHover
#009882
colorTextButtonPrimaryBorderedActive
#008F7B
colorTextButtonSecondaryBordered
#252A31
colorTextButtonSecondaryBorderedHover
#181B20
colorTextButtonSecondaryBorderedActive
#0B0C0F
colorTextButtonInfoBordered
#0172CB
colorTextButtonInfoBorderedHover
#0161AC
colorTextButtonInfoBorderedActive
#01508E
colorTextButtonSuccessBordered
#28A138
colorTextButtonSuccessBorderedHover
#238B31
colorTextButtonSuccessBorderedActive
#1D7228
colorTextButtonWarningBordered
#E98305
colorTextButtonWarningBorderedHover
#DC7C05
colorTextButtonWarningBorderedActive
#CD7304
colorTextButtonCriticalBordered
#D21C1C
colorTextButtonCriticalBorderedHover
#B91919
colorTextButtonCriticalBorderedActive
#9D1515
colorTextButtonFacebookBordered
#3B5998
colorTextButtonFacebookBorderedHover
#385490
colorTextButtonFacebookBorderedActive
#354F88
colorTextButtonGoogleBordered
#252A31
colorTextButtonGoogleBorderedHover
#181B20
colorTextButtonGoogleBorderedActive
#0B0C0F
colorTextButtonWhiteBordered
#FFFFFF
colorTextButtonWhiteBorderedHover
#FFFFFF
colorTextButtonWhiteBorderedActive
#FFFFFF
colorTextButtonLinkPrimary
#00A991
colorTextButtonLinkPrimaryHover
#009882
colorTextButtonLinkPrimaryActive
#008F7B
colorTextButtonLinkSecondary
#252A31
colorTextButtonLinkSecondaryHover
#181B20
colorTextButtonLinkSecondaryActive
#0B0C0F
colorTextInput
#252A31
colorTextInputPrefix
#5F738C
colorTextInputDisabled
#BAC7D5
colorTextBadgeNeutral
#252A31
colorTextBadgeInfo
#0172CB
colorTextBadgeSuccess
#28A138
colorTextBadgeWarning
#E98305
colorTextBadgeCritical
#D21C1C
colorTextBadgeDark
#FFFFFF
colorTextBadgeWhite
#252A31
colorTextLoading
#BAC7D5
colorTextTable
#5F738C
colorTextTag
#252A31
colorTextTagSelected
#EFF2F5
colorIconInput
#BAC7D5
colorPlaceholderInput
#BAC7D5
colorPlaceholderInputError
#D21C1C
colorPlaceholderInputFile
#5F738C
colorPlaceholderInputFileError
#D21C1C
colorFormLabel
#252A31
colorFormLabelFilled
#5F738C
colorInfoCheckBoxRadio
#5F738C
colorIconCheckboxRadio
#00A991
colorIconCheckboxRadioDisabled
#BAC7D5
colorIconRadioButton
#00A991
colorIconRadioButtonDisabled
#BAC7D5
colorStopoverArrow
#5F738C

Font family

fontFamily
‘Roboto’, -apple-system, ‘.SFNSText-Regular’, ‘San Francisco’, ‘Segoe UI’, ‘Helvetica Neue’, ‘Lucida Grande’, sans-serif

Background colors

Use these tokens for background colors only. Do not use these for border colors or text theme.palette.

backgroundBody
#F5F7F9
backgroundModal
#FFFFFF
backgroundCard
#FFFFFF
backgroundCountryFlag
transparent
backgroundButtonPrimary
#00A991
backgroundButtonPrimaryHover
#009882
backgroundButtonPrimaryActive
#008F7B
backgroundButtonSecondary
#E8EDF1
backgroundButtonSecondaryHover
#DCE3E9
backgroundButtonSecondaryActive
#CAD4DE
backgroundButtonFacebook
#3B5998
backgroundButtonFacebookHover
#385490
backgroundButtonFacebookActive
#354F88
backgroundButtonGoogle
#F5F7F9
backgroundButtonGoogleHover
#E5EAEF
backgroundButtonGoogleActive
#D6DEE6
backgroundButtonInfo
#0172CB
backgroundButtonInfoHover
#0161AC
backgroundButtonInfoActive
#01508E
backgroundButtonSuccess
#28A138
backgroundButtonSuccessHover
#238B31
backgroundButtonSuccessActive
#1D7228
backgroundButtonWarning
#E98305
backgroundButtonWarningHover
#DC7C05
backgroundButtonWarningActive
#CD7304
backgroundButtonCritical
#D21C1C
backgroundButtonCriticalHover
#B91919
backgroundButtonCriticalActive
#9D1515
backgroundButtonWhite
#FFFFFF
backgroundButtonWhiteHover
#F5F7F9
backgroundButtonWhiteActive
#E5EAEF
backgroundButtonBordered
transparent
backgroundButtonBorderedHover
#F5F7F9
backgroundButtonBorderedActive
#F5F7F9
backgroundButtonWhiteBordered
transparent
backgroundButtonWhiteBorderedHover
rgba(255, 255, 255, 0.2)
backgroundButtonWhiteBorderedActive
rgba(255, 255, 255, 0.2)
backgroundButtonLinkPrimary
transparent
backgroundButtonLinkPrimaryHover
#E5EAEF
backgroundButtonLinkPrimaryActive
#D6DEE6
backgroundButtonLinkSecondary
transparent
backgroundButtonLinkSecondaryHover
#E5EAEF
backgroundButtonLinkSecondaryActive
#D6DEE6
backgroundInput
#FFFFFF
backgroundInputDisabled
#EFF2F5
backgroundAlertSuccess
#EBF4EC
backgroundAlertInfo
#E8F4FD
backgroundAlertWarning
#FDF0E3
backgroundAlertCritical
#FAEAEA
backgroundBadgeNeutral
#F5F7F9
backgroundBadgeInfo
#E8F4FD
backgroundBadgeSuccess
#EBF4EC
backgroundBadgeWarning
#FDF0E3
backgroundBadgeCritical
#FAEAEA
backgroundBadgeDark
#252A31
backgroundBadgeWhite
#FFFFFF
backgroundIllustration
transparent
backgroundSeparator
#EFF2F5
backgroundTableShadowLeft
linear-gradient(to left, transparent, rgba(186, 199, 213, 0.23))
backgroundTableShadowRight
linear-gradient(to right, transparent, rgba(186, 199, 213, 0.23))
backgroundTable
#FFFFFF
backgroundTableEven
#F5F7F9
backgroundTableHover
#EFF2F5
backgroundTag
#F5F7F9
backgroundTagSelected
#252A31
backgroundTagHover
#E5EAEF
backgroundTagSelectedHover
#181B20
backgroundTagActive
#D6DEE6
backgroundTagSelectedActive
#0B0C0F
backgroundTooltip
#FFFFFF
backgroundTooltipLargeMobile
#005AA3

Font size

Use these sizing tokens for font sizes.

fontSizeHeadingDisplay
40px
fontSizeHeadingDisplaySubtitle
22px
fontSizeHeadingTitle1
28px
fontSizeHeadingTitle2
22px
fontSizeHeadingTitle3
16px
fontSizeHeadingTitle4
14px
fontSizeHeadingTitle5
12px
fontSizeTextNormal
14px
fontSizeTextLarge
16px
fontSizeTextSmall
12px
fontSizeMessage
14px
fontSizeButtonLarge
16px
fontSizeButtonNormal
14px
fontSizeButtonSmall
12px
fontSizeInputNormal
14px
fontSizeInputSmall
14px
fontSizeFormLabel
14px
fontSizeFormFeedback
12px

Border radius

Use radius tokens to change the border-radius size (rounded corners).

borderRadiusCircle
50%
borderRadiusNormal
3px
borderRadiusLarge
6px
borderRadiusSmall
2px
borderRadiusBadge
12px

Z Index

Use layers to show depth of page.

zIndexDefault
1
zIndexSticky
100
zIndexModalOverlay
800
zIndexModal
825
zIndexOnTheTop
900

Size (width, height)

widthIconSmall
16px
heightIconSmall
16px
widthIconMedium
24px
heightIconMedium
24px
widthIconLarge
32px
heightIconLarge
32px
heightInputNormal
44px
heightInputLarge
52px
heightInputSmall
32px
heightButtonNormal
44px
heightButtonLarge
52px
heightButtonSmall
32px
heightRadioButton
20px
widthRadioButton
20px
heightCheckbox
20px
widthCheckbox
20px
heightCountryFlag
auto
widthCountryFlag
24px
heightBadge
24px
widthBadgeCircled
24px
heightIllustrationSmall
90px
heightIllustrationMedium
200px
heightServiceLogoSmall
12px
heightServiceLogoMedium