A place to store decisions we make.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 8aa6614 May 11, 2018


Photon Design Tokens

A design token is an abstraction of a visual property such as color, font, width, animation, etc. These raw values are language application agnostic and once transformed and formatted can be used on any platform.

For example in CSS, design tokens are used as variables, though there will be conversions made for iOS and Android.

A design token file is written in JSON. For example this is a color token:

  "blue": {
    "50": "#0a84ff"

And this is its conversion into a CSS variable:

:root {
  --blue-50: #0a84ff;


Combine multiple tokens to customize frameworks and other dimensions. For Photon themes, see https://github.com/firefoxux/photon-themes.


Setup the environment with git and node already installed. Then:

$ git clone https://github.com/firefoxux/design-tokens/
$ cd /path/to/folder
$ npm install

You can either submit an issue or submit a pull request of changed code yourself.