salesforce-lightning-design-system

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">
    <!-- Main Content: Detail sections, related lists -->
  </div>
  <div class="slds-col slds-size--2-of-6">
    <!-- Sidebar: Quick info, mini-panels -->
  </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>
  <!-- Repeat for Qualification, Proposal, Negotiation, Closed Won -->
</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() {
    // Open edit form
  }
}

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: [phone]</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>[e-mail]</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>