Lightning Design System by Salesforce

Lightning Design System by Salesforce


SHARE & COMMENT

Salesforce recently introduced a new collection of design patterns, components, and guidelines for creating unified UI in the Salesforce ecosystem. The Design System gives you all our CSS, HTML, icons, color palettes, and a custom font. It works across our platforms: Visualforce, Heroku, and the new Lightning components. Finally, it is compatible with modern UI frameworks.

 

 

The Lightning Design System is a pure CSS framework that you can use with any front-end development framework you’d like, including Salesforce-specific technologies such as Visualforce and Lightning, as well as third-party frameworks like for instance React or AngularAlthough the Design System does not include any JS, it is a great CSS resource that at some point will get closer to what we currently know as Bootstrap or Foundation.

The framework comes with many ready-to-use components such as: activity timeline, badges, breadcrums, buttons, spinners, tabs, tooltips, datepickers, and many more. Also, it includes a great section on Design Principles to help you on your design process. The Lightning Design System focuses in four principles:

  • Clarity – Eliminate ambiguity. Enable people to see, understand, and act with confidence.
  • Efficiency – Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster.
  • Consistency – Create familiarity and strengthen intuition by applying the same solution to the same problem.
  • Beauty – Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship.

We would like to congratulate the UX team at Salesforce for this fantastic framework they put together!

Reference

 

 

 

SHARE & COMMENT