Slds V1

SLDS v1 — Salesforce Lightning Design System

SLDS is a framework-agnostic CSS design system used to build Salesforce-consistent enterprise UI. Every component is a pure HTML + CSS blueprint — no JavaScript framework required. Components use a strict BEM-derived class naming convention and rely on a single stylesheet.

For detailed class references, see REFERENCE.md. For HTML blueprint examples, see examples/components.md. For design token values, see examples/tokens.md.

---

1. Loading the Stylesheet

CDN (no build step)

<link
  rel="stylesheet"
  href="https://v1.lightningdesignsystem.com/assets/styles/salesforce-lightning-design-system.css"
/>

npm package (already installed in this project)

<!-- Served from node_modules or copied to public/assets -->
<link
  rel="stylesheet"
  href="/assets/styles/salesforce-lightning-design-system.css"
/>

The npm package @salesforce-ux/design-system is available at:

node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css

---

2. CSS Naming Convention

SLDS uses a BEM-derived convention with the slds- prefix:

Legacy note: Older SLDS markup sometimes uses double-hyphen (slds-button--brand). Both forms may appear; prefer the single-underscore form.

---

3. Icon Sprite System

SLDS uses SVG sprite sheets. Icons live in four sprite sets:

Icon markup pattern

<span class="slds-icon_container slds-icon-utility-settings">
  <svg class="slds-icon slds-icon_small" aria-hidden="true">
    <use
      xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"
    ></use>
  </svg>
  <span class="slds-assistive-text">Settings</span>
</span>

Icon size modifiers: slds-icon_xx-small, slds-icon_x-small, slds-icon_small, slds-icon_large

---

4. Layout Utilities

Grid System

SLDS uses a 12-column flexbox grid:

<div class="slds-grid slds-wrap">
  <div class="slds-col slds-size_1-of-2">Left half</div>
  <div class="slds-col slds-size_1-of-2">Right half</div>
</div>

Key grid classes:

• slds-grid — flex container (horizontal)
• slds-grid_vertical — flex container (vertical)
• slds-grid_align-center / _align-spread / _align-end
• slds-grid_vertical-align-center
• slds-col — flex child
• slds-col_bump-left / _bump-right — push item to edge with margin: auto
• slds-wrap — allow wrapping

Sizing

slds-size_1-of-1   slds-size_1-of-2   slds-size_1-of-3
slds-size_2-of-3   slds-size_1-of-4   slds-size_3-of-4
slds-size_1-of-5   …up to 1-of-12

Responsive prefixes: slds-small-size_*, slds-medium-size_*, slds-large-size_*

Spacing Utilities

Pattern: slds-{m|p}-{sides}_{size}

Sides: top, right, bottom, left, horizontal, vertical, around Sizes: xxx-small (2px), xx-small (4px), x-small (8px), small (12px), medium (16px), large (24px), x-large (32px), xx-large (48px)

<div class="slds-m-top_medium slds-p-around_small">...</div>

Remove all spacing: slds-m-around_none, slds-p-top_none, etc.

---

5. Typography Utilities

slds-text-heading_large    slds-text-heading_medium    slds-text-heading_small
slds-text-title            slds-text-title_caps
slds-text-body_regular     slds-text-body_small
slds-text-color_default    slds-text-color_weak        slds-text-color_error
slds-text-align_left       slds-text-align_center      slds-text-align_right
slds-truncate              slds-truncate_container_*   slds-assistive-text

---

6. State & Visibility Utilities

slds-hide           hidden via display:none
slds-show           explicit display:block
slds-show_inline-block
slds-is-open        open state (menus, dropdowns)
slds-is-active      active/selected state
slds-is-disabled    disabled state
slds-has-error      error state on form elements
slds-has-focus      focused state
slds-transition-hide / slds-transition-show

---

7. Accessibility Requirements

• Always add aria-hidden="true" on decorative SVG icons
• Provide <span class="slds-assistive-text"> for icon-only buttons
• Use role="dialog" and aria-modal="true" on modal containers
• Form elements must have associated <label> via for/id or aria-labelledby
• Disabled elements: use both the disabled attribute and slds-is-disabled class on wrapper where needed
• Live regions: use aria-live="assertive" for toast/alert notifications

