Compare Salesforce Lightning Design System Versions
Salesforce Lightning Design System (SLDS) now has two versions. Salesforce Lightning Design System 2 (SLDS 2) 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 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 | |
|---|---|---|
| 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 Linter and SLDS Validator for help finding design tokens and replacing with global styling hooks in your components. | |
| Use SLDS Linter and SLDS Validator for help finding design tokens and replacing 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 | SLDS 1 provides global styling hooks for accessible system colors and accessible color palettes. These styling hooks are listed at Global Color Styling Hooks in the SLDS 1 site and also included in the Global Styling Hooks Index on the SLDS 2 site. Read Styling Hooks on the SLDS 2 site for more information. | The global styling hooks provided in SLDS 1 are also available in SLDS 2, plus semantic UI color global styling hooks. Read Styling Hooks and view the Global Styling Hooks Index on the SLDS 2 site. We recommend replacing the original global color hooks with the semantic UI color global styling 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 aren't currently 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. |
See Also