Salesforce has long provided a design system that ensures user experience consistency across apps. But as customer demand for deeper customization has grown and generative AI continues to reshape user experiences, the system needs to expand. Salesforce Lightning Design System (SLDS 1) launched in 2015 and, at the time, set the standard for enterprise design. SLDS 2 (beta) – now available – delivers an overdue update with greater flexibility and an AI-ready foundation.
Whether you’re an admin wrangling layouts, a developer keeping code clean, or a UX designer making it all feel effortless, here’s what you need to know to get started.
What we’ll cover
What is SLDS 2?
Bring your brand to life
Be an early adopter of agentic systems
Start future-proofing
Stay tuned for what’s ahead
What is SLDS 2?
SLDS 2 is the foundation for the agentic design system for Salesforce products built on the Lightning Platform. It brings a flexible styling framework and advanced theming options, making it easier to create, customize, and maintain high-quality user experiences.
With SLDS 2, admins get no-code design, and designers and developers get pro-code control — because everyone deserves the right tools for the job. And yes, we know you want dark mode. The path to dark mode (and dynamic agentic experiences) starts with transitioning to SLDS 2.
You’re not required to switch, but getting ahead of the curve is always a good move. Adopt at your own pace — we think you’ll like what’s waiting for you.
Bring Your Brand to Life
SLDS 2 isn’t just a design update – it’s a whole new level of control, including a deeper integration with Themes and Branding. With clicks not code, admins can easily apply brand colors, logos, and images. SLDS 2 makes customizations become even more flexible and scalable.
The new CSS architecture is decoupled from Salesforce’s default visual style, meaning you’re no longer locked into predefined design choices for buttons, modals, fonts, and borders. Instead, global styling hooks (CSS custom properties) give you the freedom to customize at scale.
The best part? One change updates everything. Instead of tweaking components individually, styling hooks let you adjust values in a single place for instant global updates. Less grunt work, more creative control. Let’s dig into what else SLDS 2 brings to the table:
Express your brand and streamline your workflow
Salesforce Cosmos is the new default theme for SLDS 2. This theme’s modern design offers adaptable spacing, at-a-glance views, an enriched color palette, reader-friendly typography scale, reduced cognitive load, and more. These updates deliver a user interface (UI) that enables you to navigate and complete tasks more quickly.
With the expanded Themes and Branding feature in Setup, you can easily create a custom SLDS 2 theme. In addition to the enriched color palette, there are nine new accent color options. You’ll be able to express your brand more precisely with clicks, not code.
Map design to code efficiently and build faster
An advanced SLDS 2 Figma library with design components ensures that designs map one-to-one to live code. This is possible because the semantic naming convention for styling hooks (for example: radius-border-4 or font-scale-4) in the Figma kit is consistent with how it appears in code. It creates a shared vocabulary that bridges design and development.
Also, to encourage good component health, the Figma library now contains all the variables and properties that you can toggle on or off. Previously, making adjustments meant switching between the SLDS website and Figma, manually updating components one-by-one. Now, with SLDS 2, you can modify components directly in Figma and instantly see how they adapt — saving time and keeping your designs aligned with the latest usability and accessibility best practices. Transitioning to SLDS 2 makes it easier to maintain component integrity from the start.
Create high-quality code with new rule sets, in-line guidance, and bulk linting. One example is SLDS Validator, which scans your markup, validates it against a database, and offers recommendations for fixes.
Be an early adopter of agentic systems
With Agentforce, we’re reimagining how design systems work — both within the design-development workflow and within dynamically generated user experiences. Agentforce is the agentic layer of our platform designed for deploying autonomous AI agents across any business function. We’re updating our design system so that you can take advantage of these new capabilities while creating consistent, scalable, and on-brand results.
SLDS 2 is the beginning of our agentic design. You can explore agentic aspects of our design system in a few ways:
- Styling hooks flexibility. The hierarchical styling framework will deliver more precise, polished, and visually cohesive results for customer experiences now and for agent experiences in the future.
- Agentic experience patterns. Soon, partners and ISVs will be able to build the agentic solutions that customers need with the SLDS 2 Agentic Experience Figma library. Design generative-AI interfaces on the Lightning Platform with new patterns and guidelines – so you can start building the future today.
- Modular design with primitive components. Today’s Agentforce experiences are created using small, self-contained blocks of UI code with encapsulated functionality, but no styling – called primitives. Moving forward, using these basic, unstyled and agnostic components allows Agentforce to provide flexible responses, ensuring consistency and performance while dynamically adapting to user needs.
Start future-proofing
Moving to SLDS 2 isn’t like transitioning from Classic to Lightning — it’s an upgrade, not a full rebuild. If your org has followed Salesforce’s best practices, the transition could be as simple as flipping a switch. Moving to SLDS 2 and the Salesforce Cosmos theme is a significantly lighter effort because they operate on Lightning and the CSS modifications do not impact functional code.
When you do opt-in, keep in mind that every role plays a part in making the shift smooth, whether you’re an admin enabling the new UI, a developer updating components, or a designer ensuring consistency. For those with complex customizations, it may take more effort, but you’re not in it alone. Salesforce is here to support you every step of the way, making sure your components stay intact and your experience stays seamless.
If you’re ready to make the transition to SLDS 2, the adoption process follows five key phases:
- Set up a test environment
- Install and configure SLDS Validator
- Update components
- Test the updates
- Go live
Key actions by role
A little planning and teamwork go a long way. Call on the Trailblazer community, if you need to. “Make sure to audit your custom components to follow SLDS best practices now,” said Asterisk Loftus, a designer at Shift8 Design and Salesforce MVP. “That way, when your org decides to upgrade to SLDS 2, it will be exponentially easier to implement and gain all the benefits.”
Transitioning to SLDS 2 isn’t just about keeping up — it’s about making your app sharper, faster, and future-ready.
Stay tuned for what’s ahead
SLDS 2 is just getting started. Built for flexibility and control, it’s the foundation for a wave of new features that will transform how you build, brand, and experience Salesforce. From advanced developer tools to next-generation theming, dark mode, and a seamless, AI-powered app shell, the future is packed with updates designed to make customization easier and more powerful. The sooner you dive in, the sooner you’ll learn what SLDS 2 can really do.
