Lightning Design System

Spec sheet

Purpose

SLDS 2 provides reusable design tools and development guidance for building consistent Salesforce interfaces.Read 9 Oct 2026 · lightningdesignsystem.com

Integrations

The Figma kits page lists UI libraries and pattern kits, including an SLDS 2 web components library and an agentic experience design library.Read 9 Oct 2026 · lightningdesignsystem.com

Accessibility

The accessibility guidance recommends reviewing applications before release for WCAG 2.1 AA conformance.Read 9 Oct 2026 · lightningdesignsystem.com

Accessibility patterns

The accessibility guidance covers semantic HTML, color contrast, accessible forms, links, images, and ARIA use.Read 8 Oct 2026 · lightningdesignsystem.com

AI coding

The site describes using Agentforce Vibes with Figma designs and Salesforce DX MCP to generate Lightning Web Components and SLDS 2 code.Read 9 Oct 2026 · lightningdesignsystem.com

Components

The development guide recommends Lightning base components first, then component blueprints, then custom components when needed.Read 8 Oct 2026 · lightningdesignsystem.com

Customization

SLDS 2 uses CSS styling hooks to separate structure from visual design and support customization and theming.Read 9 Oct 2026 · lightningdesignsystem.com

Design resources

SLDS 2 includes reusable Figma components, style guides, design principles, and patterns.Read 9 Oct 2026 · lightningdesignsystem.com

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.Read 8 Oct 2026 · lightningdesignsystem.com

Development package

The official @salesforce-ux/design-system-2 npm package contains production-ready CSS, themeable design tokens, and abstract User Interface Format definitions.Read 9 Oct 2026 · lightningdesignsystem.com

Fonts

SLDS uses device system fonts and lists SF Pro for Apple devices, Segoe UI for Windows, and Roboto for Android.Read 9 Oct 2026 · lightningdesignsystem.com

Installation

The site gives npm and Yarn commands for installing the SLDS 2 package.Read 8 Oct 2026 · lightningdesignsystem.com

Linter limit

The site describes SLDS Linter as providing SLDS 2 verification; SLDS Validator supports SLDS 1 and SLDS 2 verification.Read 8 Oct 2026 · lightningdesignsystem.com

Migration tool

SLDS Linter checks code against SLDS 2 rules, suggests improvements, and can apply fixes in bulk.Read 9 Oct 2026 · lightningdesignsystem.com

Package

The official @salesforce-ux/design-system-2 package contains production-ready CSS, themeable design tokens, and abstract User Interface Format definitions.Read 8 Oct 2026 · lightningdesignsystem.com

Platform limitation

The site says the newest global styling hooks are available only in Lightning Experience and are not supported for Experience Cloud sites.Read 9 Oct 2026 · lightningdesignsystem.com

Platform support

The site says the newest global styling hooks are available in Lightning Experience and are not supported for Experience Cloud sites.Read 8 Oct 2026 · lightningdesignsystem.com

Preview limitation

Component-level styling hooks are a developer preview, and the site says not to use them in production.Read 9 Oct 2026 · lightningdesignsystem.com

Tooling

SLDS Linter analyzes code against SLDS 2 rules and can apply suggested fixes in bulk across a repository.Read 8 Oct 2026 · lightningdesignsystem.com

Where Specifiction places it

• UI Kit Libraries#26 of 266.8