---

8. Common Component Patterns (quick reference)

Button variants

slds-button                      base (unstyled)
slds-button + slds-button_neutral   neutral (bordered)
slds-button + slds-button_brand     brand (blue filled)
slds-button + slds-button_outline-brand  brand outline
slds-button + slds-button_destructive   destructive (red)
slds-button + slds-button_inverse   inverse (white on dark)
slds-button + slds-button_icon      icon-only button

Form element wrapper

Every form field is wrapped in .slds-form-element:

<div class="slds-form-element [slds-has-error]">
  <label class="slds-form-element__label" for="field-id">Label</label>
  <div class="slds-form-element__control">
    <!-- input, select, textarea, etc. -->
  </div>
  <!-- optional: error message -->
  <p class="slds-form-element__help">Error message</p>
</div>

Scoped component

Wrap SLDS HTML in a container with the slds-scope class to avoid bleeding into non-SLDS areas:

<div class="slds-scope">
  <!-- SLDS components here -->
</div>

SLDS v1 Component HTML Blueprints

Complete HTML blueprint examples for the most commonly used SLDS v1 components. All examples require the SLDS stylesheet to be loaded. See SKILL.md for setup instructions.

---

Buttons

Base (unstyled)

<button class="slds-button">Label</button>

Neutral

<button class="slds-button slds-button_neutral">Neutral</button>

Brand (primary action)

<button class="slds-button slds-button_brand">Save</button>

Brand Outline

<button class="slds-button slds-button_outline-brand">Cancel</button>

Destructive

<button class="slds-button slds-button_destructive">Delete</button>

Text Destructive

<button class="slds-button slds-button_text-destructive">Remove</button>

Success

<button class="slds-button slds-button_success">Approve</button>

Inverse (on dark background)

<div class="slds-theme_inverse slds-p-around_medium">
  <button class="slds-button slds-button_inverse">Inverse</button>
</div>

Disabled

<button class="slds-button slds-button_brand" disabled>Disabled</button>

Button with left icon

<button class="slds-button slds-button_neutral">
  <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
  </svg>
  Add
</button>

Button with right icon

<button class="slds-button slds-button_neutral">
  New
  <svg class="slds-button__icon slds-button__icon_right" aria-hidden="true">
    <use
      xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"
    ></use>
  </svg>
</button>

Icon-only button (bare)

<button class="slds-button slds-button_icon" title="Settings">
  <svg class="slds-button__icon" aria-hidden="true">
    <use
      xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"
    ></use>
  </svg>
  <span class="slds-assistive-text">Settings</span>
</button>

Icon-only button (bordered)

<button
  class="slds-button slds-button_icon slds-button_icon-border"
  title="More"
>
  <svg class="slds-button__icon" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
  </svg>
  <span class="slds-assistive-text">More</span>
</button>

Button Group

<div class="slds-button-group" role="group">
  <button class="slds-button slds-button_neutral">Refresh</button>
  <button class="slds-button slds-button_neutral">Edit</button>
  <button class="slds-button slds-button_neutral slds-button_last">Save</button>
</div>

---

Cards

Base card

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">
      <div class="slds-media__figure">
        <span class="slds-icon_container slds-icon-standard-contact">
          <svg class="slds-icon slds-icon_small" aria-hidden="true">
            <use
              xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"
            ></use>
          </svg>
        </span>
      </div>
      <div class="slds-media__body">
        <h2 class="slds-card__header-title">
          <a
            href="#"
            class="slds-card__header-link slds-truncate"
            title="Card Title"
            >Card Title</a
          >
        </h2>
      </div>
    </header>
    <div class="slds-no-flex">
      <button class="slds-button slds-button_neutral">New</button>
    </div>
  </div>
  <div class="slds-card__body slds-card__body_inner">
    <p>Card body content goes here.</p>
  </div>
  <footer class="slds-card__footer">
    <a class="slds-card__footer-action" href="#"
      >View All <span class="slds-assistive-text">Contacts</span></a
    >
  </footer>
</article>

