Project details

How I Solved a Visual Inconsistency Issue in Natura-v3 Inputs, Elevating the Design System Quality

🔎 The Identified Problem

While building interfaces for the Natura-v3 theme, I identified visual inconsistencies in the input fields inherited from the GaYa Design System. The token used for border-radius in these components was applied irregularly — sometimes using buttonBorderRadiusPill, other times arbitrary values, without alignment across themes or platforms within the Grupo Natura ecosystem.

This divergence impacted visual consistency and compromised the scalability of the Design System. Tokens were poorly defined, generating noise in the user experience and complicating maintenance. The lack of a clear standard between themes made the system vulnerable to visual flaws across different products.



💡The Solution

I decided to standardize the inputs based on the buttonBorderRadiusMedium token, which sets 16px as the official border value for interactive components. This choice balances aesthetics with usability and aligns with modern design best practices.

The proposal was straightforward: replace outdated and inconsistent uses like buttonBorderRadiusPill with buttonBorderRadiusMedium, consolidating the definition within the system’s Design Tokens. This new standard became the reference for all input fields across themes.



🔬 The Validation Process

This work required several weeks of dedication. I conducted technical analyses, organized refinement meetings, and documented every variation found. To ensure full understanding and alignment across teams, I prepared short presentations during coffee chats, huddles, and 1:1 conversations with developers and designers.

Throughout the process, I validated the behavior of the new token across different input states (focus, hover, disabled, error) and various themes. The solution was formalized after confirming that buttonBorderRadiusMedium performed consistently in all contexts and matched the brand’s visual identity.

Conclusion

Leading this update was crucial for maturing the GaYa Design System. I successfully eliminated a structural issue that visually impacted the product ecosystem.

The new definition of the buttonBorderRadiusMedium token brought consistency, predictability, and reduced visual noise — directly impacting products both in Brazil and across other squads in Latin America.

This case reinforces my role as a Product Designer Lead: someone who identifies problems, investigates thoroughly, articulates solutions, and delivers scalable, well-grounded improvements with real impact on product and user experience.

Let’s stay connected

icon
icon
icon

Like what you see? Click below to download my resume and let’s talk

© 2025 Gabriel Moreira Magalhães. All rights reserved.

Let’s stay connected

icon
icon
icon

Like what you see? Click below to download my resume and let’s talk

© 2025 Gabriel Moreira Magalhães. All rights reserved.

Let’s stay connected

icon
icon
icon

Like what you see? Click below to download my resume and let’s talk

© 2025 Gabriel Moreira Magalhães. All rights reserved.

Create a free website with Framer, the website builder loved by startups, designers and agencies.