diff --git a/.gitignore b/.gitignore
index f326b25..e49a187 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@ node_modules/
 # Build/output files
 .dist/
 *.sass-cache*
+/src/build
 dist
 /ssr
 coverage
diff --git a/.storybook/styles/_storybook-swatches.scss b/.storybook/styles/_storybook-swatches.scss
index 924c6e1..ec2fb8c 100644
--- a/.storybook/styles/_storybook-swatches.scss
+++ b/.storybook/styles/_storybook-swatches.scss
@@ -30,4 +30,4 @@ dl {
 
 dd {
   margin: 0;
-}
\ No newline at end of file
+}
diff --git a/config.json b/config.json
new file mode 100644
index 0000000..d63e944
--- /dev/null
+++ b/config.json
@@ -0,0 +1,50 @@
+{
+  "source": ["src/tokens/**/*.json"],
+  "platforms": {
+    "js": {
+      "transformGroup": "js",
+      "buildPath": "src/build/js/",
+      "files": [
+        {
+          "destination": "colors.js",
+          "format": "javascript/module-flat",
+          "options": {
+            "outputReferences": true
+          },
+          "filter": {
+            "attributes": {
+              "category": "color"
+            }
+          }
+        },
+        {
+          "destination": "colors.d.ts",
+          "format": "typescript/es6-declarations",
+          "filter": {
+            "attributes": {
+              "category": "color"
+            }
+          }
+        }
+      ]
+    },
+    "css": {
+      "transformGroup": "css",
+      "buildPath": "src/build/css/",
+      "files": [
+        {
+          "destination": "colors.css",
+          "format": "css/variables",
+          "options": {
+            "outputReferences": true
+          },
+          "filter": {
+            "attributes": {
+              "category": "color"
+            }
+          }
+        }
+      ]
+    }
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index c2b1e94..7849c1e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -81,6 +81,7 @@
         "sass": "^1.29.0",
         "sass-loader": "^8.0.0",
         "sass-mq": "^5.0.1",
+        "style-dictionary": "^3.0.1",
         "style-loader": "^1.1.2",
         "stylelint": "^12.0.1",
         "stylelint-config-sass-guidelines": "^6.2.0",
@@ -9834,6 +9835,17 @@
         "url": "https://opencollective.com/browserslist"
       }
     },
+    "node_modules/capital-case": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
+      "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
+      "dev": true,
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case-first": "^2.0.2"
+      }
+    },
     "node_modules/capture-exit": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
@@ -9879,6 +9891,26 @@
         "node": ">=4"
       }
     },
+    "node_modules/change-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
+      "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
+      "dev": true,
+      "dependencies": {
+        "camel-case": "^4.1.2",
+        "capital-case": "^1.0.4",
+        "constant-case": "^3.0.4",
+        "dot-case": "^3.0.4",
+        "header-case": "^2.0.4",
+        "no-case": "^3.0.4",
+        "param-case": "^3.0.4",
+        "pascal-case": "^3.1.2",
+        "path-case": "^3.0.4",
+        "sentence-case": "^3.0.4",
+        "snake-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/char-regex": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
@@ -10575,6 +10607,26 @@
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
       "dev": true
     },
+    "node_modules/constant-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
+      "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
+      "dev": true,
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case": "^2.0.2"
+      }
+    },
+    "node_modules/constant-case/node_modules/upper-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
+      "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -15487,6 +15539,16 @@
         "he": "bin/he"
       }
     },
+    "node_modules/header-case": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
+      "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
+      "dev": true,
+      "dependencies": {
+        "capital-case": "^1.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/hex-color-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
@@ -23449,6 +23511,16 @@
       "integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==",
       "dev": true
     },
+    "node_modules/path-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
+      "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
+      "dev": true,
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/path-dirname": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
@@ -28770,6 +28842,17 @@
       "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
       "dev": true
     },
+    "node_modules/sentence-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
+      "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
+      "dev": true,
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case-first": "^2.0.2"
+      }
+    },
     "node_modules/serialize-javascript": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
