
Protocol Design System
Role: Head of Design
Year: 2019
My Role
I was responsible for leading the end-to-end execution of the project—from building and structuring the right team to securing time and commitment from key contributors. My focus was on removing roadblocks, ensuring alignment, and keeping the project on track.
The Team
- Jennifer Rouse - UX Design Lead
- Justin Kropp - UX Design
The Problem
Mozilla has existed for over 20 years, and for most of that time, its design work was primarily handled by a passionate community of volunteers. As a result, Mozilla’s web presence had grown into a sprawling ecosystem of over 1,500 pages—each with varied interpretations of the Mozilla and Firefox brands, inconsistent UI behaviors, and a lack of shared standards.
Without a systematic approach, maintaining and evolving this complex network of sites became increasingly unsustainable. The inconsistencies in design and user experience diminished trust, created confusion, and diluted the brand.
Pain Points Uncovered in the Protocol Team:
- Lack of clear direction and focus
- Meetings were too long and unproductive
- Decision-making was fragmented, with too many voices at the table
- Core contributors couldn’t prioritize Protocol work
- Design working sessions lacked protection from distractions
The Solution
We created Protocol, a design system that introduced a unified visual and functional language across Mozilla and Firefox’s web ecosystem. It includes reusable components, high-level guidance for accessibility and content, and a scalable infrastructure that enables distributed teams to collaborate more efficiently—all while maintaining brand consistency.
Protocol enables:
- A shared foundation for web design
- More efficient remote collaboration
- Consistent UX across all Mozilla sites
- A unified look, feel, and voice that strengthens brand equity
Primary Colors

Secondary Colors

Typography

Spacing

Grid System

Box Shadows

Buttons

Inputs

Links

Selected Works
heraclio@designstgy.com