Styling with Design Tokens

Capture the essential values of your visual design into named tokens. Define the token values once and reuse them throughout your Lightning components CSS resources. Tokens make it easy to ensure that your design is consistent, and even easier to update it as your design evolves.

Design tokens are visual design “atoms” for building a design for your components or apps. Specifically, they’re named entities that store visual design attributes, such as pixel values for margins and spacing, font sizes and families, or hex values for colors. Tokens are a terrific way to centralize the low-level values, which you then use to compose the styles that make up the design of your component or app.