Salesforce Lightning Design System

Salesforce Lightning / 2015– / Style / Platform Screen Languages

Salesforce's interface language for record-centered business work, organizing objects, actions and status into repeatable workspace patterns.

Salesforce Lightning Design System — Salesforce Lightning Design System — official previewer documentation image, unmodified — Copyright (c) 2015-present, Salesforce.com, Inc. / CC BY-ND 4.0
Salesforce Lightning Design System — official previewer documentation image, unmodified — Copyright (c) 2015-present, Salesforce.com, Inc. / CC BY-ND 4.0 · CC BY-ND 4.0
Salesforce Lightning Design System — AI-generated interpretation 1
AI-generated interpretation, not a reference work
Salesforce Lightning Design System — AI-generated interpretation 2
AI-generated interpretation, not a reference work

At a glance

Visual cues

  • Object headers with compact metadata
  • Tabs, cards and activity timelines
  • Cloud blue with semantic status colors
  • Dense forms and record tables

Best used for

  • CRM and case-management interfaces
  • Giving many business objects a common operating model

Use this style

Take the compact brief into a project or hand the structured version to an AI tool.

design.mdimage promptJSON APIMCP & machine accessCompose
open in ChatGPTopen in Claudeopen in Google AI
Detailed guidance and sourcesProduction rules, reference works, comparisons, research and citation formats

Dictionary entry

Type
Keep labels plain and metadata compact, with action verbs leading controls.
Composition
Place the record identity first, primary actions beside it, then tabs and related panels.
Material
Use white cards, pale neutral grounds and color only for action or status.
Caution
A field of unrelated cards becomes a dashboard with no object model. Make the record and next action unmistakable.
Further study
Lightning Design System foundations / Record home patterns / Design tokens and accessibility

Related entries

More from Platform Screen Languages

Continue through styles in the same Platform Screen Languages family, prioritised by shared effects.

Browse all Platform Screen Languages entries

Cite this entry

The dictionary is meant to be linked to. Take whichever form fits where you are writing.

Link
https://indexstyle.org/styles/salesforce-lightning
Markdown
[Salesforce Lightning Design System — IndexStyle](https://indexstyle.org/styles/salesforce-lightning)
HTML
<a href="https://indexstyle.org/styles/salesforce-lightning">Salesforce Lightning Design System — IndexStyle</a>

Back to index position