Rogers
Client
Rogers
Project
UX & UI Design and Research
Services
Design System Strategy & Contribution Cross-Team Collaboration & Alignment Design Tooling & Workflow Optimization Documentation & Design System Enablement
The Challenge
This project focused on creating a three-step spacing system for Rogers.com to bring consistency, clarity, and scalability to page layouts. Through UX and UI research, competitive analysis, and close collaboration with design and system teams, the goal was to establish a shared spacing language that improved readability while aligning design and development workflows.
This project focused on creating a three-step spacing system for Rogers.com to bring consistency, clarity, and scalability to page layouts. Through UX and UI research, competitive analysis, and close collaboration with design and system teams, the goal was to establish a shared spacing language that improved readability while aligning design and development workflows.
The Approach
The work began with an in-depth review of industry standards and competitor websites to identify common spacing patterns and best practices. Based on these insights, small, medium, and large spacing values were defined and validated with cross-functional partners. The system was then integrated into the Rogers.com design system, supported by clear documentation and a plain-language tool to make adoption intuitive across teams.
The Approach
The work began with an in-depth review of industry standards and competitor websites to identify common spacing patterns and best practices. Based on these insights, small, medium, and large spacing values were defined and validated with cross-functional partners. The system was then integrated into the Rogers.com design system, supported by clear documentation and a plain-language tool to make adoption intuitive across teams.
The Result
The final three-step spacing framework became a core standard within the Rogers.com design system, resulting in more cohesive layouts and visually balanced pages. It simplified design-to-development handoffs, reduced errors caused by spacing inconsistencies, and accelerated workflows. Overall, the system delivered a scalable foundation that ensures consistency and readability across all Rogers.com properties.
The final three-step spacing framework became a core standard within the Rogers.com design system, resulting in more cohesive layouts and visually balanced pages. It simplified design-to-development handoffs, reduced errors caused by spacing inconsistencies, and accelerated workflows. Overall, the system delivered a scalable foundation that ensures consistency and readability across all Rogers.com properties.
View Project
