Every product designer eventually faces a defining choice: execute a flawed directive, or risk overstepping the scope to protect the user experience. This case study details how a rigid documentation task for a major enterprise platform evolved into a fundamental overhaul of its design system.

1. The Directives vs. The Reality

My role as a Product Designer Lead on Natura’s Growth Plan an internal gamification platform designed to boost consultant performance started with a highly restrictive brief. An external agency had delivered the visual proposal, and it had already secured approval from the brand team and key stakeholders.

The mandate was strictly operational: document exactly what was delivered. There was no room for questioning, altering, or refactoring.

However, opening the source files revealed a critical, yet unspoken, issue. The approved color palette was overly saturated, lacked adequate contrast, and failed to meet basic accessibility standards. It was an invisible technical debt that would tangibly damage the end-user experience.

2. Navigating the Constraints

The obstacles were systemic rather than purely technical. Autonomy was heavily restricted by complex stakeholder dynamics:

• Cross-departmental managers without design backgrounds heavily influenced visual decisions.

• The agency’s delivery was treated as an untouchable final artifact.

• The environment left no room to implement changes, even to resolve obvious usability flaws.

The project scope lacked the freedom to iterate, but as a Lead, I knew the vision required it.

3. A Strategy of Silent Execution

Without official permission, allocated time, or scope, I chose to act. Confrontation would have created friction; instead, I opted for demonstration. I developed a parallel, three-pronged solution:

A. Leveraging AI for Precision Rather than manually guessing color adjustments, I utilized AI tools to systematically recalibrate the hues. This allowed me to soften the saturation and generate variations that were technically viable and harmonic, fully respecting the core brand identity while ensuring functional accessibility.

B. Architecting Semantic Design Tokens To ensure the new system was scalable, I built a semantic token architecture from the ground up:

JSON

{
  "colorLevelLightest": {
    "value": "#F5F5F5",
    "type": "color"
  },
  "colorLevelLight": {
    "value": "#F5F5F5",
    "type": "color"
  },
  "colorLevel": {
    "value": "#F5F5F5",
    "type": "color"
  },
  "colorLevelDark": {
    "value": "#F5F5F5",
    "type": "color"
  },
  "colorLevelDarkest": {
    "value": "#F5F5F5",
    "type": "color"
  }
}

{
  "colorLevelLightest": {
    "value": "#F5F5F5",
    "type": "color"
  },
  "colorLevelLight": {
    "value": "#F5F5F5",
    "type": "color"
  },
  "colorLevel": {
    "value": "#F5F5F5",
    "type": "color"
  },
  "colorLevelDark": {
    "value": "#F5F5F5",
    "type": "color"
  },
  "colorLevelDarkest": {
    "value": "#F5F5F5",
    "type": "color"
  }
}

{
  "colorLevelLightest": {
    "value": "#F5F5F5",
    "type": "color"
  },
  "colorLevelLight": {
    "value": "#F5F5F5",
    "type": "color"
  },
  "colorLevel": {
    "value": "#F5F5F5",
    "type": "color"
  },
  "colorLevelDark": {
    "value": "#F5F5F5",
    "type": "color"
  },
  "colorLevelDarkest": {
    "value": "#F5F5F5",
    "type": "color"
  }
}

(Note: Hex values above are placeholders to illustrate the token hierarchy.)

C. Anticipating Needs: The Unprompted Dark Mode Knowing the trajectory of modern digital products, I anticipated the eventual need for a Dark Mode. Without waiting for a feature request, I modeled it, mapped the tokens, and had it ready for deployment.

4. The Journey of Persuasion

With the agency’s original delivery (V1) and my optimized proposal (V2) prepared, I shifted the conversation from subjective opinions to objective design metrics.

I presented visual side-by-side comparisons, grounding my arguments in WCAG accessibility standards and contrast ratios. By applying the new palette to real, high-complexity screens—such as dashboards and gamification flows—I proved that the interface could be both beautiful and highly functional. I showcased the Figma token architecture to demonstrate how this approach would save engineering time down the line.

By showing, justifying, and gently challenging the status quo, the initial resistance naturally dissolved.

5. The Turning Point

What began as an off-scope, unsanctioned effort ultimately became the project's new benchmark. Strategic leadership officially recognized and adopted the new color palette and architecture. The feedback from the Natura Group's Branding Leadership validated the risk:

"Gabriel, thank you for seeing what no one wanted to acknowledge and still choosing to act. You didn’t wait for authorization, nor hid behind your scope. You had the courage to do what was right, with strategic silence, technical foundation, and deep respect for brand identity. What you delivered wasn’t just a color system. It was a mature, generous, and rare decision. If I may give you one piece of advice: never lose the restlessness that drives you. It’s what turns an ordinary designer into a reference. You’re going far!"

6. The Business & Product Impact

• Accessibility: Delivered harmonious, highly readable interfaces with optimized contrast.

• Scalability: Implemented a robust, semantic token system for future development.

• Proactivity: Successfully introduced a fully mapped Dark Mode ahead of the product roadmap.

• Alignment: Bridged the gap between branding aesthetics, product requirements, and engineering feasibility.

7. Visual Appendix (Portfolio Layout)

• Hero Image: High-fidelity final screen of the gamification system featuring the new palette.

• The Problem (Before): The agency’s V1 screens, annotated to highlight oversaturation, poor contrast, and flat structure.

• The Solution (After): The V2 screens showcasing optimal contrast, semantic hierarchy, and brand alignment.

• The Architecture: A screenshot of the Figma variables panel, clearly organized by mode and level.

8. Leadership Beyond Titles

This initiative reinforced a core professional philosophy: design leadership is rarely about the title you hold. It is about technical courage, strategic vision, and the willingness to act. Sometimes, the design decision that changes the trajectory of a product doesn't come from the official brief—it comes from the initiative to solve the problems no one else is willing to address.

Project Summary

• Product: Growth Plan (Natura)

• Role: Product Designer Lead

• Deliverables: Re-engineered color system, semantic design tokens, Dark Mode architecture, comprehensive documentation.

• Technical Approach: AI-assisted color calibration, WCAG-compliant contrast metrics, scalable JSON token structuring.