Ant Design vs Salesforce Lightning Design System
Ant Design / 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.
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.
Salesforce Lightning Design System
Salesforce's interface language for record-centered business work, organizing objects, actions and status into repeatable workspace patterns.
| Ant Design | Salesforce Lightning Design System | |
|---|---|---|
| Era | 2015– | 2015– |
| Family | Platform Screen Languages | Platform Screen Languages |
| Kind | Style | Style |
| Cues | Dense tables set in small type and fine rules / Blue primary actions with explicit semantic colors / Consistent forms, pagination, trees and tables / Readability achieved through alignment and repetition, not generous space | Object headers with compact metadata / Tabs, cards and activity timelines / Cloud blue with semantic status colors / Dense forms and record tables |
| Best used for | Enterprise admin screens with many tables, forms, permissions and states · Standardizing component behavior and exceptions in international products | CRM and case-management interfaces · Giving many business objects a common operating model |
| Type | Keep body text compact and separate labels, values and help text through weight and color. | Keep labels plain and metadata compact, with action verbs leading controls. |
| Composition | Set table and form columns first; show relationships through alignment rather than extra space. | Place the record identity first, primary actions beside it, then tabs and related panels. |
| Material | Start with white, fine borders and a blue primary action; hold every state color to one meaning. | Use white cards, pale neutral grounds and color only for action or status. |
| Caution | A component catalog dropped onto a page can look orderly while leaving the actual workflow undesigned. | A field of unrelated cards becomes a dashboard with no object model. Make the record and next action unmistakable. |