Skip to main content

Salesforce Lightning Design System

Salesforce Lightning Design System illustration

I was the founding lead designer for one of the most popular enterprise design systems, the Salesforce Lightning Design System.

Overview

The Salesforce Lightning Design System (SLDS) is a living open-source design system. Salesforce is committed to creating perceivable, operable, understandable, and robust products for all users. All SLDS components include ARIA markup and guidelines to help people with disabilities use and contribute to Salesforce applications. Use the SLDS CSS framework with any tech stack, or take advantage of the guidance on using SLDS with Salesforce technologies, including Lightning Web Components, Aura, and Visualforce.

Salesforce Lightning Design System website
Salesforce Lightning Design System website

The Story

The older, Salesforce1 style guide
The older, Salesforce1 style guide

Salesforce needed to modernize and overhaul the mobile and desktop experience across several products, teams, and platforms.

Salesforce1

Working with PMs and engineering for Salesforce1 and the precursor to the Lightning Experience, design system priorities were aligned with product.

Lightning Design System

This is some of the work I am most proud of. During my five and a half years at Salesforce, I had the opportunity to impact how one of the largest enterprise technology companies ship product design.

Color, typography, and icons

Design Tokens & Theo

I paired closely with engineering to architect and implement design tokens, which became an industry-standard way of scaling design systems across multiple platforms and devices. We also built an open-source tool called Theo to generate the tokens.

During this time, I managed to convince the entire organization to move to a four-based metric system!

Design token documentation

Getting Buy-In

I pitched the design system to stakeholders in engineering and design leadership, and got buy-in. With the Lightning Design System funded and a team formalized, I received a title change to clarify my role. I conducted design systems work (which included UX design, visual design, frontend development, and documentation). I drafted the team vision and charter and worked closely with our team’s people manager on planning and presenting our goals with the organization.

Partnered with a researcher, we user-tested early and often with proof of concepts. We facilitated conversations with third-party app developers to find pinpoints for the design system framework.

Additionally, I led the UX organization’s evangelism and outreach efforts including being the Editor-in-chief for the team blog, the admin for the social media accounts, organizer of various meet ups and conference sponsorships, writing, speaking, and coaching both internal and external people on best practices using the design system.

I also mentored designers to level up their skills in frontend development.

Salesforce Lightning Design System logo

Results

After elevating our team’s output and perceived brand both internally and externally, I took on more responsibilities in mentoring other designers and developers, as well as being the point person for the information architecture and design patterns for the design system.

The design system trending on Twitter
The design system trending on Twitter

Responsibilities

  • Design Systems
  • Event Planning
  • Frontend Development
  • UX Design
  • Visual Design

Deliverables

  • CSS Framework
  • Style Guide
  • UI Kit (sticker sheet)
  • Website

Related contributions:

  • Blog editor-in-chief
  • Event hosting and sponsoring
  • Social media
  • Swag

Other creative credits

Various folks on the team consisting of visual designers, frontend developers, research, accessibility specialists, and more.

Early key players include:

  • Jon Levine (collaborator I worked closely with to ship Design Tokens)
  • Sönke Rohde (developed the first iteration of Theo, our design token generator tool that was open-sourced)
  • Craig Villamor (chief design architect who I met with weekly in mentoring sessions, and championed the vision among the executive leadership)
  • Christopher Auyeung (the team manager I worked closely with on vision and mission)
  • Stephanie Rewis (the CSS we hired to take the initial architecture I had set up and build and evolve it further)
  • Thanh Quach (our visual designer who helped churn out many of the illustrations and graphics, as well as screen explorations)
  • Brandon Ferrua (hybrid designer/developer we hired during our second wave of hires to help execute a ton of the components)