# Salesforce Lightning Design System (Salesforce Lightning)

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

- IndexStyle No.555 — https://indexstyle.org/styles/salesforce-lightning
- Kind: Style · Family: Platform Screen Languages · Era: 2015–
- Mood: Trust, Technique, Intimacy
- What this family collects: Design languages written down for a platform and published, from the vendors that shipped an operating system to the governments that had no reason to hide rules paid for with public money, every one of them recognisable at a glance.

## Defining characteristics

- 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

## Composition recipe

- Typography & lettering: Keep labels plain and metadata compact, with action verbs leading controls.
- Layout & structure: Place the record identity first, primary actions beside it, then tabs and related panels.
- Material & texture: Use white cards, pale neutral grounds and color only for action or status.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #F3F3F3
- The colour it is remembered by: #0176D3
- Text and outlines: #181818

## What to avoid

A field of unrelated cards becomes a dashboard with no object model. Make the record and next action unmistakable.

## Application checklist

Work through this before calling a piece an application of this style.

- [ ] Visible in the piece: Object headers with compact metadata
- [ ] Visible in the piece: Tabs, cards and activity timelines
- [ ] Visible in the piece: Cloud blue with semantic status colors
- [ ] Visible in the piece: Dense forms and record tables
- [ ] The layout follows: Place the record identity first, primary actions beside it, then tabs and related panels.
- [ ] The lettering follows: Keep labels plain and metadata compact, with action verbs leading controls.
- [ ] The material and surface follow: Use white cards, pale neutral grounds and color only for action or status.
- [ ] The colour relation holds: #F3F3F3 as ground, #0176D3 carrying the style, #181818 for text and outlines
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Atlassian Design System (Atlassian Design System)** — A system that translates the complexity of Jira and Confluence into shared tokens, content rules, spacing, grids and components. Consistency builds trust while keeping large sets of issues, documents and states navigable. → https://indexstyle.org/styles/atlassian-design-system
- **Ant Design (Ant Design)** — A design system that keeps enterprise web applications at low entropy through reusable components and page patterns. Its values — Natural, Certain, Meaningful and Growing — systematize tables, forms, hierarchy and state without reducing information density. → https://indexstyle.org/styles/ant-design

## Compose it with something else

The dictionary can put this entry in a structural role and another in an accent role, and report where the two fight: https://indexstyle.org/compose?ids=salesforce-lightning+atlassian-design-system

## Further study

- Lightning Design System foundations
- Record home patterns
- Design tokens and accessibility

## Reference works

- Salesforce Lightning Design System — https://www.lightningdesignsystem.com/

## Source of record

- Salesforce Lightning Design System — https://www.lightningdesignsystem.com/

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/salesforce-lightning
- Image-generation prompt (legally clean): https://indexstyle.org/styles/salesforce-lightning/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compare_styles, compose_styles, find_related_styles; prompts: image-prompt, apply-style)