@@ -28998,6 +29081,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "dev": true,
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -29674,6 +29767,124 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-dictionary": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.0.1.tgz",
+      "integrity": "sha512-t6FzcaIY9gCTDufFMP3sUPMqHAA6vW0sHY7p39ckox8y5X8y/0xKbH3Y88QBJN4hKYWuejSLpDf48EVeA0LTiQ==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "change-case": "^4.1.2",
+        "commander": "^5.1.0",
+        "fs-extra": "^8.1.0",
+        "glob": "^7.1.6",
+        "json5": "^2.1.3",
+        "lodash": "^4.17.15",
+        "tinycolor2": "^1.4.1"
+      },
+      "bin": {
+        "style-dictionary": "bin/style-dictionary"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/chalk": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/commander": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.6"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/style-loader": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.3.0.tgz",
@@ -30983,6 +31194,15 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/tinycolor2": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
+      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -31795,6 +32015,15 @@
       "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=",
       "dev": true
     },
+    "node_modules/upper-case-first": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
+      "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -40630,6 +40859,17 @@
       "integrity": "sha512-o0PRQSrSCGJKCPZcgMzl5fUaj5xHe8qA2m4QRvnyY4e1lITqoNkr7q/Oh1NcpGSy0Th97UZ35yoKcINPoq7YOQ==",
       "dev": true
     },
+    "capital-case": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
+      "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
+      "dev": true,
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case-first": "^2.0.2"
+      }
+    },
     "capture-exit": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
@@ -40662,6 +40902,26 @@
         "supports-color": "^5.3.0"
       }
     },
+    "change-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
+      "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
+      "dev": true,
+      "requires": {
+        "camel-case": "^4.1.2",
+        "capital-case": "^1.0.4",
+        "constant-case": "^3.0.4",
+        "dot-case": "^3.0.4",
+        "header-case": "^2.0.4",
+        "no-case": "^3.0.4",
+        "param-case": "^3.0.4",
+        "pascal-case": "^3.1.2",
+        "path-case": "^3.0.4",
+        "sentence-case": "^3.0.4",
+        "snake-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "char-regex": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
@@ -41216,6 +41476,28 @@
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
       "dev": true
     },
+    "constant-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
+      "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
+      "dev": true,
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case": "^2.0.2"
+      },
+      "dependencies": {
+        "upper-case": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
+          "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
+          "dev": true,
+          "requires": {
+            "tslib": "^2.0.3"
+          }
+        }
+      }
+    },
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -45113,6 +45395,16 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
+    "header-case": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
+      "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
+      "dev": true,
+      "requires": {
+        "capital-case": "^1.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "hex-color-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
@@ -51234,6 +51526,16 @@
       "integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==",
       "dev": true
     },
+    "path-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
+      "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
+      "dev": true,
+      "requires": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "path-dirname": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
@@ -55338,6 +55640,17 @@
         }
       }
     },
+    "sentence-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
+      "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
+      "dev": true,
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case-first": "^2.0.2"
+      }
+    },
     "serialize-javascript": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
@@ -55533,6 +55846,16 @@
       "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=",
       "dev": true
     },
+    "snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "dev": true,
+      "requires": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -56091,6 +56414,90 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
+    "style-dictionary": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.0.1.tgz",
+      "integrity": "sha512-t6FzcaIY9gCTDufFMP3sUPMqHAA6vW0sHY7p39ckox8y5X8y/0xKbH3Y88QBJN4hKYWuejSLpDf48EVeA0LTiQ==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.0.0",
+        "change-case": "^4.1.2",
+        "commander": "^5.1.0",
+        "fs-extra": "^8.1.0",
+        "glob": "^7.1.6",
+        "json5": "^2.1.3",
+        "lodash": "^4.17.15",
+        "tinycolor2": "^1.4.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "commander": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+          "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "jsonfile": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "universalify": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+          "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+          "dev": true
+        }
+      }
+    },
     "style-loader": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.3.0.tgz",
@@ -57109,6 +57516,12 @@
       "dev": true,
       "optional": true
     },
+    "tinycolor2": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
+      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==",
+      "dev": true
+    },
     "tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -57743,6 +58156,15 @@
       "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=",
       "dev": true
     },
