diff --git a/web/.storybook/preview.js b/web/.storybook/preview.js
index 34ed9fa38..e882fca84 100644
--- a/web/.storybook/preview.js
+++ b/web/.storybook/preview.js
@@ -1,4 +1,4 @@
-import '../styles/variables.scss';
+import '../styles/variables.css';
 import '../styles/global.less';
 import '../styles/theme.less';
 import '../stories/preview.scss';
diff --git a/web/package-lock.json b/web/package-lock.json
index d30f72cbe..20b3d83ea 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -86,8 +86,10 @@
         "sb": "^6.4.22",
         "storybook-dark-mode": "^1.0.9",
         "storybook-preset-less": "^1.1.2",
+        "style-dictionary": "^3.7.0",
         "style-loader": "^2.0.0",
-        "typescript": "4.5.5"
+        "typescript": "4.5.5",
+        "yaml": "^2.0.1"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -6367,6 +6369,15 @@
       "integrity": "sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==",
       "devOptional": true
     },
+    "node_modules/@storybook/builder-webpack5/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "devOptional": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/@storybook/channel-postmessage": {
       "version": "6.4.22",
       "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.4.22.tgz",
@@ -7593,6 +7604,14 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
     },
+    "node_modules/@storybook/core-common/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/@storybook/core-events": {
       "version": "6.4.22",
       "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.4.22.tgz",
@@ -13784,6 +13803,23 @@
         }
       ]
     },
+    "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/capital-case/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+      "dev": true
+    },
     "node_modules/capture-exit": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
@@ -13828,6 +13864,32 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "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/change-case/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+      "dev": true
+    },
     "node_modules/char-regex": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
@@ -14427,6 +14489,23 @@
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
     },
+    "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/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+      "dev": true
+    },
     "node_modules/constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -14608,6 +14687,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/cp-file": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/cp-file/-/cp-file-7.0.0.tgz",
@@ -18800,6 +18887,22 @@
         "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/header-case/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+      "dev": true
+    },
     "node_modules/highlight.js": {
       "version": "10.7.3",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
@@ -22426,6 +22529,12 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/jsonc-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
+      "integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==",
+      "dev": true
+    },
     "node_modules/jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -24906,6 +25015,22 @@
       "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
       "devOptional": 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-case/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+      "dev": true
+    },
     "node_modules/path-dirname": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
@@ -25186,6 +25311,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/postcss-loader/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/postcss-modules-extract-imports": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
@@ -28276,6 +28409,23 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
+    "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/sentence-case/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+      "dev": true
+    },
     "node_modules/serialize-javascript": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz",
@@ -28530,6 +28680,22 @@
         "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/snake-case/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+      "dev": true
+    },
     "node_modules/snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -29347,6 +29513,84 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-dictionary": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.7.0.tgz",
+      "integrity": "sha512-BL4AQS5kNDBXbFHWJhlCve6+ojnHgHkiwhf2nNByU698elXWdyK5b27OprphT4q0/tJ52zB+lodhqxIxbNOajQ==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "change-case": "^4.1.2",
+        "commander": "^8.3.0",
+        "fs-extra": "^10.0.0",
+        "glob": "^7.2.0",
+        "json5": "^2.2.0",
+        "jsonc-parser": "^3.0.0",
+        "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/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/glob": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/json5": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+      "dev": true,
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/style-loader": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
@@ -29914,6 +30158,15 @@
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
+    "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/tlds": {
       "version": "1.231.0",
       "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.231.0.tgz",
@@ -30628,6 +30881,36 @@
         "url": "https://github.com/yeoman/update-notifier?sponsor=1"
       }
     },
+    "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/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/upper-case-first/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+      "dev": true
+    },
+    "node_modules/upper-case/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+      "dev": true
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -31740,11 +32023,12 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.0.1.tgz",
+      "integrity": "sha512-1NpAYQ3wjzIlMs0mgdBmYzLkFgWBIWrzYVDYfrixhoFNNgJ444/jT2kUT2sicRbJES3oQYRZugjB6Ro8SjKeFg==",
+      "dev": true,
       "engines": {
-        "node": ">= 6"
+        "node": ">= 14"
       }
     },
     "node_modules/yargs": {
@@ -36297,6 +36581,12 @@
           "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.4.3.tgz",
           "integrity": "sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==",
           "devOptional": true
+        },
+        "yaml": {
+          "version": "1.10.2",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+          "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+          "devOptional": true
         }
       }
     },
