TutorialKart.comSalesforce Lightning Design System (SLDS) is the design system used to build Salesforce-style user interfaces. It provides CSS utility classes, component blueprints, icons, design guidance, and theming patterns so that Visualforce pages, Lightning Web Components, Aura components, and related web experiences can look and behave consistently with Salesforce.
What is Salesforce Lightning Design System (SLDS)?
Salesforce Lightning Design System, usually called SLDS, is a collection of design rules and front-end resources for building interfaces that follow Salesforce Lightning Experience patterns. Instead of writing every button, form, card, grid, spacing rule, and icon style from scratch, developers can use SLDS classes and component blueprints as a starting point.
SLDS is useful when a custom screen must feel like part of Salesforce. For example, a Visualforce page embedded in Lightning Experience, a custom Lightning Web Component, or a standalone app that supports Salesforce users can follow SLDS structure and spacing to keep the experience familiar.
In current Salesforce documentation, the original design system is often described as SLDS 1, while SLDS 2 introduces updated theming and styling-hook based customization. The core purpose remains the same: create consistent, accessible, Salesforce-aligned user interfaces.
Main SLDS Resources Used in Salesforce UI Development
To build an application using Salesforce Lightning Design System, you usually work with the following resources.
SLDS CSS framework for Salesforce components
The SLDS CSS framework defines the visual language for common interface elements such as buttons, page headers, cards, forms, grids, tabs, tables, labels, spacing, sizing, and alignment. Developers apply predefined slds- classes to HTML elements instead of recreating the same CSS repeatedly.
<button class="slds-button slds-button_brand">
Save Account
</button>The class names are meaningful. In the example above, slds-button applies the base button style, and slds-button_brand applies the brand button variant.
Salesforce Lightning Design System icons
SLDS includes icon sets used across Salesforce, including action, custom, doctype, standard, and utility icons. Icons are commonly used in buttons, page headers, record cards, alerts, empty states, and navigation elements. In Lightning Web Components, many icons are used through base components such as lightning-icon.
<lightning-icon
icon-name="utility:settings"
alternative-text="Settings"
size="small">
</lightning-icon>Salesforce Sans font and typography rules
SLDS provides typography guidance for headings, body text, labels, helper text, and page-level hierarchy. Salesforce Sans is associated with the Lightning visual style, but developers should rely on the fonts and styles delivered by the Salesforce platform rather than manually forcing fonts in every component.
SLDS design tokens, styling hooks, and themes
Design tokens and styling hooks help Salesforce interfaces use consistent values for colors, spacing, sizing, borders, and related visual decisions. In SLDS 1, design tokens are commonly referenced for reusable visual values. In SLDS 2, Salesforce places more emphasis on CSS custom properties and styling hooks so that themes can adapt without changing component markup.
When styling custom Lightning Web Components, avoid directly overriding internal SLDS selectors such as .slds-input. Create your own component classes or use supported styling hooks where Salesforce documents them.
.account-summary {
padding: var(--slds-g-spacing-4, 1rem);
}Who Can Use Salesforce Lightning Design System?
The new lightning design systems can be used in Visualforce pages, Lightning pages, Lightning components, Mobile Apps and other web applications. Salesforce lightning design system can be used by various Salesforce users like
Designers using SLDS patterns for Salesforce screens
The Lightning Design System reflects the patterns and components that underpin the Salesforce product. These patterns and components provide a unified language and consistent look and feel when designing apps and products within the Salesforce ecosystem.
=> Download Design System (2.4.1)
Designers use SLDS to choose the correct layout pattern, spacing, icon style, form structure, and interaction pattern before the screen is implemented. This helps design files and developer output stay aligned.
Developers building Lightning Web Components with SLDS
The Salesforce Lightning Design System (SLDS) component library is actively developed for Salesforce developers to create a uniform look and feel across all Salesforce applications while adhering to CSS best practices and conventions
In Lightning Web Components, many Salesforce base components already follow SLDS guidelines. Developers can use base components for common UI needs and add SLDS utility classes for layout, spacing, and alignment.
<template>
<lightning-card title="Account Details" icon-name="standard:account">
<div class="slds-p-around_medium">
<lightning-input label="Account Name" value={accountName}></lightning-input>
</div>
</lightning-card>
</template>This example uses a Salesforce base component and an SLDS spacing utility class. The custom component does not need to define separate CSS for basic card and input styling.
Visualforce developers applying SLDS in Lightning Experience
Visualforce pages can also use Salesforce Lightning Design System so that older custom pages match the Lightning Experience interface more closely. In Visualforce, the common platform-supported way to include SLDS is the <apex:slds /> component.
<apex:page>
<apex:slds />
<div class="slds-scope">
<div class="slds-box slds-theme_default">
<h1 class="slds-text-heading_medium">Account Summary</h1>
</div>
</div>
</apex:page>The slds-scope wrapper is commonly used in Visualforce examples to scope SLDS styles and reduce unwanted style conflicts with existing page CSS.
Lightning components in Salesforce Lightning Experience and mobile
Salesforce Lightning Design System is made available to Salesforce lightning components running in Salesforce lightning experience and Salesforce1 mobile application with out adding static resources for lightning components.
For Lightning components, the usual practice is to use Salesforce base components first, then apply SLDS utility classes where needed. This keeps the component closer to Salesforce platform behavior, accessibility handling, and visual updates.
SLDS 1 and SLDS 2 Difference in Salesforce UI Styling
Searchers often ask for the difference between SLDS and SLDS 2. In simple terms, SLDS 1 refers to the original Salesforce Lightning Design System, while SLDS 2 is the newer design system direction introduced by Salesforce with updated theming and styling architecture.
| Area | SLDS 1 | SLDS 2 |
|---|---|---|
| Primary customization model | Design tokens and component-specific styling patterns. | More emphasis on CSS custom properties and global styling hooks. |
| Theme behavior | Works with the original Lightning visual system. | Designed for newer Salesforce theming such as the Cosmos visual direction. |
| Component markup | Uses familiar slds- classes and blueprints. | Salesforce aims to preserve component structure while allowing theme changes through CSS updates and hooks. |
| Developer concern | Avoid fragile overrides of internal SLDS selectors. | Use documented hooks and avoid assumptions about exact internal styling. |
For most application developers, the practical advice is straightforward: use Salesforce base components where possible, follow current SLDS documentation for custom markup, and avoid CSS that depends on undocumented internal class behavior.
How Developers Use SLDS Classes Correctly
SLDS works best when classes are used for their intended purpose. Utility classes are good for spacing, layout, alignment, sizing, text styling, and visibility. Component blueprint classes are useful when you build custom HTML that should follow a documented SLDS pattern.
<div class="slds-grid slds-gutters">
<div class="slds-col">
<span>Left column</span>
</div>
<div class="slds-col">
<span>Right column</span>
</div>
</div>Do not treat SLDS as a general CSS reset. It is a Salesforce design system. Use it when the interface should match Salesforce patterns, and keep custom CSS limited to project-specific needs that SLDS does not already cover.
Common SLDS Mistakes in Salesforce Projects
| SLDS mistake | Why it causes problems | Better approach |
|---|---|---|
Overriding internal slds- selectors globally. | Future Salesforce styling changes can break the page. | Create your own custom class or use documented styling hooks. |
| Using only SLDS CSS without following the required markup structure. | Many SLDS component styles depend on the correct nested HTML pattern. | Follow the SLDS component blueprint markup for custom HTML. |
| Using custom buttons when a base Lightning component is available. | You may lose built-in accessibility and platform consistency. | Use lightning-button, lightning-input, lightning-card, and other base components when they fit. |
| Forgetting accessibility labels for icons. | Screen readers may not understand the icon meaning. | Add meaningful alternative text or assistive text when an icon communicates information. |
| Mixing many custom spacing rules with SLDS spacing utilities. | The page can look inconsistent with Salesforce layout rhythm. | Use SLDS spacing utilities first, and add custom spacing only when needed. |
Salesforce Lightning Design System FAQs
What is SLDS in Salesforce?
SLDS stands for Salesforce Lightning Design System. It is Salesforce’s design system for creating interfaces that follow Lightning Experience patterns, including styles, component blueprints, icons, spacing rules, typography, and theming guidance.
Why does SLDS matter for Salesforce developers?
SLDS matters because it helps custom screens look and behave like Salesforce. It also reduces repeated CSS work by giving developers documented classes, utility patterns, and component structures for common UI needs.
What is the difference between SLDS and SLDS 2?
SLDS usually refers to the original Lightning Design System, now often called SLDS 1 in Salesforce documentation. SLDS 2 is the newer design system direction with updated theming and a stronger use of CSS custom properties and styling hooks.
Can SLDS be used in Visualforce pages?
Yes. Visualforce pages can use SLDS. A common method is to include <apex:slds /> and wrap the SLDS area with slds-scope, especially when the page has existing CSS that should not conflict with SLDS styles.
Do Lightning Web Components need a separate SLDS static resource?
Usually no. Lightning Web Components running on the Salesforce platform can use Salesforce base components and SLDS utility classes without adding SLDS as a separate static resource. Separate resource handling is more relevant for external or standalone web applications.
Editorial QA Checklist for This SLDS Tutorial
- The article explains SLDS as a Salesforce design system, not only as a CSS file.
- The existing Salesforce Lightning Design System image and existing links are preserved.
- The Visualforce example uses
<apex:slds />and shows anslds-scopewrapper. - The Lightning Web Component example uses Salesforce base components and SLDS utility classes correctly.
- The SLDS 1 versus SLDS 2 explanation mentions theming and styling hooks without implying that all existing markup must be rewritten.
- New code examples use PrismJS-compatible classes such as
language-html syntax,language-xml syntax, andlanguage-css syntax.
Summary of Salesforce Lightning Design System Usage
Salesforce Lightning Design System helps designers and developers build Salesforce-style user interfaces with reusable patterns, CSS classes, icons, typography rules, and theming guidance. For Lightning Web Components, prefer Salesforce base components and documented SLDS utilities. For Visualforce, use the platform-supported SLDS inclusion method and scope styles carefully. For newer Salesforce UI work, also consider how SLDS 2, styling hooks, and themes affect long-term customization.