What is SLDS and Why Should You Care?

Most developers know SLDS, but very few people know why it actually matters, even fewer understand what SLDS 2 really changes. Let’s fix that.

SLDS stands for Salesforce Lightning Design System.

It is Salesforce’s official design language collection of CSS rules, components, design tokens, and guidelines that ensure every Salesforce app looks and feels consistent.

All Salesforce apps share the same button styles, card layouts, and color patterns that’s SLDS doing its job. It’s not just a UI utility kits. The foundation of every Lightning components you build.

It allows developers focus on application logic, while designers focus on user experience, interactions, and user flows.
 

Why Use SLDS? The Purpose Behind the Framework

SLDS is a design framework build exclusively for Salesforce platform. It is a complete system not just stylesheet. It covers everything from colors, spacing and typography to ready made components and interaction patterns all tailored to how Salesforce apps are build and used.

The core purpose of SLDS is simple: Every Salesforce apps consistent, professional and accessible foundation without building from scratch every time. whether you are build a custom LWC for an enterprise client or a small utility component for an internal team, SLDS ensures the output feels native to the Salesforce ecosystem.
 

SLDS 1 Is Live - So Why SLDS 2 Launched?

SLDS1 worked so why SLDS2 it?

The real answer is:
Design needs evolve faster than systems.

SLDS1 was built for the early Lightning ecosystem. Today, users expect modern UI smooth interactions, visual depth, and interfaces that work well across themes (including dark mode).

SLDS1 had some limitations:

• Hard-coded color values
• Older CSS approaches
• A visual language that started to feel outdated

SLDS2 represents Salesforce’s modern design standards. It’s not a complete rewrite it’s evolution of SLDS.

Introduce deeper design token usage, improves theming and flexibility, modernizes visuals, and aligns better with Figma-to-code workflows.
 

SLDS 1 vs SLDS 2 - What Actually Changed?

Three real examples that show exactly how SLDS2 feels different from SLDS1.

Same data, same component, but the experience feels completely different, right?

That’s what design system evolution looks like in practice.
 

How to Use SLDS 1 or SLDS 2 Effective way:

Here’s how to use SLDS properly inside LWC(Lightning Web Components):

1. Always use SLDS utility classes instead of custom CSS:

Before writing a single line of custom styling, try to use or check whether the utility or SLDS out-of-box component like padding, margins, flex layouts, and font sizes are mostly covered.

Example:
Instead of writing custom style margin-top: 16px;
use slds-m-top_medium.

This keeps your component responsive and theme-aware.
 

2. Use Design Tokens - Not a hardcode values:

SLDS 2 strongly encourages this step.

Instead of using #0070d2 directly, refer the design token background: var(--slds-brand-color);

This ensures your UI automatically adapts to themes, brand and the future updates.
 

3. Build in Figma using SLDS 2 kit then translate to LWC:

Salesforce officially provides Figma integration.

Design your SLDS2 components in Figma, then developers can build them 1:1 in LWC. No more guessing what “that blue” was.

link:https://www.figma.com/community/file/1399892502513202095
 

4. Validate with SLDS extension:

Before pushing code, run it through the SLDS Validator available as a VS Code extension.

It catches incorrect class usage and accessibility issues early.
 

One Thing Most Developers Miss:

Most developers treat SLDS as just a developer tool.

But it starts with design decisions.

The moment a designer chooses a component from SLDS2, they’re already making UX decisions about spacing, interaction states, and accessibility.

When design and development use the same system language, the product wins.

SLDS2 especially with Figma integration is what makes true collaboration possible in Salesforce projects.
 

The System Isn't a Limitation — It's Your Advantage

SLDS1 is not just a CSS file.
SLDS2 is not just an upgrade.

It’s a shared language between designers and developers in the Salesforce ecosystem.

Learn well. Use it intentionally.

Your apps will always feel like they belong.
 

Conclusion:

SLDS 2 is a simple process to create your branding while you follow the below steps,

• Use the SLDS 2 built-in theme instead of custom CSS
• Create a new theme by input your brand color so that it will automatically create the accent colors too.

Take your first step now — open Lightning Design System 2 and build something small. 
Your UI journey starts today!