# Lightning Design System — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Salesforce. "Lightning Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Lightning Design System
**Owner:** Salesforce
**Official documentation:** https://www.lightningdesignsystem.com/
**Visual character:** CRM workhorse styling: cloud blue on paper white, 13px data-dense body type, and patterns hardened by a million enterprise admins.

---

## Summary

The deepest enterprise CRM design system in public view.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Brand / Blue 50 | `#0176d3` | `--slds-g-color-brand-base-50` | Primary brand actions and links |
| Text Default | `#181818` | `--slds-g-color-neutral-base-10` | Primary text |
| Surface | `#ffffff` | `--slds-g-color-neutral-base-100` | Card and page surface |
| Background | `#f3f3f3` | `--slds-g-color-neutral-base-95` | App background |
| Border | `#e5e5e5` | `--slds-g-color-border-base-1` | Hairlines and card borders |
| Error | `#ea001e` | `--slds-g-color-error-base-40` | Errors and destructive actions |
| Success | `#2e844a` | `--slds-g-color-success-base-50` | Success states |
| Warning | `#fe9339` | `--slds-g-color-warning-base-60` | Warnings |

## Typography

- **Body:** Salesforce Sans — weights 300, 400, 700 — `'Salesforce Sans', Arial, sans-serif`
- **Mono:** Consolas — weights 400 — `Consolas, Menlo, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-large | `28px` | `35px` |
| heading-medium | `20px` | `25px` |
| heading-small | `14px` | `17px` |
| body-regular | `13px` | `19px` |
| body-small | `12px` | `18px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| border-radius-small | `2px` |
| border-radius-medium | `4px` |
| border-radius-large | `8px` |
| circle | `50%` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| card | `0 2px 2px 0 rgba(0,0,0,0.10)` |
| drag | `0 2px 4px 2px rgba(0,0,0,0.16)` |

## Motion

| Name | Value |
| --- | --- |
| duration-quickly | `100ms` |
| duration-promptly | `200ms` |

## Quick start (CSS)

```css
/* Lightning Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://www.lightningdesignsystem.com/ */

:root {
  /* Color */
  --slds-g-color-brand-base-50: #0176d3; /* Primary brand actions and links */
  --slds-g-color-neutral-base-10: #181818; /* Primary text */
  --slds-g-color-neutral-base-100: #ffffff; /* Card and page surface */
  --slds-g-color-neutral-base-95: #f3f3f3; /* App background */
  --slds-g-color-border-base-1: #e5e5e5; /* Hairlines and card borders */
  --slds-g-color-error-base-40: #ea001e; /* Errors and destructive actions */
  --slds-g-color-success-base-50: #2e844a; /* Success states */
  --slds-g-color-warning-base-60: #fe9339; /* Warnings */

  /* Typography */
  --font-body: 'Salesforce Sans', Arial, sans-serif;
  --font-mono: Consolas, Menlo, monospace;

  /* Type scale */
  --text-heading-large: 28px /* line-height 35px */;
  --text-heading-medium: 20px /* line-height 25px */;
  --text-heading-small: 14px /* line-height 17px */;
  --text-body-regular: 13px /* line-height 19px */;
  --text-body-small: 12px /* line-height 18px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radius */
  --radius-border-radius-small: 2px;
  --radius-border-radius-medium: 4px;
  --radius-border-radius-large: 8px;
  --radius-circle: 50%;

  /* Elevation */
  --shadow-card: 0 2px 2px 0 rgba(0,0,0,0.10);
  --shadow-drag: 0 2px 4px 2px rgba(0,0,0,0.16);

  /* Motion */
  --motion-duration-quickly: 100ms;
  --motion-duration-promptly: 200ms;
}
```

## Origin

Salesforce introduced the Lightning Design System (SLDS) alongside Lightning Experience around 2015 to replace earlier Salesforce Classic UI. It is the design language behind Sales Cloud, Service Cloud, and the broader Lightning platform.

## Governance

Salesforce design and platform teams own the canonical system. Component implementations are tied to the Lightning platform; web-only consumers can adopt the CSS framework.

## Known for

- Density modes — SLDS explicitly designs for compact, comfortable, and spacious densities, which most public systems don't.
- Page templates: full-page layouts (record, list, console) with clear region definitions.
- Strong accessibility infrastructure baked into Lightning components.

## Underrated

- The icon set (Lightning Design System Icons) is one of the most complete enterprise icon families in public.
- Field-level patterns for inline editing, validation, and dependent picklists are well documented.

## Watch out for

- SLDS as a CSS framework is usable outside Salesforce, but components are tightly coupled to the Lightning runtime.
- Visual language is unmistakably Salesforce — retheming is significant work.

## Components worth studying

- **Page Headers** — Record / list / console templates with breadcrumbs, actions, and metadata.
- **Datatable** — Configurable column widths, inline edit, and bulk-action support.
- **Combobox / Picklist** — The reference implementation for enterprise select-with-search patterns.

## When to choose Lightning Design System

Pick SLDS if you're building on the Salesforce platform or specifically need a reference for dense, data-driven enterprise UI. As a generic system, the coupling to Lightning runtime is a hurdle.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Lightning Design System by Salesforce — The deepest enterprise CRM design system in public view. Character: CRM workhorse styling: cloud blue on paper white, 13px data-dense body type, and patterns hardened by a million enterprise admins. Use a primary colour near #0176d3, the typeface "Salesforce Sans" (or a close equivalent), corner radius around 2px, a spacing rhythm on a 4px base. Lean into what it's known for: Density modes — SLDS explicitly designs for compact, comfortable, and spacious densities, which most public systems don't. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [SLDS docs](https://www.lightningdesignsystem.com/)
- [Design Tokens](https://www.lightningdesignsystem.com/design-tokens/)
- [SLDS Icons](https://www.lightningdesignsystem.com/icons/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/lightning-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._