Mozilla Protocol
Protocol is a design system for Mozilla and Firefox websites. It establishes a common design language, provides reusable coded components, and outlines high level guidelines for content and accessibility.
Protocol is still an evolving project. Currently it’s used primarily by the Mozilla Marketing Websites team as the front-end for www.mozilla.org. The long term goal is to provide a robust, unified design system that anyone at Mozilla can use to build an on-brand website.
If you’re interested in using Protocol on your project, let us know and we can help you. You can find us in #protocol-design-system on Mozilla’s Slack (for Mozillians) or in #protocol-design-system on Matrix (open to the public). Also feel free to file an issue on GitHub.
Benefits of a design system:
- Improved User Experience: Scaled, consistent design patterns and content practices provide users with a familiar experience that allows for less time spent on re-learning interactions, finding pages that serve user needs, and abandoning pages that don’t.
- Efficiency: With a library of design components ready to employ and clear guidelines for creators, we spend more time on creation that serves our users and less time on “reinventing the wheel”.
- Clarity: With clearly documented guidelines and governance for design and content creation, we spend less time negotiating the guidelines to create clarity for ourselves and more time creating designs and content that clearly serves our users.