Golden Design System
A strategic redesign of an enterprise design system (NDA-compliant reconstruction)
// Guiding Principles
Before redesigning components, I established a set of guiding principles to shape decisions.
01
Validated Scalability
Solve real problems. Architect for intentional growth.
02
Pattern Discipline
Refine existing patterns before expanding the system surface.
03
Cognitive Efficiency
Reduce friction across design and engineering.
04
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 Roos Design System v.2 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
A spot-check of 50 high-traffic files showed a 40% increase in system-linked layers compared to the previous year.
Handoff Survey
90% of engineers reported that the new naming conventions made component implementation 'self-documenting'.
95%
Adoption rate
60%
Faster handoffs
50+
Components
3
Modes
Golden Design System
A strategic redesign of an enterprise design system (NDA-compliant reconstruction)
Golden Design System
A strategic redesign of an enterprise design system (NDA-compliant reconstruction)
// Guiding Principles
Before redesigning components, I established a set of guiding principles to shape decisions.
01
Validated Scalability
Solve real problems. Architect for intentional growth.
02
Pattern Discipline
Refine existing patterns before expanding the system surface.
03
Cognitive Efficiency
Reduce friction across design and engineering.
04
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 Roos Design System v.2 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
A spot-check of 50 high-traffic files showed a 40% increase in system-linked layers compared to the previous year.
Handoff Survey
90% of engineers reported that the new naming conventions made component implementation 'self-documenting'.
95%
Adoption rate
60%
Faster handoffs
50+
Components
3
Modes
Golden Design System
A strategic redesign of an enterprise design system (NDA-compliant reconstruction)
Golden Design System
A strategic redesign of an enterprise design system (NDA-compliant reconstruction)
// Guiding Principles
Before redesigning components, I established a set of guiding principles to shape decisions.
01
Validated Scalability
Solve real problems. Architect for intentional growth.
02
Pattern Discipline
Refine existing patterns before expanding the system surface.
03
Cognitive Efficiency
Reduce friction across design and engineering.
04
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 Roos Design System v.2 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
A spot-check of 50 high-traffic files showed a 40% increase in system-linked layers compared to the previous year.
Handoff Survey
90% of engineers reported that the new naming conventions made component implementation 'self-documenting'.
95%
Adoption rate
60%
Faster handoffs
50+
Components
3
Modes
Golden Design System
A strategic redesign of an enterprise design system (NDA-compliant reconstruction)