Introducing the Salesforce Lightning Design System

Today's product design and development cover a range of devices and platforms: mobile, tablets, responsive web, desktop apps, and more. Style Guides and CSS Frameworks have helped streamline this process and provides maintainability and better designer/developer communication. Learn how the Salesforce UX team took it further with a living design system to help maintain brand alignment and quality. Find out how you can adopt our system and methods into your own applications to develop front end user interfaces efficiently.

1. Introducing the Salesforce
Lightning Design System
Jina Bolton
Senior Designer, Design Systems
Salesforce UX
Brandon Ferrua
Senior Developer, Design Systems
Salesforce UX

2. Safe Harbor
Safe harbor statement under the Private Securities Litigation Reform Act of 1995:
This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties
materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or
implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking,
including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements
regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded
services or technology developments and customer contracts or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality
for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and
rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with
completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our
ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer
deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further
information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for
the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing
important disclosures are available on the SEC Filings section of the Investor Information section of our Web site.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and
may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are
currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

3. user experience

4. @jina
Senior Designer, Design Systems, Salesforce UX

5. @bferrua
Senior Developer, Design Systems, Salesforce UX

6. “It used to be that designers made
an object and walked away. Today
the emphasis must shift to
designing the entire life cycle.”
— PAUL SAFFO

7. Salesforce1

8. Design for Scale & Maintainability

9. Support Multiple 

Platforms & Devices

10. Dozens of Scrum Teams
Hundreds of Developers
Small Team of Designers

11. Where can I find the icons?
Where can I find the icons?
What color is the button border?

12. Redlines

14. Design Pages

15. Design Pages

16. Design Systems

17. The Style Guide

18. Last year at Dreamforce, we talked
to many partners & customers
about our Style Guide

19. Last year at Dreamforce, we talked
to many partners & customers
about our Style Guide

20. How do I get my app
to look like this?

21. Can I use the CSS in my app?

22. Partners want their apps to look like Salesforce
You asked for Salesforce design best practices
You were reverse engineering our code in the style guide (Inspect Element)
A 3rd-party Bootstrap Salesforce-theme was created and used outside of our team
It was not maintained by us, so quickly grew out of sync with our UI design updates
Many partner apps look & work great but don’t feel like Salesforce due to lack of resources

23. Rapidly changing designs

24. Lightning
Experience

25. A solution that works for us…

and hopefully for you, too.

26. Lightning Design System
The next generation of living style guides

27. Lightning Design System
Design Guidelines
CSS Framework
Resources
Tutorials & Documentation
lightningdesignsystem.com

28. Design Principles
Intentionally ordered by priority

29. clarity
Eliminate ambiguity. Enable people to see,
understand, and act with confidence.

30. efficiency
Streamline and optimize workflows.
Intelligently anticipate needs to help people
work better, smarter, and faster.

31. consistency
Create familiarity and strengthen intuition by
applying the same solution to the same problem.

32. beauty
Demonstrate respect for people’s time and attention
through thoughtful and elegant craftsmanship.

33. How do we keep colors, spacing,
sizing, etc. consistent?

34. How do we make future visual
design changes faster?

35. How do we keep our design 

system agnostic?

36. Single Source of Truth

37. Assets are stored in repository and
automatically updated in the app
and style guide

38. Design Tokens
The basic atoms of the Design System

39. Design Tokens help us scale our
design across web applications,
prototypes, native platforms, etc.

40. Types of Design Tokens
Font Families, Sizes, & Weights
Line Heights
Colors for Background, Text, & Borders
Shadows
Spacing & Sizing
Animation Durations

41. Theo
Open source tool by Salesforce UX to generate Design Tokens

42. Theo JSON file converts to:
Lightning
Sass
Less
Stylus
JSON (iOS)
XML (Android)
Style Guide
Color Swatches (Photoshop & Sketch)

43. Theo
{
"name": "COLOR_TEXT",
"value": "#000",
"category": "text-color",
"comment": "Body text"
}
Lightning
<!-- Body text color -->
<aura:var name="colorText" value="#000" />
Sass
// Body text
$color-text: #000;

44. Design Tokens

45. Design Tokens: Background Colors

46. Design Tokens: Font Sizes

47. Design Tokens: Radiuses

48. No more hard-coded values

49. Designers refer to Design Tokens
in their specifications.

51. Color Swatches

52. Design System Components
CSS Framework + UI Library

53. Let’s talk the CSS Framework

55. Empower Developers
Provide developers scalable & accessible code at beginning of development cycle

56. Empower Designers
Design & iterate more efficiently in the browser

57. Living Style Guide
+=

58. CSS Architecture
Powered by the Design System

59. Dependencies
Design Tokens
Objects/Components
Lightweight
Modular
Reusable
Utilities
Non-semantic
Single Purpose

60. Component

61. Component Variant

62. Component Overview

63. So what does this mean for you!?

64. Better Designer + Developer
Communication

65. No more proliferation of
inconsistent styles

66. Resources

67. Lightning Design System
Design Guidelines
CSS Framework
Resources
Tutorials & Documentation
lightningdesignsystem.com/resources/downloads

68. developer.salesforce.com/trailhead/module/lightning_design_system

69. dreamforce-ux.herokuapp.com

70. Design HQ
Come to the 2nd floor of Moscone West to
chat with some of the world’s best designers,
researchers, and UX engineers.

71. Share Your Feedback, and Win a GoPro!
3
Earn a GoPro prize entry for
each completed survey
Tap the bell to take a
survey
2
Enroll in a session1

72. Thank you