Getting Started

Getting Started

The Salesforce Lightning Design System includes the resources to create user interfaces consistent with the Salesforce Lightning principles, design language, and best practices. Rather than focusing on pixels, developers can focus on application logic, while designers can focus on user experience, interactions, and flows.

This site provides a range of resources for designers and developers, which includes:

  • semantic and accessible component markup.
  • cross-browser compatible CSS.
  • icons, font, and design guidelines.

Designers

Start with the following:

  1. Explore the Guidelines to learn the Salesforce product design patterns and principles.
  2. Review the Components section, to familiarize yourself with the existing components which you can incorporate into your designs.

Developers

Familiarize yourself with the following:

  1. Get an overview of our Markup and Style guidelines including the class naming conventions used in our CSS.
  2. Review the Components; each component provides semantically correct and accessible markup and documentation.
  3. Dive into the platform-specific getting started steps below.

Lightning

Get started with the Lightning Design System on Lightning. Please be careful to pay attention to the specific requirements for the Lightning technology you are using:

  • Lightning Experience
  • Salesforce1
  • Stand-alone Lightning app
  • Lightning Out component
  • Lightning Components for Visualforce

Visualforce

Get started with the Lightning Design System on Visualforce.

Heroku

Get started with the Lightning Design System on Heroku.