Standard Design Tokens for Communities

Use a subset of the standard design tokens to make your components compatible with the Branding panel in Community Builder. The Branding panel enables administrators to quickly style an entire community using branding properties. Each property in the Branding panel maps to one or more standard design tokens. When an administrator updates a property in the Branding panel, the system automatically updates any Lightning components that use the tokens associated with that branding property.
Community Builder Branding panel

Available Tokens for Communities

For Communities using the Customer Service (Napili) template, the following standard tokens are available when extending from force:base.
Important

Important

The standard token values evolve along with SLDS. Available tokens and their values can change without notice.

These Branding panel properties... ...map to these standard design tokens
Text Color colorTextDefault
Detail Text Color
  • colorTextLabel
  • colorTextPlaceholder
  • colorTextWeak
Action Color
  • colorBackgroundButtonBrand
  • colorBackgroundHighlight
  • colorBorderBrand
  • colorBorderButtonBrand
  • colorBrand
  • colorTextBrand
Link Color colorTextLink
Overlay Text Color
  • colorTextButtonBrand
  • colorTextButtonBrandHover
  • colorTextInverse
Border Color
  • colorBorder
  • colorBorderButtonDefault
  • colorBorderInput
  • colorBorderSeparatorAlt
Primary Font fontFamily
Text Case textTransform

In addition, the following standard tokens are available for derived branding properties in the Customer Service (Napili) template. You can indirectly access derived branding properties when you update the properties in the Branding panel. For example, if you change the Action Color property in the Branding panel, the system automatically recalculates the Action Color Darker value based on the new value.

These derived branding properties... ...map to these standard design tokens
Action Color Darker

(Derived from Action Color)

  • colorBackgroundButtonBrandActive
  • colorBackgroundButtonBrandHover
Hover Color

(Derived from Action Color)

  • colorBackgroundButtonDefaultHover
  • colorBackgroundRowHover
  • colorBackgroundRowSelected
  • colorBackgroundShade
Link Color Darker

(Derived from Link Color)

  • colorTextLinkActive
  • colorTextLinkHover

For a complete list of the design tokens available in the SLDS, see Design Tokens on the Lightning Design System site.