Salesforce Lightning (SLDS 2)

---
name: salesforce-lightning-slds
description: Apply the Salesforce Lightning (SLDS 2) visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Salesforce Lightning (SLDS 2), mentions SLDS, Lightning Design System, Salesforce Lightning Design System, or describes #0176d3 Salesforce blue, white cards on #f3f3f3 canvas, dense 13px CRM data UI — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Salesforce Lightning (SLDS 2) Design System

Salesforce's CRM design system: the #0176d3 brand blue on white cards over a #f3f3f3 canvas, Salesforce Sans type at a dense 13px base, compact record pages built from bordered cards, tabs, and data tables, and a styling-hook (CSS custom property) architecture that lets admins theme without breaking components.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Salesforce Lightning (SLDS 2).
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (SLDS, Lightning Design System, Salesforce Lightning Design System, SLDS 2, Cosmos), or describes its traits: #0176d3 Salesforce blue; white cards on #f3f3f3 canvas; dense 13px CRM data UI; record pages with compact field rows; styling hooks for theming; flat cards with 1px borders, no shadows.

## Design tokens

### Color palette

- color-background-alt — the white card/container surface where content lives: `#ffffff` (--color-bg)
- color-background — the gray app canvas behind cards (also row hover): `#f3f3f3` (--color-surface)
- color-text-default: `#181818` (--color-text)
- color-text-label / color-text-weak — field labels, placeholders: `#747474` (--color-text-muted)
- brand-accessible / palette blue-50 — brand buttons, links in Lightning: `#0176d3` (--color-accent)
- button brand hover (blue-30): `#014486` (--color-accent-hover)
- color-brand / brand-primary (blue-60) — brand highlights, selected borders: `#1b96ff` (--color-accent-light)
- primitive color-text-link (blue-40); also the focus ring color in shadow tokens: `#0b5cab` (--color-link)
- color-border / color-border-input (neutral-80): `#c9c9c9` (--color-border)
- color-text-error / destructive (red-50): `#ea001e` (--color-error)
- color-text-success (green-40); success button background #45c65a: `#2e844a` (--color-success)
- color-background-warning (orange-70): `#fe9339` (--color-warning)

### Typography

- Display / headings: Inter (fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif) (ideal: Salesforce Sans, premium — use Inter as the free substitute)
- Body: Inter (fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif) (ideal: Salesforce Sans, premium — use Inter as the free substitute)
- Type scale: 1.125 ratio, base 13px — computed steps: 13px / 15px / 16px / 19px / 21px / 23px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.25, letter-spacing 0
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 2, 4, 8, 12, 16, 24, 32, 48 — True CRM density: 13px body text (FONT_SIZE_3 0.8125rem), xxx-small 2px through x-large 48px spacing tokens, 32px form rows, and field label/value pairs stacked with 4px gaps so a record page shows dozens of fields without scrolling.
- Border radius: sm 2px, md 4px, lg 8px — BORDER_RADIUS_SMALL 0.125rem, MEDIUM 0.25rem, LARGE 0.5rem; cards and buttons sit at the 4px medium; avatars and pills use full rounding.
- Border treatment: 1px solid #c9c9c9 — Cards, inputs, and tables all use 1px #c9c9c9 (primitive color-border is the lighter #e5e5e5); Lightning separates surfaces with borders, not elevation.

### Shadows

- none: `none` — CARD_SHADOW is literally 'none' — Lightning cards are flat and bordered
- focus-ring: `0 0 0 2px #ffffff, 0 0 0 4px #0b5cab` — shadow-outset-focus-1 — the double focus ring on interactive elements
- docked-panel: `1px 0 3px rgba(0, 0, 0, 0.25)` — PANEL_DOCKED_LEFT_SHADOW — docked composer/utility panels
- drag-handle: `0 2px 3px rgba(0, 0, 0, 0.16)` — Slider handles and dragged items (SLIDER_HANDLE_SHADOW)

### Layout

- Max content width: 1280px
- App shell: global header with search, colored object icons, tab bar for open records; content fills wide viewports
- Record pages use a 2:1 main/sidebar card grid; each card has a 12px-padded header with icon and actions
- Data tables are dense: 28–32px rows, inline edit pencils, checkbox column
- Path/progress components (chevron stage bar) run across the top of opportunity-style records

### Effects