@@ -37238,6 +37528,11 @@
           "version": "3.1.1",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
           "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+        },
+        "yaml": {
+          "version": "1.10.2",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+          "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
         }
       }
     },
@@ -42141,6 +42436,25 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz",
       "integrity": "sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw=="
     },
+    "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"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+          "dev": true
+        }
+      }
+    },
     "capture-exit": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
@@ -42169,6 +42483,34 @@
         "supports-color": "^7.1.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"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+          "dev": true
+        }
+      }
+    },
     "char-regex": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
@@ -42646,6 +42988,25 @@
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
     },
+    "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": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+          "dev": true
+        }
+      }
+    },
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -42779,6 +43140,13 @@
         "parse-json": "^5.0.0",
         "path-type": "^4.0.0",
         "yaml": "^1.7.2"
+      },
+      "dependencies": {
+        "yaml": {
+          "version": "1.10.2",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+          "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
+        }
       }
     },
     "cp-file": {
@@ -46074,6 +46442,24 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "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"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+          "dev": true
+        }
+      }
+    },
     "highlight.js": {
       "version": "10.7.3",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
@@ -48915,6 +49301,12 @@
         "minimist": "^1.2.0"
       }
     },
+    "jsonc-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
+      "integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==",
+      "dev": true
+    },
     "jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -50751,6 +51143,24 @@
       "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
       "devOptional": 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"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+          "dev": true
+        }
+      }
+    },
     "path-dirname": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
@@ -50940,6 +51350,11 @@
             "path-type": "^4.0.0",
             "yaml": "^1.10.0"
           }
+        },
+        "yaml": {
+          "version": "1.10.2",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+          "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
         }
       }
     },
@@ -53254,6 +53669,25 @@
         }
       }
     },
+    "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"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+          "dev": true
+        }
+      }
+    },
     "serialize-javascript": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz",
@@ -53462,6 +53896,24 @@
         }
       }
     },
+    "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"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+          "dev": true
+        }
+      }
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -54132,6 +54584,62 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "devOptional": true
     },
+    "style-dictionary": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.7.0.tgz",
+      "integrity": "sha512-BL4AQS5kNDBXbFHWJhlCve6+ojnHgHkiwhf2nNByU698elXWdyK5b27OprphT4q0/tJ52zB+lodhqxIxbNOajQ==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.0.0",
+        "change-case": "^4.1.2",
+        "commander": "^8.3.0",
+        "fs-extra": "^10.0.0",
+        "glob": "^7.2.0",
+        "json5": "^2.2.0",
+        "jsonc-parser": "^3.0.0",
+        "lodash": "^4.17.15",
+        "tinycolor2": "^1.4.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "8.3.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+          "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "10.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+          "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "glob": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+          "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "json5": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+          "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+          "dev": true
+        }
+      }
+    },
     "style-loader": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
@@ -54558,6 +55066,12 @@
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
+    "tinycolor2": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
+      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==",
+      "dev": true
+    },
     "tlds": {
       "version": "1.231.0",
       "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.231.0.tgz",
@@ -55078,6 +55592,40 @@
         "xdg-basedir": "^4.0.0"
       }
     },
+    "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"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+          "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"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+          "dev": true
+        }
+      }
+    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -55958,9 +56506,10 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.0.1.tgz",
+      "integrity": "sha512-1NpAYQ3wjzIlMs0mgdBmYzLkFgWBIWrzYVDYfrixhoFNNgJ444/jT2kUT2sicRbJES3oQYRZugjB6Ro8SjKeFg==",
+      "dev": true
     },
     "yargs": {
       "version": "16.2.0",
diff --git a/web/package.json b/web/package.json
index 9ffa344df..e18ff63d0 100644
--- a/web/package.json
+++ b/web/package.json
@@ -8,7 +8,8 @@
     "start": "next start",
     "lint": "eslint --ext .js,.ts,.tsx types/ pages/ components/ stories/",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "build-styles": "cd ./style-definitions && style-dictionary build && ./build.sh && cd -"
   },
   "dependencies": {
     "@ant-design/icons": "4.7.0",
@@ -89,7 +90,9 @@
     "sb": "^6.4.22",
     "storybook-dark-mode": "^1.0.9",
     "storybook-preset-less": "^1.1.2",
+    "style-dictionary": "^3.7.0",
     "style-loader": "^2.0.0",
-    "typescript": "4.5.5"
+    "typescript": "4.5.5",
+    "yaml": "^2.0.1"
   }
