Token Name | Example Value |
---|---|
borderWidthThin | 1px |
borderWidthThick | 2px |
spacingXxxSmall | 0.125rem |
spacingXxSmall | 0.25rem |
spacingXSmall | 0.5rem |
spacingSmall | 0.75rem |
spacingMedium | 1rem |
spacingLarge | 1.5rem |
spacingXLarge | 2rem |
sizeXxSmall | 6rem |
sizeXSmall | 12rem |
sizeSmall | 15rem |
sizeMedium | 20rem |
sizeLarge | 25rem |
sizeXLarge | 40rem |
sizeXxLarge | 60rem |
squareIconUtilitySmall | 1rem |
squareIconUtilityMedium | 1.25rem |
squareIconUtilityLarge | 1.5rem |
squareIconLargeBoundary | 3rem |
squareIconLargeBoundaryAlt | 5rem |
squareIconLargeContent | 2rem |
squareIconMediumBoundary | 2rem |
squareIconMediumBoundaryAlt | 2.25rem |
squareIconMediumContent | 1rem |
squareIconSmallBoundary | 1.5rem |
squareIconSmallContent | .75rem |
squareIconXSmallBoundary | 1.25rem |
squareIconXSmallContent | .5rem |
fontWeightLight | 300 |
fontWeightRegular | 400 |
fontWeightBold | 700 |
lineHeightHeading | 1.25 |
lineHeightText | 1.375 |
lineHeightReset | 1 |
lineHeightTab | 2.5rem |
fontFamily | 'Salesforce Sans', Arial, sans-serif |
borderRadiusSmall | .125rem |
borderRadiusMedium | .25rem |
borderRadiusLarge | .5rem |
borderRadiusPill | 15rem |
borderRadiusCircle | 50% |
colorBorder | rgb(216, 221, 230) |
colorBorderBrand | rgb(21, 137, 238) |
colorBorderError | rgb(194, 57, 52) |
colorBorderSuccess | rgb(75, 202, 129) |
colorBorderWarning | rgb(255, 183, 93) |
colorBorderTabSelected | rgb(0, 112, 210) |
colorBorderSeparator | rgb(244, 246, 249) |
colorBorderSeparatorAlt | rgb(216, 221, 230) |
colorBorderSeparatorInverse | rgb(42, 66, 108) |
colorBorderRowSelected | rgb(0, 112, 210) |
colorBorderRowSelectedHover | rgb(21, 137, 238) |
colorBorderButtonBrand | rgb(0, 112, 210) |
colorBorderButtonBrandDisabled | rgba(0, 0, 0, 0) |
colorBorderButtonDefault | rgb(216, 221, 230) |
colorBorderButtonInverseDisabled | rgba(255, 255, 255, 0.15) |
colorBorderInput | rgb(216, 221, 230) |
colorBorderInputActive | rgb(21, 137, 238) |
colorBorderInputDisabled | rgb(168, 183, 199) |
colorBorderInputCheckboxSelectedCheckmark | rgb(255, 255, 255) |
colorBackground | rgb(244, 246, 249) |
colorBackgroundAlt | rgb(255, 255, 255) |
colorBackgroundAltInverse | rgb(22, 50, 92) |
colorBackgroundRowHover | rgb(244, 246, 249) |
colorBackgroundRowActive | rgb(238, 241, 246) |
colorBackgroundRowSelected | rgb(240, 248, 252) |
colorBackgroundRowNew | rgb(217, 255, 223) |
colorBackgroundInverse | rgb(6, 28, 63) |
colorBackgroundBrowser | rgb(84, 105, 141) |
colorBackgroundChromeMobile | rgb(0, 112, 210) |
colorBackgroundChromeDesktop | rgb(255, 255, 255) |
colorBackgroundHighlight | rgb(250, 255, 189) |
colorBackgroundModal | rgb(255, 255, 255) |
colorBackgroundModalBrand | rgb(0, 112, 210) |
colorBackgroundNotificationBadge | rgb(194, 57, 52) |
colorBackgroundNotificationBadgeHover | rgb(0, 95, 178) |
colorBackgroundNotificationBadgeFocus | rgb(0, 95, 178) |
colorBackgroundNotificationBadgeActive | rgb(0, 57, 107) |
colorBackgroundNotificationNew | rgb(240, 248, 252) |
colorBackgroundPayload | rgb(244, 246, 249) |
colorBackgroundShade | rgb(224, 229, 238) |
colorBackgroundStencil | rgb(238, 241, 246) |
colorBackgroundStencilAlt | rgb(224, 229, 238) |
colorBackgroundScrollbar | rgb(224, 229, 238) |
colorBackgroundScrollbarTrack | rgb(168, 183, 199) |
colorBrand | rgb(21, 137, 238) |
colorBrandDark | rgb(0, 112, 210) |
colorBackgroundModalButton | rgba(0, 0, 0, 0.07) |
colorBackgroundModalButtonActive | rgba(0, 0, 0, 0.16) |
colorBackgroundInput | rgb(255, 255, 255) |
colorBackgroundInputActive | rgb(255, 255, 255) |
colorBackgroundInputCheckbox | rgb(255, 255, 255) |
colorBackgroundInputCheckboxDisabled | rgb(216, 221, 230) |
colorBackgroundInputCheckboxSelected | rgb(21, 137, 238) |
colorBackgroundInputDisabled | rgb(224, 229, 238) |
colorBackgroundInputError | rgb(255, 221, 225) |
colorBackgroundPill | rgb(255, 255, 255) |
colorBackgroundToast | rgba(84, 105, 141, 0.95) |
colorBackgroundToastSuccess | rgb(4, 132, 75) |
colorBackgroundToastError | rgba(194, 57, 52, 0.95) |
shadowDrag | 0 2px 4px 0 rgba(0, 0, 0, 0.40) |
shadowDropDown | 0 2px 3px 0 rgba(0, 0, 0, 0.16) |
shadowHeader | 0 2px 4px rgba(0, 0, 0, 0.07) |
shadowButtonFocus | 0 0 3px #0070D2 |
shadowButtonFocusInverse | 0 0 3px #E0E5EE |
colorTextActionLabel | rgb(84, 105, 141) |
colorTextActionLabelActive | rgb(22, 50, 92) |
colorTextBrand | rgb(21, 137, 238) |
colorTextBrowser | rgb(255, 255, 255) |
colorTextBrowserActive | rgba(0, 0, 0, 0.4) |
colorTextDefault | rgb(22, 50, 92) |
colorTextError | rgb(194, 57, 52) |
colorTextInputDisabled | rgb(84, 105, 141) |
colorTextInputFocusInverse | rgb(22, 50, 92) |
colorTextInputIcon | rgb(159, 170, 181) |
colorTextInverse | rgb(255, 255, 255) |
colorTextInverseWeak | rgb(159, 170, 181) |
colorTextInverseActive | rgb(94, 180, 255) |
colorTextInverseHover | rgb(159, 170, 181) |
colorTextLink | rgb(0, 112, 210) |
colorTextLinkActive | rgb(0, 57, 107) |
colorTextLinkDisabled | rgb(22, 50, 92) |
colorTextLinkFocus | rgb(0, 95, 178) |
colorTextLinkHover | rgb(0, 95, 178) |
colorTextLinkInverse | rgb(255, 255, 255) |
colorTextLinkInverseHover | rgba(255, 255, 255, 0.75) |
colorTextLinkInverseActive | rgba(255, 255, 255, 0.5) |
colorTextLinkInverseDisabled | rgba(255, 255, 255, 0.15) |
colorTextModal | rgb(255, 255, 255) |
colorTextModalButton | rgb(84, 105, 141) |
colorTextStageLeft | rgb(224, 229, 238) |
colorTextTabLabel | rgb(22, 50, 92) |
colorTextTabLabelSelected | rgb(0, 112, 210) |
colorTextTabLabelHover | rgb(0, 95, 178) |
colorTextTabLabelFocus | rgb(0, 95, 178) |
colorTextTabLabelActive | rgb(0, 57, 107) |
colorTextTabLabelDisabled | rgb(224, 229, 238) |
colorTextToast | rgb(224, 229, 238) |
colorTextWeak | rgb(84, 105, 141) |
colorTextIconBrand | rgb(0, 112, 210) |
colorTextButtonBrand | rgb(255, 255, 255) |
colorTextButtonBrandHover | rgb(255, 255, 255) |
colorTextButtonBrandActive | rgb(255, 255, 255) |
colorTextButtonBrandDisabled | rgb(255, 255, 255) |
colorTextButtonDefault | rgb(0, 112, 210) |
colorTextButtonDefaultHover | rgb(0, 112, 210) |
colorTextButtonDefaultActive | rgb(0, 112, 210) |
colorTextButtonDefaultDisabled | rgb(216, 221, 230) |
colorTextButtonDefaultHint | rgb(159, 170, 181) |
colorTextButtonInverse | rgb(224, 229, 238) |
colorTextButtonInverseDisabled | rgba(255, 255, 255, 0.15) |
colorTextIconDefault | rgb(84, 105, 141) |
colorTextIconDefaultHint | rgb(159, 170, 181) |
colorTextIconDefaultHover | rgb(0, 112, 210) |
colorTextIconDefaultActive | rgb(0, 57, 107) |
colorTextIconDefaultDisabled | rgb(216, 221, 230) |
colorTextIconInverse | rgb(255, 255, 255) |
colorTextIconInverseHover | rgb(255, 255, 255) |
colorTextIconInverseActive | rgb(255, 255, 255) |
colorTextIconInverseDisabled | rgba(255, 255, 255, 0.15) |
colorTextLabel | rgb(84, 105, 141) |
colorTextPlaceholder | rgb(84, 105, 141) |
colorTextPlaceholderInverse | rgb(224, 229, 238) |
colorTextRequired | rgb(194, 57, 52) |
colorTextPill | rgb(0, 112, 210) |
durationInstantly | 0s |
durationImmediately | 0.05s |
durationQuickly | 0.1s |
durationPromptly | 0.2s |
durationSlowly | 0.4s |
durationPaused | 3.2s |
colorBackgroundButtonBrand | rgb(0, 112, 210) |
colorBackgroundButtonBrandActive | rgb(0, 57, 107) |
colorBackgroundButtonBrandHover | rgb(0, 95, 178) |
colorBackgroundButtonBrandDisabled | rgb(224, 229, 238) |
colorBackgroundButtonDefault | rgb(255, 255, 255) |
colorBackgroundButtonDefaultHover | rgb(244, 246, 249) |
colorBackgroundButtonDefaultFocus | rgb(244, 246, 249) |
colorBackgroundButtonDefaultActive | rgb(238, 241, 246) |
colorBackgroundButtonDefaultDisabled | rgb(255, 255, 255) |
colorBackgroundButtonIcon | rgba(0, 0, 0, 0) |
colorBackgroundButtonIconHover | rgb(244, 246, 249) |
colorBackgroundButtonIconFocus | rgb(244, 246, 249) |
colorBackgroundButtonIconActive | rgb(238, 241, 246) |
colorBackgroundButtonIconDisabled | rgb(255, 255, 255) |
colorBackgroundButtonInverse | rgba(0, 0, 0, 0) |
colorBackgroundButtonInverseActive | rgba(0, 0, 0, 0.24) |
colorBackgroundButtonInverseDisabled | rgba(0, 0, 0, 0) |
lineHeightButton | 1.875rem |
lineHeightButtonSmall | 1.75rem |
colorBackgroundAnchor | rgb(244, 246, 249) |
For a complete list of the design tokens available in the SLDS, see Design Tokens on the Lightning Design System site.