- Colored SLDS object icons (rounded squares — orange accounts, blue contacts, green opportunities) index everything
- Styling hooks (--slds-g-* custom properties) let orgs re-theme components without forking CSS

### Motion

- Easing: cubic-bezier(0.4, 0, 0.6, 1); durations 100ms / 200ms / 400ms
- Utility panels and drawers slide; most state changes (tabs, hovers, inline edit) are instant
- Toasts drop in from the top and auto-dismiss
- Motion is minimal — enterprise users open hundreds of records a day

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-surface: #f3f3f3;
  --color-text: #181818;
  --color-text-muted: #747474;
  --color-accent: #0176d3;
  --color-accent-hover: #014486;
  --color-accent-light: #1b96ff;
  --color-link: #0b5cab;
  --color-border: #c9c9c9;
  --color-error: #ea001e;
  --color-success: #2e844a;
  --color-warning: #fe9339;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --shadow-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0b5cab;
  --shadow-docked-panel: 1px 0 3px rgba(0, 0, 0, 0.25);
  --shadow-drag-handle: 0 2px 3px rgba(0, 0, 0, 0.16);
  --border-default: 1px solid #c9c9c9;
  --font-display: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --text-base: 13px;
  --leading-heading: 1.25;
  --leading-body: 1.5;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: cubic-bezier(0.4, 0, 0.6, 1);
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Global header: white bar with app-launcher waffle, colored cloud/app icon, object tabs; a #0176d3-accented active tab underline; vertical left nav in console apps
- **Hero:** No marketing hero in-product: pages open with the page-header card (object icon, breadcrumb, record title, right-aligned button group) directly over the gray canvas
- **Card:** White, 4px radius, 1px #c9c9c9 border, NO shadow; 12px-padded header row with 32px object icon, bold title, and action menu; body holds field grids or tables
- **Button (primary):** 'Brand' button: #0176d3 fill, white 13px label, 4px radius, 32px tall; hover #014486; focus adds the white+blue double ring
- **Button (secondary):** Neutral button: white fill, 1px #c9c9c9 border, #0176d3 label; destructive variant uses #ea001e text or fill
- **Form fields:** Tiny 12px #747474 label (with * for required), 32px input with 1px #c9c9c9 border and 4px radius on white; focus shows #0b5cab ring; inline error turns border #ea001e with 12px red text

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The Lightning record page: a white page-header card with an object icon, title, and action buttons, floating over the #f3f3f3 canvas above a grid of bordered, flat detail cards packed with label/value field rows. Spend boldness here; keep everything else quiet.

## Do

- Compose pages from flat bordered cards on the #f3f3f3 canvas — elevation is expressed by borders, not shadows
- Use object icons and their SLDS colors consistently; they are the primary wayfinding device
- Theme via styling hooks (--slds-g-color-*) so components survive SLDS upgrades
- Keep the dense 13px scale; Lightning users value information per screen over whitespace

## Don't

- Don't add drop shadows to cards or buttons — CARD_SHADOW: none is a deliberate SLDS 2 decision
- Don't use the pre-2021 palette (#00a1e0 / #1589ee blues); the rebrand moved brand actions to #0176d3 with #1b96ff highlights
- Don't ship Salesforce Sans outside Salesforce properties — substitute Inter or the system stack the tokens fall back to
- Don't widen field label/value gaps; record scannability depends on the tight label column

## Accessibility notes

- SLDS documents #0176d3 as its minimum 4.5:1 'accessible brand' blue on white (it measures ≈4.5:1 — right at AA; use #0b5cab links or darker fills for small text when in doubt)
- The double focus ring (white inner + #0b5cab outer, shadow-outset-focus-1) keeps focus visible on both light and colored fills
- Muted #747474 label text on white is ≈4.7:1 — do not place it on the gray #f3f3f3 canvas, where it drops below AA
- SLDS 2 dark mode exists via styling-hook themes in Salesforce products, but Salesforce has not published a complete dark token value set, so no darkRoles are recorded here

## Reference sites

- Lightning Design System: https://www.lightningdesignsystem.com
- @salesforce-ux/design-system tokens: https://www.npmjs.com/package/@salesforce-ux/design-system
- Salesforce styling hooks: https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip salesforce-lightning-slds.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/salesforce-lightning-slds.json

Settings → Capabilities → Skills → Upload skill → salesforce-lightning-slds.zip