Orbit Design Tokens

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

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

Font Families	Value	Examples	Usage
`fontFamily`	`'Roboto', -apple-system, '.SFNSText-Regular', 'San Francisco', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif`	The quick brown fox jumps over the lazy dog.

Font Sizes	Value	Examples
`fontSizeFormLabel`	`14px`	The quick brown fox jumps over the lazy dog.
`fontSizeInputNormal`	`14px`	The quick brown fox jumps over the lazy dog.
`fontSizeTextNormal`	`14px`	The quick brown fox jumps over the lazy dog.
`fontSizeButtonSmall`	`12px`	The quick brown fox jumps over the lazy dog.
`fontSizeHeadingDisplaySubtitle`	`22px`	The quick brown fox jumps over the lazy dog.
`fontSizeButtonNormal`	`14px`	The quick brown fox jumps over the lazy dog.
`fontSizeTextSmall`	`12px`	The quick brown fox jumps over the lazy dog.
`fontSizeHeadingTitle1`	`28px`	The quick brown fox jumps over the lazy dog.
`fontSizeHeadingTitle2`	`22px`	The quick brown fox jumps over the lazy dog.
`fontSizeInputSmall`	`14px`	The quick brown fox jumps over the lazy dog.
`fontSizeHeadingTitle3`	`16px`	The quick brown fox jumps over the lazy dog.
`fontSizeHeadingTitle4`	`14px`	The quick brown fox jumps over the lazy dog.
`fontSizeHeadingTitle5`	`12px`	The quick brown fox jumps over the lazy dog.
`fontSizeHeadingDisplay`	`40px`	The quick brown fox jumps over the lazy dog.
`fontSizeMessage`	`14px`	The quick brown fox jumps over the lazy dog.
`fontSizeButtonLarge`	`16px`	The quick brown fox jumps over the lazy dog.
`fontSizeFormFeedback`	`12px`	The quick brown fox jumps over the lazy dog.
`fontSizeTextLarge`	`16px`	The quick brown fox jumps over the lazy dog.

Font Weights	Value	Examples
`fontWeightTableHead`	`700`	The quick brown fox jumps over the lazy dog.
`fontWeightHeadingDisplay`	`700`	The quick brown fox jumps over the lazy dog.
`fontWeightBold`	`700`	The quick brown fox jumps over the lazy dog.
`fontWeightNormal`	`400`	The quick brown fox jumps over the lazy dog.
`fontWeightLinks`	`500`	The quick brown fox jumps over the lazy dog.
`fontWeightHeadingTitle1`	`700`	The quick brown fox jumps over the lazy dog.
`fontWeightHeadingTitle2`	`500`	The quick brown fox jumps over the lazy dog.
`fontWeightHeadingTitle3`	`500`	The quick brown fox jumps over the lazy dog.
`fontWeightHeadingTitle4`	`500`	The quick brown fox jumps over the lazy dog.
`fontWeightHeadingTitle5`	`700`	The quick brown fox jumps over the lazy dog.
`fontWeightMedium`	`500`	The quick brown fox jumps over the lazy dog.
`fontWeightHeadingDisplaySubtitle`	`400`	The quick brown fox jumps over the lazy dog.

Border Radius	Value	Usage
`borderRadiusNormal`	`3px`	use for all basic elements like buttons, inputs, content containers
`borderRadiusBadge`	`12px`
`borderRadiusSmall`	`2px`	use for smaller elements like tags
`borderRadiusCircle`	`50%`	use only for square
`borderRadiusLarge`	`6px`	use for big elements like modal and large buttons

Sizing	Value	Examples	Usage
`widthModalSmall`	`540px`
`heightButtonNormal`	`44px`
`heightServiceLogoLarge`	`48px`
`heightButtonLarge`	`52px`
`heightInputSmall`	`32px`
`heightRadioButton`	`20px`
`widthRadioButton`	`20px`
`heightIconSmall`	`16px`
`widthIconSmall`	`16px`
`widthCheckbox`	`20px`
`heightInputNormal`	`44px`
`heightCheckbox`	`20px`
`heightIllustrationMedium`	`200px`
`heightStopoverArrow`	`7px`
`widthStopoverArrow`	`36px`
`widthModalNormal`	`740px`
`heightButtonSmall`	`32px`
`heightServiceLogoSmall`	`12px`
`heightServiceLogoMedium`	`24px`
`heightIllustrationSmall`	`90px`
`heightInputGroupSeparatorNormal`	`24px`
`widthModalLarge`	`1280px`
`widthIconMedium`	`24px`
`heightIconMedium`	`24px`
`widthBadgeCircled`	`24px`
`heightInputLarge`	`52px`
`heightCountryFlag`	`auto`
`heightIconLarge`	`32px`
`widthCountryFlag`	`24px`
`heightBadge`	`24px`
`widthIconLarge`	`32px`
`heightSeparator`	`1px`
`heightInputGroupSeparatorSmall`	`16px`

