Home

Case Studies

Superpowers

Awards

Experience

About

FAQ

Contact me

Design System

Building Logitech G’s unified design system

Building Elysium - a design system that scales the speed and consistency of Logitech G’s gaming experiences.

My Role

Lead Designer

Domain

Enterprise UX

Website

logitechg.com

Timeline

Feb-Nov 2025

Context

When I transitioned to the G Hub Dashboard project, I quickly realized that while Logitech already had a design system, it had become disorganized and fragmented over time. Multiple teams had contributed independently, leading to duplicated components, inconsistent patterns, and misaligned standards. What was meant to speed up design instead created friction - slowing down delivery and complicating collaboration.

To solve this, I led the creation of Elysium, a unified design system powering Logitech G’s desktop software, website, and connected gaming hardware ecosystem.

Context

To solve this, I led the creation of Elysium, a unified design system powering Logitech G’s desktop software, website, and connected gaming hardware ecosystem.

Context

To solve this, I led the creation of Elysium, a unified design system powering Logitech G’s desktop software, website, and connected gaming hardware ecosystem.

300+

300+

Components Standartized

Faster Prototyping

100%

100%

System Adoption

My role & team

Role: Lead Product Designer (Design System Owner)
Timeline: Feb – Nov 2025 (ongoing)
Team: 3 Product Designers + Front-End Engineers

I initiated, structured, and drove the entire Elysium effort - from audit to rollout.
I defined the architecture, standards, and processes that aligned design and engineering teams across the Logitech G ecosystem.

My role & team

Role: Lead Product Designer (Design System Owner)
Timeline: Feb – Nov 2025 (ongoing)
Team: 3 Product Designers + Front-End Engineers

My role & team

Role: Lead Product Designer (Design System Owner)
Timeline: Feb – Nov 2025 (ongoing)
Team: 3 Product Designers + Front-End Engineers

The challenge

Before Elysium:

300+ unstructured components scattered across local files
Conflicting naming conventions, spacing, and token logic
No shared documentation or governance
Developers reverse-engineering designs, causing QA delays

Designers moved fast, but not together - and Logitech G’s global brand was losing visual consistency.

The challenge

Before Elysium:

300+ unstructured components scattered across local files
Conflicting naming conventions, spacing, and token logic
No shared documentation or governance
Developers reverse-engineering designs, causing QA delays

Designers moved fast, but not together - and Logitech G’s global brand was losing visual consistency.

The challenge

Before Elysium:

300+ unstructured components scattered across local files
Conflicting naming conventions, spacing, and token logic
No shared documentation or governance
Developers reverse-engineering designs, causing QA delays

Designers moved fast, but not together - and Logitech G’s global brand was losing visual consistency.

Research & insights

To understand the scope, I led a full-system audit across all Logitech G Figma libraries.
The audit surfaced three critical insights:

Duplication > Innovation: Teams often recreated components instead of improving them.
No source of truth: Developers used different tokens and breakpoints from designers.
Documentation debt: Outdated examples made new designers hesitant to adopt shared components.

These findings shaped Elysium’s strategy: create a structured, documented, and trusted system that teams would actually want to use.

Research & insights

To understand the scope, I led a full-system audit across all Logitech G Figma libraries.
The audit surfaced three critical insights:

Duplication > Innovation: Teams often recreated components instead of improving them.
No source of truth: Developers used different tokens and breakpoints from designers.
Documentation debt: Outdated examples made new designers hesitant to adopt shared components.

These findings shaped Elysium’s strategy: create a structured, documented, and trusted system that teams would actually want to use.

Research & insights

To understand the scope, I led a full-system audit across all Logitech G Figma libraries.
The audit surfaced three critical insights:

Duplication > Innovation: Teams often recreated components instead of improving them.
No source of truth: Developers used different tokens and breakpoints from designers.
Documentation debt: Outdated examples made new designers hesitant to adopt shared components.

These findings shaped Elysium’s strategy: create a structured, documented, and trusted system that teams would actually want to use.

