Lightning Design System

Lightning Design System
Name	Lightning Design System
Developer	Salesforce
Initial release	2014
Latest release	2019
Repository	GitHub
License	BSD-3-Clause

Lightning Design System The Lightning Design System provides a UI framework and design language created by Salesforce to unify visual, interaction, and front-end development across Salesforce products, Heroku, Tableau, MuleSoft, Slack (software), Marketing Cloud. It aligns product teams, cross-functional groups, and platform engineers with tokens, components, and patterns used in large-scale projects such as Service Cloud, Sales Cloud, Commerce Cloud, Community Cloud. The system influenced open-source front-end ecosystems and enterprise design practices exemplified by Bootstrap (front-end framework), Material Design, Carbon Design System, Fluent Design System.

Overview

Lightning Design System was introduced by Salesforce to standardize UI across product suites like Sales Cloud and Service Cloud and to support integrations with platforms such as Heroku and Tableau. The project combined design assets, CSS frameworks, and documentation to support teams analogous to efforts by Google with Material Design and IBM with Carbon Design System. Its repository on GitHub provided patterns mirrored in enterprise libraries such as Bootstrap (front-end framework), Foundation (framework), and implementations for frameworks used by Facebook and Twitter (company) engineers.

Design Principles

The system's principles emphasize consistency, scalability, and accessibility, influenced by best practices from W3C, World Wide Web Consortium, and major design organizations like IDEO and Frog Design. It prioritizes predictable behavior for product teams including Sales Engineering, Customer Success, and UX Research groups, aligning with governance models used by Atlassian, Microsoft, and Adobe Systems. Principles draw on interaction patterns discussed at conferences such as UX Week, CHI, and SXSW, and reflect guidelines from Nielsen Norman Group and accessibility recommendations from Web Content Accessibility Guidelines.

Components and Patterns

The library provides a catalog of components—buttons, forms, data tables, modals, and navigation—used across applications similar to components in React (JavaScript library), Angular (web framework), Vue.js, and Ember.js. Patterns address layout problems for teams like Sales Operations and Product Management and are comparable to design tokens used by Spotify, Uber, and Airbnb. Component examples map to interaction models found in products such as Outlook (Microsoft) and Gmail, and facilitate integration with engineering stacks including Node.js, Ruby on Rails, and Django.

Theming and Tokens

Theming in the system uses design tokens for color, spacing, and typography similar to tokenization approaches adopted by Shopify, Pinterest, and GitLab. Tokens enable brand customization for subsidiaries and acquisitions like Tableau Software and MuleSoft while maintaining consistency across enterprise apps like Salesforce Service Cloud and Salesforce Marketing Cloud. Token strategies align with CSS custom properties standards promoted by W3C and tooling approaches common in PostCSS, Sass (stylesheet language), and Less (stylesheet language) workflows.

Accessibility and Internationalization

Accessibility features follow guidance from Web Content Accessibility Guidelines and testing practices used by teams at Microsoft Accessibility, Apple Accessibility, and Google Accessibility. Internationalization support considers locales and writing systems implemented by products such as Sales Cloud, Service Cloud, and Commerce Cloud and aligns with standards from organizations like Unicode Consortium and practices employed by SAP and Oracle. The system includes ARIA patterns and keyboard interactions informed by research published in CHI and recommendations from Nielsen Norman Group.

Implementation and Tooling

Implementation guidance includes examples for front-end frameworks like React (JavaScript library), Angular (web framework), and Vue.js as well as build tool integrations with Webpack, Rollup (software), and Parcel (bundler). Tooling recommendations reference continuous integration systems like Jenkins, CircleCI, and GitLab CI/CD and version control practices on GitHub and Bitbucket. Documentation, design kits, and Sketch/Adobe XD assets reflect workflows used by teams at Atlassian, Adobe Systems, and Figma.

Adoption and Impact

The system was adopted across Salesforce product lines including Sales Cloud, Service Cloud, and Commerce Cloud and influenced other corporate design systems at companies such as Google, Microsoft, IBM, Shopify, and Airbnb. It shaped design operations, governance models, and cross-team collaboration practices similar to those at Atlassian and Netflix (service), and contributed to open-source component libraries on GitHub. The design language informed developer experience patterns in enterprise platforms including Heroku, Tableau, and MuleSoft and remains a reference point in discussions at conferences such as UX Week, CHI, and SXSW.

Category:Design systems