Compare Salesforce Lightning Design System Versions
Salesforce Lightning Design System (SLDS) now has two versions. Salesforce Lightning Design System 2 (SLDS 2 beta) was introduced in Spring ’25. The original SLDS is now called SLDS 1.
SLDS 2 is built with a new CSS framework that separates the structure from the visual design using styling hooks. Styling hooks are CSS custom properties that enable deeper customization and theming, allowing you to create unique experiences faster.
You can opt in to using SLDS 2 by choosing the Salesforce Cosmos theme in your org. See Salesforce Cosmos Theme and SLDS 2 Availability (Beta) in Salesforce Help.
This table lists key differences between SLDS 1 and SLDS 2 for developers, with links to more information.
| SLDS 1 | SLDS 2 (Beta) | |
|---|---|---|
| Web site | v1.lightningdesignsystem.com | lightningdesignsystem.com |
| Default theme | Lightning Blue | Salesforce Cosmos |
| Component Blueprints | The blueprints are in the SLDS 1 site: Blueprint Overview | SLDS 2 uses the same blueprints as SLDS 1. The blueprints aren't republished in the lightningdesignsystem.com site. |
| Design tokens | Design tokens are supported in SLDS 1 themes. Design tokens are documented in the v1 site. | Design tokens are not supported in SLDS 2 themes. Design tokens are not documented in the new site. |
| Global styling hooks can replace design tokens to enable a component’s styling to work in SLDS 1 and SLDS 2. | Use SLDS Validator and SLDS Linter (beta) tools for help finding design tokens and replacing with global styling hooks in your components. | |
| Use SLDS Validator for help finding design tokens and replacing them with global styling hooks in your components. | See Styling Hooks > Developer Best Practices for more information about updating component styling to transition to SLDS 2. | |
| Global styling hooks | Global color styling hooks were introduced in Winter ‘24 and documented at Global Color Styling Hooks in the v1 site. | More global styling hooks are added in SLDS 2 for styling other than color. Global color styling hooks now include semantic names, which we recommend to replace the original global color hooks. |
| Component styling hooks | Component styling hooks are documented in component blueprints in the v1 site. See Component Styling Hooks Versus Global Color Styling Hooks. | Component styling hooks are not yet supported in SLDS 2. If your components use styling hooks that are named --slds-c-* we recommend that you stay on SLDS 1 for now. We're working to enable component level styling hooks in SLDS 2. |
SLDS 2 Get Started | Developers