SLDS purpose, principles and building blocks
What the Salesforce Lightning Design System is and why teams use it: an implementation-agnostic, open-source design system built from design tokens, utilities, guidelines and component blueprints, implemented by Lightning base components, guided by four design principles and supported by ambassadors, voice and tone, accessibility guidance and design tools.
Describe SLDS and its purpose.
~8 min read · 18 practice questions ·
What the exam expects
- Describe what SLDS provides and why it is implementation-agnostic and open source.
- Name the four fundamental elements of SLDS 1 and tell design tokens, utilities, guidelines and blueprints apart from Lightning base components.
- Match a design decision to the principle it applies: Clarity, Efficiency, Consistency or Beauty.
- Explain systems design ideas at concept level: scalability, affordance, and pattern versus component.
- Make the case for SLDS (benefits, governance roles, voice and tone, accessibility, tools) while knowing it is optional.
Key terms: design token (a named entity that stores a visual design attribute, used instead of hard-coded values); component blueprint (framework-agnostic, accessible HTML and CSS for a UI element, with no logic); utility (a CSS class for a single-use situation, such as the grid); Lightning base component (Salesforce's functional implementation of a blueprint); pattern (a reusable, documented solution to a common user task built from components).
Key facts
- Detail
- Design tokens, utilities, guidelines, component blueprints
- Detail
- Works with LWC, Aura, Visualforce, React
- Detail
- Static HTML and CSS; add JavaScript for interaction
- Detail
- BRAND prefix; change when an org applies theming
- Detail
- Clarity, Efficiency, Consistency, Beauty
- Detail
- Optional; user needs come first
- Detail
- WCAG AA
- Detail
- SLDS UI Kit in Figma
- Detail
- No import or static resource needed
Sources for this section (8)
- Get Started with SLDStrailhead.salesforce.com (opens in a new tab)
- Explore SLDS Resourcestrailhead.salesforce.com (opens in a new tab)
- Design Tokens (SLDS 1)v1.lightningdesignsystem.com (opens in a new tab)
- Design Guidelines (SLDS 1)v1.lightningdesignsystem.com (opens in a new tab)
- Become an Advocate for SLDStrailhead.salesforce.com (opens in a new tab)
- Accessibility Overview (SLDS 1)v1.lightningdesignsystem.com (opens in a new tab)
- Tools Overview (SLDS 1)v1.lightningdesignsystem.com (opens in a new tab)
- Style Components with Lightning Design Systemdeveloper.salesforce.com (opens in a new tab)
- Why does a hand-copied Lightning stylesheet age badly?
- When should a designer build from a blueprint rather than drop in a base component?
- What makes a design token "brandable"?
- Why is a multi-step form a pattern rather than a component?
The questions are free to read. Answers with their sources and self-grading are included with the pack.
Keep reading with the Platform User Experience Designer pack
- Core concepts
- Exam traps
- Worked scenario
The pack includes:
- All 22 lessons of the Platform User Experience Designer guide, with reading progress
- Interactive decision walks and step-by-step sequence steppers
- Inline practice questions and one-click topic practice (18 questions for this lesson)
- An official source cited for every claim
- An AI tutor that answers from the guide
- Unlimited timed practice exams