Skip to content
Switch branches/tags


Failed to load latest commit information.
Latest commit message
Commit time


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 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.

Current npm package version. Total downloads on npm. Pull requests welcome!

Getting Started

Protocol is built on the Node.js platform and published to NPM, so be sure to have both installed before proceeding.


To use Protocol in your website you can install the core package directly from NPM:

npm install @mozilla-protocol/core --save

Alternatively, you can also download the latest release from GitHub.


Once installed, the relevant CSS and JS files will be available in your project under ./node_modules/@mozilla-protocol/core/.

The core CSS file is bundled as protocol.css, which contains styling for things such as basic elements and typography. Component and layout CSS is bundled as protocol-components.scss for convenience.

Note: The original source (.scss) files are also included in the published package. You may want to consider compiling your own CSS to include only what you need for each page of your website, in order to further optimize for performance.

Building From Source

To build Protocol from source including the documentation site, you can clone the repo from GitHub:

$ git clone
$ cd protocol
$ npm start

Running npm start will install dependencies, build your toolkit, and start the development server at http://localhost:3000.

Further Documentation