Start of content

Lightning Design System

Create the world’s best enterprise app experiences.

GET STARTED

Overview

The Lightning Design System enables you to build rich enterprise experiences and custom applications with the patterns and established best practices that are native to Salesforce.

Components

Components are the building blocks of Salesforce applications, enabling designers and developers with ready-to-go interface elements available in HTML and CSS code, or in Sketch Templates.

Components

Components are the building blocks of Salesforce applications, enabling designers and developers with ready-to-go interface elements available in HTML and CSS code, or in Sketch Templates.

Components

Components are the building blocks of Salesforce applications, enabling designers and developers with ready-to-go interface elements available in HTML and CSS code, or in Sketch Templates.

Components

Components are the building blocks of Salesforce applications, enabling designers and developers with ready-to-go interface elements available in HTML and CSS code, or in Sketch Templates.

Accessible

The Lightning Design System provides accessible markup which will serve as a foundation for your application development. To build accessible components, you will need to follow the accessibility guidance for our interactive components, including keyboard behavior and the management of ARIA roles and properties.

Living

The Salesforce UX team actively designs, develops, tests, and maintains the design system. As Salesforce pushes out UI changes with every release, the design system stays seamlessly in sync.

Platform-Agnostic

You can use our CSS framework with any technology stack you can dream up. Additionally, we provide guidance around how to use it in conjunction with Salesforce technologies such as Lightning, Visualforce, and Heroku.

Motion

Motion and animation improves navigation, draws attention to feedback, enhances the brand, and brings delight to the user experience.