Card without footer

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">
      <div class="slds-media__body">
        <h2 class="slds-card__header-title">Simple Card</h2>
      </div>
    </header>
  </div>
  <div class="slds-card__body slds-card__body_inner">Content goes here.</div>
</article>

---

Badges

Base

<span class="slds-badge">Default</span>

Inverse (dark)

<span class="slds-badge slds-badge_inverse">Inverse</span>

Lightest

<span class="slds-badge slds-badge_lightest">Lightest</span>

With icon (left)

<span class="slds-badge slds-badge_lightest">
  <span class="slds-badge__icon slds-badge__icon_left slds-badge__icon_inverse">
    <span
      class="slds-icon_container slds-icon-utility-moneybag slds-current-color"
    >
      <svg class="slds-icon slds-icon_xx-small" aria-hidden="true">
        <use
          xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#moneybag"
        ></use>
      </svg>
    </span>
  </span>
  Badge Label
</span>

---

Alerts

Info alert (banner)

<div class="slds-notify_container slds-is-relative">
  <div class="slds-notify slds-notify_alert slds-theme_info" role="alert">
    <span class="slds-assistive-text">Info</span>
    <span
      class="slds-icon_container slds-icon-utility-info slds-m-right_x-small"
    >
      <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
        <use
          xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"
        ></use>
      </svg>
    </span>
    <h2>This is an informational alert.</h2>
    <button
      class="slds-button slds-button_icon slds-button_icon-inverse slds-notify__close"
      title="Close"
    >
      <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
        <use
          xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"
        ></use>
      </svg>
      <span class="slds-assistive-text">Close</span>
    </button>
  </div>
</div>

Error alert

<div class="slds-notify_container slds-is-relative">
  <div class="slds-notify slds-notify_alert slds-theme_error" role="alert">
    <span class="slds-assistive-text">Error</span>
    <h2>Something went wrong. Please try again.</h2>
    <button
      class="slds-button slds-button_icon slds-button_icon-inverse slds-notify__close"
      title="Close"
    >
      <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
        <use
          xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"
        ></use>
      </svg>
      <span class="slds-assistive-text">Close</span>
    </button>
  </div>
</div>

---

Toast Notifications

Success toast

<div class="slds-notify-container">
  <div class="slds-notify slds-notify_toast slds-theme_success" role="status">
    <span class="slds-assistive-text">Success</span>
    <span
      class="slds-icon_container slds-icon-utility-success slds-m-right_small slds-no-flex slds-align-top"
    >
      <svg class="slds-icon slds-icon_small" aria-hidden="true">
        <use
          xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#success"
        ></use>
      </svg>
    </span>
    <div class="slds-notify__content">
      <h2 class="slds-text-heading_small">Record saved successfully.</h2>
    </div>
    <div class="slds-notify__close">
      <button
        class="slds-button slds-button_icon slds-button_icon-inverse slds-button_icon-small"
        title="Close"
      >
        <svg
          class="slds-button__icon slds-button__icon_large"
          aria-hidden="true"
        >
          <use
            xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"
          ></use>
        </svg>
        <span class="slds-assistive-text">Close</span>
      </button>
    </div>
  </div>
</div>

Error toast

<div class="slds-notify-container">
  <div class="slds-notify slds-notify_toast slds-theme_error" role="alert">
    <span class="slds-assistive-text">Error</span>
    <div class="slds-notify__content">
      <h2 class="slds-text-heading_small">An error occurred.</h2>
    </div>
    <div class="slds-notify__close">
      <button
        class="slds-button slds-button_icon slds-button_icon-inverse slds-button_icon-small"
        title="Close"
      >
        <svg
          class="slds-button__icon slds-button__icon_large"
          aria-hidden="true"
        >
          <use
            xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"
          ></use>
        </svg>
        <span class="slds-assistive-text">Close</span>
      </button>
    </div>
  </div>
</div>

---

Form Elements

Text input

<div class="slds-form-element">
  <label class="slds-form-element__label" for="text-input-id">
    <abbr class="slds-required" title="required">*</abbr> First Name
  </label>
  <div class="slds-form-element__control">
    <input
      type="text"
      id="text-input-id"
      placeholder="Jane"
      class="slds-input"
      required
    />
  </div>