Border Colors	Value	Examples	Usage
`borderColorButtonFacebookBorderedActive`	`#354F88`
`borderColorCheckboxRadio`	`#BAC7D5`
`borderColorButtonInfoBordered`	`#0172CB`
`borderColorButtonFacebookBorderedHover`	`#385490`
`borderColorTag`	`#EFF2F5`
`borderColorInputErrorFocus`	`#D21C1C`
`borderColorButtonPrimaryBordered`	`#00A991`
`borderColorButtonWarningBorderedActive`	`#CD7304`
`borderColorInputFocus`	`#0172CB`
`borderColorButtonSuccessBordered`	`#28A138`
`borderColorButtonSecondaryBorderedHover`	`#181B20`
`borderColorCheckboxRadioError`	`#D21C1C`
`borderColorCard`	`#EFF2F5`
`borderColorCheckboxRadioActive`	`#252A31`
`borderColorInputErrorHover`	`#B91919`
`borderColorButtonInfoBorderedActive`	`#01508E`
`borderColorInputHover`	`#A6B6C8`
`borderColorButtonCriticalBorderedHover`	`#B91919`
`borderColorButtonPrimaryBorderedActive`	`#008F7B`
`borderColorButtonSuccessBorderedActive`	`#1D7228`
`borderColorButtonWhiteBordered`	`#FFFFFF`
`borderColorButtonGoogleBordered`	`#252A31`
`borderColorButtonGoogleBorderedHover`	`#181B20`
`borderColorButtonWhiteBorderedHover`	`#FFFFFF`
`borderColorButtonWhiteBorderedActive`	`#FFFFFF`
`borderColorButtonCriticalBordered`	`#D21C1C`
`borderColorButtonGoogleBorderedActive`	`#0B0C0F`
`borderColorInput`	`#BAC7D5`
`borderColorTagFocus`	`#0172CB`
`borderColorInputError`	`#D21C1C`
`borderColorButtonSecondaryBordered`	`#252A31`
`borderColorModal`	`#EFF2F5`
`borderColorCheckboxRadioFocus`	`#0172CB`
`borderColorButtonSuccessBorderedHover`	`#238B31`
`borderColorTableHead`	`#BAC7D5`
`borderColorTable`	`#EFF2F5`
`borderColorButtonPrimaryBorderedHover`	`#009882`
`borderColorInputActive`	`#94A8BE`
`borderColorTableCell`	`#BAC7D5`
`borderColorButtonCriticalBorderedActive`	`#9D1515`
`borderColorButtonFacebookBordered`	`#3B5998`
`borderColorButtonInfoBorderedHover`	`#0161AC`
`borderColorCheckboxRadioHover`	`#5F738C`
`borderColorButtonSecondaryBorderedActive`	`#0B0C0F`
`borderColorButtonWarningBordered`	`#E98305`
`borderColorButtonWarningBorderedHover`	`#DC7C05`

Border Styles	Value	Examples	Usage
`borderStyleInput`	`solid`
`borderWidthInputFocus`	`2px`
`borderWidthCard`	`1px`
`borderWidthInput`	`1px`
`borderStyleCard`	`solid`

