The Lightning Design System — the Next Generation of Living Style Guides
Sixteen years ago, Salesforce reinvented CRM in the cloud. Today our Lightning Design System reinvents enterprise UX at scale.
We are giving our customers the same toolkit we used internally to develop our new Lightning Experience. Downloading 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.
{ Joining us at Dreamforce? }
{ Read about Salesforce UX at Dreamforce 2015! }
More Than an Aesthetic Update
Focusing solely on the clean, new look of Salesforce barely scratches the surface of the Design System. Enterprises demand content- and data-rich interfaces that run across all web browsers, operating systems, and mobile devices. UIs must be intuitive and efficient while being highly detailed.
The Design System provides a clear way to communicate design intention to engineering teams. It also eliminates sending Photoshop files with redlines that quickly become obsolete. We have tested the design patterns, layouts, assets, and animations on large Salesforce organizations. Gone are the days of reverse-engineering our style guide’s CSS and HTML! You can scale up your design and code knowing that all teams use the same naming, values, and assets.
Design System as Single Source of Truth
Salesforce ecosystem’s UI surface area is immense and we need to coordinate our many engineering teams’ efforts. This common reference point makes it feasible to maintain consistent styling and UX across the product line. It centralizes all the design decisions and eliminates costly individual sync meetings.
The Design System maintains a canonical version of the named values (Design Tokens), code (CSS, markup), and assets (icons, fonts). Then we automatically convert it into various key-value formats (JSON, XML), variables for CSS preprocessors (Sass, Less, Stylus), code (HTML, Visualforce markup, Lightning components markup), and image formats (PNG, SVG). And, as the product evolves, the Design System will be updated so all teams can stay in lockstep.
“I wouldn’t develop an enterprise web app today without a strong professionally-maintained design system.” — Brian Lonsdorf, CTO loop/recur
Well-Designed, Centrally Maintained
We are guided by four key principles:
- Clarity. The namespaced CSS keeps our names unique so the Design System can be used with other CSS frameworks. Our BEM-style class names are explicit and unambiguous. The Design Tokens have semantic naming. And, the structured markup defines the component and its children.
- Efficiency. The code samples and CSS class usage tables allow for quick application of markup — which also helps new designers and engineers to be on-boarded faster. Extra padding and margins are eliminated to allow for more content on-screen. And, we have done the cross-browser and accessibility testing so you have a solid foundation.
- Consistency. The systematic UX means designers have repeatable patterns, and thus users will have familiar experiences. Multiple variations of component markup provide best practices for extending and customizing components.
- Beauty. The modern appearance purposefully balances high information density with readability. We commissioned our font from Monotype, one of the most respected font foundries, to be suitable for all sizes and screens. And developing your apps with our system means your user interface will stay on-brand and fit in well with the Salesforce ecosystem.
The Design System will be open source and maintained so as the Salesforce design evolves, developers have a clear migration path to the new UX. The download pack is aimed at designers, too, with Adobe Swatch Exchange (ASE) and Mac OS X Color Map files (CLR), and vector icon assets that resize with full fidelity.
Get Started Today; The Download is Free
We want you to build great enterprise app experiences. We have put together a Trailhead guide to help you whether you are updating a Visualforce page, using the new Lightning Components platform, or creating your own HTML with a modern web framework. All these resources are free to download from the salesforce.com/designsystem web site.
Read more about Salesforce UX at Dreamforce 2015.
Follow us at @SalesforceUX.
Want to work with us? Contact uxcareers@salesforce.com
Check out the Salesforce Lightning Design System