</div>

Text input with error

<div class="slds-form-element slds-has-error">
  <label class="slds-form-element__label" for="text-input-error">Email</label>
  <div class="slds-form-element__control">
    <input
      type="email"
      id="text-input-error"
      class="slds-input"
      value="invalid"
      aria-describedby="error-msg"
    />
  </div>
  <p class="slds-form-element__help" id="error-msg" role="alert">
    Enter a valid email address.
  </p>
</div>

Input with left icon

<div class="slds-form-element">
  <label class="slds-form-element__label" for="search-input">Search</label>
  <div
    class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left"
  >
    <svg
      class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default"
      aria-hidden="true"
    >
      <use
        xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"
      ></use>
    </svg>
    <input
      type="search"
      id="search-input"
      class="slds-input"
      placeholder="Search..."
    />
  </div>
</div>

Select

<div class="slds-form-element">
  <label class="slds-form-element__label" for="select-id">Status</label>
  <div class="slds-form-element__control">
    <div class="slds-select_container">
      <select class="slds-select" id="select-id">
        <option value="">Select an option</option>
        <option value="new">New</option>
        <option value="open">Open</option>
        <option value="closed">Closed</option>
      </select>
    </div>
  </div>
</div>

Textarea

<div class="slds-form-element">
  <label class="slds-form-element__label" for="textarea-id">Description</label>
  <div class="slds-form-element__control">
    <textarea
      id="textarea-id"
      class="slds-textarea"
      placeholder="Add notes here..."
    ></textarea>
  </div>
</div>

Checkbox

<div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="checkbox" id="checkbox-id" />
      <label class="slds-checkbox__label" for="checkbox-id">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">I agree to the terms</span>
      </label>
    </span>
  </div>
</div>

Checkbox Toggle

<div class="slds-form-element">
  <label class="slds-checkbox_toggle slds-grid" for="toggle-id">
    <span class="slds-form-element__label slds-m-bottom_none"
      >Enable Feature</span
    >
    <input
      type="checkbox"
      name="toggle"
      id="toggle-id"
      aria-describedby="toggle-id"
    />
    <span class="slds-checkbox_faux_container" aria-live="assertive">
      <span class="slds-checkbox_faux"></span>
      <span class="slds-checkbox_on">Enabled</span>
      <span class="slds-checkbox_off">Disabled</span>
    </span>
  </label>
</div>

Radio Group

<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">
    Frequency
  </legend>
  <div class="slds-form-element__control">
    <span class="slds-radio">
      <input type="radio" name="frequency" id="radio-daily" value="daily" />
      <label class="slds-radio__label" for="radio-daily">
        <span class="slds-radio_faux"></span>
        <span class="slds-form-element__label">Daily</span>
      </label>
    </span>
    <span class="slds-radio">
      <input type="radio" name="frequency" id="radio-weekly" value="weekly" />
      <label class="slds-radio__label" for="radio-weekly">
        <span class="slds-radio_faux"></span>
        <span class="slds-form-element__label">Weekly</span>
      </label>
    </span>
  </div>
</fieldset>

---

Spinners

Medium spinner (default)

<div class="slds-spinner_container">
  <div
    role="status"
    class="slds-spinner slds-spinner_medium slds-spinner_brand"
  >
    <span class="slds-assistive-text">Loading</span>
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Small inline spinner

<div role="status" class="slds-spinner slds-spinner_small slds-spinner_inline">
  <span class="slds-assistive-text">Loading</span>
  <div class="slds-spinner__dot-a"></div>
  <div class="slds-spinner__dot-b"></div>
</div>

Spinner sizes

slds-spinner_xx-small   slds-spinner_x-small   slds-spinner_small
slds-spinner_medium     slds-spinner_large

Spinner variants

slds-spinner_brand      (blue)
slds-spinner_inverse    (white, for dark backgrounds)

---

Modals

<!-- Backdrop -->
<div class="slds-backdrop slds-backdrop_open" role="presentation"></div>

<!-- Modal -->
<section
  role="dialog"
  tabindex="-1"
  aria-modal="true"
  aria-label="Modal Title"
  class="slds-modal slds-fade-in-open"
