Definition
Salesforce's open-source design framework (SLDS) that provides CSS styles, icons, design tokens, and component blueprints. It enables building enterprise applications with a consistent look and feel matching Lightning Experience.
Real-World Example
Consider a scenario where an architect at Skyline Consulting is working with Lightning Design System to extend their Salesforce implementation to meet growing business demands. Lightning Design System provides the additional capability they need without requiring a separate third-party system, keeping everything within the trusted Salesforce ecosystem and reducing integration complexity.
Why Lightning Design System Matters
Lightning Design System (SLDS) is Salesforce's open-source design framework that provides CSS styles, icons, design tokens, and component blueprints for building enterprise applications with a consistent look and feel matching Lightning Experience. SLDS is free to use, accessible, and built on modern web standards. Developers building Lightning components, custom Visualforce pages, or external apps can adopt SLDS to make their UI feel native to the Lightning Experience visual language.
SLDS is widely adopted both inside and outside Salesforce because it's a high-quality enterprise design system that's been refined through Salesforce's internal use. The design tokens (variables for colors, spacing, typography) make theming consistent and updateable. The component blueprints document how complex UI patterns should be built. For Lightning Web Components, SLDS classes are available natively, so building components with the standard look is straightforward. For external apps wanting to integrate visually with Salesforce, SLDS provides the foundation.
How Organizations Use Lightning Design System
- •Quantum Labs — Builds all Lightning Web Components using SLDS classes, ensuring visual consistency with the rest of Lightning Experience.
- •TerraForm Tech — Uses SLDS in their custom Visualforce pages to make them feel native to Lightning, even though the underlying technology is older.
- •CodeBridge — Builds external customer-facing apps that integrate visually with Salesforce by adopting SLDS as the design foundation.