| name | Salesforce Lightning Design System |
| description | Build enterprise CRM interfaces with Salesforce Lightning—a BEM-based design system for complex record pages, data tables, kanban boards, and dashboards. Trigger this skill when designing Salesforce-like applications, CRM dashboards, record management UIs, or enterprise data tools. |
What Is Lightning Design System?
Salesforce Lightning Design System (SLDS) powers enterprise applications like Salesforce CRM. It emphasizes data richness and complex record interactions—accounts, leads, opportunities displayed with multiple fields, relationships, and actions. SLDS uses BEM CSS methodology and utility classes, designed for Lightning Web Components (LWC) and standard HTML/CSS.
Core Design Principles
1. Data-Dense Yet Scannable
Enterprise users need to see many fields and relationships. SLDS balances density with visual hierarchy through careful color, spacing, and typography.
2. Structured Record Layouts
Pages show related lists, detail sections, activity streams. Clear zones prevent cognitive overload: header, sidebar, main content, footer.
3. Utility-First CSS
SLDS provides low-level utility classes (slds-p-around--medium, slds-m-bottom--large) for spacing, sizing, alignment. Custom CSS extends rather than overrides.
4. Enterprise Accessible
WCAG AA compliant. Keyboard navigation for every interaction. Screen reader friendly with semantic landmarks.
Visual Language
Colors:
- Primary Action: #0B5FFF (Salesforce Blue)
- Text: #3E3E3C (dark gray) for body, #706E6B for secondary
- Backgrounds: #FFFFFF (white), #F3F3F1 (light gray for containers)
- Status: Success (#04844B), Warning (#FFB81A), Error (#EA001E)
- Borders: #D3D3D1
Typography:
- Body: 13px / 1.5 line-height
- Headings: 16px (h2) to 24px (h1), weight 700
- Font family: Salesforce Sans, -apple-system, sans-serif
Spacing (rem-based):
- Small: 0.5rem (8px), Medium: 1rem (16px), Large: 1.5rem (24px), X-Large: 2rem (32px)
- Use
slds-p-* (padding), slds-m-* (margin) utility classes
- Grid gap: 1rem (16px)
Elevation & Shadows:
- Subtle:
0 2px 4px rgba(0,0,0,0.1)
- Raised:
0 2px 8px rgba(0,0,0,0.15)
- Card background: white on light gray surface
Component Patterns
Data Table (slds-table)
High-density table with sorting, selection, inline editing.
<table class="slds-table slds-table--bordered slds-table--cell-buffer">
<thead>
<tr class="slds-line-height--reset">
<th class="slds-text-title--caps">Account Name</th>
<th class="slds-text-title--caps" style="width: 150px;">Industry</th>
<th class="slds-text-title--caps slds-text-align--right">Revenue</th>
</tr>
</thead>
<tbody>
<tr class="slds-hint-parent">
<td class="slds-cell-edit" data-label="Account Name">
<a href="#">Acme Corp</a>
</td>
<td data-label="Industry">Technology</td>
<td class="slds-text-align--right" data-label="Revenue">$10M</td>
</tr>
</tbody>
</table>
Record Detail Page
Page header + two-column layout (sidebar + content).
<div class="slds-page-header slds-page-header--record-home">
<div class="slds-grid">
<div class="slds-col slds-has-flexi-truncate">
<h1 class="slds-page-header__title">Acme Corp</h1>
<p class="slds-page-header__info">Account • Updated 2 hours ago</p>
</div>
<div class="slds-col slds-no-flex slds-grid slds-align-top">
<button class="slds-button slds-button--brand">Edit</button>
</div>
</div>
</div>
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size--4-of-6">
</div>
<div class="slds-col slds-size--2-of-6">
</div>
</div>
Kanban Board
Card-based layout for pipelines (Opportunities by Stage).
<div class="slds-grid slds-wrap slds-grid--pull-padded">
<div class="slds-col slds-p-horizontal--medium slds-size--1-of-3">
<div class="slds-box slds-m-bottom--medium">
<h3 class="slds-text-heading--small">Prospecting</h3>
<div class="slds-is-sortable slds-card-container">
<div class="slds-card slds-m-bottom--small">
<div class="slds-card__body">
<p class="slds-text-body--regular">Opportunity Name</p>
<p class="slds-text-body--small slds-text-color--weak">$50,000</p>
</div>
</div>
</div>
</div>
</div>
</div>
Code Generation Guidance
Use Lightning when:
- Building CRM record pages (accounts, contacts, opportunities)
- Displaying complex data tables with sorting, filtering, row actions
- Creating dashboards with charts, lists, metrics
- Building salesforce-like applications with record relationships
HTML/CSS patterns:
- Import SLDS stylesheet:
<link href="path/to/slds.css">
- Use BEM for custom styles:
.my-component__title, .my-component__action--primary
- Utility classes for layout:
slds-grid, slds-col slds-size--1-of-2, slds-m-around--medium
- Buttons:
slds-button slds-button--brand (primary), slds-button slds-button--neutral (secondary)
LWC example:
import { LightningElement } from 'lwc';
export default class AccountRecord extends LightningElement {
accountName = 'Acme Corp';
handleEdit() {
}
}
HTML template:
<template>
<lightning-page-reference type="standard__recordPage" record-id={recordId}></lightning-page-reference>
<div class="slds-page-header">
<h1 class="slds-page-header__title">{accountName}</h1>
</div>
</template>
Accessibility
- Semantic HTML: Use
<table>, <button>, <label>, landmarks (<main>, <aside>)
- Focus visibility: 2px #0B5FFF outline, 2px offset
- ARIA:
role="navigation", aria-label, aria-expanded for modals, tabs
- Color contrast: All text AA compliant (4.5:1 or higher)
- Keyboard: Tab navigation, Enter to select, arrow keys for menus/lists
Examples
Example 1: Account Record Page with Related Lists
Input: "Design an account detail page showing contacts and opportunities as related lists with quick actions"
<div class="slds-page-header slds-page-header--record-home">
<div class="slds-grid">
<div class="slds-col slds-has-flexi-truncate">
<h1 class="slds-page-header__title">Acme Corp</h1>
<p class="slds-page-header__info">Account • Phone: (555) 123-4567</p>
</div>
<div class="slds-col slds-no-flex slds-grid slds-align-top slds-gap--medium">
<button class="slds-button slds-button--brand">Edit</button>
<button class="slds-button slds-button--neutral">Delete</button>
</div>
</div>
</div>
<div class="slds-m-top--large">
<div class="slds-box slds-m-bottom--large">
<h2 class="slds-text-heading--small slds-m-bottom--medium">Contacts</h2>
<table class="slds-table slds-table--bordered">
<thead>
<tr>
<th class="slds-text-title--caps">Name</th>
<th class="slds-text-title--caps">Title</th>
<th class="slds-text-title--caps">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">John Smith</a></td>
<td>VP Sales</td>
<td>john@acme.com</td>
</tr>
</tbody>
</table>
</div>
<div class="slds-box">
<h2 class="slds-text-heading--small slds-m-bottom--medium">Opportunities</h2>
<table class="slds-table slds-table--bordered">
<thead>
<tr>
<th class="slds-text-title--caps">Opportunity</th>
<th class="slds-text-title--caps">Stage</th>
<th class="slds-text-title--caps slds-text-align--right">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">Enterprise Contract</a></td>
<td>Proposal</td>
<td class="slds-text-align--right">$250,000</td>
</tr>
</tbody>
</table>
</div>
</div>
Example 2: Opportunity Kanban Board
Input: "Create a kanban board showing opportunities grouped by stage with card counts and total amounts"
<div class="slds-grid slds-wrap slds-grid--pull-padded slds-m-around--medium">
<div class="slds-col slds-p-horizontal--medium slds-size--1-of-3">
<div class="slds-box">
<div class="slds-box__header slds-m-bottom--medium">
<h3 class="slds-text-heading--small">Prospecting</h3>
<p class="slds-text-body--small slds-text-color--weak">3 • $150K</p>
</div>
<div class="slds-is-sortable">
<div class="slds-box slds-m-bottom--small slds-p-around--medium">
<p class="slds-text-body--regular slds-text-color--default">Acme Renewal</p>
<p class="slds-text-body--small slds-text-color--weak slds-m-top--small">$50,000</p>
</div>
</div>
</div>
</div>
</div>