>
  <div class="slds-modal__container">
    <!-- Header -->
    <header class="slds-modal__header">
      <button
        class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
        title="Close"
      >
        <svg
          class="slds-button__icon slds-button__icon_large"
          aria-hidden="true"
        >
          <use
            xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"
          ></use>
        </svg>
        <span class="slds-assistive-text">Close</span>
      </button>
      <h1 class="slds-text-heading_medium slds-hyphenate">Modal Title</h1>
    </header>
    <!-- Body -->
    <div class="slds-modal__content slds-p-around_medium">
      <p>Modal content goes here.</p>
    </div>
    <!-- Footer -->
    <footer class="slds-modal__footer">
      <button class="slds-button slds-button_neutral">Cancel</button>
      <button class="slds-button slds-button_brand">Save</button>
    </footer>
  </div>
</section>

Modal size variants

slds-modal               default (small)
slds-modal slds-modal_medium
slds-modal slds-modal_large
slds-modal slds-modal_full   (full screen)

---

Data Tables

Basic table

<table
  class="slds-table slds-table_cell-buffer slds-table_bordered"
  role="grid"
>
  <thead>
    <tr class="slds-line-height_reset">
      <th scope="col">
        <div class="slds-truncate" title="Name">Name</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Status">Status</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Date">Date</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="slds-hint-parent">
      <th scope="row" data-label="Name">
        <div class="slds-truncate" title="John Doe">
          <a href="#">John Doe</a>
        </div>
      </th>
      <td data-label="Status">
        <div class="slds-truncate" title="Active">Active</div>
      </td>
      <td data-label="Date">
        <div class="slds-truncate" title="2024-01-15">2024-01-15</div>
      </td>
    </tr>
  </tbody>
</table>

Table modifier classes

slds-table_fixed-layout    fixed column widths (requires th widths)
slds-table_bordered        borders on all cells
slds-table_striped         alternating row background
slds-table_cell-buffer     default cell padding
slds-table_col-bordered    borders between columns only

---

Avatars

Image avatar

<span class="slds-avatar slds-avatar_medium">
  <img src="/path/to/avatar.jpg" alt="User Name" title="User Name" />
</span>

Initials avatar

<span class="slds-avatar slds-avatar_medium slds-avatar_circle">
  <abbr
    class="slds-avatar__initials slds-icon-standard-account"
    title="John Doe"
    >JD</abbr
  >
</span>

Avatar sizes

slds-avatar_x-small   (24px)
slds-avatar_small     (32px)
slds-avatar_medium    (40px) — default
slds-avatar_large     (48px)

---

Pills

Base pill

<span class="slds-pill">
  <a href="#" class="slds-pill__action" title="Pill Label">
    <span class="slds-pill__label">Pill Label</span>
  </a>
  <button
    class="slds-button slds-button_icon slds-button_icon slds-pill__remove"
    title="Remove"
  >
    <svg class="slds-button__icon slds-button__icon_hint" aria-hidden="true">
      <use
        xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"
      ></use>
    </svg>
    <span class="slds-assistive-text">Remove Pill Label</span>
  </button>
</span>

Pill container

<div class="slds-pill-container">
  <span class="slds-pill">
    <a href="#" class="slds-pill__action" title="Tag 1">
      <span class="slds-pill__label">Tag 1</span>
    </a>
    <button
      class="slds-button slds-button_icon slds-pill__remove"
      title="Remove Tag 1"
    >
      <svg class="slds-button__icon" aria-hidden="true">
        <use
          xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"
        ></use>
      </svg>
      <span class="slds-assistive-text">Remove Tag 1</span>
    </button>
  </span>
</div>

---

Progress Indicator

<div class="slds-progress slds-progress_shade">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-completed">
      <button
        class="slds-button slds-progress__marker"
        title="Step 1 - Completed"
      >
        <span class="slds-assistive-text">Step 1 - Completed</span>
      </button>
    </li>
    <li class="slds-progress__item slds-is-active">
      <button class="slds-button slds-progress__marker" title="Step 2 - Active">
        <span class="slds-assistive-text">Step 2 - Active</span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" title="Step 3">
        <span class="slds-assistive-text">Step 3</span>
      </button>
    </li>
  </ol>
  <div
    class="slds-progress-bar slds-progress-bar_x-small"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="50"
    role="progressbar"
  >
    <span class="slds-progress-bar__value" style="width: 50%;">
      <span class="slds-assistive-text">Progress: 50%</span>
    </span>
  </div>
