Design system to align 10+ Lutron's web properties

As a contract visual designer, I laid the foundation for Lutron’s first web design system to support a large-scale overhaul of 10+ public-facing websites.

The system aligned internal and external teams, sped up development handoffs, and created a consistent brand experience across 100+ pages.

Due to NDA (Non-Disclosure Agreement), sensitive details have been omitted while highlighting the essence of the project and my role.

Duration

3 months

My role

Visual Designer

Client

Lutron

problem

Fragmented experiences across Lutron’s web properties

Lutron Electronics, a global leader in smart lighting and home automation, had 40+ web properties designed and developed by different teams, each with its own design language, coding standards, and patterns.

Lutron customer support form with bold labels and blue buttons, inconsistent with other site forms

Detailed contact form with profession options and company details, using different input styling

Minimal form to find a sales rep, using gray button styling different from other Lutron forms

Simplified form with name, job title, and interest checkboxes, styled differently from other forms

Project help form with multiple required fields, inconsistent spacing and button style

A a result...

Customers

got confused navigating between sites

Designers

reused nothing and recreated everything

Developers

were re-coding the same components repeatedly

Brand trust and usability

were falling apart as users got more frustrated

Challenge

No design system meant another costly, inconsistent redesign

We had to build a unified system while a major site overhaul was already in progress.

It needed to serve as a foundation for new features while also bridging and aligning the existing properties.

Key Decisions

How we approached it

Reuse, don’t rebuild

Instead of starting from scratch, we evaluated existing elements across Lutron’s properties.

By adapting and expanding them, we sped up adoption and maintained familiarity for development teams.

Before

After

Standardized button system with consistent sizes, states, and color themes in Lutron design system

A modular system for scalability

We built on atomic design principles and adapted them to the project’s needs. The modular structure made the system scalable and easier to maintain across multiple properties.

Atomic design diagram showing styles, atoms, molecules, organisms, templates, and pages

Figma page structure for Lutron design system with styles, grids, typography, and components

Establish a token foundation

I created design tokens for color, spacing, typography, border radius, and more.

Organized into levels, these tokens defined key visual properties, standardized values across components, and made global updates fast and reliable.

Diagram of Lutron design tokens showing raw value, primitive, semantic, and component levels for color

Naming structure for design tokens with namespace, object, base, and modifier example for button color

Prototype-driven library

We used early overhaul prototypes to assemble a pattern library, ensuring new designs were immediately backed by systemized components.

Design and documentation in one place

We kept all documentation in Figma, creating a single source of truth. Clear guidelines, accessibility notes, and examples enabled faster, more consistent implementation across 100+ pages, without the need for extra tools.