Discover Salesforce Lightning Design System 2
Learning Objectives
After completing this unit, you’ll be able to:
- Describe what SLDS 2 is and its benefits.
- Discuss SLDS 2 capabilities and best practices.
Before You Start
This Trailhead module focuses on working with SLDS 2 as an admin. If you’re a developer, check out the Salesforce Lightning Design System 2 for Developers module.
Before you start this module, we recommend that you complete The Salesforce Cosmos Theme: Quick Look.
What Is Salesforce Lightning Design System 2?
The new Salesforce Lightning Design System 2 (SLDS 2) is the latest design system for Lightning Platform products. SLDS 2 is the foundation of our agentic design system.
It helps you create consistent, accessible, and scalable user interfaces across your applications and platforms. SLDS 2 gives admins, developers, and designers tools, components, and guidelines to make apps that match Salesforce design principles and visual language. SLDS 2 is forward-looking, designed to bring your user interface (UI) experiences into the agentic age and beyond.
The key features of SLDS 2 include:
- Lightning components
- A semantic styling hook framework
- The built-in Salesforce Cosmos theme
- A tooling suite, including SLDS Linter and SLDS Validator
Read on to learn how SLDS 2, with its enhanced design architecture and updated supporting tools, can benefit you as an admin, as well as your developers and designers.
Benefits for Salesforce Admins
As a Salesforce admin, SLDS 2 provides you with clicks-not-code design to bring your brand to life through Themes and Branding features so you can customize your users’ experience.
- Turn on the default SLDS 2 theme, Salesforce Cosmos, with one click to experience adaptable spacing, at-a-glance views, and an enriched color palette.
- Create your own SLDS 2 customized theme easily. (More on this later.)
Benefits for Your Developers and Designers
In addition to admin benefits, SLDS 2 offers your team of developers and designers more pro-code, granular control over your org’s UI.
- Rely on our advanced Figma kits with prebuilt components, refreshed colors, and spacing.
- Code faster with SLDS 2 flexible, agentic-forward architecture, including global styling hooks.
- Assess your code quality easily with updated tools like SLDS Linter and SLDS Validator. SLDS Linter is the latest code-analysis tool that analyzes your code against SLDS 2 rules and offers suggestions to improve your code. It also automatically fixes your code and applies those suggestions in bulk across your repository. We recommend that you use SLDS Linter.
This Trailhead module focuses on your experience with SLDS 2 as a Salesforce admin. For a developer or designer experience with SLDS 2, complete Salesforce Lightning Design System 2 for Developers.
Capabilities
In addition to the Salesforce Cosmos SLDS 2 theme in Themes and Branding, SLDS 2 includes a complete suite of features.
SLDS 2 Feature |
Description |
|---|---|
Themes and Branding |
The prebuilt theme plus the ability to build your own custom themes, all grounded in an expanded color palette, give you more granular customization options. |
Salesforce Cosmos theme |
Available within Themes and Branding, Salesforce Cosmos is a modern, intuitive visual design with circular motifs, refreshed colors, and improved typography. |
Advanced Figma kits |
SLDS 2 Figma kits guide your developers and designers on the use of prebuilt components with refreshed styling and 1:1 code mapping. |
Developer tools |
New rule sets, inline guidance, and bulk reporting tools offer developers greater control, specificity, and efficiency. |
User personalization |
Density controls and preferences lead to greater personalization of your UI. |
SLDS 2 architecture |
Semantic styling hooks are a flexible styling framework based on new global styling hooks. Use styling hooks to change the appearance of your UI. Lightning Base Components are the preferred design solution and the basis for forward-looking AI-ready components. |
Keep reading to learn when SLDS 2 will be available in your org, how to turn SLDS 2 on and off, and how to create a custom SLDS 2 theme.
Resources
- Salesforce: Salesforce Lightning Design System 2
- Salesforce Blog: We Are Refreshing Our Visual Design – Here’s How It Helps You Work Faster
- Salesforce Blog: Say ‘Yes’ to the Power of Global Styling Hooks
- Salesforce Blog: What is a Design System and How Does it Tame Your UI?
- Salesforce Blog: What is SLDS 2? It’s a Path to the Future
- Trailhead: The Salesforce Cosmos Theme: Quick Look
- SLDS Linter Developer Guide: Get Started with SLDS Linter
- SLDS Validator Developer Guide: Get Started