Explore SLDS Resources
Learning Objectives
After completing this unit, you’ll be able to:
- Describe the major SLDS resources: design guidelines, component blueprints, and design tokens.
- Access SLDS documentation for guidelines related to design, accessibility, and voice and tone for SLDS.
Introducing the Design System Team
You know that the design system team is responsible for SLDS. But its responsibilities don’t end there. Its official objective is to:
Establish a high-quality, brand-aligned experience across our product through human guidance and internal tools.
Let’s break that down.
The design system team provides human guidance by empowering designers and developers to produce high-quality, brand-aligned design solutions. The team also helps contributors understand how small changes can affect the larger system, and how to contribute elements that work across products and for multiple use cases. Finally, the team builds tools, such as interaction guidelines and visual design guidelines, that cover high-level concepts, design patterns, and page types.
The Nuts and Bolts of SLDS
Now we get to the nuts and bolts of SLDS. To keep their products aligned with the Salesforce user experience, product teams can find a full set of design resources at lightningdesignsystem.com.
Design guidelines describe patterns based on specific use cases. Patterns are associated with blueprints (documented, accessible CSS). Consumers use blueprints to build web and native applications with the Lightning Experience. Design guidelines address big-picture questions about the Salesforce user experience, such as: How is data displayed? How is data entered? How is search handled? How does the UI indicate that information is loading? SLDS has two types of design guidelines.
-
Blueprints, a type of design guideline, are static, framework-independent, accessible HTML and CSS for UI elements such as checkboxes, page headers, and dynamic menus. Developers use blueprints to build components. (The full name for blueprints is component blueprints. People often refer to them as just components, but that’s not entirely accurate. Components are generally fully functional, but the HTML5 and CSS in SLDS are static. You must integrate an SLDS blueprint with a JavaScript framework before a user can interact with it.)
-
Tokens, another type of design guideline, are named entities that store visual design attributes. At Salesforce, we use them in place of hard-coded values (such as hex values for color or pixel values for spacing). Tokens help us maintain a scalable and consistent UI. Using design tokens can save designers time and help maintain consistency. More importantly, when a designer uses a token, each instance of it is automatically updated every time that token is updated in SLDS, with no manual updates required. Using tokens to represent design attributes makes it easy for the design system team to update and scale design elements across web and native applications.
More Resources
SLDS also includes:
-
Tools such as APIs, plug-ins, and design kits that make building with SLDS faster and easier.
-
Voice and tone guidelines for making Salesforce content clear, consistent, and appealing, whether in an app or online. These guidelines apply to all Salesforce text, from official communications to on-screen instructions and error messages.
-
Accessibility guidelines that help people with disabilities perceive, understand, navigate, interact with, and contribute to Salesforce applications. All Salesforce applications strive to meet the WC3 WCAG 2.0 AA industry standard to be perceivable, operable, understandable, and robust for all users. Some examples include:
- Providing keyboard interaction alternatives for all mouse-based actions
- Properly labelling all form fields and buttons
- Providing text-based alternatives for all images, videos, icons, and SVGs
Each SLDS component must convey its identity, operation model, and state to assistive technologies, and must use ARIA markup to identify itself to users of assistive technologies. To learn more about accessibility, explore the resources below.
The Future of SLDS
Salesforce is an industry leader in the design system space. SLDS was the world’s first open-source enterprise design system. Today, the SLDS team is asking questions like these about the next-generation design system: How might a design system use artificial intelligence? Can we make it possible for anyone to use Lightning Web components on any JavaScript platform? Can we do it without rewriting code? How can multiple design systems build on each other, extending use cases to other themes?
Whatever the answers, questions will continue to arise. We hope you join us on the journey as SLDS continues to evolve.