Lightning Design System
Lightning Design System 2 provides web resources for building scalable, accessible interfaces with Salesforce’s design system.
What Lightning Design System is
Lightning Design System 2 provides web resources for building scalable, accessible interfaces with Salesforce’s design system. The official `@salesforce-ux/design-system-2` package includes production-ready CSS, themeable design tokens, and abstract User Interface Format definitions, with npm and Yarn installation commands provided. CSS custom properties called styling hooks support customization and theming. Development guidance recommends Lightning base components first, component blueprints next, and custom components when required. SLDS 2 also supplies reusable Figma components, style guides, design principles, and patterns. Accessibility guidance covers semantic HTML, contrast, forms, links, images, and ARIA, and recommends checking applications for WCAG 2.1 AA before release. SLDS Linter checks code against SLDS 2 rules and can apply suggested fixes across a repository; SLDS Validator covers SLDS 1 and 2. Component-level styling hooks are a changing developer preview not intended for production. Newest global hooks are available in Lightning Experience, not Experience Cloud sites.
Good
- Production-ready CSS and design tokens
- Theme customization through styling hooks
- Reusable Figma components and patterns
- WCAG 2.1 AA guidance
- Linter can apply bulk fixes
Watch out
- Component styling hooks are preview-only
- Preview hooks should not be used in production
- Newest global hooks exclude Experience Cloud
- Linter verification differs from Validator coverage
Who it suits
SLDS 2 suits web teams building Salesforce-oriented interfaces that need shared components, design guidance, and accessibility practices. It is useful for developers and designers working with Salesforce products and Figma resources.
Verdict
Lightning Design System 2 combines implementation packages, design assets, accessibility guidance, and linting for Salesforce interface work. Teams should treat preview styling hooks cautiously and account for the stated Experience Cloud limitation.
The facts
Each one read from Lightning Design System's own pages, with the date it was checked.
What it does
- Accessibility
- The accessibility guidance recommends reviewing applications before release for WCAG 2.1 AA conformance.checked 9 Oct 2026
- Accessibility patterns
- The accessibility guidance covers semantic HTML, color contrast, accessible forms, links, images, and ARIA use.checked 8 Oct 2026
- AI coding
- The site describes using Agentforce Vibes with Figma designs and Salesforce DX MCP to generate Lightning Web Components and SLDS 2 code.checked 9 Oct 2026
- Components
- The development guide recommends Lightning base components first, then component blueprints, then custom components when needed.checked 8 Oct 2026
- Customization
- SLDS 2 uses CSS styling hooks to separate structure from visual design and support customization and theming.checked 9 Oct 2026
- Design resources
- SLDS 2 includes reusable Figma components, style guides, design principles, and patterns.checked 9 Oct 2026
- Developer preview
- Component-level styling hooks are a developer preview, may change or be deprecated, and the site says not to implement them in production.checked 8 Oct 2026
- Development package
- The official @salesforce-ux/design-system-2 npm package contains production-ready CSS, themeable design tokens, and abstract User Interface Format definitions.checked 9 Oct 2026
- Fonts
- SLDS uses device system fonts and lists SF Pro for Apple devices, Segoe UI for Windows, and Roboto for Android.checked 9 Oct 2026
- Installation
- The site gives npm and Yarn commands for installing the SLDS 2 package.checked 8 Oct 2026
- Integrations
- The Figma kits page lists UI libraries and pattern kits, including an SLDS 2 web components library and an agentic experience design library.checked 9 Oct 2026
- Linter limit
- The site describes SLDS Linter as providing SLDS 2 verification; SLDS Validator supports SLDS 1 and SLDS 2 verification.checked 8 Oct 2026
- Migration tool
- SLDS Linter checks code against SLDS 2 rules, suggests improvements, and can apply fixes in bulk.checked 9 Oct 2026
- Package
- The official @salesforce-ux/design-system-2 package contains production-ready CSS, themeable design tokens, and abstract User Interface Format definitions.checked 8 Oct 2026
- Preview limitation
- Component-level styling hooks are a developer preview, and the site says not to use them in production.checked 9 Oct 2026
- Purpose
- SLDS 2 provides reusable design tools and development guidance for building consistent Salesforce interfaces.checked 9 Oct 2026
- Tooling
- SLDS Linter analyzes code against SLDS 2 rules and can apply suggested fixes in bulk across a repository.checked 8 Oct 2026
Where it runs
- Platform limitation
- The site says the newest global styling hooks are available only in Lightning Experience and are not supported for Experience Cloud sites.checked 9 Oct 2026
- Platform support
- The site says the newest global styling hooks are available in Lightning Experience and are not supported for Experience Cloud sites.checked 8 Oct 2026
Alternatives to Lightning Design System
- 1
Figma Wireframe Kit
Free planAndroidiOSWebAPI8.0From $3 a month - 2
Ant Design Icons
Free planAndroidiOSWeb7.1Free plan - 3
Shopify
Web7.1From $29 a month - 4
GitHub Primer
Free planOpen sourceWebAPI7.0Free plan - 5
MUI
Free planWeb6.8From $299 a year - 6
Shadcn Studio Figma UI Kit
Free planWeb6.7$99 one-time