In this second part of our Salesforce Lightning Series, we zoom into the Salesforce Lightning Design System.

One of the core pieces of Salesforce Lightning is the Salesforce Lightning Design System.
It’s an Enterprise User Experience system that represents the Salesforce Lightning Look & Feel.
Similar frameworks are Twitter Bootstrap or Foundation.

The team at Salesforce has crafted the Lightning Design System with 4 core principles in mind: Clarity, Efficiency, Consistency and Beauty.

The Design System contains 4 types of resources:

  • CSS framework—The framework includes UI components such as page headers, labels and form elements. It also contains a grid layout system and single-purpose helper classes to assist with spacing, sizing, and other visual adjustments.
  • Icons—The design system include a wide range of icons (PNG and SVG). Definitely check out the website once a while as more icons are being added.
  • Font— Salesforce design team has created a unique font that represents the unique Salesforce Identity. The font is called ‘Salesforce Sans’ and is part of the Design System.
  • Design Tokens—These design variables allow you to tailor aspects of the visual design to match your brand. Customizable variables include colors, fonts, spacing, and sizing.

It also benefits from the new capabilities of the modern browser to deliver a beautiful user experience.

Don’t forget to check the website on a regular basis as the Design System is continuously being updated.

The Lightning Design System enables developers to create applications that deliver beautiful looking applications in the Lightning Look&Feel on every device and platform.


Want to learn more about the Lightning Design System?

Learn to use the Lightning Design System via the Trailhead* module or navigate to the Lightning Design System website.

*Trailhead is a new way of learning Salesforce, it’s a self-paced online learning platform. Create your own learning paths via module and engaging content, interactive assessments and earn your trailhead badges.