-}
+}
\ No newline at end of file
diff --git a/web/stories/Color.tsx b/web/stories/Color.tsx
index 6a04dba36..21870b582 100644
--- a/web/stories/Color.tsx
+++ b/web/stories/Color.tsx
@@ -14,6 +14,7 @@ export function Color(props) {
     borderStyle: 'solid',
     borderColor: 'lightgray',
     overflow: 'hidden',
+    margin: '0.3vw',
   };
 
   const colorBlockStyle = {
@@ -25,6 +26,8 @@ export function Color(props) {
   const colorDescriptionStyle = {
     margin: '5px',
     textAlign: 'center',
+    color: 'gray',
+    fontSize: '0.8em',
   };
 
   return (
diff --git a/web/stories/Colors.stories.mdx b/web/stories/Colors.stories.mdx
index e1990c929..e49bc6a21 100644
--- a/web/stories/Colors.stories.mdx
+++ b/web/stories/Colors.stories.mdx
@@ -1,23 +1,52 @@
-import { Meta } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import {Color, ColorRow} from './Color';
 
-<Meta title="owncast/Colors" />
+<Meta title="owncast/Style Guide" />
 
 <style>{`
  
   
 `}</style>
 
+# Images
+
+<Story name="Images">
+</Story>
+
 # Colors
 
+<Story name="Colors">
+</Story>
+
+<ColorRow colors={['theme-primary-color', 'theme-text-color-secondary']} />
+
+## Text
+<ColorRow colors={['theme-text-color', 'theme-text-color-secondary', 'theme-link-color']} />
+
+## Backgrounds
+<ColorRow colors={['theme-background', 'popover-background']} />
+
+## Status
+<ColorRow colors={['theme-success-color', 'theme-info-color', 'theme-warning-color', 'theme-error-color']} />
+
 ## Gray
-<ColorRow colors={['gray-100', 'gray-300', 'gray-500', 'gray-700', 'gray-900']} />
+<ColorRow colors={['color-owncast-gray-100', 'color-owncast-gray-300', 'color-owncast-gray-500', 'color-owncast-gray-700', 'color-owncast-gray-900']} />
 
-## Owncast Purple
-<ColorRow colors={['purple-100', 'purple-300', 'purple-500', 'purple-700', 'purple-900']} />
+## Purple
+<ColorRow colors={['color-owncast-purple-100', 'color-owncast-purple-300', 'color-owncast-purple-500', 'color-owncast-purple-700', 'color-owncast-purple-900']} />
 
-## Green (success)
-<ColorRow colors={['green-100', 'green-300', 'green-500', 'green-700', 'green-900']} />
+## Green
+<ColorRow colors={['color-owncast-green-100', 'color-owncast-green-300', 'color-owncast-green-500', 'color-owncast-green-700', 'color-owncast-green-900']} />
 
-## Orange (warning)
-<ColorRow colors={['orange-100', 'orange-300', 'orange-500', 'orange-700', 'orange-900']} />
\ No newline at end of file
+## Orange
+<ColorRow colors={['color-owncast-orange-100', 'color-owncast-orange-300', 'color-owncast-orange-500', 'color-owncast-orange-700', 'color-owncast-orange-900']} />
+
+# Font
+
+<Story name="Fonts">
+  <Canvas style={{color: 'var(--theme-text-color-secondary)'}}>
+    {getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')}
+  </Canvas>
+</Story>
+
+[Inter font](https://rsms.me/inter/)
\ No newline at end of file
diff --git a/web/stories/preview.scss b/web/stories/preview.scss
index 6127d6070..25dcc598e 100644
--- a/web/stories/preview.scss
+++ b/web/stories/preview.scss
@@ -1,4 +1,4 @@
 html,
 body {
-  font-family: var(--font-family);
+  font-family: var(--theme-font-family);
 }
diff --git a/web/style-definitions/README.md b/web/style-definitions/README.md
new file mode 100644
index 000000000..ce7463cd7
--- /dev/null
+++ b/web/style-definitions/README.md
@@ -0,0 +1,10 @@
+# Style Definitions
+
+Read more about [Style Dictionary](https://amzn.github.io/style-dictionary)
+## Add
+
+Add to the `tokens/**/*.yaml` files to add or modify style values.
+
+## Generating 
+
+Run `npm run build-styles` to regenerate the CSS variables.
\ No newline at end of file
diff --git a/web/style-definitions/build.sh b/web/style-definitions/build.sh
new file mode 100755
index 000000000..1ea03fe91
--- /dev/null
+++ b/web/style-definitions/build.sh
@@ -0,0 +1,4 @@
+#!/bin/sh
+
+mv build/variables.css ../styles/variables.css
+mv build/variables.less ../styles/theme.less
\ No newline at end of file
diff --git a/web/style-definitions/config.js b/web/style-definitions/config.js
new file mode 100644
index 000000000..1a42e311b
--- /dev/null
+++ b/web/style-definitions/config.js
@@ -0,0 +1,41 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+const yaml = require('yaml');
+
+module.exports = {
+  parsers: [
+    {
+      // A custom parser will only run against filenames that match the pattern
+      // This pattern will match any file with the .yaml extension.
+      // This allows you to mix different types of files in your token source
+      pattern: /\.yaml$/,
+      // the parse function takes a single argument, which is an object with
+      // 2 attributes: contents which is a string of the file contents, and
+      // filePath which is the path of the file.
+      // The function is expected to return a plain object.
+      parse: ({ contents, filePath }) => yaml.parse(contents),
+    },
+  ],
+  source: [`tokens/**/*.yaml`],
+  platforms: {
+    css: {
+      transformGroup: 'css',
+      buildPath: 'build/',
+      files: [
+        {
+          destination: 'variables.css',
+          format: 'css/variables',
+        },
+      ],
+    },
+    less: {
+      transformGroup: 'less',
+      buildPath: 'build/',
+      files: [
+        {
+          destination: 'variables.less',
+          format: 'less/variables',
+        },
+      ],
+    },
+  },
+};
diff --git a/web/style-definitions/tokens/color/antd-overrides.yaml b/web/style-definitions/tokens/color/antd-overrides.yaml
new file mode 100644
index 000000000..4ace1fbbd
--- /dev/null
+++ b/web/style-definitions/tokens/color/antd-overrides.yaml
@@ -0,0 +1,34 @@
+# Ant Design component color overrides.
+# You can find the variable names to override at:
+# https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less
+
+text-color: 
+  value: "var(--theme-text-color)"
+text-color-secondry:
+  value: "var(--theme-text-color-secondary)"
+link-color:
+  value: "var(--theme-link-color)"
+popover-background:
+  value: "var(--theme-background)"
+background-color-light:
+  value: "{color.owncast.purple.100.value}"
+
+# These values require explicit colors and cannot take css variables.
+primary-color: 
+  value: "{color.owncast.purple.500.value}"
+info-color:
+  value: "{color.owncast.gray.500.value}"
+success-color:
+  value: "{color.owncast.green.500.value}"
+warning-color:
+  value: "{color.owncast.orange.500.value}"
+error-color:
+  value: "{color.owncast.red.500.value}"
+purple-base:
+  value: "{color.owncast.purple.500.value}"
+green-base:
+  value: "{color.owncast.green.500.value}"
+red-base:
+  value: "{color.owncast.red.500.value}"
+orange-base:
+  value: "{color.owncast.orange.500.value}"
\ No newline at end of file
diff --git a/web/style-definitions/tokens/color/default-theme.yaml b/web/style-definitions/tokens/color/default-theme.yaml
new file mode 100644
index 000000000..1cae10231
--- /dev/null
+++ b/web/style-definitions/tokens/color/default-theme.yaml
@@ -0,0 +1,26 @@
+# These are the variables used in the user interface.
+# They can be overwritten to customize the look and feel.
+# We should write some documentation on how to do that when the time comes.
+
+theme:
+  primary-color:
+    value: "{color.owncast.purple.500.value}"
+  text-color:
+    value: "{color.owncast.gray.300.value}"
+  text-color-secondary:
+    value: "{color.owncast.gray.500.value}"
+  link-color:
+    value: "{color.owncast.purple.500.value}"
+  success-color:
+    value: "{color.owncast.green.500.value}"
+  info-color:
+    value: "{color.owncast.purple.300.value}"
+  warning-color:
+    value: "{color.owncast.orange.500.value}"
+  error-color:
+    value: "{color.owncast.red.500.value}"
+  font-family:
+    value: "{font.owncast.family.value}"
+  background:
+    value: "{color.owncast.background.value}"
+  
\ No newline at end of file
diff --git a/web/style-definitions/tokens/color/owncast-colors.yaml b/web/style-definitions/tokens/color/owncast-colors.yaml
new file mode 100644
index 000000000..22f0b66b4
--- /dev/null
+++ b/web/style-definitions/tokens/color/owncast-colors.yaml
@@ -0,0 +1,112 @@
+# These are colors that make up the Owncast-specific color palette.
+color:
+  # The Owncast color definitions.
+  owncast:
+    purple:
+      100:
+        value: "#f4ebff"
+      300:
+        value: "#d6bbfb"
+      500:
+        value: "#9e77ed"
+      700:
+        value: "#6941c6"
+      900:
+        value: "#42307d"
+
+    green:
+      100:
+        value: "#d15ad5"
+      300:
+        value: "#6ce9a6"
+      500:
+        value: "#12b76a"
+      700:
+        value: "#027a48"
+      900:
+        value: "#054f31"
+
+    red:
+      100:
+        value: "#fee4e2"
+      300:
+        value: "#fda29b"
+      500:
+        value: "#f04438"
+      700:
+        value: "#b42318"
+      900:
+        value: "#7a271a"
+
+    orange:
+      100:
+        value: "#fef0c7"
+      300:
+        value: "#fec84b"
+      500:
+        value: "#f79009"
+      700:
+        value: "#b54708"
+      900:
+        value: "#93370d"
+
+    gray:
+      100:
+        value: "#f2f4f7"
+      300:
+        value: "#d0d5dd"
+      500:
+        value: "#667085"
+      700:
+        value: "#344054"
+      900:
+        value: "#101828"
+
+    logo:
+      purple:
+        value: "rgba(120, 113, 255, 1)"
+      pink:
+        value: "rgba(201, 139, 254, 1)"
+      blue:
+        value: "rgba(32, 134, 225, 1)"
+
+    background-light:
+      value: "rgba(27, 26, 38, 1)"
+    background:
+      value: "rgba(23, 21, 35, 1)"
+      
+font:
+  owncast:      
+    family:
+      value: "'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+        'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol', 'Noto Color Emoji';"
+
+# Values used in the admin and should be migrated to variables or removed.
+# See ant-overrides.scss.
+owncast-purple:
+  value: "{color.owncast.logo.purple}"
+owncast-purple-25: 
+  value: "rgba(120, 113, 255, 0.25)"
+owncast-purple-50:
+  value: "rgba(120, 113, 255, 0.5)"
+online-color:
+  value: "#73dd3f"
+offline-color:
+  value: "#999"
+pink:
+  value: "{color.owncast.logo.pink}"
+purple:
+  value: "{color.owncast.logo.purple}"
+blue:
+  value: "{color.owncast.logo.blue}"
+white-88:
+  value: "{color.owncast.gray.500}"
+purple-dark:
+  value: "rgba(28, 26, 59, 1)"
+default-link-color:
+  value: "{color.owncast.logo.pink}"
+default-bg-color:
+  value: "black"
+default-text-color:
+  value: "rgba(255, 255, 255, 0.88)"