Golden Design System
A strategic redesign of an enterprise design system (NDA-compliant reconstruction)
// The Problem
// The Problem
I began by auditing the existing system to gain an end-to-end understanding.
It became quickly apparent that the system lacked the governance and architectural rigor required to support a scaling product, resulting in fragmentation.
Inconsistent tokens and redundant components led to a fractured user experience.
Designers faced constant decision fatigue
Designers faced constant decision fatigue
Teams frequently rebuilt patterns from scratch rather than reusing existing ones
Teams frequently rebuilt patterns from scratch rather than reusing existing ones
Accessibility compliance checks were inconsistent or missing entirely
Accessibility compliance checks were inconsistent or missing entirely
// Guiding Principles
Before redesigning components, I established a set of guiding principles to shape decisions.
Before redesigning any elements of the system, I established a set of guiding principles to shape decisions.
01
01
Validated Scalability
Validated Scalability
Solve real problems. Architect for intentional growth.
Solve proven problems. Architect for intentional growth.
02
02
Pattern Discipline
Pattern Discipline
Refine existing patterns before expanding the system surface.
Complexity is a design problem before it is a system problem.
03
03
Cognitive Efficiency
Cognitive Efficiency
Reduce friction across design and engineering.
04
04
Product Mindset
Product Mindset
Govern and measure the system like any other product.
// Color System
Introducing a semantic color architecture was a crucial step in grounding the system. Primitive tokens defined the palette while semantic tokens translated those values into purposeful roles like background, surface, text, and status.
Decoupling value from meaning allows the system to scale cleanly and enable clearer design decisions, predictable engineering implementation, and future brand evolution.
Before
After
// Component Standardization
The legacy system attempted to achieve "infinite flexibility" through a massive list of unorganized boolean attributes. This forced designers to navigate a an abundance of toggles just to achieve a standard state.
The Card had become a "Swiss Army Knife" of conflicting booleans. To fix this, I moved away from rigid configurations and toward a slot-based component architecture. maintaining consistency was supported by Figma Preferred Values .
// Shared Language
By establishing a predictable property schema across all design system elements, we increased our design to development velocity and ensured that the system could scale.
Before
After
// The Result
Allowing for teams to work with a standardized foundation of design variables, naming conventions, and styling built on intent rather than arbitrary scales, allowed for designers to pour all their creativity where is mattered most...
The success of the new design system proved to show designers felt more confident in their design proposals because their tool belt was better equipped for the overall branding and design direction.
// Takeaways
- Constraints are essential for scalable systems - A design system without philosophy will eventually collapse under its own flexibility - Cross-functional buy-in is as important as technical execution - Design systems should be treated as evolving products, not static libraries
// Measured Success
Figma Audit
Figma Audit
Figma Audit
A spot-check of 50 high-traffic files showed a 40% increase in system-linked layers compared to the previous year.
A spot-check of 50 high-traffic files showed a 40% increase in system-linked layers compared to the previous year.
Handoff Survey
Handoff Survey
Handoff Survey
90% of engineers reported that the new naming conventions made component implementation 'self-documenting'.
90% of engineers reported that the new naming conventions made component implementation 'self-documenting'.
95%
Adoption rate
Adoption rate
60%
Faster handoffs
50+
Components
Components
3
Modes
Golden Design System
A strategic redesign of an enterprise design system (NDA-compliant reconstruction)
// The Problem
// The Problem
I began by auditing the existing system to gain an end-to-end understanding.
It became quickly apparent that the system lacked the governance and architectural rigor required to support a scaling product, resulting in fragmentation.
Inconsistent tokens and redundant components led to a fractured user experience.
Designers faced constant decision fatigue
Designers faced constant decision fatigue
Teams frequently rebuilt patterns from scratch rather than reusing existing ones
Teams frequently rebuilt patterns from scratch rather than reusing existing ones
Accessibility compliance checks were inconsistent or missing entirely
Accessibility compliance checks were inconsistent or missing entirely
// Guiding Principles
Before redesigning components, I established a set of guiding principles to shape decisions.
Before redesigning any elements of the system, I established a set of guiding principles to shape decisions.
01
01
Validated Scalability
Validated Scalability
Solve real problems. Architect for intentional growth.
Solve proven problems. Architect for intentional growth.
02
02
Pattern Discipline
Pattern Discipline
Refine existing patterns before expanding the system surface.
Complexity is a design problem before it is a system problem.
03
03
Cognitive Efficiency
Cognitive Efficiency
Reduce friction across design and engineering.
04
04
Product Mindset
Product Mindset
Govern and measure the system like any other product.
// Color System
Introducing a semantic color architecture was a crucial step in grounding the system. Primitive tokens defined the palette while semantic tokens translated those values into purposeful roles like background, surface, text, and status.
Decoupling value from meaning allows the system to scale cleanly and enable clearer design decisions, predictable engineering implementation, and future brand evolution.
Before
After
// Component Standardization
The legacy system attempted to achieve "infinite flexibility" through a massive list of unorganized boolean attributes. This forced designers to navigate a an abundance of toggles just to achieve a standard state.
The Card had become a "Swiss Army Knife" of conflicting booleans. To fix this, I moved away from rigid configurations and toward a slot-based component architecture. maintaining consistency was supported by Figma Preferred Values .
// Shared Language
By establishing a predictable property schema across all design system elements, we increased our design to development velocity and ensured that the system could scale.
Before
After
// The Result
Allowing for teams to work with a standardized foundation of design variables, naming conventions, and styling built on intent rather than arbitrary scales, allowed for designers to pour all their creativity where is mattered most...
The success of the new design system proved to show designers felt more confident in their design proposals because their tool belt was better equipped for the overall branding and design direction.
// Takeaways
- Constraints are essential for scalable systems - A design system without philosophy will eventually collapse under its own flexibility - Cross-functional buy-in is as important as technical execution - Design systems should be treated as evolving products, not static libraries
// Measured Success
Figma Audit
Figma Audit
Figma Audit
A spot-check of 50 high-traffic files showed a 40% increase in system-linked layers compared to the previous year.
A spot-check of 50 high-traffic files showed a 40% increase in system-linked layers compared to the previous year.
Handoff Survey
Handoff Survey
Handoff Survey
90% of engineers reported that the new naming conventions made component implementation 'self-documenting'.
90% of engineers reported that the new naming conventions made component implementation 'self-documenting'.
95%
Adoption rate
Adoption rate
60%
Faster handoffs
50+
Components
Components
3
Modes
Golden Design System
A strategic redesign of an enterprise design system (NDA-compliant reconstruction)
// The Problem
// The Problem
I began by auditing the existing system to gain an end-to-end understanding.
It became quickly apparent that the system lacked the governance and architectural rigor required to support a scaling product, resulting in fragmentation.
Inconsistent tokens and redundant components led to a fractured user experience.
Designers faced constant decision fatigue
Designers faced constant decision fatigue
Teams frequently rebuilt patterns from scratch rather than reusing existing ones
Teams frequently rebuilt patterns from scratch rather than reusing existing ones
Accessibility compliance checks were inconsistent or missing entirely
Accessibility compliance checks were inconsistent or missing entirely
// Guiding Principles
Before redesigning components, I established a set of guiding principles to shape decisions.
Before redesigning any elements of the system, I established a set of guiding principles to shape decisions.
01
01
Validated Scalability
Validated Scalability
Solve real problems. Architect for intentional growth.
Solve proven problems. Architect for intentional growth.
02
02
Pattern Discipline
Pattern Discipline
Refine existing patterns before expanding the system surface.
Complexity is a design problem before it is a system problem.
03
03
Cognitive Efficiency
Cognitive Efficiency
Reduce friction across design and engineering.
04
04
Product Mindset
Product Mindset
Govern and measure the system like any other product.
// Color System
Introducing a semantic color architecture was a crucial step in grounding the system. Primitive tokens defined the palette while semantic tokens translated those values into purposeful roles like background, surface, text, and status.
Decoupling value from meaning allows the system to scale cleanly and enable clearer design decisions, predictable engineering implementation, and future brand evolution.
Before
After
// Component Standardization
The legacy system attempted to achieve "infinite flexibility" through a massive list of unorganized boolean attributes. This forced designers to navigate a an abundance of toggles just to achieve a standard state.
The Card had become a "Swiss Army Knife" of conflicting booleans. To fix this, I moved away from rigid configurations and toward a slot-based component architecture. maintaining consistency was supported by Figma Preferred Values .
// Shared Language
By establishing a predictable property schema across all design system elements, we increased our design to development velocity and ensured that the system could scale.
Before
After
// The Result
Allowing for teams to work with a standardized foundation of design variables, naming conventions, and styling built on intent rather than arbitrary scales, allowed for designers to pour all their creativity where is mattered most...
The success of the new design system proved to show designers felt more confident in their design proposals because their tool belt was better equipped for the overall branding and design direction.
// Takeaways
- Constraints are essential for scalable systems - A design system without philosophy will eventually collapse under its own flexibility - Cross-functional buy-in is as important as technical execution - Design systems should be treated as evolving products, not static libraries
// Measured Success
Figma Audit
Figma Audit
Figma Audit
A spot-check of 50 high-traffic files showed a 40% increase in system-linked layers compared to the previous year.
A spot-check of 50 high-traffic files showed a 40% increase in system-linked layers compared to the previous year.
Handoff Survey
Handoff Survey
Handoff Survey
90% of engineers reported that the new naming conventions made component implementation 'self-documenting'.
90% of engineers reported that the new naming conventions made component implementation 'self-documenting'.
95%
Adoption rate
Adoption rate
60%
Faster handoffs
50+
Components
Components
3
Modes