Salesforce Lightning Design System (SLDS)

• Salesforce Lightning Design System (SLDS) provides guidelines, components, and practices for consistent, accessible, and user-friendly Salesforce applications.
• SLDS offers pre-built UI components, design patterns, and styles for a seamless user experience.

Why SLDS?

• Before SLDS, Salesforce design was inconsistent due to custom UIs, varying user experiences, different application behaviors across devices, and a lack of standardized accessibility and responsiveness.
• SLDS standardizes UI components, improves accessibility (WCAG compliance), enhances scalability, and accelerates development with ready-to-use code and components.

Key Components of SLDS

Design Tokens

• Design tokens store visual properties (colors, spacing, font sizes) in a structured format, ensuring consistency across Salesforce applications, acting as variables.
• Color tokens example: --slds-c-brand (Primary Brand Color)
• Spacing tokens example: --slds-var-m-around-medium (Medium Margin)
• Typography tokens example: --slds-var-font-size-1 (Font size level 1)
• Updating styles is easy because changing a token’s value updates it everywhere.

Component Library

• SLDS offers pre-built UI components to accelerate development, so developers can reuse components to maintain a consistent UI, instead of recreating UI elements from scratch.
• Key components include: Buttons, Modals & Popups, Cards, Data Tables, Forms & Inputs, Tabs & Accordions.
• Using SLDS ensures buttons match Salesforce's branding and style without extra effort.

Grid System & Layouts

• SLDS provides a flexible 12-column grid system, similar to Bootstrap, built with flexbox, for responsive designs with automatic alignment and spacing
• Layouts resize dynamically across different screen sizes.

Accessibility & ARIA Support

• SLDS prioritizes accessibility by following WCAG and integrating ARIA attributes.
• role="dialog" defines a dialog box for screen readers.
• aria-labelledby="modal-heading" associates the title with the modal.
• The modal is fully accessible for users relying on assistive technologies.

Icons & Illustrations

• SLDS provides a library of icons and illustrations that align with Salesforce branding with icons stored in an SVG sprite for efficient loading.
• Icon Categories: Standard Icons (e.g., Accounts, Contacts, Opportunities), Utility Icons (e.g., Settings, Search, Close), Custom Icons (For branding needs).

How SLDS Works with Salesforce Technologies

Lightning Web Components (LWC)

• SLDS is fully integrated into LWC.
• lightning-card automatically applies SLDS styles.
• Additional SLDS classes (slds-p-around_medium) can be added for spacing.

Visualforce Pages

• SLDS can be included in legacy Visualforce pages.
• Applying SLDS styles to Visualforce components.

Salesforce Experience Cloud

• SLDS helps create consistent customer portals and partner communities.
• Ensures the portal matches Salesforce’s branding.

Best Practices for Using SLDS

• Use predefined SLDS classes instead of custom CSS.
• Structure layouts using slds-grid for responsiveness.
• Use SLDS variables (--slds-c-brand) instead of hardcoded styles.
• Test UI with screen readers and keyboard navigation to ensure accessibility.
• Keep up with SLDS updates for new components and styles.

Future of SLDS

• Continuously evolving to support more AI-driven UX components, enhanced mobile-first design, and voice & conversational UI integration.

• SLDS provides a consistent design language, fast development, better accessibility, and seamless integration with LWC, Visualforce, and Experience Cloud.