</div>

---

Scoped Notification

<div
  class="slds-scoped-notification slds-media slds-media_center slds-scoped-notification_light"
  role="status"
>
  <div class="slds-media__figure">
    <span
      class="slds-icon_container slds-icon-utility-info slds-icon-utility-info slds-icon_container_circle slds-scoped-notification__icon"
    >
      <svg
        class="slds-icon slds-icon_small slds-icon-text-default"
        aria-hidden="true"
      >
        <use
          xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"
        ></use>
      </svg>
    </span>
  </div>
  <div class="slds-media__body">
    <p>This is a scoped notification message.</p>
  </div>
</div>

---

Breadcrumbs

<nav role="navigation" aria-label="Breadcrumbs">
  <ol class="slds-breadcrumb slds-list_horizontal slds-wrap">
    <li class="slds-breadcrumb__item">
      <a href="#">Parent Section</a>
    </li>
    <li class="slds-breadcrumb__item">
      <a href="#">Child Section</a>
    </li>
    <li class="slds-breadcrumb__item" aria-current="page">
      <span>Current Page</span>
    </li>
  </ol>
</nav>

---

Tabs

<div class="slds-tabs_default">
  <ul class="slds-tabs_default__nav" role="tablist">
    <li class="slds-tabs_default__item slds-is-active" role="presentation">
      <a
        class="slds-tabs_default__link"
        role="tab"
        tabindex="0"
        id="tab-1"
        aria-controls="tab-1-panel"
        >Tab One</a
      >
    </li>
    <li class="slds-tabs_default__item" role="presentation">
      <a
        class="slds-tabs_default__link"
        role="tab"
        tabindex="-1"
        id="tab-2"
        aria-controls="tab-2-panel"
        >Tab Two</a
      >
    </li>
  </ul>
  <div
    id="tab-1-panel"
    class="slds-tabs_default__content slds-show"
    role="tabpanel"
    aria-labelledby="tab-1"
  >
    <p>Tab one content</p>
  </div>
  <div
    id="tab-2-panel"
    class="slds-tabs_default__content slds-hide"
    role="tabpanel"
    aria-labelledby="tab-2"
  >
    <p>Tab two content</p>
  </div>
</div>

SLDS v1 Design Token Usage

Design tokens are the atomic building blocks of the SLDS visual design system. This file covers how to consume tokens in your own CSS/SCSS, the full token catalog by category, and practical usage patterns.

---

How Tokens Work

CSS Custom Properties (modern approach)

The SLDS stylesheet defines tokens as CSS custom properties on :root. You can reference them directly:

.my-component {
  background-color: var(--slds-g-color-brand-base-60);
  border-color: var(--slds-g-color-border-base-1);
  color: var(--slds-g-color-neutral-base-10);
}

SCSS Variables (build pipeline)

If you use SCSS with the @salesforce-ux/design-system npm package:

// Import SLDS token maps
@import '~@salesforce-ux/design-system/scss/index.scss';

.my-component {
  background-color: $brand-accessible; // #0176d3
  color: $color-text-default; // #080707
  border: 1px solid $color-border; // #dddbda
}

JavaScript (token values)

// Token values are available in the design-tokens directory
// node_modules/@salesforce-ux/design-system/design-tokens/
// Individual token files: aliases/colors.yml, components.yml, etc.

---

Color Tokens

Brand Colors

Usage:

/* Primary action / interactive element */
.my-button {
  background-color: var(--slds-g-color-brand-base-60);
}
/* Hover state */
.my-button:hover {
  background-color: var(--slds-g-color-brand-base-50);
}
/* Brand tinted background */
.my-header {
  background-color: var(--slds-g-color-brand-base-95);
}

---

Neutral / Gray Colors

Usage:

