A design system is a collection of design principles, style guides, and elements that enable developers to focus on how components and applications work, while designers can focus on how the application looks and feels.
The Salesforce Lightning Design System (SLDS) is a trusted, living, platform-agnostic design system that was built from the ground up to provide developers with everything needed to implement the look-and-feel of Lightning Experience and the Salesforce1 mobile application.
SLDS ensures consistency across all components and applications, whether they are written by Salesforce developers, ISV partners, or even Salesforce itself when designing and implementing product features.
Salesforce developed SLDS with four key design principles in mind:
These principles are applied to colors, typography, layout, icons and more throughout the accompanying CSS framework.
Developers can implement the design system by including SLDS Cascading Style Sheets (CSS) and icon libraries in components and applications and applying the appropriate CSS classes to component markup.
SLDS also includes CSS style sheets for applying the design system to Visualforce components, Heroku and native iOS applications.
When SLDS was first introduced, adding the style sheets or icon libraries to a Salesforce org required installing an unmanaged package or uploading files as Static Resources and manually upgrading to new versions of the design system as they were released.
As of the Winter ’17 release of Salesforce, SLDS is included out-of-the-box with all Salesforce orgs and no longer requires an explicit reference to the Static Resources from Lightning Components or Applications. You simply reference the appropriate SLDS class names in your component markup and it will be applied automatically, or you can use BaseLightning Components, which apply SLDS implicitly without additional markup.