About Lightning Design System 2 (SLDS 2)
Overview
Lightning Design System 2 (SLDS 2) is Salesforce's design system for building consistent, scalable, and branded experiences across the Salesforce ecosystem. It offers a flexible UI framework, advanced theming options, and tooling for both designers and developers.
SLDS 2 introduces a new architecture built around CSS custom properties, adding tools to validate, migrate, and create components. It paves the way for dark mode and establishes the foundation for future agentic and generative-AI capabilities.
Key Benefits
- CSS custom property architecture that simplifies theming and customization
- Figma-to-code automation that generates accurate, consistent, accessible SLDS 2-compatible output
- Built-in design intelligence that improves AI-powered coding tools
- Dedicated tooling to validate, migrate, and create components
- Support for dark mode and a foundation for future agentic capabilities
- Role-based transition guidance for admins, designers, and developers
How It Works
SLDS 2 delivers step-by-step, role-based instructions for making the transition. Designers connect to essential components and tools to craft experiences, developers access the framework for building consistent interfaces, and admins adopt Salesforce Cosmos to receive the new design and SLDS 2 features.
Use Cases
- Admins adopt Salesforce Cosmos to get the new design and SLDS 2 features
- Designers connect to components and tools to bring brand experiences to life
- Developers build consistent, scalable interfaces with the underlying framework
- Teams enable dark mode across their organizations
- Teams create agentic experiences inside Salesforce products
- Teams generate SLDS 2-compatible code directly from Figma designs
Why Choose This Product
SLDS 2 differentiates itself with a CSS custom property architecture and new validation and migration tooling. It extends design systems into AI-assisted workflows by feeding design foundations into AI-powered coding tools, and it expands to support the dynamic UI needs of generative-AI experiences.
Key Features
CSS theming
SLDS 2 uses a new architecture built on CSS custom properties for flexible theming and customization.
AI design intelligence
SLDS 2 feeds design foundations into AI-powered coding tools to bring custom designs to life faster.
Figma-to-code automation
Automation generates SLDS 2-compatible output that is accurate, consistent, and accessible.
Dark mode support
SLDS 2 paves the way for dark mode across Salesforce experiences.
Component tooling
Tooling helps teams validate, migrate, and create SLDS 2 components.
Agentic patterns
Teams create agentic experiences in Salesforce products using SLDS 2 foundations.
Migration guidance
Step-by-step, role-based instructions guide admins, designers, and developers through the transition to SLDS 2.
Lightning Design System 2 (SLDS 2) Pricing
Pricing extracted from the product website and may change. Check the source for current details.