/* Body text */
.my-text {
  color: var(--slds-g-color-neutral-base-10);
}
/* Muted/helper text */
.my-meta {
  color: var(--slds-g-color-neutral-base-50);
}
/* Card background */
.my-card {
  background-color: var(--slds-g-color-neutral-base-100);
}
/* Subtle section background */
.my-section {
  background-color: var(--slds-g-color-neutral-base-95);
}
/* Default border */
.my-input {
  border-color: var(--slds-g-color-neutral-base-80);
}

---

Status Colors

Error

.my-error-text {
  color: var(--slds-g-color-error-base-50);
}
.my-error-bg {
  background-color: var(--slds-g-color-error-base-90);
}

Warning

.my-warning-text {
  color: var(--slds-g-color-warning-base-50);
}
.my-warning-bg {
  background-color: var(--slds-g-color-warning-base-90);
}

Success

.my-success-text {
  color: var(--slds-g-color-success-base-50);
}
.my-success-bg {
  background-color: var(--slds-g-color-success-base-90);
}

---

Border Colors

/* Default input border */
.my-input {
  border: 1px solid var(--slds-g-color-border-base-1);
}
/* Focus state */
.my-input:focus {
  border-color: var(--slds-g-color-border-brand-2);
  box-shadow: 0 0 3px var(--slds-g-color-border-brand-1);
}

---

Link Colors

a {
  color: var(--slds-g-link-color);
} /* #0b5cab */
a:hover {
  color: var(--slds-g-link-color-hover);
} /* #014486 */
a:focus {
  color: var(--slds-g-link-color-focus);
} /* #014486 */
a:active {
  color: var(--slds-g-link-color-active);
} /* #032d60 */

---

Spacing Scale

SLDS uses a consistent spacing scale. The utility classes (slds-m-*, slds-p-*) are the preferred way to apply spacing, but you can use the values directly in custom CSS:

/* Using spacing values directly */
.my-component {
  padding: 1rem; /* medium */
  margin-bottom: 1.5rem; /* large */
  gap: 0.5rem; /* x-small */
}

---

Typography Scale

<h1 class="slds-text-heading_large">Page Title</h1>
<h2 class="slds-text-heading_medium">Section Title</h2>
<h3 class="slds-text-heading_small">Component Title</h3>
<p class="slds-text-body_regular">Body text content.</p>
<span class="slds-text-body_small slds-text-color_weak">Meta text</span>
<span class="slds-text-title_caps">CATEGORY LABEL</span>

---

Applying Tokens in Custom Components

Pattern: Themed component using tokens

<style>
  .my-status-banner {
    background-color: var(--slds-g-color-success-base-90);
    border-left: 4px solid var(--slds-g-color-success-base-50);
    color: var(--slds-g-color-success-base-40);
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
  }
</style>
<div class="my-status-banner">
  <strong>Success:</strong> Your changes have been saved.
</div>

Pattern: Form input using tokens

<style>
  .my-input {
    border: 1px solid var(--slds-g-color-border-base-1);
    border-radius: 0.25rem;
    padding: 0 0.75rem;
    height: 2rem;
    font-size: 0.8125rem;
    color: var(--slds-g-color-neutral-base-10);
    background-color: var(--slds-g-color-neutral-base-100);
    transition: border-color 0.15s ease;
  }
  .my-input:focus {
    outline: none;
    border-color: var(--slds-g-color-border-brand-2);
    box-shadow: 0 0 3px var(--slds-g-color-border-brand-1);
  }
  .my-input:disabled {
    background-color: var(--slds-g-color-neutral-base-95);
    color: var(--slds-g-color-neutral-base-60);
    border-color: var(--slds-g-color-border-base-1);
    cursor: not-allowed;
  }
</style>
<input class="my-input" type="text" placeholder="Enter value..." />

Pattern: Data card using tokens

<style>
  .metric-card {
    background: var(--slds-g-color-neutral-base-100);
    border: 1px solid var(--slds-g-color-border-base-1);
    border-radius: 0.25rem;
    padding: 1.5rem;
  }
  .metric-card__value {
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--slds-g-color-brand-base-50);
  }
  .metric-card__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    color: var(--slds-g-color-neutral-base-50);
  }
