Design tokens for Protocol, Mozilla’s design system


2665.0.5a year ago3 years agoMinified + gzip package size for @mozilla-protocol/tokens in KB


Protocol Tokens

Design tokens for Protocol, Mozilla’s design system.

JavaScript · JSON · CSS · SCSS


Description Design tokens for Protocol, Mozilla’s design system
Version 5.0.5


Protocol design tokens are available as an npm package (@mozilla-protocol/tokens) on npm.

The recommended way to use and install design tokens may vary depending on your project; the most common are documented below.

JavaScript package installation

Using npm:

npm install @mozilla-protocol/tokens --save

Using yarn:

yarn add @mozilla-protocol/tokens


In JavaScript, design token names are formatted in lower camelCase.

const tokens = require('@mozilla-protocol/tokens/dist/index');
console.log(tokens.colorBlueLighter); // rgb(0, 0, 0)

In JSON, design token names are formatted in kebab-case.

const tokens = require('@mozilla-protocol/tokens/dist/index.json');
console.log(tokens['color-black']); // rgb(0, 0, 0)


Sass variables and map keys are formatted in kebab-case.

// Using variables
@import '~@mozilla-protocol/tokens/dist/index';

a {
  color: $color-black;

Sass, with CSS Custom Properties

Custom properties are formatted in kebab-case.

// Omit .css at the end of the file
@import '~@mozilla-protocol/tokens/dist/colors/colors.custom-properties';

a {
  color: var(--color-black);


To publish to the npmjs registry you'll need access to the mozilla-protocol org on npmjs.com. First run gulp to compile the package locally. You can check your local dist folder to verify it has the up-to-date tokens. Then run npm publish.


Code of conduct

We have a code of conduct, please follow it in all your interactions with the project.

Contributing guide

Read the contributing guide to learn how to propose changes and understand our development process.


The protocol-tokens project is available under the MPL-2.0.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.