Ideation & strategy

I designed the new system architecture around clarity and scalability:

Foundations: Color, Typography, Iconography, Spacing & Radius, Layout & Breakpoints, Elevation, Motion, Accessibility, Themes, Animation
Components: Buttons, Inputs, Checkboxes, Radios, Switches, Pagination, Navigation, Modals, Tooltips, etc.
UX Patterns: Layouts, Forms, Lists, Dialogs, Cards

Each level was fully documented with states, behavior rules, and responsive guidelines.

Ideation & strategy

I designed the new system architecture around clarity and scalability:

Foundations: Color, Typography, Iconography, Spacing & Radius, Layout & Breakpoints, Elevation, Motion, Accessibility, Themes, Animation
Components: Buttons, Inputs, Checkboxes, Radios, Switches, Pagination, Navigation, Modals, Tooltips, etc.
UX Patterns: Layouts, Forms, Lists, Dialogs, Cards

Each level was fully documented with states, behavior rules, and responsive guidelines.

Ideation & strategy

I designed the new system architecture around clarity and scalability:

Foundations: Color, Typography, Iconography, Spacing & Radius, Layout & Breakpoints, Elevation, Motion, Accessibility, Themes, Animation
Components: Buttons, Inputs, Checkboxes, Radios, Switches, Pagination, Navigation, Modals, Tooltips, etc.
UX Patterns: Layouts, Forms, Lists, Dialogs, Cards

Each level was fully documented with states, behavior rules, and responsive guidelines.

Strategic decisions I drove:

Introduced design tokens to link Figma and CSS variables for instant parity

Established naming and variant standards to remove ambiguity
Embedded accessibility and responsiveness rules into every component
Defined a governance model for version control, reviews, and contributions

Introduced design tokens to link Figma and CSS variables for instant parity
Established naming and variant standards to remove ambiguity
Embedded accessibility and responsiveness rules into every component
Defined a governance model for version control, reviews, and contributions

Introduced design tokens to link Figma and CSS variables for instant parity
Established naming and variant standards to remove ambiguity
Embedded accessibility and responsiveness rules into every component
Defined a governance model for version control, reviews, and contributions

Design execution

Elysium components were re-engineered for depth and clarity.

Each component (e.g., Checkbox, Radio, Switch) covers full state matrices: resting, hover, pressed, focused, disabled
Inline documentation explains behavior, usage, and restrictions (e.g., “Building blocks should not be used standalone”)
Component states and animations tested across both dark and light modes
Responsive behavior validated at common screen widths (1080p – 4K)

→ Result: Designers can assemble production-ready screens 2× faster, with zero guesswork.

Elysium components were re-engineered for depth and clarity.

Each component (e.g., Checkbox, Radio, Switch) covers full state matrices: resting, hover, pressed, focused, disabled
Inline documentation explains behavior, usage, and restrictions (e.g., “Building blocks should not be used standalone”)
Component states and animations tested across both dark and light modes
Responsive behavior validated at common screen widths (1080p – 4K)

→ Result: Designers can assemble production-ready screens 2× faster, with zero guesswork.

Elysium components were re-engineered for depth and clarity.

Each component (e.g., Checkbox, Radio, Switch) covers full state matrices: resting, hover, pressed, focused, disabled
Inline documentation explains behavior, usage, and restrictions (e.g., “Building blocks should not be used standalone”)
Component states and animations tested across both dark and light modes
Responsive behavior validated at common screen widths (1080p – 4K)

→ Result: Designers can assemble production-ready screens 2× faster, with zero guesswork.

Collaboration with engineering

I partnered closely with front-end teams to ensure real technical adoption - not just design alignment.

Synced Figma tokens → CSS variables inside Storybook
Established a bi-weekly design–dev sync to test component parity
Introduced Dev Mode annotations and token mapping for smoother handoff
Worked with QA engineers to validate accessibility and responsiveness in live builds

This collaboration created one shared language between design and code, turning Elysium into a living system - not a visual library.

