Atlassian Design System vs Salesforce Lightning Design System
Atlassian Design System / Salesforce Lightning
Both sit in Platform Screen Languages, so the question is not what they belong to but how they behave. They are reached for with some of the same intent, which is where they get confused.
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.
Salesforce Lightning Design System
Salesforce's interface language for record-centered business work, organizing objects, actions and status into repeatable workspace patterns.
| Atlassian Design System | Salesforce Lightning Design System | |
|---|---|---|
| Era | 2012– | 2015– |
| Family | Platform Screen Languages | Platform Screen Languages |
| Kind | Style | Style |
| Cues | White and pale gray layers with blue primary actions / Rounded cards and lozenge-shaped status labels / Clear divisions among sidebar, table and detail pane / Color, spacing, radius and elevation controlled by tokens | Object headers with compact metadata / Tabs, cards and activity timelines / Cloud blue with semantic status colors / Dense forms and record tables |
| Best used for | Work-management products where people move repeatedly between lists and details · Keeping a trusted family resemblance across products without hiding their complexity | CRM and case-management interfaces · Giving many business objects a common operating model |
| Type | Fix the steps for headings, body and labels; keep status names short inside lozenges. | Keep labels plain and metadata compact, with action verbs leading controls. |
| Composition | Keep navigation, list and detail roles stable; use token multiples for spacing. | Place the record identity first, primary actions beside it, then tabs and related panels. |
| Material | Use white and pale gray as the base, blue for primary actions and one semantic meaning per status color. | Use white cards, pale neutral grounds and color only for action or status. |
| Caution | Too many cards and status labels give every component equal force and hide the work that matters next. | A field of unrelated cards becomes a dashboard with no object model. Make the record and next action unmistakable. |