# SLDS patterns: messaging, states, icons and density

*Platform User Experience Designer Study Guide · Salesforce Lightning Design System (SLDS) · Last updated October 16, 2026 · https://www.certifyforce.com/study-guide/user-experience-designer/salesforce-lightning-design-system-slds/slds-patterns-messaging-states-icons-and-density*

The SLDS 1 guidelines that make a custom UI behave like Lightning Experience: picking toasts, modals, popovers or inline text from the messaging framework, empty states and loading indicators, the 50/40-point color rule, icon types, labels and toggles, record layouts and display density, macropatterns, and lightningStylesheets for Visualforce.

- Certification: Salesforce Platform User Experience Designer
- Exam section: Salesforce Lightning Design System (SLDS)
- Study guide: https://www.certifyforce.com/study-guide/user-experience-designer

**Official exam objective:**

> Given a scenario, determine out-of-the-box design and configuration consistent with the look and feel of Lightning Experience.

## What the exam expects

- Pick the SLDS messaging type, component and state for a scenario, and know when no toast is needed.
- Design empty states and loading indicators that follow SLDS.
- Apply SLDS color, icon, label and toggle guidance.
- Choose record layouts, display density and macropatterns consistent with Lightning Experience.
- Bring existing Visualforce pages closer to Lightning Experience with lightningStylesheets.

Key terms: **messaging type** (system, engagement, access or feedback, set by who triggered the message); **toast** (dismissible feedback after create, edit or delete); **stencil** (a placeholder shaped like the content being loaded); **macropattern** (a repeatable high-level workflow, such as creating any record); **lightningStylesheets** (an apex:page attribute that gives standard Visualforce components Lightning styling).

## Key facts

| Fact | Detail | Source |
|---|---|---|
| Messaging types | System, engagement, access, feedback | [Messaging Types (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/messaging/types/) |
| No toast | After inline edit, or when create opens the new record | [Toasts (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/messaging/components/toasts/) |
| Delete confirmation | Warning modal, title matching the button | [Modals (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/messaging/components/modals/) |
| Form errors after submit | Error popover plus field-level messages | [Popovers (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/messaging/components/popovers/) |
| Empty state parts | Message required; CTA (max two) and illustration optional | [Empty State (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/empty-state/) |
| Stencil threshold | Full page loads over 300 ms | [Loading (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/loading/) |
| Color magic numbers | 50 points = 4.5:1; 40 points = 3:1 | [Color Accessibility (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/color/color-accessibility/) |
| Horizontal labels | Only to save space with fewer than 10 fields | [Data Entry (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/data-entry/) |
| Compact density | Labels left of fields, less spacing | [Personalize Lightning Experience Display](https://help.salesforce.com/s/articleView?language=en_US&id=xcloud.user_overview_lex.htm&type=5) |
| lightningStylesheets | Not in Classic, Experience Cloud sites or PDF | [Lightning Stylesheets for Visualforce](https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/vf_dev_best_practices_slds_lightningstylesheets.htm) |

## Check yourself

- Why does SLDS skip a toast after inline edit?
- When should a designer use horizontal field labels?
- Which record layout suits a team that collaborates mainly through activity and discussion?
- When does a one-off design become a pattern?

## Sources

- [Messaging Overview (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/messaging/overview/)
- [Messaging Types (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/messaging/types/)
- [Toasts (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/messaging/components/toasts/)
- [Alerts (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/messaging/components/alerts/)
- [Modals (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/messaging/components/modals/)
- [Prompts (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/messaging/components/prompts/)
- [Popovers (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/messaging/components/popovers/)
- [Inline Text (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/messaging/components/inline-text/)
- [Empty State (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/empty-state/)
- [Loading (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/loading/)
- [Color Accessibility (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/color/color-accessibility/)
- [Iconography (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/iconography/)
- [Data Entry (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/data-entry/)
- [Layout (SLDS 1)](https://v1.lightningdesignsystem.com/guidelines/layout/)
- [Buttons (SLDS 1)](https://v1.lightningdesignsystem.com/components/buttons/)
- [Personalize Lightning Experience Display](https://help.salesforce.com/s/articleView?language=en_US&id=xcloud.user_overview_lex.htm&type=5)
- [Design Tokens (SLDS 1)](https://v1.lightningdesignsystem.com/design-tokens/)
- [Identify Design Patterns](https://trailhead.salesforce.com/content/learn/modules/systems-design-with-slds/identify-design-patterns)
- [Lightning Stylesheets for Visualforce](https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/vf_dev_best_practices_slds_lightningstylesheets.htm)

## About the full unit

The "Core concepts", "Exam traps" and "Worked scenario" sections of this unit, its 24 linked practice questions, and unlimited timed mock exams are included with the Platform User Experience Designer pack (USD $19): https://www.certifyforce.com/practice-exams