Explore Salesforce Lightning Design System 2
Learning Objectives
After completing this unit, you’ll be able to:
- Describe what SLDS 2 is.
- Define two key benefits for developers.
- Explain what styling hooks and components are.
Before You Start
This Trailhead module focuses on working with SLDS 2 as a developer. If you’re an admin, check out the Salesforce Lightning Design System 2 for Admins 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. For admins, developers, and designers, SLDS 2 gives tools, components, and guidelines to make apps that match Salesforce design principles and visual language. SLDS 2 is forward-looking and designed to bring your user interface (UI) experiences into the agentic 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
Next, learn how SLDS 2, with its enhanced architecture and updated tools, can benefit you as a developer.
Benefits for Developers
SLDS 2 offers you more pro-code, granular control over your org’s UI.
- 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.
- Code faster with SLDS 2’s flexible, agentic-forward architecture, including global styling hooks.
Architecture and Capabilities
SLDS 2 is built with a new Cascading Style Sheets (CSS) framework that separates the structure from the theme using styling hooks.
The SLDS 2 architecture contains:
- Out-of-the-box Lightning Base Components as the preferred solution.
- Backward compatibility with our original design system, SLDS 1. Both SLDS 1 and SLDS 2 use common CSS and styling hooks. Your component blueprints continue to work, but we recommend upgrading them to Lightning Base Components.
- Compatibility with next-generation components for agent-first experiences. Agentforce is built with a mix of current and next-generation components that are enhanced with descriptive metadata. Use SLDS 2 to customize the style and performance of your agent UI.
Pro-Code Control or No-Code Design |
SLDS 2 Capability |
Description |
|---|---|---|
Pro-code control |
Modern web standards |
SLDS 2 offers solutions that use CSS custom properties and direct authoring instead of Aura and SasS. |
SLDS 2 architecture |
SLDS 2 decouples the structure from the visual style to give you true customization and theming capabilities. SLDS 2 prioritizes CSS custom properties as the visual language and decreases the usage of design tokens. Use new global styling hooks, built on a flexible styling framework, to change the appearance of your UI. |
|
Developer tools |
New rule sets, inline guidance, and bulk reporting tools offer developers greater control, specificity, and efficiency. These tools make it easier to create, validate, and migrate components. |
|
Advanced Figma kits |
SLDS 2 Figma kits guide developers and designers on how to use prebuilt components with refreshed styling and 1:1 code mapping. |
|
No-code design |
Themes and branding |
A prebuilt theme plus the ability to build your own, 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. |
|
User personalization |
Density controls and preferences give users more ways to personalize the UI. |
Now that you have an overview of SLDS 2 features, let’s take a closer look at two capabilities that are critical for your work as a developer: styling hooks and next-gen components.
Global Styling Hooks
Global styling hooks control component styles like color, spacing, fonts, and borders. Use styling hooks to change component styling to match your brand and to scale theming updates. If you’re familiar with SLDS 1, styling hooks are an evolution of SLDS 1 design tokens.
Styling hooks use CSS custom properties, which make it easy to customize component styling and express your brand, especially when working with Lightning Web Components (LWC) and the Shadow document object model (DOM). The official styling hooks namespace for SLDS is --slds.
In this example, we replace the hard-coded background color and border radius with global styling hooks that use the same values. We also keep the hard-coded values as a fallback.
/* Hard-coded CSS */
.my-custom-card {
background-color:#ffffff;
border-radius: 1rem;
}
/* ----- Refactor to ----- */
/* Updated CSS */
.my-custom-card {
background-color: var(--slds-g-color-surface-container-1, #ffffff);
border-radius: var(--slds-g-radius-border-4, 1rem);
}Global styling hooks control visual styles in both code and Figma. In Figma, styling hooks appear as variables and are used through style properties, whereas in code, styling hooks are represented as CSS variables. Styling hooks are organized and named in a way that makes it easy to grasp how they’re used and applied.
These principles govern our new global styling hook structure.
--[namespace]-g–[category]-[property]-[pairing]-[role]-[attribute]-[state]-[range]
Identifier |
Example |
Description |
Required |
|---|---|---|---|
namespace |
slds |
Denotes the system that owns the hook |
X |
scope |
g |
Defines the reach of your hook |
X |
category |
color |
Identifies the general area that the hook affects |
X |
property |
border |
Specific aspects of styling you can control |
|
pairing |
on |
Identifies if color is paired with a color role |
|
role |
surface |
Identifies the semantic role of the element |
|
attribute |
container |
Represents the semantic characteristic of a property |
|
state |
disabled |
The state of a property within the context of interaction design |
|
range |
1-x |
Provides a numerical indicator that denotes the scale of a property |
X |
Example: --slds-g–-color-border-disabled-1
You can think of styling hooks as CSS variables, which are a standard for browser-based projects or cases where responsive and dynamic styling within a browser is required. They’re excellent for front-end development teams who want flexible styling for web applications.
For more information, read Styling Hooks and Get Started: Developers on the Salesforce Lightning Design System 2 site.
Components
Components are building blocks that perform a specific function or action within your UI. Components within Salesforce can have many different meanings, so let’s look at the components that are important to your work in SLDS 2.
Component Type |
Description and Features |
|---|---|
Lightning Web Component |
The modern, standards-based Salesforce framework for building modular and reusable UI components using native web technologies like JavaScript, HTML, and CSS. |
Lightning Base Component |
The set of programmatic components built according to the SLDS component blueprint library that you use in SLDS 2. Provides minimum functionality. |
Custom Lightning Component |
Functional, reusable components created by customers, built on the Lightning platform, with or without Base components. |
Component Blueprint |
Framework-agnostic HTML or CSS that represents the visual design part of a component. |
For more help with components, read Components on the SLDS 2 website. Also, read the Working with Base Lightning Components and Lightning Web Components developer guides.
You’ve learned about the SLDS 2 architecture, capabilities, and key features for developers. Next, learn how to assess your org’s compatibility with SLDS 2 and how to uplift your custom components to SLDS 2.
Resources
- Salesforce Blog: We Refreshed 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's a Design System and How Does It Tame Your UI?
- Salesforce Blog: What Is SLDS 2? It’s a Path to the Future
- Salesforce Developer Documentation: Working with Base Lightning Components
- Salesforce Developer Documentation: Get Started with SLDS Linter
- SLDS Validator Developer Guide: Get Started
- Salesforce Lightning Design System 2: Components
- Salesforce Site: Salesforce Lightning Design System 2
- Trailhead: The Salesforce Cosmos Theme: Quick Look