</style>
<div class="metric-card">
  <p class="metric-card__label">Total Cases</p>
  <p class="metric-card__value">1,284</p>
</div>

SLDS v1 Reference

Component Index

All 85+ SLDS v1 component blueprints with their primary CSS classes, organized by category. Component CSS source lives at node_modules/@salesforce-ux/design-system/css/<component>/.

---

Layout & Structure

---

Navigation

---

Forms & Inputs

---

Buttons & Actions

---

Data Display

---

Feedback & Notifications

---

Media & Icons

---

App Chrome & Misc

---

Design Token Reference

SLDS design tokens are named CSS variables (available in the CSS file as --slds-* custom properties) and also as SCSS/JS values in node_modules/@salesforce-ux/design-system/design-tokens/.

Brand Color Tokens (CSS custom properties)

--slds-g-color-brand-base-10: #001639 /* darkest */
  --slds-g-color-brand-base-20: #032d60 --slds-g-color-brand-base-30: #014486
  --slds-g-color-brand-base-40: #0b5cab --slds-g-color-brand-base-50: #0176d3
  /* primary brand */ --slds-g-color-brand-base-60: #1b96ff /* brand primary */
  --slds-g-color-brand-base-65: #57a3fd --slds-g-color-brand-base-70: #78b0fd
  --slds-g-color-brand-base-80: #aacbff --slds-g-color-brand-base-90: #d8e6fe
  --slds-g-color-brand-base-95: #eef4ff --slds-g-color-brand-base-100: #ffffff;

Neutral Gray Tokens

--slds-g-color-neutral-base-10: #181818 /* near black */
  --slds-g-color-neutral-base-20: #2e2e2e
  --slds-g-color-neutral-base-30: #444444
  --slds-g-color-neutral-base-40: #5c5c5c
  --slds-g-color-neutral-base-50: #747474
  --slds-g-color-neutral-base-60: #939393
  --slds-g-color-neutral-base-65: #a0a0a0
  --slds-g-color-neutral-base-70: #aeaeae
  --slds-g-color-neutral-base-80: #c9c9c9
  --slds-g-color-neutral-base-90: #e5e5e5
  --slds-g-color-neutral-base-95: #f3f3f3
  --slds-g-color-neutral-base-100: #ffffff;

Status Color Tokens

/* Error */
--slds-g-color-error-base-50: #ea001e /* primary error */
  --slds-g-color-error-base-40: #ba0517 --slds-g-color-error-base-60: #fe5c4c
  --slds-g-color-error-base-80: #feb8ab --slds-g-color-error-base-90: #feded8
  /* Warning */ --slds-g-color-warning-base-50: #a96404 /* primary warning */
  --slds-g-color-warning-base-60: #dd7a01
  --slds-g-color-warning-base-70: #fe9339
  --slds-g-color-warning-base-80: #ffba90
  --slds-g-color-warning-base-90: #fedfd0 /* Success */
  --slds-g-color-success-base-50: #2e844a /* primary success */
  --slds-g-color-success-base-60: #3ba755
  --slds-g-color-success-base-70: #45c65a
  --slds-g-color-success-base-80: #91db8b
  --slds-g-color-success-base-90: #cdefc4;

Border Tokens

--slds-g-color-border-base-1: #c9c9c9 /* lightest */
  --slds-g-color-border-base-2: #aeaeae --slds-g-color-border-base-3: #939393
  --slds-g-color-border-base-4: #747474 /* darkest */
  --slds-g-color-border-brand-1: #78b0fd /* brand light */
  --slds-g-color-border-brand-2: #1b96ff /* brand */;

Link Tokens

--slds-g-link-color: #0b5cab --slds-g-link-color-hover: #014486
  --slds-g-link-color-focus: #014486 --slds-g-link-color-active: #032d60;

Spacing Scale (rem values)

SLDS Utility Theme Classes

slds-theme_default         white background
slds-theme_shade           light gray background
slds-theme_inverse         dark (inverted) background
slds-theme_alt-inverse     alternate dark background
slds-theme_success         green background
slds-theme_info            blue background
slds-theme_warning         yellow/orange background
slds-theme_error           red background
slds-theme_offline         dark blue background