What is The Lightning Design System?
The Lightning Design System (SLDS) is a CSS framework that provides a consistent look and feel for applications built with Salesforce. In the design system, rather than focusing on pixels, developers can focus on application logic, while designers can focus on user experience, interactions, and flows.
The Evolution and Versions
The SLDS evolved gradually into the design system it is today. It evolved in response to the growth of Salesforce, changes in technology, and increasing user needs. In early 2015, the Landmark Design System was created, which was the predecessor of SLDS.
SLDS 0.9.0 (2015)
First public release providing a cohesive design framework for Salesforce applications.
Basic UI elements including buttons, grids, forms, modals, and icons.
Establishing foundational design principles for consistent user experience across Salesforce products.
SLDS 1.x (2016)
The CSS framework was added to the core Salesforce code.
Introduction of more complex components such as App Launcher, Files, and Image Cards.
Site Enhancements were made.
SLDS 2.0.1 to 2.4.6 (2016 - 2017)
Continuous component improvements were made to enhance user experience.
Upgraded Accessibility features.
SLDS 2.5.0 to 2.25.1 ( 2018 - Present)
The Salesforce platform has fully embraced SLDS.
Further addition of components, specifically targeting advanced UI elements and data visualizations.
Development of auxiliary tools and overall visual appearance to improve developer productivity.
For more detailed release information, check the article HERE.
What Products Built with The SLDS
SLDS is an open source project that designers can use to style their custom components in a uniform way that’s consistent with the rest of Salesforce. It's focused on business apps and includes specialized components for manipulating data, such as activity timelines, data tables, and record headers. Below are some main products built with the SLDS.
Tableau: A leading analytics and data visualization tool for creating interactive, shareable dashboards and performing in-depth data analyses.
Einstein AI Analytics: An advanced analytics platform providing interactive dashboards and AI-driven insights for data analysis and decision-making.
Lightning Experience: A new version of the Salesforce CRM platform that has a modern user experience and optimized pages for managing sales and service processes.
Salesforce AppExchange Apps: A marketplace for third-party and custom applications that extend Salesforce functionalities, offering solutions for marketing, customer support, analytics, and more.
Salesforce Experience Cloud: Enables the creation of branded portals for customers, partners, and employees, facilitating collaboration and self-service.
Salesforce Marketing Cloud: Solutions for managing and automating marketing efforts, including Journey Builder, Email Studio, and Social Studio.
Salesforce Commerce Cloud: An e-commerce platform designed for creating seamless shopping experiences across web, mobile, social media, and stores.
MuleSoft: An integration platform for connecting applications, data, and devices across cloud and on-premises environments.
And more Salesforce products you can find HERE.
Applicable industries for reference
The Salesforce Lightning Design System can be used for any size of the business.
Education: Helps exceed enrollment goals, boost student engagement, grow fundraising, and maximize outcomes for every education program.
Automotive: The out-of-the-box automotive features and workflows that make it easy to explore new revenue opportunities, advance next-generation vehicle experiences, and innovate with AI and automation.
Communications: The purpose-built solutions for the communications can help grow revenue, reduce churn and increase ARPU.
Construction & Real Estate: Helps streamline costs and improve productivity in the industry.
Consumer Goods: Makes it easy to unify and activate disparate data, build brand relevance with target consumers and drive brand growth with the retail customers.
Platform Support and Use Cases of The SLDS
Supported Platforms
The SLDS is a CSS framework that can be used with a variety of front-end development frameworks, including:
Salesforce-specific technologies: Visual force and Lightning.
Third-party frameworks: React or Angular.
Use Case Scenarios
Style Template File for Motiff
Style Template File for Motiff
Open and edit Lightning Style Template on Motiff. →
Effective Use of the Color System
The Salesforce color system unites a variety of solutions necessary for scaling design across different platforms.
By using a single-source color system, it provides opportunities to automate design decisions and adapt them with flexibility. The SLDS employs a Numerical Color System where each color’s tone is assigned a value from 0 to 100, with 0 being black and 100 being white. This system ensures that designers meet essential color contrast accessibility requirements, making elements like buttons and text easy to see. For instance, the SLDS requires that any clickable area or boundary have a contrast ratio of at least 3:1.
Guided by principles such as intentionality, color continuity, and accessibility, the SLDS color system is versatile thanks to its styling hooks. These hooks can update properties for specific components or apply changes across an entire app. This flexibility makes it straightforward to create designs that are both visually appealing and consistently accessible to all users.
Typography Hierarchy and Readability
In the SLDS Typography, all headings start out the same size as the body text, with their margins and padding set to zero.
When creating an enterprise application, the level of each heading might change based on where it's used in a component or page. It's really important to use the correct heading level because it helps make the application more accessible. This means that everyone, including those using screen readers, can easily navigate and understand the content.
Icon Design Principles
Salesforce Icon design is a blend of professional and playful. The SLDS has several principles for icon design.
Simplicity, approachability, and legibility: Icons should be easy to understand and remember, and use negative space and large rounded corners.
Recognition: Icons should be recognizable and easy to remember.
The SLDS Components Templates
Open and edit Lightning Design System v1 on Motiff: components for Web. →
The SLDS helps Salesforce developers create a consistent look and feel for all Salesforce applications with a set of design patterns and components.
A-D
E-G
H-L
M-P
R-Z
Accessibility in The SLDS
Use existing patterns: SLDS provides global web interaction patterns and visual accessibility affordances that can be used to create new UIs.
Use ARIA markup: SLDS components have ARIA markup that helps users of assistive technologies identify them correctly.
Maintain color contrast: SLDS recommends using enough color contrast between text and background elements so that people with visual impairments can easily read the content.
Other Resources
Salesforce FAQ: Answers to common Salesforce questions.
Github salesforce UX: The page includes code, documentation, and resources for using Lightning in projects.
Platform Keynote: Build and Govern Agent Force and AI Apps: The video teaches how to use Salesforce AI, low code innovations and new security tools to build and secure Agent force and AI apps, fast.
SLDS Deep Dive and Best Practices on Youtube.