I partnered closely with front-end teams to ensure real technical adoption - not just design alignment.

Synced Figma tokens → CSS variables inside Storybook
Established a bi-weekly design–dev sync to test component parity
Introduced Dev Mode annotations and token mapping for smoother handoff
Worked with QA engineers to validate accessibility and responsiveness in live builds

This collaboration created one shared language between design and code, turning Elysium into a living system — not a visual library.

I partnered closely with front-end teams to ensure real technical adoption - not just design alignment.

Synced Figma tokens → CSS variables inside Storybook
Established a bi-weekly design–dev sync to test component parity
Introduced Dev Mode annotations and token mapping for smoother handoff
Worked with QA engineers to validate accessibility and responsiveness in live builds

This collaboration created one shared language between design and code, turning Elysium into a living system - not a visual library.

Driving adoption

Design systems succeed only when people use them.

To embed Elysium into the culture, I:

Led migration workshops across teams
Created the Elysium Changelog for transparency and release visibility
Established a review + contribution model for new components
Hosted weekly office hours to unblock designers and developers

By Q3, Elysium was powering all active G Hub features and became the default design source for new Logitech G initiatives.

Design systems succeed only when people use them.

To embed Elysium into the culture, I:

Led migration workshops across teams
Created the Elysium Changelog for transparency and release visibility
Established a review + contribution model for new components
Hosted weekly office hours to unblock designers and developers

By Q3, Elysium was powering all active G Hub features and became the default design source for new Logitech G initiatives.

Design systems succeed only when people use them.

To embed Elysium into the culture, I:

Led migration workshops across teams
Created the Elysium Changelog for transparency and release visibility
Established a review + contribution model for new components
Hosted weekly office hours to unblock designers and developers

By Q3, Elysium was powering all active G Hub features and became the default design source for new Logitech G initiatives.

Impact

Learnings & reflections

Elysium taught me that a design system isn’t a file - it’s a relationship between teams.

Creating alignment meant designing for collaboration as much as for pixels.

What made it successful:

Early and frequent collaboration with engineering
Structured governance and clear documentation
Measuring impact with KPIs, not aesthetics

Next: Expanding Elysium with motion, 3D, and sound guidelines to further unify Logitech G’s immersive gaming ecosystem.

Elysium taught me that a design system isn’t a file - it’s a relationship between teams.

Creating alignment meant designing for collaboration as much as for pixels.

What made it successful:

Early and frequent collaboration with engineering
Structured governance and clear documentation
Measuring impact with KPIs, not aesthetics

Next: Expanding Elysium with motion, 3D, and sound guidelines to further unify Logitech G’s immersive gaming ecosystem.

Elysium taught me that a design system isn’t a file - it’s a relationship between teams.

Creating alignment meant designing for collaboration as much as for pixels.

What made it successful:

Early and frequent collaboration with engineering
Structured governance and clear documentation
Measuring impact with KPIs, not aesthetics

Next: Expanding Elysium with motion, 3D, and sound guidelines to further unify Logitech G’s immersive gaming ecosystem.

Result

Elysium evolved from scattered components into a scalable, responsive, and trusted design system powering Logitech G’s gaming experience - bridging design, development, and brand.

"Elysium took our "organized chaos" and transformed it into actual clarity. Now we move faster - and everything finally looks like it belongs to Logitech G."
- G Hub team engineer

Elysium evolved from scattered components into a scalable, responsive, and trusted design system powering Logitech G’s gaming experience — bridging design, development, and brand.

"Elysium took our "organized chaos" and transformed it into actual clarity. Now we move faster - and everything finally looks like it belongs to Logitech G."
- G Hub team engineer

Elysium evolved from scattered components into a scalable, responsive, and trusted design system powering Logitech G’s gaming experience - bridging design, development, and brand.

"Elysium took our "organized chaos" and transformed it into actual clarity. Now we move faster - and everything finally looks like it belongs to Logitech G."
- G Hub team engineer

View all case studies

Dribbble