Lightning Design System

Salesforce Lightning Design System is flexible. Start building immediately, without worrying about detailed specs. SLDS lets you focus on the big picture to deliver the best possible user experience.

Visit Website Figma File

About Lightning Design System

The tools necessary to produce user interfaces that adhere to the Salesforce Lightning design principles, vocabulary, and best practices are part of the Salesforce Lightning Design System. Developers may concentrate on application logic rather than pixels, while designers can concentrate on user experience, interactions, and flows.

For designers and developers, this website offers a variety of resources, including:

accessible and semantic component Markup, CSS that is cross-browser interoperable, icons, fonts, and design standards.

Salesforce Lightning Design System is…

Flexible

Start constructing right away without thinking about specific specifications. For the optimal user experience, you can give the big picture with SLDS.

Scalable

Utilize a live design system to manage design at scale and to adapt as needs change. No matter how quickly the system expands, SLDS maintains consistency in the apps, interfaces, and tools.

Effective

SLDS saves time and resources, allowing designers and developers to concentrate on more important usability and meaning-related challenges. Standardized, reusable parts promote teamwork, strengthen branding, and offer a constant user interface.

Accessible

Salesforce is dedicated to producing goods that are sturdy, operational, perceivable, and intelligible for all users. For the benefit of Salesforce applications users with disabilities, all SLDS components include ARIA markup and guidelines.

Platform Neutral

Utilize our advice on integrating SLDS with Salesforce technologies like Lightning Web Components, Aura, and Visualforce, or use the SLDS CSS framework with any tech stack you can imagine.

FAQ

What is the Salesforce Lightning Design System?

The Salesforce Lightning Design System is a set of tools and resources designed for designers and developers to create user interfaces that follow the Salesforce Lightning design principles and best practices.

What resources are available on the Salesforce Lightning Design System website?

The Salesforce Lightning Design System website offers a variety of resources, including accessible and semantic component markup, cross-browser interoperable CSS, icons, fonts, and design standards.

What are some benefits of using the Salesforce Lightning Design System?

The Salesforce Lightning Design System is flexible, scalable, effective, accessible, and platform-neutral. It allows designers and developers to focus on usability and meaning-related challenges while saving time and resources.

How does the Salesforce Lightning Design System ensure accessibility?

All SLDS components include ARIA markup and guidelines to ensure that they are sturdy, operational, perceivable, and intelligible for all users, including those with disabilities.

Can the Salesforce Lightning Design System be used with technologies other than Salesforce?

Yes, the SLDS CSS framework can be used with any tech stack. Additionally, the SLDS website offers advice on integrating SLDS with Salesforce technologies like Lightning Web Components, Aura, and Visualforce.

Blog Posts About Design System

Introducing Design Systems to Your Organization

Design systems have gained increasing popularity among design teams in recent years as a way to streamline their processes and create more cohesive designs.

Design System Benefits for Product Teams

Design systems are the backbone of any product development team. They allow teams to work more efficiently, maintain consistency in their design, and deliver high-quality products to their customers.

Automating Design System Components with Tools

Design systems have become an essential part of modern web and application development. They provide a consistent and scalable approach to designing and building user interfaces...

Leveraging Design System Principles to Create Consistent Experiences

Design systems have become an increasingly popular topic in the world of UX and design, as they provide a structured approach for creating...

Design System Governance and Maintenance Strategies

A design system is a collection of design principles, components, and tools that are used to create a consistent and user-friendly experience across a product or brand.

Why We Should Pay Attention to Design Systems and How They Impact Our Designs

Design systems are becoming more and more prevalent in the UX world. In fact, Google Trends shows that searches for “design system” have increased by over 750% in the last three years alone.

Related Products View All

Pluralsight Design System

The Pluralsight Design System strives toward a cohesive design language for Pluralsight’s products, a shared vocabulary for their teams, and basic building blocks to accelerate development.

Human Interface Guidelines

Get in-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms.

Seek Style Guide

The SEEK styleguide's purpose is to enable the creation of content that will assist our users to complete tasks easily and hopefully enjoy the experience.

ServiceNow Design System

The ServiceNow Design System is a living system that empowers us to design and achieve a consistent, efficient, and high quality visual language that brings cohesion and familiarity to the user experience across the platform.

Nachos

Nachos is Trello's design system. This comprehensive guide and resource library contains everything you’ll need to design with us, including our core principles, visual design and interface components.

Photon Design System

Photon is the Firefox design language to build modern, intuitive, delightful experiences, for products across all platforms – from mobile to desktop, from TV to the next big thing.

Predix Design System

Our user interface components enable you to quickly and easily create Industrial Internet web applications that run on dedicated Predix services and data.

Canvas Design System

This library showcases the building blocks that make up Hubspot's design system, from colors and typography to React-based components and data visualization tools.

Global Experience Language (GEL)

GEL is the BBC's shared design framework which enables us to create consistent and delightful user experiences across all of our Digital Services.

Yelp Styleguide

The styleguide is a resource that provides a common language around Yelp’s UI patterns. We use it to maintain modular front-end code and visual consistency across the web app.