Lightning Design System
The Lightning Design System (SLDS) is Salesforce''s open-source design system that defines the visual language, component patterns, and CSS framework used across Lightning Experience, the Salesforce mobile app, Experience Cloud sites, and custom Lightning Web Components.
Definition
The Lightning Design System (SLDS) is Salesforce''s open-source design system that defines the visual language, component patterns, and CSS framework used across Lightning Experience, the Salesforce mobile app, Experience Cloud sites, and custom Lightning Web Components. SLDS provides the design tokens (colors, spacing, typography), a CSS framework (utilities, layout grids, component classes), and a reference site (lightningdesignsystem.com) documenting every available pattern with code examples.
SLDS is the layer that makes a custom Lightning Web Component look like it belongs in Salesforce. Developers reference SLDS classes in their LWC markup (slds-button, slds-card, slds-grid) and the component picks up the Salesforce visual identity automatically: same colors, same spacing, same hover states, same accessibility behavior. The system is also publicly maintained on GitHub, so non-Salesforce developers can use SLDS in standalone web applications. Salesforce updates SLDS with each platform release, and the recent SLDS 2 refresh modernized the underlying CSS to align with current web standards.
What SLDS provides and how Lightning components consume it
Design tokens
SLDS defines design tokens for colors, spacing, typography, border radii, shadows, and animation timings. The tokens are the abstraction layer between specific values (this blue is #1589EE) and semantic meaning (this is the brand primary color). Components reference tokens via CSS custom properties; updating a token globally propagates to every component using it.
The CSS framework
SLDS ships hundreds of utility classes (slds-m-around_medium for margin, slds-p-vertical_large for padding, slds-text-heading_large for typography), layout helpers (slds-grid, slds-col), and component-specific classes (slds-button_brand, slds-card__header). Lightning Web Components import the framework via the @salesforce/style scoped style import; the styles apply automatically.
The component blueprints
The SLDS reference site (lightningdesignsystem.com) documents every component blueprint: button, card, input, modal, datatable, path, picklist, tabs, toast. Each blueprint shows the HTML markup, the relevant SLDS classes, the visual states (default, hover, active, disabled), the accessibility considerations, and live examples. Developers copy these patterns into their custom LWCs to maintain visual consistency.
Accessibility built in
Every SLDS component blueprint documents the ARIA attributes, keyboard navigation behavior, and color contrast requirements needed for accessibility. Components built from SLDS blueprints are accessible by default; deviating from the blueprint without applying the same accessibility patterns produces components that fail WCAG compliance.
Theming and customization
Customers can theme SLDS via the Theme Builder in Setup. The Theme Builder lets admins set the brand color, the logo, the background, and a few other tokens; every Lightning page picks up the customization automatically. Deeper theme changes require custom CSS that targets SLDS variables.
SLDS 2 refresh
Salesforce launched SLDS 2 as a major refresh of the design system, aligning the visual language with current web standards. SLDS 2 introduces updated component blueprints, modernized tokens, and improved theming. Existing SLDS-using components still work; migration to SLDS 2 is opt-in but recommended for new builds.
Open-source distribution
SLDS is published on GitHub under an open-source license. Non-Salesforce web applications can use SLDS by installing the npm package and referencing classes in their markup. The same visual language can run inside Lightning Experience and on an external marketing site, producing brand consistency across both surfaces.
Use SLDS in a custom Lightning Web Component
SLDS adoption in LWC is one import line plus class references in the template. The system is designed to be invisible once configured.
- Open the LWC template
Edit the component''s .html file. Plan the markup structure (form, card, table) before writing classes.
- Reference the SLDS reference site
Find the blueprint matching your component (button, card, input). Copy the HTML structure and the SLDS classes.
- Apply SLDS classes in the template
Use slds-card, slds-button_brand, slds-input, slds-grid, slds-col. The classes are documented on lightningdesignsystem.com.
- Test in Lightning Experience
Deploy the LWC. Verify the styling matches the SLDS blueprint and adapts to the org''s theme.
- Verify accessibility
Check ARIA attributes, keyboard navigation, and color contrast. SLDS blueprints document the patterns; ensure your component matches.
- Avoid custom CSS where possible
Stick to SLDS classes; custom CSS that overrides SLDS produces components that break when SLDS updates.
The HTML file where SLDS classes apply.
The utility and component classes used in the markup.
ARIA roles and labels per the blueprint.
Component should adapt to Theme Builder customizations.
- Custom CSS overrides break on SLDS updates. Stick to documented SLDS classes; treat overrides as exceptions, not the default.
- SLDS classes are designed for Lightning Experience. Components rendering inside Salesforce Classic do not benefit from SLDS styling.
- SLDS 2 is opt-in for migration. New components should target SLDS 2; old components on SLDS 1 still work but won''t benefit from the refreshed visual language.
- Theme Builder customizations apply at the org level. Component-level styling overrides take precedence and bypass the theme.
Trust & references
Cross-checked against the following references.
- Lightning Design SystemSalesforce
- SLDS GitHubSalesforce
About the Author
Dipojjal Chakrabarti is a B2C Solution Architect with 29 Salesforce certifications and over 13 years in the Salesforce ecosystem. He runs salesforcedictionary.com to help admins, developers, architects, and cert/interview candidates sharpen their fundamentals. More about Dipojjal.
Test your knowledge
Q1. What is Lightning Design System?
Q2. Is SLDS free to use?
Q3. What does SLDS include?
Discussion
Loading discussion…