The Challenge

Lutron Electronics needed a Design System to assist designers and developers in creating a unified look and feel for a diverse portfolio of products. The Design System needed to encapsulate Brand level aspects like Colors, Typography, Motion, and Icons as well as individual components and patterns both in Figma and in a local Storybook.

The Breakdown

It was imperative to come up with a structure that allowed for the the work to cascade down tiers. The most universal and shareable elements at the top and the granular project specific elements at the bottom. The Design Language Tier houses major tokens and Brand specific atoms. This included Colors, Typography, Motion, Iconography, Voice and Tone, and Accessibility guides.

The Design Language umbrella would then filter down into the Design Systems; Tenzing and the Mobile Design System. Within this level the bulk of the work occurred. Atoms, components, and patterns built in both Figma and Storybook for use in all projects.

The final level below Tenzing is the individual projects that would need to build project specific components that would not be used out side of that project environment.

Tokens

Tokenization of colors, typography, motion curves, spacing and padding allowed for sweeping edits to the entire Design System. Designers could then focus on creating flows and wireframes rather than editing colors and typography all day long.

What's in a Name?

Time for a brief, journey into the past. Tenzing was a sherpa. He guided mountaineers through the Himalayas and helped guide the first successful ascent of Mt. Everest in 1953. He began Mountaineering at age 20 and finally made the Everest summit at the age of 38 on his sixth attempt.

Tenzing was chosen as the name for the design system to be an ever evolving guide for Lutron Electronics.

Components

Starting from nothing the Tenzing Design System has grown to 72 components strong, it is being utilized in 17 different projects with an average weekly insertion of 15k components.

With such a robust design system it was crucial to have very concise and specific documentation for all components this included all properties that would be needed to develop; Variants, States, Sizes, Measurements, Interaction Rules, Motion, Accessibility and Usage Guidelines. This thorough documentation is present in both the Figma and the developer repository.

Governance

All Components have their own individual Change Logs that link to the older Figma Branches. These individual Change Logs are added to a global Change Log to inform users of relevant updates. This global log is distributed at the end of each sprint as a newsletter. The logs are grouped together and archived at the end of each Project Increment so it does not grow to get out of hand.

Scalability

Working cross functionally the team was able to create a flow chart of adding and proposing edits to the Design System so that it was easier for people to answer the question “Does this belong in the design system or not?”

Examples

Tenzing is now being implemented in all Lutron software.