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

First thing you will need to do is install the package into your project.

Run npm to add the package to your project

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

or do so with Yarn:

yarn add @kiwicom/orbit-design-tokens

How to use

Now that you have installed the latest version of the package, you will need to add an import directly into the file where you want to use the design tokens.

You will simply need to add this line of code to the top of the file:

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

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

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 suggested 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 to use them more naturally.

More information about adding new tokens is described in How to add a new token

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
#F9971E
colorTextCritical
#D21C1C
colorTextWhite
#FFFFFF
colorIconPrimary
#252A31
colorIconSecondary
#5F738C
colorIconAttention
#252A31
colorIconTertiary
#BAC7D5
colorIconInfo
#0172CB
colorIconSuccess
#28A138
colorIconWarning
#F9971E
colorIconCritical
#D21C1C
colorHeading
#252A31
colorHeadingInverted
#FFFFFF
colorTextLinkPrimary
#007F6D
colorTextLinkPrimaryHover
#00A991
colorTextLinkSecondary
#252A31
colorTextLinkSecondaryHover
#00A991
colorAlertIconSuccess
#28A138
colorTextAlertSuccess
#2D7738
colorAlertIconInfo
#0172CB
colorTextAlertInfo
#005AA3
colorAlertIconWarning
#F9971E
colorTextAlertWarning
#AB3307
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
#F9971E
colorTextButtonWarningBorderedHover
#F38906
colorTextButtonWarningBorderedActive
#D67906
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
#F9971E
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
#F9971E
backgroundButtonWarningHover
#F38906
backgroundButtonWarningActive
#D67906
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
#E5F7FF
backgroundAlertWarning
#FDF0E3
backgroundAlertCritical
#FAEAEA
backgroundBadgeNeutral
#F5F7F9
backgroundBadgeInfo
#E5F7FF
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
24px
heightServiceLogoLarge
48px