+    "upper-case-first": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
+      "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.0.3"
+      }
+    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
diff --git a/package.json b/package.json
index bca5250..6c8aa8f 100644
--- a/package.json
+++ b/package.json
@@ -18,9 +18,10 @@
   ],
   "scripts": {
     "build:clean": "rm -rf dist ssr",
+    "build:tokens": "style-dictionary build",
     "build:types": "tsc --emitDeclarationOnly",
-    "build": "npm run build:clean && npm run build:types && rollup -c ./config/rollup.config.js --environment NODE_ENV:production && node ./ssr/html.js",
-    "dev": "npm run build:types && rollup -c ./config/rollup.config.js -w",
+    "build": "npm run build:clean && npm run build:types && npm run build:tokens && rollup -c ./config/rollup.config.js --environment NODE_ENV:production && node ./ssr/html.js",
+    "dev": "npm run build:types && npm run build:tokens && rollup -c ./config/rollup.config.js -w",
     "lint": "npm run lint:style && npm run lint:js",
     "lint:js": "eslint --fix ./src --ext .js,.jsx,.ts,.tsx && echo 'JS linting complete'",
     "lint:style": "stylelint --fix '**/*.scss' && echo 'Style linting complete'",
@@ -120,6 +121,7 @@
     "sass": "^1.29.0",
     "sass-loader": "^8.0.0",
     "sass-mq": "^5.0.1",
+    "style-dictionary": "^3.0.1",
     "style-loader": "^1.1.2",
     "stylelint": "^12.0.1",
     "stylelint-config-sass-guidelines": "^6.2.0",
diff --git a/src/components/Icon/IconGroups.stories.tsx b/src/components/Icon/IconGroups.stories.tsx
index f8f1e44..e6f7c53 100644
--- a/src/components/Icon/IconGroups.stories.tsx
+++ b/src/components/Icon/IconGroups.stories.tsx
@@ -2,9 +2,8 @@ import React from 'react';
 
 /*
  * IconGallery and IconItem do not present the icons very well - code is not
- * massively accessible and icon names overlap
+ * massively accessible and icon names overlap, hence not using them
  */
-
 // import { IconGallery, IconItem } from '@storybook/addon-docs/blocks';
 
 import { Icon } from './Icon';
diff --git a/src/styles/10-settings/__manifest.scss b/src/styles/10-settings/__manifest.scss
index de571ca..da246ac 100644
--- a/src/styles/10-settings/__manifest.scss
+++ b/src/styles/10-settings/__manifest.scss
@@ -6,7 +6,8 @@
 // ----------------------------------
 
 @import 'mq'; // must be first import
-@import 'colors';
+// @import 'colors';
+@import '../../build/css/colors';
 @import 'grid';
 @import 'spacing';
 @import 'typography';
diff --git a/src/tokens/color/base.json b/src/tokens/color/base.json
new file mode 100644
index 0000000..adfc78f
--- /dev/null
+++ b/src/tokens/color/base.json
@@ -0,0 +1,102 @@
+{
+  "color": {    
+    "black": { "value": "#000" },
+    "white": { "value": "#fff" },
+    "amber": {
+      "90": { "value": "#382a00" },
+      "80": { "value": "#4d3900" },
+      "70": { "value": "#705400" },
+      "60": { "value": "#946f00" },
+      "50": { "value": "#c29207" },
+      "40": { "value": "#e7ae04" },
+      "30": { "value": "#fec200" },
+      "20": { "value": "#ffe699" },
+      "10": { "value": "#fff4d1" },
+      "05": { "value": "#fffbf0" }
+    },
+    "blue": {
+      "90": { "value": "#002e45" },
+      "80": { "value": "#003170" },
+      "70": { "value": "#004099" },
+      "60": { "value": "#05c" },
+      "50": { "value": "#1672f3" },
+      "40": { "value": "#4d97ff" },
+      "30": { "value": "#80b5ff" },
+      "20": { "value": "#b3d2ff" },
+      "10": { "value": "#dbeaff" },
+      "05": { "value": "#f0f6ff" }
+    },
+    "cyan": {
+      "90": { "value": "#002c33" },
+      "80": { "value": "#00424d" },
+      "70": { "value": "#005361" },
+      "60": { "value": "#006272" },
+      "50": { "value": "#009bb2" },
+      "40": { "value": "#71bdd0" },
+      "30": { "value": "#9dd8e7" },
+      "20": { "value": "#beebf4" },
+      "10": { "value": "#dcf4f9" },
+      "05": { "value": "#f1fcfd" }
+    },
+    "green": {
+      "90": { "value": "#133800" },
+      "80": { "value": "#2a512c" },
+      "70": { "value": "#236126" },
+      "60": { "value": "#4c8026" },
+      "50": { "value": "#6ba136" },
+      "40": { "value": "#8cc059" },
+      "30": { "value": "#b6d99c" },
+      "20": { "value": "#e6f1d3" },
+      "10": { "value": "#f0f9e7" },
+      "05": { "value": "#f7fcf2" }
+    },
+    "grey": {
+      "90": { "value": "#000" },
+      "80": { "value": "#292929" },
+      "70": { "value": "#5c5c5c" },
+      "60": { "value": "#767676" },
+      "50": { "value": "#878787" },
+      "40": { "value": "#999" },
+      "30": { "value": "#b3b3b3" },
+      "20": { "value": "#ccc" },
+      "10": { "value": "#e6e6e6" },
+      "05": { "value": "#f2f2f2" }
+    },
+    "orange": {
+      "90": { "value": "#331e0f" },
+      "80": { "value": "#572b00" },
+      "70": { "value": "#8a471e" },
+      "60": { "value": "#b45c04" },
+      "50": { "value": "#f07f0a" },
+      "40": { "value": "#ffa64d" },
+      "30": { "value": "#ffbf80" },
+      "20": { "value": "#ffd9b2" },
+      "10": { "value": "#ffeddb" },
+      "05": { "value": "#fff7f0" }
+    },
+    "red": {
+      "90": { "value": "#40120d" },
+      "80": { "value": "#6c131d" },
+      "70": { "value": "#b3001e" },
+      "60": { "value": "#e10f2d" },
+      "50": { "value": "#e72343" },
+      "40": { "value": "#f04763" },
+      "30": { "value": "#f2637b" },
+      "20": { "value": "#ed858e" },
+      "10": { "value": "#f9cdca" },
+      "05": { "value": "#fff0f2" }
+    },
+    "yellow": {
+      "90": { "value": "#3d3800" },
+      "80": { "value": "#574f00" },
+      "70": { "value": "#706601" },
+      "60": { "value": "#817818" },
+      "50": { "value": "#bfa70d" },
+      "40": { "value": "#ffea00" },
+      "30": { "value": "#fff266" },
+      "20": { "value": "#fff9a6" },
+      "10": { "value": "#fffde2" },
+      "05": { "value": "#fffef0" }
+    }
+  }
+}
diff --git a/src/tokens/spacing/base.json b/src/tokens/spacing/base.json
new file mode 100644
index 0000000..11b7b81
--- /dev/null
+++ b/src/tokens/spacing/base.json
@@ -0,0 +1,39 @@
+{
+    "space": {
+        "unit": {
+            "value": "0.5"
+        },
+        "xs": {
+            "default": {
+                "value": "calc(0.5 * {space.unit.value})"
+            }
+        },
+        "sm": {
+            "default": {
+                "value": "calc(0.75 * {space.unit.value})"
+            },
+            "sm": {
+                "value": "calc(0.5 * {space.unit.value})"
+            }
+        },
+        "md": {
+            "value": "{space.unit.value}"
+        },
+        "lg": {
+            "value": "calc(0.5 * {space.unit.value})"
+        },
+        "xl": {
+            "value": "calc(0.5 * {space.unit.value})"
+        }
+    },
+    "media-query": {
+        "sm": {
+            "value": "48em",
+            "type": "media-query"
+        },
+        "md": {
+            "value": "64em",
+            "type": "media-query"
+        }
+    }
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index a6a0df9..ce6125c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,12 +8,15 @@
                 "/",
                 "components/*",
             ],
+            "build/*": [
+                "build/*"
+            ],
             "data/*": [
                 "data/*"
             ],
             "utils/*": [
                 "utils/*"
-            ],
+            ]
         },
         "moduleResolution": "node",
         "noImplicitAny": true,