Generate files from tokens (#1)

2018-05-10 15:24:43 -07:00 · 2018-05-10 15:24:43 -07:00 · c344bba9c9
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,33 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "node": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 8
+    },
+    "rules": {
+        "indent": [
+            "error",
+            4
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single",
+            {
+                "allowTemplateLiterals": true
+            }
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+};
--- a/.gitignore
+++ b/.gitignore
@ -57,3 +57,5 @@ typings/
 # dotenv environment variables file
 .env

+# dist folder
+dist
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -0,0 +1,9 @@
+# 1.0.0 (2018-05-10)
+
+### Features
+
+* **breakpoints:** Added js, css, json, less, and scss file support
+* **colors:** Added android.xml, soc, js, css, gpl, json, less, scss, and swift file support
+* **gradients:** Added android.xml, js, css, json, less, scss, swift
+* **typography:** Added js, css, json, less, and scss file support
+* **units:** Added js, css, json, less, and scss file support
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -0,0 +1,18 @@
+# Contribute
+
+Open an [issue](https://github.com/mozilla/protocol-tokens/issues/new) or submit a pull request.
+
+## Clone repository
+
+```
+$ git clone git@github.com:mozilla/protocol-tokens.git
+$ cd protocol-tokens
+$ npm install
+
+```
+
+## Update version number
+
+ 1.0.0 for releases that require refactoring
+ 0.1.0 for releases that replace a token
+ 0.0.1 for releases that adds a token
--- a/README.md
+++ b/README.md
@ -1 +1,101 @@
-# protocol-tokens
+# Protocol Tokens
+
+Design tokens for Protocol, Mozilla’s design system.
+
+<em>JavaScript · JSON · CSS · SCSS</em>
+
+---
+
+## Information
+
+<table>
+<tr>
+<td>Package</td><td>@mozilla-protocol/tokens</td>
+</tr>
+<tr>
+<td>Description</td>
+<td>Design tokens for Protocol, Mozilla’s design system</td>
+</tr>
+<tr>
+<td>Version</td>
+<td>[1.0.0](https://github.com/mozilla/protocol-tokens/CHANGELOG.md)</td>
+</tr>
+</table>
+
+## Installation
+
+Protocol design tokens are available as an npm package (`@mozilla-protocol/tokens`) on [npm](https://www.npmjs.com/).
+
+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](https://www.npmjs.com/):
+
+```
+npm install @mozilla-protocol/tokens --save
+```
+
+Using [yarn](https://yarnpkg.com/en/):
+
+```
+yarn add @mozilla-protocol/tokens
+```
+
+### JavaScript
+
+In JavaScript, design token names are formatted in [lower camelCase](http://wiki.c2.com/?CamelCase).
+
+```js
+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](http://wiki.c2.com/?KebabCase).
+
+```js
+const tokens = require('@mozilla-protocol/tokens/dist/index.json');
+console.log(tokens['color-black']); // rgb(0, 0, 0)
+```
+
+### Sass
+
+Sass variables and map keys are formatted in [kebab-case](http://wiki.c2.com/?KebabCase).
+
+```scss
+// Using variables
+@import '~@mozilla-protocol/tokens/dist/index';
+
+a {
+  color: $color-black;
+}
+```
+
+### Sass, with CSS Custom Properties
+
+Custom properties are formatted in [kebab-case](http://wiki.c2.com/?KebabCase).
+
+```scss
+// Omit .css at the end of the file
+@import '~@mozilla-protocol/tokens/dist/colors/colors.custom-properties';
+
+a {
+  color: var(--color-black);
+}
+```
+
+## Contributing
+
+### [Code of conduct](https://www.mozilla.org/en-US/about/governance/policies/participation/)
+
+We have a [code of conduct](https://www.mozilla.org/en-US/about/governance/policies/participation/),
+please follow it in all your interactions with the project.
+
+### [Contributing guide](https://github.com/mozilla/protocol-tokens/blob/master/CONTRIBUTING.md)
+
+Read the [contributing guide](https://github.com/mozilla/protocol-tokens/blob/master/CONTRIBUTING.md)
+to learn how to propose changes and understand our development process.
+
+### [License](https://github.com/mozilla/protocol-tokens/blob/master/LICENSE.md)
+
+The protocol-tokens project is available under the [MPL-2.0](https://github.com/mozilla/protocol-tokens/blob/master/LICENSE.md).
--- a/dist/breakpoints/breakpoints.common.js
+++ b/dist/breakpoints/breakpoints.common.js
@ -0,0 +1,18 @@
+module.exports = {
+  contentXs: "304px",
+  contentSm: "464px",
+  contentMd: "736px",
+  contentLg: "992px",
+  contentXl: "1248px",
+  contentMax: "1248px",
+  screenXs: "304px",
+  screenSm: "464px",
+  screenMd: "736px",
+  screenLg: "992px",
+  screenXl: "1248px",
+  mqXs: "screen and (min-width: 304px + 16px)",
+  mqSm: "screen and (min-width: 464px + 16px)",
+  mqMd: "screen and (min-width: 736px + 32px)",
+  mqLg: "screen and (min-width: 992px + 64px)",
+  mqXl: "screen and (min-width: 1248px + 64px)",
+};
--- a/dist/breakpoints/breakpoints.custom-properties.css
+++ b/dist/breakpoints/breakpoints.custom-properties.css
@ -0,0 +1,19 @@
+
+:root {
+  --content-xs: "304px";
+  --content-sm: "464px";
+  --content-md: "736px";
+  --content-lg: "992px";
+  --content-xl: "1248px";
+  --content-max: "1248px";
+  --screen-xs: "304px";
+  --screen-sm: "464px";
+  --screen-md: "736px";
+  --screen-lg: "992px";
+  --screen-xl: "1248px";
+  --mq-xs: "screen and (min-width: 304px + 16px)";
+  --mq-sm: "screen and (min-width: 464px + 16px)";
+  --mq-md: "screen and (min-width: 736px + 32px)";
+  --mq-lg: "screen and (min-width: 992px + 64px)";
+  --mq-xl: "screen and (min-width: 1248px + 64px)";
+}
--- a/dist/breakpoints/breakpoints.json
+++ b/dist/breakpoints/breakpoints.json
@ -0,0 +1,82 @@
+[
+  {
+    "name": "content-xs",
+    "value": "304px",
+    "token": "$content-xs",
+  },
+  {
+    "name": "content-sm",
+    "value": "464px",
+    "token": "$content-sm",
+  },
+  {
+    "name": "content-md",
+    "value": "736px",
+    "token": "$content-md",
+  },
+  {
+    "name": "content-lg",
+    "value": "992px",
+    "token": "$content-lg",
+  },
+  {
+    "name": "content-xl",
+    "value": "1248px",
+    "token": "$content-xl",
+  },
+  {
+    "name": "content-max",
+    "value": "1248px",
+    "token": "$content-max",
+  },
+  {
+    "name": "screen-xs",
+    "value": "304px",
+    "token": "$screen-xs",
+  },
+  {
+    "name": "screen-sm",
+    "value": "464px",
+    "token": "$screen-sm",
+  },
+  {
+    "name": "screen-md",
+    "value": "736px",
+    "token": "$screen-md",
+  },
+  {
+    "name": "screen-lg",
+    "value": "992px",
+    "token": "$screen-lg",
+  },
+  {
+    "name": "screen-xl",
+    "value": "1248px",
+    "token": "$screen-xl",
+  },
+  {
+    "name": "mq-xs",
+    "value": "screen and (min-width: 304px + 16px)",
+    "token": "$mq-xs",
+  },
+  {
+    "name": "mq-sm",
+    "value": "screen and (min-width: 464px + 16px)",
+    "token": "$mq-sm",
+  },
+  {
+    "name": "mq-md",
+    "value": "screen and (min-width: 736px + 32px)",
+    "token": "$mq-md",
+  },
+  {
+    "name": "mq-lg",
+    "value": "screen and (min-width: 992px + 64px)",
+    "token": "$mq-lg",
+  },
+  {
+    "name": "mq-xl",
+    "value": "screen and (min-width: 1248px + 64px)",
+    "token": "$mq-xl",
+  }
+]
--- a/dist/breakpoints/breakpoints.less
+++ b/dist/breakpoints/breakpoints.less
@ -0,0 +1,17 @@
+
+@content-xs: "304px";
+@content-sm: "464px";
+@content-md: "736px";
+@content-lg: "992px";
+@content-xl: "1248px";
+@content-max: "1248px";
+@screen-xs: "304px";
+@screen-sm: "464px";
+@screen-md: "736px";
+@screen-lg: "992px";
+@screen-xl: "1248px";
+@mq-xs: "screen and (min-width: 304px + 16px)";
+@mq-sm: "screen and (min-width: 464px + 16px)";
+@mq-md: "screen and (min-width: 736px + 32px)";
+@mq-lg: "screen and (min-width: 992px + 64px)";
+@mq-xl: "screen and (min-width: 1248px + 64px)";
--- a/dist/breakpoints/breakpoints.scss
+++ b/dist/breakpoints/breakpoints.scss
@ -0,0 +1,17 @@
+
+$content-xs: "304px";
+$content-sm: "464px";
+$content-md: "736px";
+$content-lg: "992px";
+$content-xl: "1248px";
+$content-max: "1248px";
+$screen-xs: "304px";
+$screen-sm: "464px";
+$screen-md: "736px";
+$screen-lg: "992px";
+$screen-xl: "1248px";
+$mq-xs: "screen and (min-width: 304px + 16px)";
+$mq-sm: "screen and (min-width: 464px + 16px)";
+$mq-md: "screen and (min-width: 736px + 32px)";
+$mq-lg: "screen and (min-width: 992px + 64px)";
+$mq-xl: "screen and (min-width: 1248px + 64px)";
--- a/dist/colors/colors.android.xml
+++ b/dist/colors/colors.android.xml
@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>  
+  <color name="brand_primary">#ff000000</color>  
+  <color name="brand_secondary">#ffffffff</color>  
+  <color name="brand_neon_blue">#ff00ffff</color>  
+  <color name="brand_lemon_yellow">#fffff44f</color>  
+  <color name="brand_warm_red">#ffff4f5e</color>  
+  <color name="brand_neon_green">#ff54ffbd</color>  
+  <color name="brand_dark_purple">#ff6e008b</color>  
+  <color name="brand_dark_green">#ff005e5e</color>  
+  <color name="brand_dark_blue">#ff00458b</color>  
+  <color name="color_black">#ff000000</color>  
+  <color name="color_white">#ffffffff</color>  
+  <color name="color_cyan_40">#ffa2ffff</color>  
+  <color name="color_cyan_50">#ff00ffff</color>  
+  <color name="color_cyan_60">#ff00e5e5</color>  
+  <color name="color_yellow_40">#fffff9a3</color>  
+  <color name="color_yellow_50">#fffff44f</color>  
+  <color name="color_yellow_60">#fff7e800</color>  
+  <color name="color_red_40">#fffe7c87</color>  
+  <color name="color_red_50">#ffff4f5e</color>  
+  <color name="color_red_60">#ffe53c4a</color>  
+  <color name="color_green_40">#ffadffdf</color>  
+  <color name="color_green_50">#ff54ffbd</color>  
+  <color name="color_green_60">#ff2ce69e</color>  
+  <color name="color_teal_40">#ff25bcbc</color>  
+  <color name="color_teal_50">#ff0f8f8f</color>  
+  <color name="color_teal_60">#ff005e5e</color>  
+  <color name="color_purple_40">#ff9f54b2</color>  
+  <color name="color_purple_50">#ff6e008b</color>  
+  <color name="color_purple_60">#ff4f0164</color>  
+  <color name="color_blue_40">#ff539ee9</color>  
+  <color name="color_blue_50">#ff2374c6</color>  
+  <color name="color_blue_60">#ff00458b</color>  
+  <color name="color_gray_10">#fff9f9fa</color>  
+  <color name="color_gray_20">#ffededf0</color>  
+  <color name="color_gray_30">#fff5f5f5</color>  
+  <color name="color_gray_40">#ffe7e7e7</color>  
+  <color name="color_gray_50">#ffc8c8c8</color>  
+  <color name="color_gray_60">#ff959595</color>  
+  <color name="color_gray_70">#ff38383d</color>  
+  <color name="color_gray_80">#ff2a2a2e</color>  
+  <color name="color_gray_90">#ff959595</color>  
+  <color name="color_link">#ff0060df</color>  
+  <color name="color_link_hover">#ff003eaa</color>  
+  <color name="color_link_visited">#ff8000d7</color>  
+  <color name="color_link_visited_hover">#ff6200a4</color>
+</resources>
--- a/dist/colors/colors.colors.soc
+++ b/dist/colors/colors.colors.soc
@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ooo:color-table
+  xmlns:office="urn:oasis:names:tc:opendocument:xmlns:office:1.0"
+  xmlns:draw="urn:oasis:names:tc:opendocument:xmlns:drawing:1.0"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  xmlns:ooo="http://openoffice.org/2004/office">
+  
+  <draw:color draw:name="brand-primary" draw:color="#000000" />
+  
+  <draw:color draw:name="brand-secondary" draw:color="#ffffff" />
+  
+  <draw:color draw:name="brand-neon-blue" draw:color="#00ffff" />
+  
+  <draw:color draw:name="brand-lemon-yellow" draw:color="#fff44f" />
+  
+  <draw:color draw:name="brand-warm-red" draw:color="#ff4f5e" />
+  
+  <draw:color draw:name="brand-neon-green" draw:color="#54ffbd" />
+  
+  <draw:color draw:name="brand-dark-purple" draw:color="#6e008b" />
+  
+  <draw:color draw:name="brand-dark-green" draw:color="#005e5e" />
+  
+  <draw:color draw:name="brand-dark-blue" draw:color="#00458b" />
+  
+  <draw:color draw:name="color-black" draw:color="#000000" />
+  
+  <draw:color draw:name="color-white" draw:color="#ffffff" />
+  
+  <draw:color draw:name="color-cyan-40" draw:color="#a2ffff" />
+  
+  <draw:color draw:name="color-cyan-50" draw:color="#00ffff" />
+  
+  <draw:color draw:name="color-cyan-60" draw:color="#00e5e5" />
+  
+  <draw:color draw:name="color-yellow-40" draw:color="#fff9a3" />
+  
+  <draw:color draw:name="color-yellow-50" draw:color="#fff44f" />
+  
+  <draw:color draw:name="color-yellow-60" draw:color="#f7e800" />
+  
+  <draw:color draw:name="color-red-40" draw:color="#fe7c87" />
+  
+  <draw:color draw:name="color-red-50" draw:color="#ff4f5e" />
+  
+  <draw:color draw:name="color-red-60" draw:color="#e53c4a" />
+  
+  <draw:color draw:name="color-green-40" draw:color="#adffdf" />
+  
+  <draw:color draw:name="color-green-50" draw:color="#54ffbd" />
+  
+  <draw:color draw:name="color-green-60" draw:color="#2ce69e" />
+  
+  <draw:color draw:name="color-teal-40" draw:color="#25bcbc" />
+  
+  <draw:color draw:name="color-teal-50" draw:color="#0f8f8f" />
+  
+  <draw:color draw:name="color-teal-60" draw:color="#005e5e" />
+  
+  <draw:color draw:name="color-purple-40" draw:color="#9f54b2" />
+  
+  <draw:color draw:name="color-purple-50" draw:color="#6e008b" />
+  
+  <draw:color draw:name="color-purple-60" draw:color="#4f0164" />
+  
+  <draw:color draw:name="color-blue-40" draw:color="#539ee9" />
+  
+  <draw:color draw:name="color-blue-50" draw:color="#2374c6" />
+  
+  <draw:color draw:name="color-blue-60" draw:color="#00458b" />
+  
+  <draw:color draw:name="color-gray-10" draw:color="#f9f9fa" />
+  
+  <draw:color draw:name="color-gray-20" draw:color="#ededf0" />
+  
+  <draw:color draw:name="color-gray-30" draw:color="#f5f5f5" />
+  
+  <draw:color draw:name="color-gray-40" draw:color="#e7e7e7" />
+  
+  <draw:color draw:name="color-gray-50" draw:color="#c8c8c8" />
+  
+  <draw:color draw:name="color-gray-60" draw:color="#959595" />
+  
+  <draw:color draw:name="color-gray-70" draw:color="#38383d" />
+  
+  <draw:color draw:name="color-gray-80" draw:color="#2a2a2e" />
+  
+  <draw:color draw:name="color-gray-90" draw:color="#959595" />
+  
+  <draw:color draw:name="color-link" draw:color="#0060df" />
+  
+  <draw:color draw:name="color-link-hover" draw:color="#003eaa" />
+  
+  <draw:color draw:name="color-link-visited" draw:color="#8000d7" />
+  
+  <draw:color draw:name="color-link-visited-hover" draw:color="#6200a4" />
+</ooo:color-table>
--- a/dist/colors/colors.common.js
+++ b/dist/colors/colors.common.js
@ -0,0 +1,47 @@
+module.exports = {
+  brandPrimary: "#000000",
+  brandSecondary: "#ffffff",
+  brandNeonBlue: "#00ffff",
+  brandLemonYellow: "#fff44f",
+  brandWarmRed: "#ff4f5e",
+  brandNeonGreen: "#54ffbd",
+  brandDarkPurple: "#6e008b",
+  brandDarkGreen: "#005e5e",
+  brandDarkBlue: "#00458b",
+  colorBlack: "#000000",
+  colorWhite: "#ffffff",
+  colorCyan40: "#a2ffff",
+  colorCyan50: "#00ffff",
+  colorCyan60: "#00e5e5",
+  colorYellow40: "#fff9a3",
+  colorYellow50: "#fff44f",
+  colorYellow60: "#f7e800",
+  colorRed40: "#fe7c87",
+  colorRed50: "#ff4f5e",
+  colorRed60: "#e53c4a",
+  colorGreen40: "#adffdf",
+  colorGreen50: "#54ffbd",
+  colorGreen60: "#2ce69e",
+  colorTeal40: "#25bcbc",
+  colorTeal50: "#0f8f8f",
+  colorTeal60: "#005e5e",
+  colorPurple40: "#9f54b2",
+  colorPurple50: "#6e008b",
+  colorPurple60: "#4f0164",
+  colorBlue40: "#539ee9",
+  colorBlue50: "#2374c6",
+  colorBlue60: "#00458b",
+  colorGray10: "#f9f9fa",
+  colorGray20: "#ededf0",
+  colorGray30: "#f5f5f5",
+  colorGray40: "#e7e7e7",
+  colorGray50: "#c8c8c8",
+  colorGray60: "#959595",
+  colorGray70: "#38383d",
+  colorGray80: "#2a2a2e",
+  colorGray90: "#959595",
+  colorLink: "#0060df",
+  colorLinkHover: "#003eaa",
+  colorLinkVisited: "#8000d7",
+  colorLinkVisitedHover: "#6200a4",
+};
--- a/dist/colors/colors.custom-properties.css
+++ b/dist/colors/colors.custom-properties.css
@ -0,0 +1,48 @@
+
+:root {
+  --brand-primary: #000000;
+  --brand-secondary: #ffffff;
+  --brand-neon-blue: #00ffff;
+  --brand-lemon-yellow: #fff44f;
+  --brand-warm-red: #ff4f5e;
+  --brand-neon-green: #54ffbd;
+  --brand-dark-purple: #6e008b;
+  --brand-dark-green: #005e5e;
+  --brand-dark-blue: #00458b;
+  --color-black: #000000;
+  --color-white: #ffffff;
+  --color-cyan-40: #a2ffff;
+  --color-cyan-50: #00ffff;
+  --color-cyan-60: #00e5e5;
+  --color-yellow-40: #fff9a3;
+  --color-yellow-50: #fff44f;
+  --color-yellow-60: #f7e800;
+  --color-red-40: #fe7c87;
+  --color-red-50: #ff4f5e;
+  --color-red-60: #e53c4a;
+  --color-green-40: #adffdf;
+  --color-green-50: #54ffbd;
+  --color-green-60: #2ce69e;
+  --color-teal-40: #25bcbc;
+  --color-teal-50: #0f8f8f;
+  --color-teal-60: #005e5e;
+  --color-purple-40: #9f54b2;
+  --color-purple-50: #6e008b;
+  --color-purple-60: #4f0164;
+  --color-blue-40: #539ee9;
+  --color-blue-50: #2374c6;
+  --color-blue-60: #00458b;
+  --color-gray-10: #f9f9fa;
+  --color-gray-20: #ededf0;
+  --color-gray-30: #f5f5f5;
+  --color-gray-40: #e7e7e7;
+  --color-gray-50: #c8c8c8;
+  --color-gray-60: #959595;
+  --color-gray-70: #38383d;
+  --color-gray-80: #2a2a2e;
+  --color-gray-90: #959595;
+  --color-link: #0060df;
+  --color-link-hover: #003eaa;
+  --color-link-visited: #8000d7;
+  --color-link-visited-hover: #6200a4;
+}
--- a/dist/colors/colors.gpl
+++ b/dist/colors/colors.gpl
@ -0,0 +1,48 @@
+GIMP Palette
+Name: Protocol Colors
+  
+0 0 0 Brand Primary
+255 255 255 Brand Secondary
+0 255 255 Brand Neon Blue
+255 244 79 Brand Lemon Yellow
+255 79 94 Brand Warm Red
+84 255 189 Brand Neon Green
+110 0 139 Brand Dark Purple
+0 94 94 Brand Dark Green
+0 69 139 Brand Dark Blue
+0 0 0 Color Black
+255 255 255 Color White
+162 255 255 Color Cyan 40
+0 255 255 Color Cyan 50
+0 229 229 Color Cyan 60
+255 249 163 Color Yellow 40
+255 244 79 Color Yellow 50
+247 232 0 Color Yellow 60
+254 124 135 Color Red 40
+255 79 94 Color Red 50
+229 60 74 Color Red 60
+173 255 223 Color Green 40
+84 255 189 Color Green 50
+44 230 158 Color Green 60
+37 188 188 Color Teal 40
+15 143 143 Color Teal 50
+0 94 94 Color Teal 60
+159 84 178 Color Purple 40
+110 0 139 Color Purple 50
+79 1 100 Color Purple 60
+83 158 233 Color Blue 40
+35 116 198 Color Blue 50
+0 69 139 Color Blue 60
+249 249 250 Color Gray 10
+237 237 240 Color Gray 20
+245 245 245 Color Gray 30
+231 231 231 Color Gray 40
+200 200 200 Color Gray 50
+149 149 149 Color Gray 60
+56 56 61 Color Gray 70
+42 42 46 Color Gray 80
+149 149 149 Color Gray 90
+0 96 223 Color Link
+0 62 170 Color Link Hover
+128 0 215 Color Link Visited
+98 0 164 Color Link Visited Hover
--- a/dist/colors/colors.json
+++ b/dist/colors/colors.json
@ -0,0 +1,227 @@
+[
+  {
+    "name": "Black",
+    "value": "#000000",
+    "token": "$brand-primary",
+  },
+  {
+    "name": "White",
+    "value": "#ffffff",
+    "token": "$brand-secondary",
+  },
+  {
+    "name": "Neon Blue",
+    "value": "#00ffff",
+    "token": "$brand-neon-blue",
+  },
+  {
+    "name": "Lemon Yellow",
+    "value": "#fff44f",
+    "token": "$brand-lemon-yellow",
+  },
+  {
+    "name": "Warm Red",
+    "value": "#ff4f5e",
+    "token": "$brand-warm-red",
+  },
+  {
+    "name": "Neon Green",
+    "value": "#54ffbd",
+    "token": "$brand-neon-green",
+  },
+  {
+    "name": "Dark Purple",
+    "value": "#6e008b",
+    "token": "$brand-dark-purple",
+  },
+  {
+    "name": "Dark Green",
+    "value": "#005e5e",
+    "token": "$brand-dark-green",
+  },
+  {
+    "name": "Dark Blue",
+    "value": "#00458b",
+    "token": "$brand-dark-blue",
+  },
+  {
+    "name": "Black",
+    "value": "#000000",
+    "token": "$color-black",
+  },
+  {
+    "name": "White",
+    "value": "#ffffff",
+    "token": "$color-white",
+  },
+  {
+    "name": "Cyan 40",
+    "value": "#a2ffff",
+    "token": "$color-cyan-40",
+  },
+  {
+    "name": "Cyan 50",
+    "value": "#00ffff",
+    "token": "$color-cyan-50",
+  },
+  {
+    "name": "Cyan 60",
+    "value": "#00e5e5",
+    "token": "$color-cyan-60",
+  },
+  {
+    "name": "Yellow 40",
+    "value": "#fff9a3",
+    "token": "$color-yellow-40",
+  },
+  {
+    "name": "Yellow 50",
+    "value": "#fff44f",
+    "token": "$color-yellow-50",
+  },
+  {
+    "name": "Yellow 60",
+    "value": "#f7e800",
+    "token": "$color-yellow-60",
+  },
+  {
+    "name": "Red 40",
+    "value": "#fe7c87",
+    "token": "$color-red-40",
+  },
+  {
+    "name": "Red 50",
+    "value": "#ff4f5e",
+    "token": "$color-red-50",
+  },
+  {
+    "name": "Green 60",
+    "value": "#e53c4a",
+    "token": "$color-red-60",
+  },
+  {
+    "name": "Green 40",
+    "value": "#adffdf",
+    "token": "$color-green-40",
+  },
+  {
+    "name": "Green 50",
+    "value": "#54ffbd",
+    "token": "$color-green-50",
+  },
+  {
+    "name": "Green 60",
+    "value": "#2ce69e",
+    "token": "$color-green-60",
+  },
+  {
+    "name": "Teal 40",
+    "value": "#25bcbc",
+    "token": "$color-teal-40",
+  },
+  {
+    "name": "Teal 50",
+    "value": "#0f8f8f",
+    "token": "$color-teal-50",
+  },
+  {
+    "name": "Teal 60",
+    "value": "#005e5e",
+    "token": "$color-teal-60",
+  },
+  {
+    "name": "Purple 40",
+    "value": "#9f54b2",
+    "token": "$color-purple-40",
+  },
+  {
+    "name": "Purple 50",
+    "value": "#6e008b",
+    "token": "$color-purple-50",
+  },
+  {
+    "name": "Purple 60",
+    "value": "#4f0164",
+    "token": "$color-purple-60",
+  },
+  {
+    "name": "Blue 40",
+    "value": "#539ee9",
+    "token": "$color-blue-40",
+  },
+  {
+    "name": "Blue 50",
+    "value": "#2374c6",
+    "token": "$color-blue-50",
+  },
+  {
+    "name": "Blue 60",
+    "value": "#00458b",
+    "token": "$color-blue-60",
+  },
+  {
+    "name": "Gray 10",
+    "value": "#f9f9fa",
+    "token": "$color-gray-10",
+  },
+  {
+    "name": "Gray 20",
+    "value": "#ededf0",
+    "token": "$color-gray-20",
+  },
+  {
+    "name": "Gray 30",
+    "value": "#f5f5f5",
+    "token": "$color-gray-30",
+  },
+  {
+    "name": "Gray 40",
+    "value": "#e7e7e7",
+    "token": "$color-gray-40",
+  },
+  {
+    "name": "Gray 50",
+    "value": "#c8c8c8",
+    "token": "$color-gray-50",
+  },
+  {
+    "name": "Gray 60",
+    "value": "#959595",
+    "token": "$color-gray-60",
+  },
+  {
+    "name": "Gray 70",
+    "value": "#38383d",
+    "token": "$color-gray-70",
+  },
+  {
+    "name": "Gray 80",
+    "value": "#2a2a2e",
+    "token": "$color-gray-80",
+  },
+  {
+    "name": "Gray 90",
+    "value": "#959595",
+    "token": "$color-gray-90",
+  },
+  {
+    "name": "Link",
+    "value": "#0060df",
+    "token": "$color-link",
+  },
+  {
+    "name": "Link:Hover",
+    "value": "#003eaa",
+    "token": "$color-link-hover",
+  },
+  {
+    "name": "Link:Visited",
+    "value": "#8000d7",
+    "token": "$color-link-visited",
+  },
+  {
+    "name": "Link:Visited:Hover",
+    "value": "#6200a4",
+    "token": "$color-link-visited-hover",
+  }
+]
--- a/dist/colors/colors.less
+++ b/dist/colors/colors.less
@ -0,0 +1,46 @@
+
+@brand-primary: #000000;
+@brand-secondary: #ffffff;
+@brand-neon-blue: #00ffff;
+@brand-lemon-yellow: #fff44f;
+@brand-warm-red: #ff4f5e;
+@brand-neon-green: #54ffbd;
+@brand-dark-purple: #6e008b;
+@brand-dark-green: #005e5e;
+@brand-dark-blue: #00458b;
+@color-black: #000000;
+@color-white: #ffffff;
+@color-cyan-40: #a2ffff;
+@color-cyan-50: #00ffff;
+@color-cyan-60: #00e5e5;
+@color-yellow-40: #fff9a3;
+@color-yellow-50: #fff44f;
+@color-yellow-60: #f7e800;
+@color-red-40: #fe7c87;
+@color-red-50: #ff4f5e;
+@color-red-60: #e53c4a;
+@color-green-40: #adffdf;
+@color-green-50: #54ffbd;
+@color-green-60: #2ce69e;
+@color-teal-40: #25bcbc;
+@color-teal-50: #0f8f8f;
+@color-teal-60: #005e5e;
+@color-purple-40: #9f54b2;
+@color-purple-50: #6e008b;
+@color-purple-60: #4f0164;
+@color-blue-40: #539ee9;
+@color-blue-50: #2374c6;
+@color-blue-60: #00458b;
+@color-gray-10: #f9f9fa;
+@color-gray-20: #ededf0;
+@color-gray-30: #f5f5f5;
+@color-gray-40: #e7e7e7;
+@color-gray-50: #c8c8c8;
+@color-gray-60: #959595;
+@color-gray-70: #38383d;
+@color-gray-80: #2a2a2e;
+@color-gray-90: #959595;
+@color-link: #0060df;
+@color-link-hover: #003eaa;
+@color-link-visited: #8000d7;
+@color-link-visited-hover: #6200a4;
--- a/dist/colors/colors.scss
+++ b/dist/colors/colors.scss
@ -0,0 +1,46 @@
+
+$brand-primary: #000000;
+$brand-secondary: #ffffff;
+$brand-neon-blue: #00ffff;
+$brand-lemon-yellow: #fff44f;
+$brand-warm-red: #ff4f5e;
+$brand-neon-green: #54ffbd;
+$brand-dark-purple: #6e008b;
+$brand-dark-green: #005e5e;
+$brand-dark-blue: #00458b;
+$color-black: #000000;
+$color-white: #ffffff;
+$color-cyan-40: #a2ffff;
+$color-cyan-50: #00ffff;
+$color-cyan-60: #00e5e5;
+$color-yellow-40: #fff9a3;
+$color-yellow-50: #fff44f;
+$color-yellow-60: #f7e800;
+$color-red-40: #fe7c87;
+$color-red-50: #ff4f5e;
+$color-red-60: #e53c4a;
+$color-green-40: #adffdf;
+$color-green-50: #54ffbd;
+$color-green-60: #2ce69e;
+$color-teal-40: #25bcbc;
+$color-teal-50: #0f8f8f;
+$color-teal-60: #005e5e;
+$color-purple-40: #9f54b2;
+$color-purple-50: #6e008b;
+$color-purple-60: #4f0164;
+$color-blue-40: #539ee9;
+$color-blue-50: #2374c6;
+$color-blue-60: #00458b;
+$color-gray-10: #f9f9fa;
+$color-gray-20: #ededf0;
+$color-gray-30: #f5f5f5;
+$color-gray-40: #e7e7e7;
+$color-gray-50: #c8c8c8;
+$color-gray-60: #959595;
+$color-gray-70: #38383d;
+$color-gray-80: #2a2a2e;
+$color-gray-90: #959595;
+$color-link: #0060df;
+$color-link-hover: #003eaa;
+$color-link-visited: #8000d7;
+$color-link-visited-hover: #6200a4;
--- a/dist/colors/colors.swift
+++ b/dist/colors/colors.swift
@ -0,0 +1,49 @@
+extension UIColor {
+  struct Protocol {
+      static let brand-primary = UIColor(rgb: 0x000000)
+      static let brand-secondary = UIColor(rgb: 0xffffff)
+      static let brand-neon-blue = UIColor(rgb: 0x00ffff)
+      static let brand-lemon-yellow = UIColor(rgb: 0xfff44f)
+      static let brand-warm-red = UIColor(rgb: 0xff4f5e)
+      static let brand-neon-green = UIColor(rgb: 0x54ffbd)
+      static let brand-dark-purple = UIColor(rgb: 0x6e008b)
+      static let brand-dark-green = UIColor(rgb: 0x005e5e)
+      static let brand-dark-blue = UIColor(rgb: 0x00458b)
+      static let color-black = UIColor(rgb: 0x000000)
+      static let color-white = UIColor(rgb: 0xffffff)
+      static let color-cyan-40 = UIColor(rgb: 0xa2ffff)
+      static let color-cyan-50 = UIColor(rgb: 0x00ffff)
+      static let color-cyan-60 = UIColor(rgb: 0x00e5e5)
+      static let color-yellow-40 = UIColor(rgb: 0xfff9a3)
+      static let color-yellow-50 = UIColor(rgb: 0xfff44f)
+      static let color-yellow-60 = UIColor(rgb: 0xf7e800)
+      static let color-red-40 = UIColor(rgb: 0xfe7c87)
+      static let color-red-50 = UIColor(rgb: 0xff4f5e)
+      static let color-red-60 = UIColor(rgb: 0xe53c4a)
+      static let color-green-40 = UIColor(rgb: 0xadffdf)
+      static let color-green-50 = UIColor(rgb: 0x54ffbd)
+      static let color-green-60 = UIColor(rgb: 0x2ce69e)
+      static let color-teal-40 = UIColor(rgb: 0x25bcbc)
+      static let color-teal-50 = UIColor(rgb: 0x0f8f8f)
+      static let color-teal-60 = UIColor(rgb: 0x005e5e)
+      static let color-purple-40 = UIColor(rgb: 0x9f54b2)
+      static let color-purple-50 = UIColor(rgb: 0x6e008b)
+      static let color-purple-60 = UIColor(rgb: 0x4f0164)
+      static let color-blue-40 = UIColor(rgb: 0x539ee9)
+      static let color-blue-50 = UIColor(rgb: 0x2374c6)
+      static let color-blue-60 = UIColor(rgb: 0x00458b)
+      static let color-gray-10 = UIColor(rgb: 0xf9f9fa)
+      static let color-gray-20 = UIColor(rgb: 0xededf0)
+      static let color-gray-30 = UIColor(rgb: 0xf5f5f5)
+      static let color-gray-40 = UIColor(rgb: 0xe7e7e7)
+      static let color-gray-50 = UIColor(rgb: 0xc8c8c8)
+      static let color-gray-60 = UIColor(rgb: 0x959595)
+      static let color-gray-70 = UIColor(rgb: 0x38383d)
+      static let color-gray-80 = UIColor(rgb: 0x2a2a2e)
+      static let color-gray-90 = UIColor(rgb: 0x959595)
+      static let color-link = UIColor(rgb: 0x0060df)
+      static let color-link-hover = UIColor(rgb: 0x003eaa)
+      static let color-link-visited = UIColor(rgb: 0x8000d7)
+      static let color-link-visited-hover = UIColor(rgb: 0x6200a4)
+  }
+}
--- a/dist/font-stack/font-stack.common.js
+++ b/dist/font-stack/font-stack.common.js
@ -0,0 +1,5 @@
+module.exports = {
+  fontStackSans: "'Open Sans', X-LocaleSpecific, sans-serif",
+  fontStackSerif: "'Zilla Slab', 'Open Sans', X-LocaleSpecific, serif",
+  fontStackMono: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
+};
--- a/dist/font-stack/font-stack.custom-properties.css
+++ b/dist/font-stack/font-stack.custom-properties.css
@ -0,0 +1,6 @@
+
+:root {
+  --font-stack-sans: "'Open Sans', X-LocaleSpecific, sans-serif";
+  --font-stack-serif: "'Zilla Slab', 'Open Sans', X-LocaleSpecific, serif";
+  --font-stack-mono: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace";
+}
--- a/dist/font-stack/font-stack.json
+++ b/dist/font-stack/font-stack.json
@ -0,0 +1,17 @@
+[
+  {
+    "name": "font-stack-sans",
+    "value": "&#x27;Open Sans&#x27;, X-LocaleSpecific, sans-serif",
+    "token": "$font-stack-sans",
+  },
+  {
+    "name": "font-stack-serif",
+    "value": "&#x27;Zilla Slab&#x27;, &#x27;Open Sans&#x27;, X-LocaleSpecific, serif",
+    "token": "$font-stack-serif",
+  },
+  {
+    "name": "font-stack-mono",
+    "value": "Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace",
+    "token": "$font-stack-mono",
+  }
+]
--- a/dist/font-stack/font-stack.less
+++ b/dist/font-stack/font-stack.less
@ -0,0 +1,4 @@
+
+@font-stack-sans: "'Open Sans', X-LocaleSpecific, sans-serif";
+@font-stack-serif: "'Zilla Slab', 'Open Sans', X-LocaleSpecific, serif";
+@font-stack-mono: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace";
--- a/dist/font-stack/font-stack.scss
+++ b/dist/font-stack/font-stack.scss
@ -0,0 +1,4 @@
+
+$font-stack-sans: "'Open Sans', X-LocaleSpecific, sans-serif";
+$font-stack-serif: "'Zilla Slab', 'Open Sans', X-LocaleSpecific, serif";
+$font-stack-mono: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace";
--- a/dist/gradients/gradients.android.xml
+++ b/dist/gradients/gradients.android.xml
@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:id="@+id/gradient_greyscale">
+  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+    <gradient
+      android:angle="90deg"
+      android:startColor="#000000"
+      android:endColor="#FFFFFF"
+      android:type="linear"
+      />
+    </gradient>
+  </shape>
+  </item>
+  <!-- gradient-focus has more than three colors and could not be generated -->
+  <item android:id="@+id/gradient_helloworld">
+    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+      <gradient
+        android:angle="33deg"
+        android:startColor="#4A1475"
+        android:centerColor="#671878"
+        android:endColor="#C42482"
+        android:type="radial"
+        android:gradientRadius="100%p" />
+      </gradient>
+    </shape>
+  </item>
+</layer-list>
--- a/dist/gradients/gradients.common.js
+++ b/dist/gradients/gradients.common.js
@ -0,0 +1,5 @@
+module.exports = {
+  gradientGreyscale: "linear-gradient(90deg, #000000, #ffffff)",
+  gradientFocus: "linear-gradient(45deg, #4A1475, #671878, #C42482, #FF271D)",
+  gradientHelloworld: "radial-gradient(33deg, #4A1475, #671878, #C42482, #FF271D)",
+};
--- a/dist/gradients/gradients.custom-properties.css
+++ b/dist/gradients/gradients.custom-properties.css
@ -0,0 +1,6 @@
+
+:root {
+  --gradient-greyscale: linear-gradient(90deg, #000000, #ffffff);
+  --gradient-focus: linear-gradient(45deg, #4A1475, #671878, #C42482, #FF271D);
+  --gradient-helloworld: radial-gradient(33deg, #4A1475, #671878, #C42482, #FF271D);
+}
--- a/dist/gradients/gradients.json
+++ b/dist/gradients/gradients.json
@ -0,0 +1,17 @@
+[
+  {
+    "name": "Greyscale Gradient",
+    "value": "linear-gradient(90deg, #000000, #ffffff)",
+    "token": "$gradient-greyscale",
+  },
+  {
+    "name": "Firefox Focus Gradient",
+    "value": "linear-gradient(45deg, #4A1475, #671878, #C42482, #FF271D)",
+    "token": "$gradient-focus",
+  },
+  {
+    "name": "Hello World Gradient",
+    "value": "radial-gradient(33deg, #4A1475, #671878, #C42482, #FF271D)",
+    "token": "$gradient-helloworld",
+  }
+]
--- a/dist/gradients/gradients.less
+++ b/dist/gradients/gradients.less
@ -0,0 +1,4 @@
+
+@gradient-greyscale: linear-gradient(90deg, #000000, #ffffff);
+@gradient-focus: linear-gradient(45deg, #4A1475, #671878, #C42482, #FF271D);
+@gradient-helloworld: radial-gradient(33deg, #4A1475, #671878, #C42482, #FF271D);
--- a/dist/gradients/gradients.scss
+++ b/dist/gradients/gradients.scss
@ -0,0 +1,4 @@
+
+$gradient-greyscale: linear-gradient(90deg, #000000, #ffffff);
+$gradient-focus: linear-gradient(45deg, #4A1475, #671878, #C42482, #FF271D);
+$gradient-helloworld: radial-gradient(33deg, #4A1475, #671878, #C42482, #FF271D);
--- a/dist/gradients/gradients.swift
+++ b/dist/gradients/gradients.swift
@ -0,0 +1,51 @@
+extension UIColor {
+  
+    func gradient-greyscale() {
+      let layer : CAGradientLayer = CAGradientLayer()
+      layer.frame.size = self.frame.size
+      layer.frame.origin = CGPointZero
+      layer.cornerRadius = CGFloat(frame.width / 20)
+
+      
+      let color0x000000 = UIColor(0x000000)
+      let color0xFFFFFF = UIColor(0xFFFFFF)
+
+      layer.colors = [color0x000000, color0xFFFFFF]
+        
+
+      self.layer.insertSublayer(layer, atIndex: 0)
+    }
+    func gradient-focus() {
+      let layer : CAGradientLayer = CAGradientLayer()
+      layer.frame.size = self.frame.size
+      layer.frame.origin = CGPointZero
+      layer.cornerRadius = CGFloat(frame.width / 20)
+
+      
+      let color0x4A1475 = UIColor(0x4A1475)
+      let color0x671878 = UIColor(0x671878)
+      let color0xC42482 = UIColor(0xC42482)
+      let color0xFF271D = UIColor(0xFF271D)
+
+      layer.colors = [color0x4A1475, color0x671878, color0xC42482, color0xFF271D]
+        
+
+      self.layer.insertSublayer(layer, atIndex: 0)
+    }
+    func gradient-helloworld() {
+      let layer : CAGradientLayer = CAGradientLayer()
+      layer.frame.size = self.frame.size
+      layer.frame.origin = CGPointZero
+      layer.cornerRadius = CGFloat(frame.width / 20)
+
+      
+      let color0x4A1475 = UIColor(0x4A1475)
+      let color0x671878 = UIColor(0x671878)
+      let color0xC42482 = UIColor(0xC42482)
+
+      layer.colors = [color0x4A1475, color0x671878, color0xC42482]
+        
+
+      self.layer.insertSublayer(layer, atIndex: 0)
+    }
+}
--- a/dist/index.css
+++ b/dist/index.css
@ -0,0 +1,99 @@
+
+:root {
+  --content-xs: "304px";
+  --content-sm: "464px";
+  --content-md: "736px";
+  --content-lg: "992px";
+  --content-xl: "1248px";
+  --content-max: "1248px";
+  --screen-xs: "304px";
+  --screen-sm: "464px";
+  --screen-md: "736px";
+  --screen-lg: "992px";
+  --screen-xl: "1248px";
+  --mq-xs: "screen and (min-width: 304px + 16px)";
+  --mq-sm: "screen and (min-width: 464px + 16px)";
+  --mq-md: "screen and (min-width: 736px + 32px)";
+  --mq-lg: "screen and (min-width: 992px + 64px)";
+  --mq-xl: "screen and (min-width: 1248px + 64px)";
+  --brand-primary: #000000;
+  --brand-secondary: #ffffff;
+  --brand-neon-blue: #00ffff;
+  --brand-lemon-yellow: #fff44f;
+  --brand-warm-red: #ff4f5e;
+  --brand-neon-green: #54ffbd;
+  --brand-dark-purple: #6e008b;
+  --brand-dark-green: #005e5e;
+  --brand-dark-blue: #00458b;
+  --color-black: #000000;
+  --color-white: #ffffff;
+  --color-cyan-40: #a2ffff;
+  --color-cyan-50: #00ffff;
+  --color-cyan-60: #00e5e5;
+  --color-yellow-40: #fff9a3;
+  --color-yellow-50: #fff44f;
+  --color-yellow-60: #f7e800;
+  --color-red-40: #fe7c87;
+  --color-red-50: #ff4f5e;
+  --color-red-60: #e53c4a;
+  --color-green-40: #adffdf;
+  --color-green-50: #54ffbd;
+  --color-green-60: #2ce69e;
+  --color-teal-40: #25bcbc;
+  --color-teal-50: #0f8f8f;
+  --color-teal-60: #005e5e;
+  --color-purple-40: #9f54b2;
+  --color-purple-50: #6e008b;
+  --color-purple-60: #4f0164;
+  --color-blue-40: #539ee9;
+  --color-blue-50: #2374c6;
+  --color-blue-60: #00458b;
+  --color-gray-10: #f9f9fa;
+  --color-gray-20: #ededf0;
+  --color-gray-30: #f5f5f5;
+  --color-gray-40: #e7e7e7;
+  --color-gray-50: #c8c8c8;
+  --color-gray-60: #959595;
+  --color-gray-70: #38383d;
+  --color-gray-80: #2a2a2e;
+  --color-gray-90: #959595;
+  --color-link: #0060df;
+  --color-link-hover: #003eaa;
+  --color-link-visited: #8000d7;
+  --color-link-visited-hover: #6200a4;
+  --font-stack-sans: "'Open Sans', X-LocaleSpecific, sans-serif";
+  --font-stack-serif: "'Zilla Slab', 'Open Sans', X-LocaleSpecific, serif";
+  --font-stack-mono: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace";
+  --gradient-greyscale: linear-gradient(90deg, #000000, #ffffff);
+  --gradient-focus: linear-gradient(45deg, #4A1475, #671878, #C42482, #FF271D);
+  --gradient-helloworld: radial-gradient(33deg, #4A1475, #671878, #C42482, #FF271D);
+  --spacing-xs: "4px";
+  --spacing-sm: "8px";
+  --spacing-md: "16px";
+  --spacing-lg: "24px";
+  --spacing-xl: "32px";
+  --spacing-2xl: "48px";
+  --spacing-base: "16px";
+  --padding-xs: "4px";
+  --padding-sm: "8px";
+  --padding-md: "16px";
+  --padding-lg: "24px";
+  --padding-xl: "32px";
+  --padding-2xl: "48px";
+  --padding-base: "16px";
+  --margin-xs: "4px";
+  --margin-sm: "8px";
+  --margin-md: "16px";
+  --margin-lg: "24px";
+  --margin-xl: "32px";
+  --margin-2xl: "48px";
+  --margin-base: "16px";
+  --layout-2xs: "16px";
+  --layout-xs: "24px";
+  --layout-sm: "32px";
+  --layout-md: "48px";
+  --layout-lg: "24px";
+  --layout-xl: "32px";
+  --layout-2xl: "48px";
+  --layout-base: "48px";
+}
--- a/dist/index.js
+++ b/dist/index.js
@ -0,0 +1,98 @@
+module.exports = {
+  contentXs: "304px",
+  contentSm: "464px",
+  contentMd: "736px",
+  contentLg: "992px",
+  contentXl: "1248px",
+  contentMax: "1248px",
+  screenXs: "304px",
+  screenSm: "464px",
+  screenMd: "736px",
+  screenLg: "992px",
+  screenXl: "1248px",
+  mqXs: "screen and (min-width: 304px + 16px)",
+  mqSm: "screen and (min-width: 464px + 16px)",
+  mqMd: "screen and (min-width: 736px + 32px)",
+  mqLg: "screen and (min-width: 992px + 64px)",
+  mqXl: "screen and (min-width: 1248px + 64px)",
+  brandPrimary: "#000000",
+  brandSecondary: "#ffffff",
+  brandNeonBlue: "#00ffff",
+  brandLemonYellow: "#fff44f",
+  brandWarmRed: "#ff4f5e",
+  brandNeonGreen: "#54ffbd",
+  brandDarkPurple: "#6e008b",
+  brandDarkGreen: "#005e5e",
+  brandDarkBlue: "#00458b",
+  colorBlack: "#000000",
+  colorWhite: "#ffffff",
+  colorCyan40: "#a2ffff",
+  colorCyan50: "#00ffff",
+  colorCyan60: "#00e5e5",
+  colorYellow40: "#fff9a3",
+  colorYellow50: "#fff44f",
+  colorYellow60: "#f7e800",
+  colorRed40: "#fe7c87",
+  colorRed50: "#ff4f5e",
+  colorRed60: "#e53c4a",
+  colorGreen40: "#adffdf",
+  colorGreen50: "#54ffbd",
+  colorGreen60: "#2ce69e",
+  colorTeal40: "#25bcbc",
+  colorTeal50: "#0f8f8f",
+  colorTeal60: "#005e5e",
+  colorPurple40: "#9f54b2",
+  colorPurple50: "#6e008b",
+  colorPurple60: "#4f0164",
+  colorBlue40: "#539ee9",
+  colorBlue50: "#2374c6",
+  colorBlue60: "#00458b",
+  colorGray10: "#f9f9fa",
+  colorGray20: "#ededf0",
+  colorGray30: "#f5f5f5",
+  colorGray40: "#e7e7e7",
+  colorGray50: "#c8c8c8",
+  colorGray60: "#959595",
+  colorGray70: "#38383d",
+  colorGray80: "#2a2a2e",
+  colorGray90: "#959595",
+  colorLink: "#0060df",
+  colorLinkHover: "#003eaa",
+  colorLinkVisited: "#8000d7",
+  colorLinkVisitedHover: "#6200a4",
+  fontStackSans: "'Open Sans', X-LocaleSpecific, sans-serif",
+  fontStackSerif: "'Zilla Slab', 'Open Sans', X-LocaleSpecific, serif",
+  fontStackMono: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
+  gradientGreyscale: "linear-gradient(90deg, #000000, #ffffff)",
+  gradientFocus: "linear-gradient(45deg, #4A1475, #671878, #C42482, #FF271D)",
+  gradientHelloworld: "radial-gradient(33deg, #4A1475, #671878, #C42482, #FF271D)",
+  spacingXs: "4px",
+  spacingSm: "8px",
+  spacingMd: "16px",
+  spacingLg: "24px",
+  spacingXl: "32px",
+  spacing2Xl: "48px",
+  spacingBase: "16px",
+  paddingXs: "4px",
+  paddingSm: "8px",
+  paddingMd: "16px",
+  paddingLg: "24px",
+  paddingXl: "32px",
+  padding2Xl: "48px",
+  paddingBase: "16px",
+  marginXs: "4px",
+  marginSm: "8px",
+  marginMd: "16px",
+  marginLg: "24px",
+  marginXl: "32px",
+  margin2Xl: "48px",
+  marginBase: "16px",
+  layout2Xs: "16px",
+  layoutXs: "24px",
+  layoutSm: "32px",
+  layoutMd: "48px",
+  layoutLg: "24px",
+  layoutXl: "32px",
+  layout2Xl: "48px",
+  layoutBase: "48px",
+};
--- a/dist/index.json
+++ b/dist/index.json
@ -0,0 +1,482 @@
+[
+  {
+    "name": "content-xs",
+    "value": "304px",
+    "token": "$content-xs",
+  },
+  {
+    "name": "content-sm",
+    "value": "464px",
+    "token": "$content-sm",
+  },
+  {
+    "name": "content-md",
+    "value": "736px",
+    "token": "$content-md",
+  },
+  {
+    "name": "content-lg",
+    "value": "992px",
+    "token": "$content-lg",
+  },
+  {
+    "name": "content-xl",
+    "value": "1248px",
+    "token": "$content-xl",
+  },
+  {
+    "name": "content-max",
+    "value": "1248px",
+    "token": "$content-max",
+  },
+  {
+    "name": "screen-xs",
+    "value": "304px",
+    "token": "$screen-xs",
+  },
+  {
+    "name": "screen-sm",
+    "value": "464px",
+    "token": "$screen-sm",
+  },
+  {
+    "name": "screen-md",
+    "value": "736px",
+    "token": "$screen-md",
+  },
+  {
+    "name": "screen-lg",
+    "value": "992px",
+    "token": "$screen-lg",
+  },
+  {
+    "name": "screen-xl",
+    "value": "1248px",
+    "token": "$screen-xl",
+  },
+  {
+    "name": "mq-xs",
+    "value": "screen and (min-width: 304px + 16px)",
+    "token": "$mq-xs",
+  },
+  {
+    "name": "mq-sm",
+    "value": "screen and (min-width: 464px + 16px)",
+    "token": "$mq-sm",
+  },
+  {
+    "name": "mq-md",
+    "value": "screen and (min-width: 736px + 32px)",
+    "token": "$mq-md",
+  },
+  {
+    "name": "mq-lg",
+    "value": "screen and (min-width: 992px + 64px)",
+    "token": "$mq-lg",
+  },
+  {
+    "name": "mq-xl",
+    "value": "screen and (min-width: 1248px + 64px)",
+    "token": "$mq-xl",
+  },
+  {
+    "name": "Black",
+    "value": "#000000",
+    "token": "$brand-primary",
+  },
+  {
+    "name": "White",
+    "value": "#ffffff",
+    "token": "$brand-secondary",
+  },
+  {
+    "name": "Neon Blue",
+    "value": "#00ffff",
+    "token": "$brand-neon-blue",
+  },
+  {
+    "name": "Lemon Yellow",
+    "value": "#fff44f",
+    "token": "$brand-lemon-yellow",
+  },
+  {
+    "name": "Warm Red",
+    "value": "#ff4f5e",
+    "token": "$brand-warm-red",
+  },
+  {
+    "name": "Neon Green",
+    "value": "#54ffbd",
+    "token": "$brand-neon-green",
+  },
+  {
+    "name": "Dark Purple",
+    "value": "#6e008b",
+    "token": "$brand-dark-purple",
+  },
+  {
+    "name": "Dark Green",
+    "value": "#005e5e",
+    "token": "$brand-dark-green",
+  },
+  {
+    "name": "Dark Blue",
+    "value": "#00458b",
+    "token": "$brand-dark-blue",
+  },
+  {
+    "name": "Black",
+    "value": "#000000",
+    "token": "$color-black",
+  },
+  {
+    "name": "White",
+    "value": "#ffffff",
+    "token": "$color-white",
+  },
+  {
+    "name": "Cyan 40",
+    "value": "#a2ffff",
+    "token": "$color-cyan-40",
+  },
+  {
+    "name": "Cyan 50",
+    "value": "#00ffff",
+    "token": "$color-cyan-50",
+  },
+  {
+    "name": "Cyan 60",
+    "value": "#00e5e5",
+    "token": "$color-cyan-60",
+  },
+  {
+    "name": "Yellow 40",
+    "value": "#fff9a3",
+    "token": "$color-yellow-40",
+  },
+  {
+    "name": "Yellow 50",
+    "value": "#fff44f",
+    "token": "$color-yellow-50",
+  },
+  {
+    "name": "Yellow 60",
+    "value": "#f7e800",
+    "token": "$color-yellow-60",
+  },
+  {
+    "name": "Red 40",
+    "value": "#fe7c87",
+    "token": "$color-red-40",
+  },
+  {
+    "name": "Red 50",
+    "value": "#ff4f5e",
+    "token": "$color-red-50",
+  },
+  {
+    "name": "Green 60",
+    "value": "#e53c4a",
+    "token": "$color-red-60",
+  },
+  {
+    "name": "Green 40",
+    "value": "#adffdf",
+    "token": "$color-green-40",
+  },
+  {
+    "name": "Green 50",
+    "value": "#54ffbd",
+    "token": "$color-green-50",
+  },
+  {
+    "name": "Green 60",
+    "value": "#2ce69e",
+    "token": "$color-green-60",
+  },
+  {
+    "name": "Teal 40",
+    "value": "#25bcbc",
+    "token": "$color-teal-40",
+  },
+  {
+    "name": "Teal 50",
+    "value": "#0f8f8f",
+    "token": "$color-teal-50",
+  },
+  {
+    "name": "Teal 60",
+    "value": "#005e5e",
+    "token": "$color-teal-60",
+  },
+  {
+    "name": "Purple 40",
+    "value": "#9f54b2",
+    "token": "$color-purple-40",
+  },
+  {
+    "name": "Purple 50",
+    "value": "#6e008b",
+    "token": "$color-purple-50",
+  },
+  {
+    "name": "Purple 60",
+    "value": "#4f0164",
+    "token": "$color-purple-60",
+  },
+  {
+    "name": "Blue 40",
+    "value": "#539ee9",
+    "token": "$color-blue-40",
+  },
+  {
+    "name": "Blue 50",
+    "value": "#2374c6",
+    "token": "$color-blue-50",
+  },
+  {
+    "name": "Blue 60",
+    "value": "#00458b",
+    "token": "$color-blue-60",
+  },
+  {
+    "name": "Gray 10",
+    "value": "#f9f9fa",
+    "token": "$color-gray-10",
+  },
+  {
+    "name": "Gray 20",
+    "value": "#ededf0",
+    "token": "$color-gray-20",
+  },
+  {
+    "name": "Gray 30",
+    "value": "#f5f5f5",
+    "token": "$color-gray-30",
+  },
+  {
+    "name": "Gray 40",
+    "value": "#e7e7e7",
+    "token": "$color-gray-40",
+  },
+  {
+    "name": "Gray 50",
+    "value": "#c8c8c8",
+    "token": "$color-gray-50",
+  },
+  {
+    "name": "Gray 60",
+    "value": "#959595",
+    "token": "$color-gray-60",
+  },
+  {
+    "name": "Gray 70",
+    "value": "#38383d",
+    "token": "$color-gray-70",
+  },
+  {
+    "name": "Gray 80",
+    "value": "#2a2a2e",
+    "token": "$color-gray-80",
+  },
+  {
+    "name": "Gray 90",
+    "value": "#959595",
+    "token": "$color-gray-90",
+  },
+  {
+    "name": "Link",
+    "value": "#0060df",
+    "token": "$color-link",
+  },
+  {
+    "name": "Link:Hover",
+    "value": "#003eaa",
+    "token": "$color-link-hover",
+  },
+  {
+    "name": "Link:Visited",
+    "value": "#8000d7",
+    "token": "$color-link-visited",
+  },
+  {
+    "name": "Link:Visited:Hover",
+    "value": "#6200a4",
+    "token": "$color-link-visited-hover",
+  },
+  {
+    "name": "font-stack-sans",
+    "value": "&#x27;Open Sans&#x27;, X-LocaleSpecific, sans-serif",
+    "token": "$font-stack-sans",
+  },
+  {
+    "name": "font-stack-serif",
+    "value": "&#x27;Zilla Slab&#x27;, &#x27;Open Sans&#x27;, X-LocaleSpecific, serif",
+    "token": "$font-stack-serif",
+  },
+  {
+    "name": "font-stack-mono",
+    "value": "Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace",
+    "token": "$font-stack-mono",
+  },
+  {
+    "name": "Greyscale Gradient",
+    "value": "linear-gradient(90deg, #000000, #ffffff)",
+    "token": "$gradient-greyscale",
+  },
+  {
+    "name": "Firefox Focus Gradient",
+    "value": "linear-gradient(45deg, #4A1475, #671878, #C42482, #FF271D)",
+    "token": "$gradient-focus",
+  },
+  {
+    "name": "Hello World Gradient",
+    "value": "radial-gradient(33deg, #4A1475, #671878, #C42482, #FF271D)",
+    "token": "$gradient-helloworld",
+  },
+  {
+    "name": "spacing-xs",
+    "value": "4px",
+    "token": "$spacing-xs",
+  },
+  {
+    "name": "spacing-sm",
+    "value": "8px",
+    "token": "$spacing-sm",
+  },
+  {
+    "name": "spacing-md",
+    "value": "16px",
+    "token": "$spacing-md",
+  },
+  {
+    "name": "spacing-lg",
+    "value": "24px",
+    "token": "$spacing-lg",
+  },
+  {
+    "name": "spacing-xl",
+    "value": "32px",
+    "token": "$spacing-xl",
+  },
+  {
+    "name": "spacing-2xl",
+    "value": "48px",
+    "token": "$spacing-2xl",
+  },
+  {
+    "name": "spacing-base",
+    "value": "16px",
+    "token": "$spacing-base",
+  },
+  {
+    "name": "padding-xs",
+    "value": "4px",
+    "token": "$padding-xs",
+  },
+  {
+    "name": "padding-sm",
+    "value": "8px",
+    "token": "$padding-sm",
+  },
+  {
+    "name": "padding-md",
+    "value": "16px",
+    "token": "$padding-md",
+  },
+  {
+    "name": "padding-lg",
+    "value": "24px",
+    "token": "$padding-lg",
+  },
+  {
+    "name": "padding-xl",
+    "value": "32px",
+    "token": "$padding-xl",
+  },
+  {
+    "name": "padding-2xl",
+    "value": "48px",
+    "token": "$padding-2xl",
+  },
+  {
+    "name": "padding-base",
+    "value": "16px",
+    "token": "$padding-base",
+  },
+  {
+    "name": "margin-xs",
+    "value": "4px",
+    "token": "$margin-xs",
+  },
+  {
+    "name": "margin-sm",
+    "value": "8px",
+    "token": "$margin-sm",
+  },
+  {
+    "name": "margin-md",
+    "value": "16px",
+    "token": "$margin-md",
+  },
+  {
+    "name": "margin-lg",
+    "value": "24px",
+    "token": "$margin-lg",
+  },
+  {
+    "name": "margin-xl",
+    "value": "32px",
+    "token": "$margin-xl",
+  },
+  {
+    "name": "margin-2xl",
+    "value": "48px",
+    "token": "$margin-2xl",
+  },
+  {
+    "name": "margin-base",
+    "value": "16px",
+    "token": "$margin-base",
+  },
+  {
+    "name": "layout-2xs",
+    "value": "16px",
+    "token": "$layout-2xs",
+  },
+  {
+    "name": "layout-xs",
+    "value": "24px",
+    "token": "$layout-xs",
+  },
+  {
+    "name": "layout-sm",
+    "value": "32px",
+    "token": "$layout-sm",
+  },
+  {
+    "name": "layout-md",
+    "value": "48px",
+    "token": "$layout-md",
+  },
+  {
+    "name": "layout-lg",
+    "value": "24px",
+    "token": "$layout-lg",
+  },
+  {
+    "name": "layout-xl",
+    "value": "32px",
+    "token": "$layout-xl",
+  },
+  {
+    "name": "layout-2xl",
+    "value": "48px",
+    "token": "$layout-2xl",
+  },
+  {
+    "name": "layout-base",
+    "value": "48px",
+    "token": "$layout-base",
+  }
+]
--- a/dist/index.less
+++ b/dist/index.less
@ -0,0 +1,97 @@
+
+@content-xs: "304px";
+@content-sm: "464px";
+@content-md: "736px";
+@content-lg: "992px";
+@content-xl: "1248px";
+@content-max: "1248px";
+@screen-xs: "304px";
+@screen-sm: "464px";
+@screen-md: "736px";
+@screen-lg: "992px";
+@screen-xl: "1248px";
+@mq-xs: "screen and (min-width: 304px + 16px)";
+@mq-sm: "screen and (min-width: 464px + 16px)";
+@mq-md: "screen and (min-width: 736px + 32px)";
+@mq-lg: "screen and (min-width: 992px + 64px)";
+@mq-xl: "screen and (min-width: 1248px + 64px)";
+@brand-primary: #000000;
+@brand-secondary: #ffffff;
+@brand-neon-blue: #00ffff;
+@brand-lemon-yellow: #fff44f;
+@brand-warm-red: #ff4f5e;
+@brand-neon-green: #54ffbd;
+@brand-dark-purple: #6e008b;
+@brand-dark-green: #005e5e;
+@brand-dark-blue: #00458b;
+@color-black: #000000;
+@color-white: #ffffff;
+@color-cyan-40: #a2ffff;
+@color-cyan-50: #00ffff;
+@color-cyan-60: #00e5e5;
+@color-yellow-40: #fff9a3;
+@color-yellow-50: #fff44f;
+@color-yellow-60: #f7e800;
+@color-red-40: #fe7c87;
+@color-red-50: #ff4f5e;
+@color-red-60: #e53c4a;
+@color-green-40: #adffdf;
+@color-green-50: #54ffbd;
+@color-green-60: #2ce69e;
+@color-teal-40: #25bcbc;
+@color-teal-50: #0f8f8f;
+@color-teal-60: #005e5e;
+@color-purple-40: #9f54b2;
+@color-purple-50: #6e008b;
+@color-purple-60: #4f0164;
+@color-blue-40: #539ee9;
+@color-blue-50: #2374c6;
+@color-blue-60: #00458b;
+@color-gray-10: #f9f9fa;
+@color-gray-20: #ededf0;
+@color-gray-30: #f5f5f5;
+@color-gray-40: #e7e7e7;
+@color-gray-50: #c8c8c8;
+@color-gray-60: #959595;
+@color-gray-70: #38383d;
+@color-gray-80: #2a2a2e;
+@color-gray-90: #959595;
+@color-link: #0060df;
+@color-link-hover: #003eaa;
+@color-link-visited: #8000d7;
+@color-link-visited-hover: #6200a4;
+@font-stack-sans: "'Open Sans', X-LocaleSpecific, sans-serif";
+@font-stack-serif: "'Zilla Slab', 'Open Sans', X-LocaleSpecific, serif";
+@font-stack-mono: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace";
+@gradient-greyscale: linear-gradient(90deg, #000000, #ffffff);
+@gradient-focus: linear-gradient(45deg, #4A1475, #671878, #C42482, #FF271D);
+@gradient-helloworld: radial-gradient(33deg, #4A1475, #671878, #C42482, #FF271D);
+@spacing-xs: "4px";
+@spacing-sm: "8px";
+@spacing-md: "16px";
+@spacing-lg: "24px";
+@spacing-xl: "32px";
+@spacing-2xl: "48px";
+@spacing-base: "16px";
+@padding-xs: "4px";
+@padding-sm: "8px";
+@padding-md: "16px";
+@padding-lg: "24px";
+@padding-xl: "32px";
+@padding-2xl: "48px";
+@padding-base: "16px";
+@margin-xs: "4px";
+@margin-sm: "8px";
+@margin-md: "16px";
+@margin-lg: "24px";
+@margin-xl: "32px";
+@margin-2xl: "48px";
+@margin-base: "16px";
+@layout-2xs: "16px";
+@layout-xs: "24px";
+@layout-sm: "32px";
+@layout-md: "48px";
+@layout-lg: "24px";
+@layout-xl: "32px";
+@layout-2xl: "48px";
+@layout-base: "48px";
--- a/dist/index.scss
+++ b/dist/index.scss
@ -0,0 +1,97 @@
+
+$content-xs: "304px";
+$content-sm: "464px";
+$content-md: "736px";
+$content-lg: "992px";
+$content-xl: "1248px";
+$content-max: "1248px";
+$screen-xs: "304px";
+$screen-sm: "464px";
+$screen-md: "736px";
+$screen-lg: "992px";
+$screen-xl: "1248px";
+$mq-xs: "screen and (min-width: 304px + 16px)";
+$mq-sm: "screen and (min-width: 464px + 16px)";
+$mq-md: "screen and (min-width: 736px + 32px)";
+$mq-lg: "screen and (min-width: 992px + 64px)";
+$mq-xl: "screen and (min-width: 1248px + 64px)";
+$brand-primary: #000000;
+$brand-secondary: #ffffff;
+$brand-neon-blue: #00ffff;
+$brand-lemon-yellow: #fff44f;
+$brand-warm-red: #ff4f5e;
+$brand-neon-green: #54ffbd;
+$brand-dark-purple: #6e008b;
+$brand-dark-green: #005e5e;
+$brand-dark-blue: #00458b;
+$color-black: #000000;
+$color-white: #ffffff;
+$color-cyan-40: #a2ffff;
+$color-cyan-50: #00ffff;
+$color-cyan-60: #00e5e5;
+$color-yellow-40: #fff9a3;
+$color-yellow-50: #fff44f;
+$color-yellow-60: #f7e800;
+$color-red-40: #fe7c87;
+$color-red-50: #ff4f5e;
+$color-red-60: #e53c4a;
+$color-green-40: #adffdf;
+$color-green-50: #54ffbd;
+$color-green-60: #2ce69e;
+$color-teal-40: #25bcbc;
+$color-teal-50: #0f8f8f;
+$color-teal-60: #005e5e;
+$color-purple-40: #9f54b2;
+$color-purple-50: #6e008b;
+$color-purple-60: #4f0164;
+$color-blue-40: #539ee9;
+$color-blue-50: #2374c6;
+$color-blue-60: #00458b;
+$color-gray-10: #f9f9fa;
+$color-gray-20: #ededf0;
+$color-gray-30: #f5f5f5;
+$color-gray-40: #e7e7e7;
+$color-gray-50: #c8c8c8;
+$color-gray-60: #959595;
+$color-gray-70: #38383d;
+$color-gray-80: #2a2a2e;
+$color-gray-90: #959595;
+$color-link: #0060df;
+$color-link-hover: #003eaa;
+$color-link-visited: #8000d7;
+$color-link-visited-hover: #6200a4;
+$font-stack-sans: "'Open Sans', X-LocaleSpecific, sans-serif";
+$font-stack-serif: "'Zilla Slab', 'Open Sans', X-LocaleSpecific, serif";
+$font-stack-mono: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace";
+$gradient-greyscale: linear-gradient(90deg, #000000, #ffffff);
+$gradient-focus: linear-gradient(45deg, #4A1475, #671878, #C42482, #FF271D);
+$gradient-helloworld: radial-gradient(33deg, #4A1475, #671878, #C42482, #FF271D);
+$spacing-xs: "4px";
+$spacing-sm: "8px";
+$spacing-md: "16px";
+$spacing-lg: "24px";
+$spacing-xl: "32px";
+$spacing-2xl: "48px";
+$spacing-base: "16px";
+$padding-xs: "4px";
+$padding-sm: "8px";
+$padding-md: "16px";
+$padding-lg: "24px";
+$padding-xl: "32px";
+$padding-2xl: "48px";
+$padding-base: "16px";
+$margin-xs: "4px";
+$margin-sm: "8px";
+$margin-md: "16px";
+$margin-lg: "24px";
+$margin-xl: "32px";
+$margin-2xl: "48px";
+$margin-base: "16px";
+$layout-2xs: "16px";
+$layout-xs: "24px";
+$layout-sm: "32px";
+$layout-md: "48px";
+$layout-lg: "24px";
+$layout-xl: "32px";
+$layout-2xl: "48px";
+$layout-base: "48px";
--- a/dist/units/units.common.js
+++ b/dist/units/units.common.js
@ -0,0 +1,31 @@
+module.exports = {
+  spacingXs: "4px",
+  spacingSm: "8px",
+  spacingMd: "16px",
+  spacingLg: "24px",
+  spacingXl: "32px",
+  spacing2Xl: "48px",
+  spacingBase: "16px",
+  paddingXs: "4px",
+  paddingSm: "8px",
+  paddingMd: "16px",
+  paddingLg: "24px",
+  paddingXl: "32px",
+  padding2Xl: "48px",
+  paddingBase: "16px",
+  marginXs: "4px",
+  marginSm: "8px",
+  marginMd: "16px",
+  marginLg: "24px",
+  marginXl: "32px",
+  margin2Xl: "48px",
+  marginBase: "16px",
+  layout2Xs: "16px",
+  layoutXs: "24px",
+  layoutSm: "32px",
+  layoutMd: "48px",
+  layoutLg: "24px",
+  layoutXl: "32px",
+  layout2Xl: "48px",
+  layoutBase: "48px",
+};
--- a/dist/units/units.custom-properties.css
+++ b/dist/units/units.custom-properties.css
@ -0,0 +1,32 @@
+
+:root {
+  --spacing-xs: "4px";
+  --spacing-sm: "8px";
+  --spacing-md: "16px";
+  --spacing-lg: "24px";
+  --spacing-xl: "32px";
+  --spacing-2xl: "48px";
+  --spacing-base: "16px";
+  --padding-xs: "4px";
+  --padding-sm: "8px";
+  --padding-md: "16px";
+  --padding-lg: "24px";
+  --padding-xl: "32px";
+  --padding-2xl: "48px";
+  --padding-base: "16px";
+  --margin-xs: "4px";
+  --margin-sm: "8px";
+  --margin-md: "16px";
+  --margin-lg: "24px";
+  --margin-xl: "32px";
+  --margin-2xl: "48px";
+  --margin-base: "16px";
+  --layout-2xs: "16px";
+  --layout-xs: "24px";
+  --layout-sm: "32px";
+  --layout-md: "48px";
+  --layout-lg: "24px";
+  --layout-xl: "32px";
+  --layout-2xl: "48px";
+  --layout-base: "48px";
+}
--- a/dist/units/units.json
+++ b/dist/units/units.json
@ -0,0 +1,147 @@
+[
+  {
+    "name": "spacing-xs",
+    "value": "4px",
+    "token": "$spacing-xs",
+  },
+  {
+    "name": "spacing-sm",
+    "value": "8px",
+    "token": "$spacing-sm",
+  },
+  {
+    "name": "spacing-md",
+    "value": "16px",
+    "token": "$spacing-md",
+  },
+  {
+    "name": "spacing-lg",
+    "value": "24px",
+    "token": "$spacing-lg",
+  },
+  {
+    "name": "spacing-xl",
+    "value": "32px",
+    "token": "$spacing-xl",
+  },
+  {
+    "name": "spacing-2xl",
+    "value": "48px",
+    "token": "$spacing-2xl",
+  },
+  {
+    "name": "spacing-base",
+    "value": "16px",
+    "token": "$spacing-base",
+  },
+  {
+    "name": "padding-xs",
+    "value": "4px",
+    "token": "$padding-xs",
+  },
+  {
+    "name": "padding-sm",
+    "value": "8px",
+    "token": "$padding-sm",
+  },
+  {
+    "name": "padding-md",
+    "value": "16px",
+    "token": "$padding-md",
+  },
+  {
+    "name": "padding-lg",
+    "value": "24px",
+    "token": "$padding-lg",
+  },
+  {
+    "name": "padding-xl",
+    "value": "32px",
+    "token": "$padding-xl",
+  },
+  {
+    "name": "padding-2xl",
+    "value": "48px",
+    "token": "$padding-2xl",
+  },
+  {
+    "name": "padding-base",
+    "value": "16px",
+    "token": "$padding-base",
+  },
+  {
+    "name": "margin-xs",
+    "value": "4px",
+    "token": "$margin-xs",
+  },
+  {
+    "name": "margin-sm",
+    "value": "8px",
+    "token": "$margin-sm",
+  },
+  {
+    "name": "margin-md",
+    "value": "16px",
+    "token": "$margin-md",
+  },
+  {
+    "name": "margin-lg",
+    "value": "24px",
+    "token": "$margin-lg",
+  },
+  {
+    "name": "margin-xl",
+    "value": "32px",
+    "token": "$margin-xl",
+  },
+  {
+    "name": "margin-2xl",
+    "value": "48px",
+    "token": "$margin-2xl",
+  },
+  {
+    "name": "margin-base",
+    "value": "16px",
+    "token": "$margin-base",
+  },
+  {
+    "name": "layout-2xs",
+    "value": "16px",
+    "token": "$layout-2xs",
+  },
+  {
+    "name": "layout-xs",
+    "value": "24px",
+    "token": "$layout-xs",
+  },
+  {
+    "name": "layout-sm",
+    "value": "32px",
+    "token": "$layout-sm",
+  },
+  {
+    "name": "layout-md",
+    "value": "48px",
+    "token": "$layout-md",
+  },
+  {
+    "name": "layout-lg",
+    "value": "24px",
+    "token": "$layout-lg",
+  },
+  {
+    "name": "layout-xl",
+    "value": "32px",
+    "token": "$layout-xl",
+  },
+  {
+    "name": "layout-2xl",
+    "value": "48px",
+    "token": "$layout-2xl",
+  },
+  {
+    "name": "layout-base",
+    "value": "48px",
+    "token": "$layout-base",
+  }
+]
--- a/dist/units/units.less
+++ b/dist/units/units.less
@ -0,0 +1,30 @@
+
+@spacing-xs: "4px";
+@spacing-sm: "8px";
+@spacing-md: "16px";
+@spacing-lg: "24px";
+@spacing-xl: "32px";
+@spacing-2xl: "48px";
+@spacing-base: "16px";
+@padding-xs: "4px";
+@padding-sm: "8px";
+@padding-md: "16px";
+@padding-lg: "24px";
+@padding-xl: "32px";
+@padding-2xl: "48px";
+@padding-base: "16px";
+@margin-xs: "4px";
+@margin-sm: "8px";
+@margin-md: "16px";
+@margin-lg: "24px";
+@margin-xl: "32px";
+@margin-2xl: "48px";
+@margin-base: "16px";
+@layout-2xs: "16px";
+@layout-xs: "24px";
+@layout-sm: "32px";
+@layout-md: "48px";
+@layout-lg: "24px";
+@layout-xl: "32px";
+@layout-2xl: "48px";
+@layout-base: "48px";
--- a/dist/units/units.scss
+++ b/dist/units/units.scss
@ -0,0 +1,30 @@
+
+$spacing-xs: "4px";
+$spacing-sm: "8px";
+$spacing-md: "16px";
+$spacing-lg: "24px";
+$spacing-xl: "32px";
+$spacing-2xl: "48px";
+$spacing-base: "16px";
+$padding-xs: "4px";
+$padding-sm: "8px";
+$padding-md: "16px";
+$padding-lg: "24px";
+$padding-xl: "32px";
+$padding-2xl: "48px";
+$padding-base: "16px";
+$margin-xs: "4px";
+$margin-sm: "8px";
+$margin-md: "16px";
+$margin-lg: "24px";
+$margin-xl: "32px";
+$margin-2xl: "48px";
+$margin-base: "16px";
+$layout-2xs: "16px";
+$layout-xs: "24px";
+$layout-sm: "32px";
+$layout-md: "48px";
+$layout-lg: "24px";
+$layout-xl: "32px";
+$layout-2xl: "48px";
+$layout-base: "48px";
--- a/gulp/_default.js
+++ b/gulp/_default.js
@ -0,0 +1,30 @@
+const gulp = require('gulp')
+const theo = require('theo')
+const runSequence = require('run-sequence')
+
+// Universal Formats
+theo.registerFormat('json', `[
+ {{~#each props as |prop|}}
+ {{~#if prop.comment}}// {{{prop.comment}}}{{/if}}
+  {
+    {{#if prop.meta.friendlyName}}
+    "name": "{{prop.meta.friendlyName}}",
+    {{else}}
+    "name": "{{prop.name}}",
+    {{/if}}
+    "value": "{{prop.value}}",
+    "token": "\${{prop.name}}",
+  }{{#unless @last}},{{/unless}}{{/each}}
+]
+`)
+
+gulp.task('default', (done) => {
+  runSequence([
+    '_index',
+    'breakpoints',
+    'colors',
+    'gradients',
+    'font-stack',
+    'units'
+  ], done)
+});
--- a/gulp/_index.js
+++ b/gulp/_index.js
@ -0,0 +1,26 @@
+const gulp = require('gulp')
+const gulpTheo = require('gulp-theo')
+const rename = require('gulp-rename')
+
+// Formats with hex values
+const indexFormats = [
+  'custom-properties.css',
+  'common.js',
+  'less',
+  'json',
+  'scss'
+];
+
+gulp.task('_index', () => {
+  indexFormats.map((format) => {
+    gulp.src('tokens/_index.yml')
+    .pipe(gulpTheo({
+      transform: { includeMeta: true },
+      format: { type: format }
+    }))
+    .pipe(rename(function(path) {
+      path.basename = "index";
+    }))
+    .pipe(gulp.dest('dist/'))
+  });
+});
--- a/gulp/breakpoints.js
+++ b/gulp/breakpoints.js
@ -0,0 +1,22 @@
+const gulp = require('gulp')
+const gulpTheo = require('gulp-theo')
+
+// Formats with hex values
+const unitsFormats = [
+  'custom-properties.css',
+  'common.js',
+  'json',
+  'less',
+  'scss'
+];
+
+gulp.task('breakpoints', () => {
+  unitsFormats.map((format) => {
+    gulp.src('tokens/breakpoints.yml')
+    .pipe(gulpTheo({
+      transform: { includeMeta: true },
+      format: { type: format }
+    }))
+    .pipe(gulp.dest('dist/breakpoints'))
+  });
+});
--- a/gulp/colors.js
+++ b/gulp/colors.js
@ -0,0 +1,129 @@
+const gulp = require('gulp')
+const gulpTheo = require('gulp-theo')
+const theo = require('theo')
+const path = require('path')
+const runSequence = require('run-sequence')
+const rename = require('gulp-rename')
+
+theo.registerFormat('colors.android.xml', `<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  {{~#each props as |prop|}}
+  {{#if prop.comment}}// {{{prop.comment}}}{{/if}}
+  <color name="{{replace prop.name '-' '_'}}">{{prop.value}}</color>{{/each}}
+</resources>
+`)
+
+theo.registerFormat('colors.swift', `extension UIColor {
+  struct Protocol {
+    {{#each props as |prop|}}
+      static let {{prop.name}} = UIColor(rgb: 0x{{replace prop.value '#' ''}})
+    {{/each}}
+  }
+}
+`)
+
+theo.registerFormat('colors.soc', `<?xml version="1.0" encoding="UTF-8"?>
+<ooo:color-table
+  xmlns:office="urn:oasis:names:tc:opendocument:xmlns:office:1.0"
+  xmlns:draw="urn:oasis:names:tc:opendocument:xmlns:drawing:1.0"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  xmlns:ooo="http://openoffice.org/2004/office">
+  {{#each props as |prop|}}
+  {{#if prop.comment}}<!-- {{{prop.comment}}} -->{{/if}}
+  <draw:color draw:name="{{prop.name}}" draw:color="{{prop.value}}" />
+  {{/each}}
+</ooo:color-table>
+`)
+
+// GPL: Convert strings to title case
+String.prototype.toProperCase = function () {
+    return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
+};
+
+// GPL: Run multiple replace functions on a single value
+theo.registerFormat('gpl', result => {
+  return `GIMP Palette
+Name: Protocol Colors
+  ${result
+    .get('props')
+    .map( prop => `
+${prop.get('value').replace('rgb(', '').replace(')', '')} ${prop.get('name').replace(/-/g, ' ')}`)
+    // convert to js for proper formatting
+    .toJS()
+    // convert to string to run replace function
+    .toString()
+    // replace commas created by .toJS
+    .replace(/,/g, '')
+    .toProperCase()
+    }
+`;
+});
+
+// Formats with hex values
+const colorsFormats = [
+  'custom-properties.css',
+  'common.js',
+  'json',
+  'less',
+  'scss',
+  'colors.soc'
+];
+
+gulp.task('colors:raw', () => {
+  colorsFormats.map((format) => {
+    gulp.src('tokens/colors.yml')
+    .pipe(gulpTheo({
+      transform: { includeMeta: true },
+      format: { type: format }
+    }))
+    .pipe(gulp.dest('dist/colors'))
+  });
+});
+
+// Formats with rgb() values
+gulp.task('colors:web', () => {
+  gulp.src('tokens/colors.yml')
+  .pipe(gulpTheo({
+    transform: { type: 'web' },
+    format: { type: 'gpl' }
+  }))
+  .pipe(gulp.dest('dist/colors'))
+});
+
+// Formats with 8-digit hex values
+gulp.task('colors:android', () => {
+  gulp.src('tokens/colors.yml')
+  .pipe(gulpTheo({
+    transform: { type: 'android' },
+    format: { type: 'colors.android.xml' }
+  }))
+  .pipe(rename(opt=> {
+    opt.basename = opt.basename.replace('colors.', '');
+    return opt;
+  }))
+  .pipe(gulp.dest('dist/colors'))
+});
+
+// Formats with 8-digit hex values
+gulp.task('colors:swift', () => {
+  gulp.src('tokens/colors.yml')
+  .pipe(gulpTheo({
+    format: { type: 'colors.swift' }
+  }))
+  .pipe(rename(opt => {
+    opt.basename = opt.basename.replace('colors.', '');
+    return opt;
+  }))
+  .pipe(gulp.dest('dist/colors'))
+});
+
+// All formats
+gulp.task('colors', (done) => {
+  runSequence([
+    'colors:raw',
+    'colors:web',
+    'colors:android',
+    'colors:swift'
+  ], done)
+});
--- a/gulp/font-stack.js
+++ b/gulp/font-stack.js
@ -0,0 +1,22 @@
+const gulp = require('gulp')
+const gulpTheo = require('gulp-theo')
+
+// Formats with hex values
+const unitsFormats = [
+  'custom-properties.css',
+  'common.js',
+  'json',
+  'less',
+  'scss'
+];
+
+gulp.task('font-stack', () => {
+  unitsFormats.map(format => {
+    gulp.src('tokens/font-stack.yml')
+    .pipe(gulpTheo({
+      transform: { includeMeta: true },
+      format: { type: format }
+    }))
+    .pipe(gulp.dest('dist/font-stack'))
+  });
+});
--- a/gulp/gradients.js
+++ b/gulp/gradients.js
@ -0,0 +1,200 @@
+const gulp = require('gulp')
+const gulpTheo = require('gulp-theo')
+const theo = require('theo')
+const runSequence = require('run-sequence')
+const rename = require('gulp-rename')
+
+theo.registerFormat('gradients.android.xml', result => {
+  return `<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  ${result
+    .get('props')
+    .map( prop => {
+
+      // Get a single hex values from a string with multiple hex values
+      function getColor(position) {
+          return prop.get('meta').get('value').slice(position, prop.get('meta').get('value').indexOf(',') + position)
+      }
+
+      // Display this content for radial gradients
+      function isRadial() {
+        if (prop.get('meta').get('type') === "radial") {
+          return 'android:gradientRadius="100%p" />'
+        } else {
+          return '/>'
+        }
+      }
+
+      // Return gradients with three colors
+      if (prop.get('meta').get('value').length === 25) {
+          // Return three color gradients
+          return `<item android:id="@+id/${prop.get('name').replace(/-/g, '_')}">
+    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+      <gradient
+        android:angle="${prop.get('meta').get('angle')}"
+        android:startColor="${getColor(0)}"
+        android:centerColor="${getColor(9)}"
+        android:endColor="${getColor(18)}"
+        android:type="${prop.get('meta').get('type')}"
+        ${isRadial()}
+      </gradient>
+    </shape>
+  </item>`
+    }
+
+    // Return three color radial gradients
+    else if (prop.get('meta').get('value').length === 16) {
+        // Return two color gradients
+        return `<item android:id="@+id/${prop.get('name').replace(/-/g, '_')}">
+  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+    <gradient
+      android:angle="${prop.get('meta').get('angle')}"
+      android:startColor="${getColor(0)}"
+      android:endColor="${getColor(9)}"
+      android:type="${prop.get('meta').get('type')}"
+      ${isRadial()}
+    </gradient>
+  </shape>
+  </item>`
+  }
+
+  // Return empty string for gradients with more than three colors
+  // https://stackoverflow.com/questions/14020530/using-a-gradientdrawable-with-more-than-three-colors-set
+  else {
+      return `
+  <!-- ${prop.get('name')} has more than three colors and could not be generated -->
+  `
+    }
+  })
+    // convert to js for proper formatting
+    .toJS()
+    // convert to string to run replace function
+    .toString()
+    // replace commas created by .toJS
+    .replace(/,/g, '')
+    }
+</layer-list>`;
+});
+
+
+theo.registerFormat('gradients.swift', result => {
+  return `extension UIColor {
+  ${result
+    .get('props')
+    .map( prop => {
+
+      // Get a single hex values from a string with multiple hex values
+      function getColor(position) {
+          return `0x${prop.get('meta').get('value').slice(position, prop.get('meta').get('value').indexOf(',') + position).replace(/#/g , '').replace(/,/ , '')}`
+      }
+
+      // Create variables from hex values
+      function stringLength() {
+        // Four Values
+        if (prop.get('meta').get('value').length === 34) {
+          return `
+      let color${getColor(0)} = UIColor(${getColor(0)})
+      let color${getColor(9)} = UIColor(${getColor(9)})
+      let color${getColor(18)} = UIColor(${getColor(18)})
+      let color${getColor(27)} = UIColor(${getColor(27)})
+
+      layer.colors = [color${getColor(0)}, color${getColor(9)}, color${getColor(18)}, color${getColor(27)}]
+        `}
+        // Three Values
+        if (prop.get('meta').get('value').length === 25) {
+          return `
+      let color${getColor(0)} = UIColor(${getColor(0)})
+      let color${getColor(9)} = UIColor(${getColor(9)})
+      let color${getColor(18)} = UIColor(${getColor(18)})
+
+      layer.colors = [color${getColor(0)}, color${getColor(9)}, color${getColor(18)}]
+        `}
+        // Two values
+        else if (prop.get('meta').get('value').length === 16) {
+          return `
+      let color${getColor(0)} = UIColor(${getColor(0)})
+      let color${getColor(9)} = UIColor(${getColor(9)})
+
+      layer.colors = [color${getColor(0)}, color${getColor(9)}]
+        `}
+        // More than four values
+        else {
+         return `<!-- ${prop.get('name')} has more than three colors and could not be generated -->`
+       }
+      }
+
+      return `
+    func ${prop.get('name')}() {
+      let layer : CAGradientLayer = CAGradientLayer()
+      layer.frame.size = self.frame.size
+      layer.frame.origin = CGPointZero
+      layer.cornerRadius = CGFloat(frame.width / 20)
+
+      ${stringLength()}
+
+      self.layer.insertSublayer(layer, atIndex: 0)
+    }`
+    })
+    // convert to js for proper formatting
+    .toJS()
+    // convert to string to run replace function
+    .toString()
+
+    .replace(/},/g, '}').replace(/>,/g, '>')
+    }
+}`;
+});
+
+const gradientsFormats = [
+  'custom-properties.css',
+  'common.js',
+  'less',
+  'scss',
+  'json'
+];
+
+gulp.task('gradients:raw', () => {
+  gradientsFormats.map((format) => {
+    gulp.src('tokens/gradients.yml')
+    .pipe(gulpTheo({
+      transform: { includeMeta: true },
+      format: { type: format }
+    }))
+    .pipe(gulp.dest('dist/gradients'))
+  });
+});
+
+gulp.task('gradients:android', () => {
+  gulp.src('tokens/gradients.yml')
+  .pipe(gulpTheo({
+    transform: { includeMeta: true },
+    format: { type: 'gradients.android.xml' }
+  }))
+  .pipe(rename(opt => {
+    opt.basename = opt.basename.replace('gradients.', '');
+    return opt;
+  }))
+  .pipe(gulp.dest('dist/gradients'))
+});
+
+gulp.task('gradients:swift', () => {
+  gulp.src('tokens/gradients.yml')
+  .pipe(gulpTheo({
+    transform: { includeMeta: true },
+    format: { type: 'gradients.swift' }
+  }))
+  .pipe(rename(opt => {
+    opt.basename = opt.basename.replace('gradients.', '');
+    return opt;
+  }))
+  .pipe(gulp.dest('dist/gradients'))
+});
+
+// All formats
+gulp.task('gradients', (done) => {
+  runSequence([
+    'gradients:raw',
+    'gradients:android',
+    'gradients:swift'
+  ], done)
+});
--- a/gulp/units.js
+++ b/gulp/units.js
@ -0,0 +1,23 @@
+const gulp = require('gulp')
+const gulpTheo = require('gulp-theo')
+const rename = require('gulp-rename')
+
+// Formats with hex values
+const unitsFormats = [
+  'custom-properties.css',
+  'common.js',
+  'less',
+  'json',
+  'scss'
+];
+
+gulp.task('units', () => {
+  unitsFormats.map((format) => {
+    gulp.src('tokens/units.yml')
+    .pipe(gulpTheo({
+      transform: { includeMeta: true },
+      format: { type: format }
+    }))
+    .pipe(gulp.dest('dist/units'))
+  });
+});
--- a/gulpfile.js
+++ b/gulpfile.js
@ -0,0 +1,4 @@
+// gulpfile.js
+const requireDir = require('require-dir')
+
+requireDir('./gulp', { recurse: true });
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,39 @@
+{
+  "name": "@mozilla-protocol/tokens",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Design tokens for Protocol, Mozilla’s design system",
+  "main": "colors/protocol-colors.js",
+  "style": "protocol-colors.scss",
+  "scripts": {
+    "lint-css": "./node_modules/.bin/stylelint '**/*.css' '**/*.scss'",
+    "pre-test": "npm run lint-css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mozilla/protocol-design-tokens.git"
+  },
+  "keywords": [
+    "design",
+    "system",
+    "tokens",
+    "colors",
+    "variables"
+  ],
+  "author": "Mozilla",
+  "license": "MPL-2.0",
+  "bugs": {
+    "url": "https://github.com/mozilla/protocol-design-tokens/issues"
+  },
+  "homepage": "https://github.com/mozilla/protocol-design-tokens#readme",
+  "devDependencies": {
+    "eslint": "^4.19.1",
+    "gulp": "^3.9.1",
+    "gulp-rename": "^1.2.2",
+    "gulp-theo": "^2.0.0-beta.1",
+    "require-dir": "^1.0.0",
+    "run-sequence": "^2.2.1",
+    "stylelint": "^9.2.0",
+    "theo": "^7.0.1"
+  }
+}
--- a/stylelint.config.js
+++ b/stylelint.config.js
@ -0,0 +1,40 @@
+module.exports = {
+    'rules': {
+        'color-no-invalid-hex': true,
+        'font-family-no-duplicate-names': true,
+        'font-family-name-quotes': 'always-where-recommended',
+        'function-name-case': 'lower',
+        'function-url-no-scheme-relative': true,
+        'function-url-quotes': 'always',
+        'number-no-trailing-zeros': true,
+        'length-zero-no-unit': true,
+        'unit-case': 'lower',
+        'unit-no-unknown': true,
+        'property-case': 'lower',
+        'property-no-unknown': true,
+        'keyframe-declaration-no-important': true,
+        'declaration-no-important': true,
+        'declaration-block-no-shorthand-property-overrides': true,
+        'declaration-block-single-line-max-declarations': 1,
+        'declaration-block-trailing-semicolon': 'always',
+        'declaration-block-semicolon-newline-after': 'always-multi-line',
+        'block-no-empty': true,
+        'selector-pseudo-class-no-unknown': true,
+        'selector-pseudo-element-no-unknown': true,
+        'selector-pseudo-element-case': 'lower',
+        'selector-type-case': 'lower',
+        'selector-type-no-unknown': true,
+        'selector-max-empty-lines': 0,
+        'media-feature-name-case': 'lower',
+        'media-feature-name-no-unknown': [true, {
+            ignoreMediaFeatureNames: ['min--moz-device-pixel-ratio']
+        }],
+        'comment-no-empty': true,
+        'max-nesting-depth': 5,
+        'no-invalid-double-slash-comments': true,
+        'no-unknown-animations': true,
+        'no-extra-semicolons': true,
+        'no-missing-end-of-source-newline': true,
+        'no-eol-whitespace': true
+    }
+};
--- a/tokens/_aliases.yml
+++ b/tokens/_aliases.yml
@ -0,0 +1,122 @@
+aliases:
+
+  # Mozilla Brand Colors
+
+  brand-primary: '{!color-black}'
+  brand-secondary: '{!color-white}'
+  brand-neon-blue: '{!color-cyan-50}'
+  brand-lemon-yellow: '{!color-yellow-50}'
+  brand-warm-red: '{!color-red-50}'
+  brand-neon-green: '{!color-green-50}'
+  brand-dark-purple: '{!color-purple-50}'
+  brand-dark-green: '{!color-teal-60}'
+  brand-dark-blue: '{!color-blue-60}'
+
+  # UI Colors
+
+  color-black: '#000000'
+  color-white: '#ffffff'
+
+  color-cyan-40: '#a2ffff'
+  color-cyan-50: '#00ffff'
+  color-cyan-60: '#00e5e5'
+
+  color-yellow-40: '#fff9a3'
+  color-yellow-50: '#fff44f'
+  color-yellow-60: '#f7e800'
+
+  color-red-40: '#fe7c87'
+  color-red-50: '#ff4f5e'
+  color-red-60: '#e53c4a'
+
+  color-green-40: '#adffdf'
+  color-green-50: '#54ffbd'
+  color-green-60: '#2ce69e'
+
+  color-teal-40: '#25bcbc'
+  color-teal-50: '#0f8f8f'
+  color-teal-60: '#005e5e'
+
+  color-purple-40: '#9f54b2'
+  color-purple-50: '#6e008b'
+  color-purple-60: '#4f0164'
+
+  color-blue-40: '#539ee9'
+  color-blue-50: '#2374c6'
+  color-blue-60: '#00458b'
+
+  color-gray-10: '#f9f9fa'
+  color-gray-20: '#ededf0'
+  color-gray-30: '#f5f5f5'
+  color-gray-40: '#e7e7e7'
+  color-gray-50: '#c8c8c8'
+  color-gray-60: '#959595'
+  color-gray-70: '#38383d'
+  color-gray-80: '#2a2a2e'
+  color-gray-90: '#0c0c0d'
+
+  # Link Colors
+
+  color-link: '#0060df'
+  color-link-hover: '#003eaa'
+  color-link-visited: '#8000d7'
+  color-link-visited-hover: '#6200a4'
+
+  # Units
+  spacing-xs: '4px'
+  spacing-sm: '8px'
+  spacing-md: '16px'
+  spacing-lg: '24px'
+  spacing-xl: '32px'
+  spacing-2xl: '48px'
+  spacing-base: '{!spacing-md}'
+
+  padding-xs: '{!spacing-xs}'
+  padding-sm: '{!spacing-sm}'
+  padding-md: '{!spacing-md}'
+  padding-lg: '{!spacing-lg}'
+  padding-xl: '{!spacing-xl}'
+  padding-2xl: '{!spacing-2xl}'
+  padding-base: '{!spacing-base}'
+
+  margin-xs: '{!spacing-xs}'
+  margin-sm: '{!spacing-sm}'
+  margin-md: '{!spacing-md}'
+  margin-lg: '{!spacing-lg}'
+  margin-xl: '{!spacing-xl}'
+  margin-2xl: '{!spacing-2xl}'
+  margin-base: '{!spacing-base}'
+
+  layout-2xs: '16px'
+  layout-xs: '24px'
+  layout-sm: '32px'
+  layout-md: '48px'
+  layout-lg: '64px'
+  layout-xl: '96px'
+  layout-2xl: '160px'
+  layout-base: '{!layout-md}'
+
+  # Breakpoints
+  content-xs: '304px'
+  content-sm: '464px'
+  content-md: '736px'
+  content-lg: '992px'
+  content-xl: '1248px'
+  content-max: '{!content-xl}'
+
+  screen-xs: '{!content-xs} + 16px'
+  screen-sm: '{!content-sm} + 16px'
+  screen-md: '{!content-md} + 32px'
+  screen-lg: '{!content-lg} + 64px'
+  screen-xl: '{!content-xl} + 64px'
+
+  mq-xs: 'screen and (min-width: {!screen-xs})'
+  mq-sm: 'screen and (min-width: {!screen-sm})'
+  mq-md: 'screen and (min-width: {!screen-md})'
+  mq-lg: 'screen and (min-width: {!screen-lg})'
+  mq-xl: 'screen and (min-width: {!screen-xl})'
+
+  # Font Stack
+  font-stack-sans: "'Open Sans', X-LocaleSpecific, sans-serif"
+  font-stack-serif: "'Zilla Slab', 'Open Sans', X-LocaleSpecific, serif"
+  font-stack-mono: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace"
--- a/tokens/_index.yml
+++ b/tokens/_index.yml
@ -0,0 +1,6 @@
+imports:
+  - ./breakpoints.yml
+  - ./colors.yml
+  - ./font-stack.yml
+  - ./gradients.yml
+  - ./units.yml
--- a/tokens/breakpoints.yml
+++ b/tokens/breakpoints.yml
@ -0,0 +1,41 @@
+global:
+  type: string
+  category: width
+imports:
+  - ./_aliases.yml
+props:
+
+  - name: 'content-xs'
+    value: '{!content-xs}'
+  - name: 'content-sm'
+    value: '{!content-sm}'
+  - name: 'content-md'
+    value: '{!content-md}'
+  - name: 'content-lg'
+    value: '{!content-lg}'
+  - name: 'content-xl'
+    value: '{!content-xl}'
+  - name: 'content-max'
+    value: '{!content-max}'
+
+  - name: 'screen-xs'
+    value: '{!content-xs}'
+  - name: 'screen-sm'
+    value: '{!content-sm}'
+  - name: 'screen-md'
+    value: '{!content-md}'
+  - name: 'screen-lg'
+    value: '{!content-lg}'
+  - name: 'screen-xl'
+    value: '{!content-xl}'
+
+  - name: 'mq-xs'
+    value: '{!mq-xs}'
+  - name: 'mq-sm'
+    value: '{!mq-sm}'
+  - name: 'mq-md'
+    value: '{!mq-md}'
+  - name: 'mq-lg'
+    value: '{!mq-lg}'
+  - name: 'mq-xl'
+    value: '{!mq-xl}'
--- a/tokens/colors.yml
+++ b/tokens/colors.yml
@ -0,0 +1,196 @@
+global:
+  type: color
+  category: background-color
+imports:
+  - ./_aliases.yml
+props:
+
+  # Mozilla Brand Colors
+
+  - name: brand-primary
+    value: '{!brand-primary}'
+    meta:
+      friendlyName: Black
+  - name: brand-secondary
+    value: '{!brand-secondary}'
+    meta:
+      friendlyName: White
+  - name: brand-neon-blue
+    value: '{!brand-neon-blue}'
+    meta:
+      friendlyName: Neon Blue
+  - name: brand-lemon-yellow
+    value: '{!brand-lemon-yellow}'
+    meta:
+      friendlyName: Lemon Yellow
+  - name: brand-warm-red
+    value: '{!brand-warm-red}'
+    meta:
+      friendlyName: Warm Red
+  - name: brand-neon-green
+    value: '{!brand-neon-green}'
+    meta:
+      friendlyName: Neon Green
+  - name: brand-dark-purple
+    value: '{!brand-dark-purple}'
+    meta:
+      friendlyName: Dark Purple
+  - name: brand-dark-green
+    value: '{!brand-dark-green}'
+    meta:
+      friendlyName: Dark Green
+  - name: brand-dark-blue
+    value: '{!brand-dark-blue}'
+    meta:
+      friendlyName: Dark Blue
+
+  # UI Colors
+
+  - name: color-black
+    value: '{!color-black}'
+    meta:
+      friendlyName: Black
+  - name: color-white
+    value: '{!color-white}'
+    meta:
+      friendlyName: White
+  - name: color-cyan-40
+    value: '{!color-cyan-40}'
+    meta:
+      friendlyName: Cyan 40
+  - name: color-cyan-50
+    value: '{!color-cyan-50}'
+    meta:
+      friendlyName: Cyan 50
+  - name: color-cyan-60
+    value: '{!color-cyan-60}'
+    meta:
+      friendlyName: Cyan 60
+  - name: color-yellow-40
+    value: '{!color-yellow-40}'
+    meta:
+      friendlyName: Yellow 40
+  - name: color-yellow-50
+    value: '{!color-yellow-50}'
+    meta:
+      friendlyName: Yellow 50
+  - name: color-yellow-60
+    value: '{!color-yellow-60}'
+    meta:
+      friendlyName: Yellow 60
+  - name: color-red-40
+    value: '{!color-red-40}'
+    meta:
+      friendlyName: Red 40
+  - name: color-red-50
+    value: '{!color-red-50}'
+    meta:
+      friendlyName: Red 50
+  - name: color-red-60
+    value: '{!color-red-60}'
+    meta:
+      friendlyName: Green 60
+  - name: color-green-40
+    value: '{!color-green-40}'
+    meta:
+      friendlyName: Green 40
+  - name: color-green-50
+    value: '{!color-green-50}'
+    meta:
+      friendlyName: Green 50
+  - name: color-green-60
+    value: '{!color-green-60}'
+    meta:
+      friendlyName: Green 60
+  - name: color-teal-40
+    value: '{!color-teal-40}'
+    meta:
+      friendlyName: Teal 40
+  - name: color-teal-50
+    value: '{!color-teal-50}'
+    meta:
+      friendlyName: Teal 50
+  - name: color-teal-60
+    value: '{!color-teal-60}'
+    meta:
+      friendlyName: Teal 60
+  - name: color-purple-40
+    value: '{!color-purple-40}'
+    meta:
+      friendlyName: Purple 40
+  - name: color-purple-50
+    value: '{!color-purple-50}'
+    meta:
+      friendlyName: Purple 50
+  - name: color-purple-60
+    value: '{!color-purple-60}'
+    meta:
+      friendlyName: Purple 60
+  - name: color-blue-40
+    value: '{!color-blue-40}'
+    meta:
+      friendlyName: Blue 40
+  - name: color-blue-50
+    value: '{!color-blue-50}'
+    meta:
+      friendlyName: Blue 50
+  - name: color-blue-60
+    value: '{!color-blue-60}'
+    meta:
+      friendlyName: Blue 60
+
+  - name: color-gray-10
+    value: '{!color-gray-10}'
+    meta:
+      friendlyName: Gray 10
+  - name: color-gray-20
+    value: '{!color-gray-20}'
+    meta:
+      friendlyName: Gray 20
+  - name: color-gray-30
+    value: '{!color-gray-30}'
+    meta:
+      friendlyName: Gray 30
+  - name: color-gray-40
+    value: '{!color-gray-40}'
+    meta:
+      friendlyName: Gray 40
+  - name: color-gray-50
+    value: '{!color-gray-50}'
+    meta:
+      friendlyName: Gray 50
+  - name: color-gray-60
+    value: '{!color-gray-60}'
+    meta:
+      friendlyName: Gray 60
+  - name: color-gray-70
+    value: '{!color-gray-70}'
+    meta:
+      friendlyName: Gray 70
+  - name: color-gray-80
+    value: '{!color-gray-80}'
+    meta:
+      friendlyName: Gray 80
+  - name: color-gray-90
+    value: '{!color-gray-60}'
+    meta:
+      friendlyName: Gray 90
+
+  # Link Colors
+
+  - name: color-link
+    value: '{!color-link}'
+    meta:
+      friendlyName: Link
+  - name: color-link-hover
+    value: '{!color-link-hover}'
+    meta:
+      friendlyName: Link:Hover
+  - name: color-link-visited
+    value: '{!color-link-visited}'
+    meta:
+      friendlyName: Link:Visited
+  - name: color-link-visited-hover
+    value: '{!color-link-visited-hover}'
+    meta:
+      friendlyName: Link:Visited:Hover
--- a/tokens/font-stack.yml
+++ b/tokens/font-stack.yml
@ -0,0 +1,12 @@
+global:
+  type: string
+  category: font-family
+imports:
+  - ./_aliases.yml
+props:
+  - name: font-stack-sans
+    value: '{!font-stack-sans}'
+  - name: font-stack-serif
+    value: '{!font-stack-serif}'
+  - name: font-stack-mono
+    value: '{!font-stack-mono}'
--- a/tokens/gradients.yml
+++ b/tokens/gradients.yml
@ -0,0 +1,29 @@
+# Note: aliases can't be referenced in meta values
+
+global:
+  type: color
+  category: background-color
+imports:
+  - ./_aliases.yml
+props:
+  - name: gradient-greyscale
+    value: 'linear-gradient(90deg, {!color-black}, {!color-white})'
+    meta:
+      friendlyName: Greyscale Gradient
+      type: 'linear'
+      angle: '90deg'
+      value: '#000000, #FFFFFF'
+  - name: gradient-focus
+    value: 'linear-gradient(45deg, #4A1475, #671878, #C42482, #FF271D)'
+    meta:
+      friendlyName: Firefox Focus Gradient
+      type: 'linear'
+      angle: '45deg'
+      value: '#4A1475, #671878, #C42482, #FF271D'
+  - name: gradient-helloworld
+    value: 'radial-gradient(33deg, #4A1475, #671878, #C42482, #FF271D)'
+    meta:
+      friendlyName: Hello World Gradient
+      type: 'radial'
+      angle: '33deg'
+      value: '#4A1475, #671878, #C42482'
--- a/tokens/units.yml
+++ b/tokens/units.yml
@ -0,0 +1,69 @@
+# Note: aliases can't be referenced in meta values
+
+global:
+  type: string
+  category: padding
+imports:
+  - ./_aliases.yml
+props:
+  - name: spacing-xs
+    value: '{!spacing-xs}'
+  - name: spacing-sm
+    value: '{!spacing-sm}'
+  - name: spacing-md
+    value: '{!spacing-md}'
+  - name: spacing-lg
+    value: '{!spacing-lg}'
+  - name: spacing-xl
+    value: '{!spacing-xl}'
+  - name: spacing-2xl
+    value: '{!spacing-2xl}'
+  - name: spacing-base
+    value: '{!spacing-base}'
+
+  - name: padding-xs
+    value: '{!padding-xs}'
+  - name: padding-sm
+    value: '{!padding-sm}'
+  - name: padding-md
+    value: '{!padding-md}'
+  - name: padding-lg
+    value: '{!padding-lg}'
+  - name: padding-xl
+    value: '{!padding-xl}'
+  - name: padding-2xl
+    value: '{!padding-2xl}'
+  - name: padding-base
+    value: '{!padding-base}'
+
+  - name: margin-xs
+    value: '{!margin-xs}'
+  - name: margin-sm
+    value: '{!margin-sm}'
+  - name: margin-md
+    value: '{!margin-md}'
+  - name: margin-lg
+    value: '{!margin-lg}'
+  - name: margin-xl
+    value: '{!margin-xl}'
+  - name: margin-2xl
+    value: '{!margin-2xl}'
+  - name: margin-base
+    value: '{!margin-base}'
+
+  - name: layout-2xs
+    value: '{!layout-2xs}'
+  - name: layout-xs
+    value: '{!layout-xs}'
+  - name: layout-sm
+    value: '{!layout-sm}'
+  - name: layout-md
+    value: '{!layout-md}'
+  - name: layout-lg
+    value: '{!margin-lg}'
+  - name: layout-xl
+    value: '{!margin-xl}'
+  - name: layout-2xl
+    value: '{!margin-2xl}'
+  - name: layout-base
+    value: '{!layout-base}'