Spacing	Value	Examples	Usage
`paddingInputNormal`	`0 12px`
`marginButtonIconNormal`	`8px`
`spaceXXSmall`	`4px`
`spaceSmall`	`12px`
`marginButtonIconLarge`	`12px`
`paddingButtonSmall`	`0 12px`
`paddingButtonNormalWithRightIcon`	`0 12px 0 16px`
`paddingTableCompact`	`8px 12px`
`paddingLeftSelectPrefix`	`48px`
`marginBottomSelectSuffix`	`2px`
`paddingTagWithIcon`	`6px 8px 6px 6px`
`paddingTag`	`6px 8px`
`spaceXLarge`	`32px`
`spaceXXXLarge`	`52px`
`paddingButtonNormal`	`0 16px`
`paddingButtonSmallWithLeftIcon`	`0 12px 0 8px`
`paddingAlertWithIcon`	`12px`
`paddingButtonNormalWithIcons`	`0 12px`
`paddingButtonSmallWithRightIcon`	`0 8px 0 12px`
`paddingAlert`	`16px`
`paddingLoading`	`12px`
`marginBadgeIcon`	`0 4px 0 0`
`marginButtonIconSmall`	`8px`
`paddingInputSmall`	`0 12px`
`paddingButtonSmallWithIcons`	`0 8px`
`paddingButtonNormalWithLeftIcon`	`0 16px 0 12px`
`marginTopFormFeedback`	`2px`
`paddingTagRemovableWithIcon`	`6px`
`paddingTagRemovable`	`6px 6px 6px 8px`
`paddingBadge`	`0 8px`
`paddingTextareaNormal`	`12px`
`paddingButtonWithoutText`	`0`
`spaceXSmall`	`8px`
`spaceXXLarge`	`40px`
`spaceXXXSmall`	`2px`
`spaceLarge`	`24px`
`paddingInputFile`	`0 0 0 6px`
`paddingButtonLargeWithRightIcon`	`0 16px 0 28px`
`paddingButtonLarge`	`0 28px`
`spaceMedium`	`16px`
`paddingTextareaSmall`	`8px 12px`
`paddingButtonLargeWithIcons`	`0 16px`
`paddingTable`	`12px 16px`
`paddingButtonLargeWithLeftIcon`	`0 28px 0 16px`
`marginButtonGroup`	`0 1px 0 0`

Line Heights	Value	Examples
`lineHeightHeadingTitle1`	`36px`	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
`lineHeightHeadingTitle2`	`28px`	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
`lineHeightHeadingTitle3`	`24px`	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
`lineHeightHeadingTitle4`	`20px`	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
`lineHeightHeadingTitle5`	`20px`	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
`lineHeightHeading`	`1.2`	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
`lineHeightText`	`1.4`	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
`lineHeightTextNormal`	`20px`	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
`lineHeightHeadingDisplaySubtitle`	`28px`	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
`lineHeightTextLarge`	`22px`	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
`lineHeightHeadingDisplay`	`44px`	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
`lineHeightTextSmall`	`16px`	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.

Modifier	Value	Examples	Usage
`modifierScaleButtonActive`	`0.95`
`modifierScaleCheckboxRadioActive`	`0.95`

Text decoration	Value	Examples	Usage
`textDecorationTextLinkSecondaryHover`	`none`
`textDecorationTextLinkSecondary`	`underline`
`textDecorationTextLinkPrimary`	`underline`
`textDecorationTextLinkPrimaryHover`	`none`

Duration	Value	Examples	Usage
`durationFast`	`0.15s`
`durationSlow`	`0.4s`
`durationNormal`	`0.3s`

Opacity	Value	Examples	Usage
`opacityOverlay`	`0.8`
`opacityCheckboxDisabled`	`0.5`
`opacityButtonDisabled`	`0.3`
`opacityRadioButtonDisabled`	`0.5`

Z Index	Value	Examples	Usage
`zIndexSticky`	`100`
`zIndexDefault`	`1`
`zIndexModal`	`825`
`zIndexModalOverlay`	`800`
`zIndexOnTheTop`	`900`

Box Shadows	Value	Examples	Usage
`boxShadowAction`	`0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px 1px 4px 0px rgba(37, 42, 49, 0.12)`
`boxShadowRaised`	`0px 4px 8px 0px rgba(37, 42, 49, 0.16), 0px 8px 24px 0px rgba(37, 42, 49, 0.24)`
`boxShadowOverlay`	`0px 12px 24px -4px rgba(37, 42, 49, 0.24), 0px 8px 60px 0px rgba(37, 42, 49, 0.32)`
`boxShadowActionActive`	`0px 1px 4px 0px rgba(37, 42, 49, 0.16), 0px 4px 8px 0px rgba(37, 42, 49, 0.12)`
`boxShadowFixed`	`0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px 2px 4px 0px rgba(37, 42, 49, 0.12)`
`boxShadowFixedReverse`	`0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px -2px 4px 0px rgba(37, 42, 49, 0.12)`
`boxShadowButtonFocus`	`0 0 4px 1px rgba(1, 114, 203, 0.3)`
`boxShadowRaisedReverse`	`0px -4px 8px 0px rgba(37, 42, 49, 0.16), 0px -8px 24px 0px rgba(37, 42, 49, 0.24)`