diff --git a/.eslintignore b/.eslintignore
index e65cf5af0..ab3567b8f 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,6 +4,5 @@
 public/build/bundle.js
 scripts/build-glean-metadata.js
 src/ga.js
-src/Tailwindcss.svelte
 storybook-static/*
 venv/*
diff --git a/.eslintrc.js b/.eslintrc.js
index fce748cb7..d19656888 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -53,12 +53,19 @@ module.exports = {
         "import/no-duplicates": "off",
         "import/no-mutable-exports": "off",
         "import/no-unresolved": "off",
-
         // Temporarily work around a bug in eslint-plugin-svelte3.
         //
         // https://github.com/sveltejs/eslint-plugin-svelte3/issues/41#issuecomment-572503966
         "no-multiple-empty-lines": ["error", { max: 2, maxBOF: 2, maxEOF: 0 }],
       },
+
+      // Eslint only allows regular CSS inside <style>, so we
+      // use this setting to ignore warnings about SCSS/LESS syntax
+      //
+      // https://github.com/sveltejs/eslint-plugin-svelte3#svelte3ignore-styles
+      settings: {
+        "svelte3/ignore-styles": () => true,
+      },
     },
     {
       files: ["tests/**/*.test.js"],
diff --git a/.gitignore b/.gitignore
index 1fb6a99ac..0aad03e1c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,7 @@
 /node_modules/
 /public/build/
+/public/img/
+/public/fonts/
 /storybook-static/
 venv
 *.pyc
diff --git a/.storybook/main.js b/.storybook/main.js
index ed74ccd00..2da962767 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,4 +1,6 @@
 const sveltePreprocess = require("svelte-preprocess");
+const autoPrefixer = require("autoprefixer");
+const path = require("path");
 
 module.exports = {
   stories: ["../stories/**/*.stories.js"],
@@ -10,9 +12,38 @@ module.exports = {
     );
     svelteLoader.options = {
       ...svelteLoader.options,
-      preprocess: sveltePreprocess({ postcss: true }),
+      preprocess: sveltePreprocess({
+        postcss: true,
+        defaults: {
+          style: "scss",
+        },
+        scss: {
+          prependData: `@import '@mozilla-protocol/core/protocol/css/protocol.scss';`,
+        },
+        postcss: {
+          plugins: [autoPrefixer],
+        },
+      }),
+
+      // turn off warning about unused CSS selectors to
+      // shorten Netlify build time. More context:
+      // https://github.com/mozilla/glean-dictionary/pull/312#issuecomment-759251341
+
+      onwarn: (warning, handler) => {
+        const { code } = warning;
+        if (code === "css-unused-selector") return;
+
+        handler(warning);
+      },
     };
 
+    config.module.rules.push({
+      // this is for both less and scss
+      test: /.*\.(?:le|c|sc)ss$/,
+      loaders: ["style-loader", "css-loader", "sass-loader"],
+      include: path.resolve(__dirname, "../"),
+    });
+
     return config;
   },
 };
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 5413b32bb..0ffdcbc52 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1 +1 @@
-import "./story.css";
+import "!style-loader!css-loader!sass-loader!../node_modules/@mozilla-protocol/core/protocol/css/protocol.scss";
diff --git a/.storybook/story.css b/.storybook/story.css
index eb6ae315c..e69de29bb 100644
--- a/.storybook/story.css
+++ b/.storybook/story.css
@@ -1 +0,0 @@
-@import "../src/main.css";
diff --git a/jest.config.js b/jest.config.js
index 328e5d0a1..4ca61d171 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,13 +1,18 @@
 module.exports = {
   transform: {
-    "^.+\\.svelte$": "svelte-jester",
+    "^.+\\.svelte$": ["svelte-jester", { preprocess: true }],
     "^.+\\.js$": "babel-jest",
   },
   moduleFileExtensions: ["js", "svelte", "json"],
-  testPathIgnorePatterns: ["/node_modules/", "/public/", "/storybook-static/"],
+  testPathIgnorePatterns: [
+    "/node_modules/",
+    "/public/",
+    "/.storybook",
+    "/storybook-static/",
+  ],
   moduleNameMapper: {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
       "<rootDir>/__mocks__/fileMock.js",
-    "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
+    "\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js",
   },
 };
diff --git a/package-lock.json b/package-lock.json
index ce14a73c5..aee77e3de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2823,14 +2823,6 @@
         }
       }
     },
-    "@fullhuman/postcss-purgecss": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
-      "integrity": "sha512-kwOXw8fZ0Lt1QmeOOrd+o4Ibvp4UTEBFQbzvWldjlKv5n+G9sXfIPn1hh63IQIL8K8vbvv1oYMJiIUbuy9bGaA==",
-      "requires": {
-        "purgecss": "^3.1.3"
-      }
-    },
     "@icons/material": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
@@ -6108,6 +6100,12 @@
         }
       }
     },
+    "@mozilla-protocol/core": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/@mozilla-protocol/core/-/core-13.0.1.tgz",
+      "integrity": "sha512-Wnhvd9VTQ717C4urboBjt4kaeMqgPOgLNKRFaYNBUFQji42a9Vem/qrs++t8NjfLJh9fd0MTz6ejHCSbCPkiBA==",
+      "dev": true
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -9261,6 +9259,15 @@
       "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
       "dev": true
     },
+    "@types/fs-extra": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-8.1.1.tgz",
+      "integrity": "sha512-TcUlBem321DFQzBNuz8p0CLLKp0VvF/XH9E4KHNmgwyp4E3AfgI5cjiIVZWlbfThBop2qxFIh4+LeY6hVWWZ2w==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/glob": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.2.tgz",
@@ -10151,27 +10158,11 @@
       "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
       "dev": true
     },
-    "acorn-node": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
-      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "requires": {
-        "acorn": "^7.0.0",
-        "acorn-walk": "^7.0.0",
-        "xtend": "^4.0.2"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "7.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
-        }
-      }
-    },
     "acorn-walk": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA=="
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "dev": true
     },
     "address": {
       "version": "1.1.2",
@@ -10270,6 +10261,12 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
+      "dev": true
+    },
     "ansi-align": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
@@ -10759,6 +10756,12 @@
       "dev": true,
       "optional": true
     },
+    "async-foreach": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
+      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
+      "dev": true
+    },
     "async-limiter": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
@@ -10774,7 +10777,8 @@
     "at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
-      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg=="
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true
     },
     "atob": {
       "version": "2.1.2",
@@ -11525,7 +11529,8 @@
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
     },
     "base": {
       "version": "0.11.2",
@@ -11814,6 +11819,7 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -12023,7 +12029,8 @@
     "bytes": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
+      "dev": true
     },
     "cacache": {
       "version": "12.0.4",
@@ -12136,11 +12143,6 @@
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
       "dev": true
     },
-    "camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
-    },
     "camelcase-keys": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
@@ -12689,7 +12691,8 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
     },
     "concat-stream": {
       "version": "1.6.2",
@@ -13733,11 +13736,6 @@
         }
       }
     },
-    "css-unit-converter": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
-      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
-    },
     "css-what": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
@@ -13747,7 +13745,8 @@
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
     },
     "cssnano": {
       "version": "4.1.10",
@@ -14228,11 +14227,6 @@
         }
       }
     },
-    "defined": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM="
-    },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -14319,16 +14313,6 @@
         }
       }
     },
-    "detective": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
-      "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
-      "requires": {
-        "acorn-node": "^1.6.1",
-        "defined": "^1.0.0",
-        "minimist": "^1.1.1"
-      }
-    },
     "dezalgo": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.3.tgz",
@@ -14339,11 +14323,6 @@
         "wrappy": "1"
       }
     },
-    "didyoumean": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.1.tgz",
-      "integrity": "sha1-6S7f2tplN9SE1zwBcv0eugxJdv8="
-    },
     "diff-sequences": {
       "version": "25.2.6",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-25.2.6.tgz",
@@ -16541,7 +16520,8 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
     },
     "fsevents": {
       "version": "2.1.3",
@@ -16553,7 +16533,8 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
     },
     "function.prototype.name": {
       "version": "1.1.2",
@@ -16600,6 +16581,15 @@
         "wide-align": "^1.1.0"
       }
     },
+    "gaze": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
+      "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
+      "dev": true,
+      "requires": {
+        "globule": "^1.0.0"
+      }
+    },
     "generic-names": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/generic-names/-/generic-names-2.0.1.tgz",
@@ -17229,6 +17219,7 @@
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
       "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -17378,6 +17369,17 @@
         }
       }
     },
+    "globule": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.2.tgz",
+      "integrity": "sha512-7IDTQTIu2xzXkT+6mlluidnWo+BypnbSoEVVQCGfzqnl5Ik8d3e1d4wycb8Rj9tWW+Z39uPWsdlquqiqPCd/pA==",
+      "dev": true,
+      "requires": {
+        "glob": "~7.1.1",
+        "lodash": "~4.17.10",
+        "minimatch": "~3.0.2"
+      }
+    },
     "good-listener": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
@@ -17391,7 +17393,8 @@
     "graceful-fs": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
-      "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="
+      "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+      "dev": true
     },
     "growly": {
       "version": "1.3.0",
@@ -17463,6 +17466,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -17738,11 +17742,6 @@
         }
       }
     },
-    "html-tags": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
-      "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg=="
-    },
     "html-webpack-plugin": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz",
@@ -18175,7 +18174,8 @@
     "indexes-of": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
-      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc="
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
+      "dev": true
     },
     "infer-owner": {
       "version": "1.0.4",
@@ -18187,6 +18187,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -18195,7 +18196,8 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
     },
     "ini": {
       "version": "1.3.5",
@@ -18489,6 +18491,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.1.0.tgz",
       "integrity": "sha512-YcV7BgVMRFRua2FqQzKtTDMz8iCuLEyGKjr70q8Zm1yy2qKcurbFEd79PAdHV77oL3NrAaOVQIbMmiHQCHB7ZA==",
+      "dev": true,
       "requires": {
         "has": "^1.0.3"
       }
@@ -22424,6 +22427,12 @@
         }
       }
     },
+    "js-base64": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
+      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
+      "dev": true
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -22610,6 +22619,12 @@
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
       "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="
     },
+    "klona": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
+      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
+      "dev": true
+    },
     "lazy-universal-dotenv": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/lazy-universal-dotenv/-/lazy-universal-dotenv-3.0.1.tgz",
@@ -22878,11 +22893,6 @@
         "lodash._reinterpolate": "^3.0.0"
       }
     },
-    "lodash.toarray": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
-      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE="
-    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -23345,6 +23355,7 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -23352,7 +23363,8 @@
     "minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "dev": true
     },
     "minimist-options": {
       "version": "4.1.0",
@@ -23502,11 +23514,6 @@
         "mkdirp": "*"
       }
     },
-    "modern-normalize": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.0.0.tgz",
-      "integrity": "sha512-1lM+BMLGuDfsdwf3rsgBSrxJwAZHFIrQ8YR61xIqdHo0uNKI9M52wNpHSrliZATJp51On6JD0AfRxd4YGSU0lw=="
-    },
     "modify-values": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz",
@@ -23571,13 +23578,7 @@
       "version": "2.14.1",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
       "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
-      "dev": true,
-      "optional": true
-    },
-    "nanoid": {
-      "version": "3.1.20",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz",
-      "integrity": "sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw=="
+      "dev": true
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -23638,14 +23639,6 @@
         "tslib": "^1.10.0"
       }
     },
-    "node-emoji": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
-      "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
-      "requires": {
-        "lodash.toarray": "^4.4.0"
-      }
-    },
     "node-fetch": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
@@ -23779,159 +23772,517 @@
       "integrity": "sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==",
       "dev": true
     },
-    "nopt": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
-      "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
-      "dev": true,
-      "requires": {
-        "abbrev": "1",
-        "osenv": "^0.1.4"
-      }
-    },
-    "normalize-package-data": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-      "dev": true,
-      "requires": {
-        "hosted-git-info": "^2.1.4",
-        "resolve": "^1.10.0",
-        "semver": "2 || 3 || 4 || 5",
-        "validate-npm-package-license": "^3.0.1"
-      }
-    },
-    "normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true
-    },
-    "normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
-    },
-    "normalize-url": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
-      "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
-      "dev": true
-    },
-    "npm-bundled": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.1.tgz",
-      "integrity": "sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==",
-      "dev": true,
-      "requires": {
-        "npm-normalize-package-bin": "^1.0.1"
-      }
-    },
-    "npm-lifecycle": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/npm-lifecycle/-/npm-lifecycle-3.1.5.tgz",
-      "integrity": "sha512-lDLVkjfZmvmfvpvBzA4vzee9cn+Me4orq0QF8glbswJVEbIcSNWib7qGOffolysc3teCqbbPZZkzbr3GQZTL1g==",
+    "node-sass": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-5.0.0.tgz",
+      "integrity": "sha512-opNgmlu83ZCF792U281Ry7tak9IbVC+AKnXGovcQ8LG8wFaJv6cLnRlc6DIHlmNxWEexB5bZxi9SZ9JyUuOYjw==",
       "dev": true,
       "requires": {
-        "byline": "^5.0.0",
-        "graceful-fs": "^4.1.15",
-        "node-gyp": "^5.0.2",
-        "resolve-from": "^4.0.0",
-        "slide": "^1.1.6",
-        "uid-number": "0.0.6",
-        "umask": "^1.1.0",
-        "which": "^1.3.1"
+        "async-foreach": "^0.1.3",
+        "chalk": "^1.1.1",
+        "cross-spawn": "^7.0.3",
+        "gaze": "^1.0.0",
+        "get-stdin": "^4.0.1",
+        "glob": "^7.0.3",
+        "lodash": "^4.17.15",
+        "meow": "^3.7.0",
+        "mkdirp": "^0.5.1",
+        "nan": "^2.13.2",
+        "node-gyp": "^7.1.0",
+        "npmlog": "^4.0.0",
+        "request": "^2.88.0",
+        "sass-graph": "2.2.5",
+        "stdout-stream": "^1.4.0",
+        "true-case-path": "^1.0.2"
       },
       "dependencies": {
-        "resolve-from": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
           "dev": true
-        }
-      }
-    },
-    "npm-normalize-package-bin": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
-      "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
-      "dev": true
-    },
-    "npm-package-arg": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-      "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
-      "dev": true,
-      "requires": {
-        "hosted-git-info": "^2.7.1",
-        "osenv": "^0.1.5",
-        "semver": "^5.6.0",
-        "validate-npm-package-name": "^3.0.0"
-      }
-    },
-    "npm-packlist": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
-      "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
-      "dev": true,
-      "requires": {
-        "ignore-walk": "^3.0.1",
-        "npm-bundled": "^1.0.1",
-        "npm-normalize-package-bin": "^1.0.1"
-      }
-    },
-    "npm-pick-manifest": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-3.0.2.tgz",
-      "integrity": "sha512-wNprTNg+X5nf+tDi+hbjdHhM4bX+mKqv6XmPh7B5eG+QY9VARfQPfCEH013H5GqfNj6ee8Ij2fg8yk0mzps1Vw==",
-      "dev": true,
-      "requires": {
-        "figgy-pudding": "^3.5.1",
-        "npm-package-arg": "^6.0.0",
-        "semver": "^5.4.1"
-      }
-    },
-    "npm-run-all": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",
-      "integrity": "sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==",
-      "dev": true,
-      "requires": {
-        "ansi-styles": "^3.2.1",
-        "chalk": "^2.4.1",
-        "cross-spawn": "^6.0.5",
-        "memorystream": "^0.3.1",
-        "minimatch": "^3.0.4",
-        "pidtree": "^0.3.0",
-        "read-pkg": "^3.0.0",
-        "shell-quote": "^1.6.1",
-        "string.prototype.padend": "^3.0.0"
-      },
-      "dependencies": {
-        "load-json-file": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
-          "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
+        },
+        "camelcase": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
+          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
+          "dev": true
+        },
+        "camelcase-keys": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+          "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
           "dev": true,
           "requires": {
-            "graceful-fs": "^4.1.2",
-            "parse-json": "^4.0.0",
-            "pify": "^3.0.0",
-            "strip-bom": "^3.0.0"
+            "camelcase": "^2.0.0",
+            "map-obj": "^1.0.0"
           }
         },
-        "parse-json": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1"
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
           }
         },
-        "path-type": {
-          "version": "3.0.0",
+        "chownr": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+          "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+          "dev": true
+        },
+        "cross-spawn": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "find-up": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
+          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "dev": true,
+          "requires": {
+            "path-exists": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "get-stdin": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+          "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
+          "dev": true
+        },
+        "indent-string": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
+          "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
+          "dev": true,
+          "requires": {
+            "repeating": "^2.0.0"
+          }
+        },
+        "load-json-file": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "parse-json": "^2.2.0",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0",
+            "strip-bom": "^2.0.0"
+          }
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "map-obj": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+          "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
+          "dev": true
+        },
+        "meow": {
+          "version": "3.7.0",
+          "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+          "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
+          "dev": true,
+          "requires": {
+            "camelcase-keys": "^2.0.0",
+            "decamelize": "^1.1.2",
+            "loud-rejection": "^1.0.0",
+            "map-obj": "^1.0.1",
+            "minimist": "^1.1.3",
+            "normalize-package-data": "^2.3.4",
+            "object-assign": "^4.0.1",
+            "read-pkg-up": "^1.0.1",
+            "redent": "^1.0.0",
+            "trim-newlines": "^1.0.0"
+          }
+        },
+        "minizlib": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+          "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+          "dev": true,
+          "requires": {
+            "minipass": "^3.0.0",
+            "yallist": "^4.0.0"
+          }
+        },
+        "node-gyp": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-7.1.2.tgz",
+          "integrity": "sha512-CbpcIo7C3eMu3dL1c3d0xw449fHIGALIJsRP4DDPHpyiW8vcriNY7ubh9TE4zEKfSxscY7PjeFnshE7h75ynjQ==",
+          "dev": true,
+          "requires": {
+            "env-paths": "^2.2.0",
+            "glob": "^7.1.4",
+            "graceful-fs": "^4.2.3",
+            "nopt": "^5.0.0",
+            "npmlog": "^4.1.2",
+            "request": "^2.88.2",
+            "rimraf": "^3.0.2",
+            "semver": "^7.3.2",
+            "tar": "^6.0.2",
+            "which": "^2.0.2"
+          }
+        },
+        "nopt": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
+          "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
+          "dev": true,
+          "requires": {
+            "abbrev": "1"
+          }
+        },
+        "parse-json": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+          "dev": true,
+          "requires": {
+            "error-ex": "^1.2.0"
+          }
+        },
+        "path-exists": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "dev": true,
+          "requires": {
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+          "dev": true
+        },
+        "path-type": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
+          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+          "dev": true
+        },
+        "read-pkg": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
+          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+          "dev": true,
+          "requires": {
+            "load-json-file": "^1.0.0",
+            "normalize-package-data": "^2.3.2",
+            "path-type": "^1.0.0"
+          }
+        },
+        "read-pkg-up": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
+          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+          "dev": true,
+          "requires": {
+            "find-up": "^1.0.0",
+            "read-pkg": "^1.0.0"
+          }
+        },
+        "redent": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
+          "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
+          "dev": true,
+          "requires": {
+            "indent-string": "^2.1.0",
+            "strip-indent": "^1.0.1"
+          }
+        },
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "semver": {
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
+          "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^3.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+          "dev": true
+        },
+        "strip-bom": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+          "dev": true,
+          "requires": {
+            "is-utf8": "^0.2.0"
+          }
+        },
+        "strip-indent": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
+          "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
+          "dev": true,
+          "requires": {
+            "get-stdin": "^4.0.1"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        },
+        "tar": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz",
+          "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==",
+          "dev": true,
+          "requires": {
+            "chownr": "^2.0.0",
+            "fs-minipass": "^2.0.0",
+            "minipass": "^3.0.0",
+            "minizlib": "^2.1.1",
+            "mkdirp": "^1.0.3",
+            "yallist": "^4.0.0"
+          },
+          "dependencies": {
+            "mkdirp": {
+              "version": "1.0.4",
+              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+              "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+              "dev": true
+            }
+          }
+        },
+        "trim-newlines": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
+          "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=",
+          "dev": true
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
+      }
+    },
+    "nopt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
+      "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
+      "dev": true,
+      "requires": {
+        "abbrev": "1",
+        "osenv": "^0.1.4"
+      }
+    },
+    "normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dev": true,
+      "requires": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      }
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
+    },
+    "normalize-url": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
+      "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
+      "dev": true
+    },
+    "npm-bundled": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.1.tgz",
+      "integrity": "sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==",
+      "dev": true,
+      "requires": {
+        "npm-normalize-package-bin": "^1.0.1"
+      }
+    },
+    "npm-lifecycle": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/npm-lifecycle/-/npm-lifecycle-3.1.5.tgz",
+      "integrity": "sha512-lDLVkjfZmvmfvpvBzA4vzee9cn+Me4orq0QF8glbswJVEbIcSNWib7qGOffolysc3teCqbbPZZkzbr3GQZTL1g==",
+      "dev": true,
+      "requires": {
+        "byline": "^5.0.0",
+        "graceful-fs": "^4.1.15",
+        "node-gyp": "^5.0.2",
+        "resolve-from": "^4.0.0",
+        "slide": "^1.1.6",
+        "uid-number": "0.0.6",
+        "umask": "^1.1.0",
+        "which": "^1.3.1"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
+        }
+      }
+    },
+    "npm-normalize-package-bin": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
+      "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
+      "dev": true
+    },
+    "npm-package-arg": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
+      "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+      "dev": true,
+      "requires": {
+        "hosted-git-info": "^2.7.1",
+        "osenv": "^0.1.5",
+        "semver": "^5.6.0",
+        "validate-npm-package-name": "^3.0.0"
+      }
+    },
+    "npm-packlist": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
+      "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
+      "dev": true,
+      "requires": {
+        "ignore-walk": "^3.0.1",
+        "npm-bundled": "^1.0.1",
+        "npm-normalize-package-bin": "^1.0.1"
+      }
+    },
+    "npm-pick-manifest": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-3.0.2.tgz",
+      "integrity": "sha512-wNprTNg+X5nf+tDi+hbjdHhM4bX+mKqv6XmPh7B5eG+QY9VARfQPfCEH013H5GqfNj6ee8Ij2fg8yk0mzps1Vw==",
+      "dev": true,
+      "requires": {
+        "figgy-pudding": "^3.5.1",
+        "npm-package-arg": "^6.0.0",
+        "semver": "^5.4.1"
+      }
+    },
+    "npm-run-all": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",
+      "integrity": "sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "chalk": "^2.4.1",
+        "cross-spawn": "^6.0.5",
+        "memorystream": "^0.3.1",
+        "minimatch": "^3.0.4",
+        "pidtree": "^0.3.0",
+        "read-pkg": "^3.0.0",
+        "shell-quote": "^1.6.1",
+        "string.prototype.padend": "^3.0.0"
+      },
+      "dependencies": {
+        "load-json-file": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
+          "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "parse-json": "^4.0.0",
+            "pify": "^3.0.0",
+            "strip-bom": "^3.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+          "dev": true,
+          "requires": {
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1"
+          }
+        },
+        "path-type": {
+          "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
           "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
           "dev": true,
@@ -24014,7 +24365,8 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
     },
     "object-copy": {
       "version": "0.1.0",
@@ -24047,11 +24399,6 @@
         }
       }
     },
-    "object-hash": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.1.1.tgz",
-      "integrity": "sha512-VOJmgmS+7wvXf8CjbQmimtCnEx3IAoLxI3fp2fbWehxrWBcAQFbk+vcwb6vzR0VZv/eNCJ/27j151ZTwqW/JeQ=="
-    },
     "object-inspect": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz",
@@ -24174,6 +24521,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -24581,7 +24929,8 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
     },
     "path-key": {
       "version": "2.0.1",
@@ -25093,39 +25442,6 @@
         }
       }
     },
-    "postcss-functions": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
-      "integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
-      "requires": {
-        "glob": "^7.1.2",
-        "object-assign": "^4.1.1",
-        "postcss": "^6.0.9",
-        "postcss-value-parser": "^3.3.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "6.0.23",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
-          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "requires": {
-            "chalk": "^2.4.1",
-            "source-map": "^0.6.1",
-            "supports-color": "^5.4.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
     "postcss-import": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz",
@@ -25144,15 +25460,6 @@
         }
       }
     },
-    "postcss-js": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
-      "integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
-      "requires": {
-        "camelcase-css": "^2.0.1",
-        "postcss": "^7.0.18"
-      }
-    },
     "postcss-load-config": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.0.0.tgz",
@@ -25816,15 +26123,6 @@
         }
       }
     },
-    "postcss-nested": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
-      "integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
-      "requires": {
-        "postcss": "^7.0.32",
-        "postcss-selector-parser": "^6.0.2"
-      }
-    },
     "postcss-normalize-charset": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
@@ -26359,6 +26657,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
       "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
+      "dev": true,
       "requires": {
         "cssesc": "^3.0.0",
         "indexes-of": "^1.0.1",
@@ -26546,7 +26845,8 @@
     "pretty-hrtime": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
-      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE="
+      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
+      "dev": true
     },
     "prismjs": {
       "version": "1.22.0",
@@ -26764,39 +27064,6 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
       "dev": true
     },
-    "purgecss": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-3.1.3.tgz",
-      "integrity": "sha512-hRSLN9mguJ2lzlIQtW4qmPS2kh6oMnA9RxdIYK8sz18QYqd6ePp4GNDl18oWHA1f2v2NEQIh51CO8s/E3YGckQ==",
-      "requires": {
-        "commander": "^6.0.0",
-        "glob": "^7.0.0",
-        "postcss": "^8.2.1",
-        "postcss-selector-parser": "^6.0.2"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "6.2.1",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
-          "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA=="
-        },
-        "postcss": {
-          "version": "8.2.4",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.4.tgz",
-          "integrity": "sha512-kRFftRoExRVXZlwUuay9iC824qmXPcQQVzAjbCCgjpXnkdMCJYBu2gTwAaFBzv8ewND6O8xFb3aELmEkh9zTzg==",
-          "requires": {
-            "colorette": "^1.2.1",
-            "nanoid": "^3.1.20",
-            "source-map": "^0.6.1"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -27791,22 +28058,6 @@
         "strip-indent": "^3.0.0"
       }
     },
-    "reduce-css-calc": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
-      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
-      "requires": {
-        "css-unit-converter": "^1.1.1",
-        "postcss-value-parser": "^3.3.0"
-      },
-      "dependencies": {
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
-        }
-      }
-    },
     "refractor": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.2.0.tgz",
@@ -28155,6 +28406,93 @@
         "fsevents": "~2.1.2"
       }
     },
+    "rollup-plugin-copy": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-copy/-/rollup-plugin-copy-3.3.0.tgz",
+      "integrity": "sha512-euDjCUSBXZa06nqnwCNADbkAcYDfzwowfZQkto9K/TFhiH+QG7I4PUsEMwM9tDgomGWJc//z7KLW8t+tZwxADA==",
+      "dev": true,
+      "requires": {
+        "@types/fs-extra": "^8.0.1",
+        "colorette": "^1.1.0",
+        "fs-extra": "^8.1.0",
+        "globby": "10.0.1",
+        "is-plain-object": "^3.0.0"
+      },
+      "dependencies": {
+        "@nodelib/fs.stat": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz",
+          "integrity": "sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==",
+          "dev": true
+        },
+        "array-union": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+          "dev": true
+        },
+        "dir-glob": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+          "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+          "dev": true,
+          "requires": {
+            "path-type": "^4.0.0"
+          }
+        },
+        "fast-glob": {
+          "version": "3.2.4",
+          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.4.tgz",
+          "integrity": "sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ==",
+          "dev": true,
+          "requires": {
+            "@nodelib/fs.stat": "^2.0.2",
+            "@nodelib/fs.walk": "^1.2.3",
+            "glob-parent": "^5.1.0",
+            "merge2": "^1.3.0",
+            "micromatch": "^4.0.2",
+            "picomatch": "^2.2.1"
+          }
+        },
+        "glob-parent": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
+          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "globby": {
+          "version": "10.0.1",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.1.tgz",
+          "integrity": "sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==",
+          "dev": true,
+          "requires": {
+            "@types/glob": "^7.1.1",
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.0.3",
+            "glob": "^7.1.3",
+            "ignore": "^5.1.1",
+            "merge2": "^1.2.3",
+            "slash": "^3.0.0"
+          }
+        },
+        "ignore": {
+          "version": "5.1.8",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
+          "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
+          "dev": true
+        },
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true
+        }
+      }
+    },
     "rollup-plugin-livereload": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.0.tgz",
@@ -28672,85 +29010,315 @@
             }
           }
         },
-        "fill-range": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "dev": true,
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^4.0.0",
+            "array-unique": "^0.3.2",
+            "braces": "^2.3.1",
+            "define-property": "^2.0.2",
+            "extend-shallow": "^3.0.2",
+            "extglob": "^2.0.4",
+            "fragment-cache": "^0.2.1",
+            "kind-of": "^6.0.2",
+            "nanomatch": "^1.2.9",
+            "object.pick": "^1.3.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.2"
+          }
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+          "dev": true,
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
+        }
+      }
+    },
+    "sass-graph": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
+      "integrity": "sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "lodash": "^4.0.0",
+        "scss-tokenizer": "^0.2.3",
+        "yargs": "^13.3.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "cliui": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+          "dev": true,
+          "requires": {
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        },
+        "yargs": {
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
+    "sass-loader": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.1.1.tgz",
+      "integrity": "sha512-W6gVDXAd5hR/WHsPicvZdjAWHBcEJ44UahgxcIE196fW2ong0ZHMPO1kZuI5q0VlvMQZh32gpv69PLWQm70qrw==",
+      "dev": true,
+      "requires": {
+        "klona": "^2.0.4",
+        "loader-utils": "^2.0.0",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.0.0",
+        "semver": "^7.3.2"
+      },
+      "dependencies": {
+        "@types/json-schema": {
+          "version": "7.0.6",
+          "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
+          "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
+          "dev": true
+        },
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "dev": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
           "dev": true,
           "requires": {
-            "extend-shallow": "^2.0.1",
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1",
-            "to-regex-range": "^2.1.0"
-          },
-          "dependencies": {
-            "extend-shallow": {
-              "version": "2.0.1",
-              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
-              "requires": {
-                "is-extendable": "^0.1.0"
-              }
-            }
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
           }
         },
-        "is-number": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
           "dev": true,
           "requires": {
-            "kind-of": "^3.0.2"
-          },
-          "dependencies": {
-            "kind-of": {
-              "version": "3.2.2",
-              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "dev": true,
-              "requires": {
-                "is-buffer": "^1.1.5"
-              }
-            }
+            "yallist": "^4.0.0"
           }
         },
-        "isobject": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+        "neo-async": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+          "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
           "dev": true
         },
-        "micromatch": {
-          "version": "3.1.10",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
           "dev": true,
           "requires": {
-            "arr-diff": "^4.0.0",
-            "array-unique": "^0.3.2",
-            "braces": "^2.3.1",
-            "define-property": "^2.0.2",
-            "extend-shallow": "^3.0.2",
-            "extglob": "^2.0.4",
-            "fragment-cache": "^0.2.1",
-            "kind-of": "^6.0.2",
-            "nanomatch": "^1.2.9",
-            "object.pick": "^1.3.0",
-            "regex-not": "^1.0.0",
-            "snapdragon": "^0.8.1",
-            "to-regex": "^3.0.2"
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
           }
         },
-        "to-regex-range": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+        "semver": {
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
+          "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
           "dev": true,
           "requires": {
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1"
+            "lru-cache": "^6.0.0"
           }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
         }
       }
     },
@@ -28810,6 +29378,27 @@
         }
       }
     },
+    "scss-tokenizer": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
+      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
+      "dev": true,
+      "requires": {
+        "js-base64": "^2.1.8",
+        "source-map": "^0.4.2"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "dev": true,
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        }
+      }
+    },
     "select": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
@@ -29131,6 +29720,7 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
       "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "dev": true,
       "requires": {
         "is-arrayish": "^0.3.1"
       },
@@ -29138,7 +29728,8 @@
         "is-arrayish": {
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+          "dev": true
         }
       }
     },
@@ -29580,6 +30171,15 @@
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
       "dev": true
     },
+    "stdout-stream": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
+      "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
+      "dev": true,
+      "requires": {
+        "readable-stream": "^2.0.1"
+      }
+    },
     "stealthy-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
@@ -30387,170 +30987,6 @@
         }
       }
     },
-    "tailwindcss": {
-      "version": "npm:@tailwindcss/postcss7-compat@2.0.2",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss7-compat/-/postcss7-compat-2.0.2.tgz",
-      "integrity": "sha512-KM8kjG5dd8qoXBX2a6r3r1TOqhFh8NtFBheG9qpVPwSjrD8wRdoM7s+Xz56HEA1XmeN64gEKqjmY6vm55DiS3Q==",
-      "requires": {
-        "@fullhuman/postcss-purgecss": "^3.0.0",
-        "autoprefixer": "^9",
-        "bytes": "^3.0.0",
-        "chalk": "^4.1.0",
-        "color": "^3.1.3",
-        "detective": "^5.2.0",
-        "didyoumean": "^1.2.1",
-        "fs-extra": "^9.0.1",
-        "html-tags": "^3.1.0",
-        "lodash": "^4.17.20",
-        "modern-normalize": "^1.0.0",
-        "node-emoji": "^1.8.1",
-        "object-hash": "^2.0.3",
-        "postcss": "^7",
-        "postcss-functions": "^3",
-        "postcss-js": "^2",
-        "postcss-nested": "^4",
-        "postcss-selector-parser": "^6.0.4",
-        "postcss-value-parser": "^4.1.0",
-        "pretty-hrtime": "^1.0.3",
-        "reduce-css-calc": "^2.1.6",
-        "resolve": "^1.19.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/color/-/color-3.1.3.tgz",
-          "integrity": "sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==",
-          "requires": {
-            "color-convert": "^1.9.1",
-            "color-string": "^1.5.4"
-          },
-          "dependencies": {
-            "color-convert": {
-              "version": "1.9.3",
-              "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-              "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-              "requires": {
-                "color-name": "1.1.3"
-              }
-            },
-            "color-name": {
-              "version": "1.1.3",
-              "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-              "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-            }
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-        },
-        "color-string": {
-          "version": "1.5.4",
-          "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.4.tgz",
-          "integrity": "sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==",
-          "requires": {
-            "color-name": "^1.0.0",
-            "simple-swizzle": "^0.2.2"
-          }
-        },
-        "fs-extra": {
-          "version": "9.0.1",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
-          "integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
-          "requires": {
-            "at-least-node": "^1.0.0",
-            "graceful-fs": "^4.2.0",
-            "jsonfile": "^6.0.1",
-            "universalify": "^1.0.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=="
-        },
-        "jsonfile": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-          "requires": {
-            "graceful-fs": "^4.1.6",
-            "universalify": "^2.0.0"
-          },
-          "dependencies": {
-            "universalify": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-              "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
-            }
-          }
-        },
-        "postcss-selector-parser": {
-          "version": "6.0.4",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz",
-          "integrity": "sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==",
-          "requires": {
-            "cssesc": "^3.0.0",
-            "indexes-of": "^1.0.1",
-            "uniq": "^1.0.1",
-            "util-deprecate": "^1.0.2"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-          "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
-        },
-        "resolve": {
-          "version": "1.19.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
-          "integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==",
-          "requires": {
-            "is-core-module": "^2.1.0",
-            "path-parse": "^1.0.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==",
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "universalify": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
-          "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug=="
-        }
-      }
-    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -31139,6 +31575,15 @@
       "integrity": "sha1-n5up2e+odkw4dpi8v+sshI8RrbM=",
       "dev": true
     },
+    "true-case-path": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
+      "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.2"
+      }
+    },
     "ts-dedent": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.0.0.tgz",
@@ -31342,7 +31787,8 @@
     "uniq": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
-      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
+      "dev": true
     },
     "uniqs": {
       "version": "2.0.0",
@@ -31604,7 +32050,8 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
     },
     "util-promisify": {
       "version": "2.1.0",
@@ -32471,7 +32918,8 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
     },
     "write": {
       "version": "1.0.3",
@@ -32594,7 +33042,8 @@
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true
     },
     "y18n": {
       "version": "4.0.0",
diff --git a/package.json b/package.json
index 3bfe2f1d2..0a9776441 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@babel/core": "^7.12.10",
     "@babel/plugin-transform-runtime": "7.12.10",
     "@babel/preset-env": "^7.12.11",
+    "@mozilla-protocol/core": "^13.0.1",
     "@rollup/plugin-commonjs": "17.0.0",
     "@rollup/plugin-node-resolve": "11.0.1",
     "@rollup/plugin-replace": "^2.3.4",
@@ -37,15 +38,18 @@
     "eslint-plugin-svelte3": "3.0.0",
     "jest": "^26.6.3",
     "lerna": "3.22.1",
+    "node-sass": "^5.0.0",
     "npm-run-all": "4.1.5",
     "page": "1.11.6",
     "prettier": "^2.2.1",
     "prettier-plugin-svelte": "^1.4.2",
     "rollup": "2.36.1",
+    "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-livereload": "2.0.0",
     "rollup-plugin-postcss": "3.1.8",
     "rollup-plugin-svelte": "6.0.1",
     "rollup-plugin-terser": "7.0.2",
+    "sass-loader": "^10.1.1",
     "svelte": "3.29.0",
     "svelte-jester": "^1.3.0",
     "svelte-loader": "2.13.6"
@@ -61,7 +65,6 @@
     "postcss-load-config": "^3.0.0",
     "sirv-cli": "1.0.10",
     "svelte-preprocess": "^4.6.1",
-    "sveltejs-tippy": "^3.0.0",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1"
+    "sveltejs-tippy": "^3.0.0"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
index 355d06920..cef42fbd4 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,4 +1,4 @@
 module.exports = {
   /* eslint-disable global-require */
-  plugins: [require("postcss-import"), require("tailwindcss")],
+  plugins: [require("postcss-import")],
 };
diff --git a/public/glean_logo.png b/public/glean_logo.png
new file mode 100644
index 000000000..cbac6ddaa
Binary files /dev/null and b/public/glean_logo.png differ
diff --git a/rollup.config.js b/rollup.config.js
index 2e43b7716..74811f242 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -7,6 +7,7 @@ import livereload from "rollup-plugin-livereload";
 import { terser } from "rollup-plugin-terser";
 import { spawn, execSync } from "child_process";
 import sveltePreprocess from "svelte-preprocess";
+import copy from "rollup-plugin-copy";
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -48,7 +49,15 @@ export default {
       dev: !production,
       // we'll extract any component CSS out into
       // a separate file - better for performance
-      preprocess: sveltePreprocess({ postcss: true }),
+      preprocess: sveltePreprocess({
+        postcss: true,
+        defaults: {
+          style: "scss",
+        },
+        scss: {
+          prependData: `@import 'node_modules/@mozilla-protocol/core/protocol/css/protocol.scss';`,
+        },
+      }),
       css: (css) => {
         css.write("bundle.css");
       },
@@ -87,6 +96,18 @@ export default {
     // If we're building for production (npm run build
     // instead of npm run dev), minify
     production && terser(),
+    copy({
+      targets: [
+        {
+          src: "node_modules/@mozilla-protocol/core/protocol/img/logos/mozilla",
+          dest: "public/img/logos",
+        },
+        {
+          src: ["node_modules/@mozilla-protocol/core/protocol/fonts"],
+          dest: "public/",
+        },
+      ],
+    }),
   ],
   watch: {
     clearScreen: false,
diff --git a/src/App.svelte b/src/App.svelte
index 06fef65c3..01d46b409 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,9 +1,9 @@
 <script>
   import { afterUpdate } from "svelte";
   import page from "page";
-  import Tailwindcss from "./Tailwindcss.svelte";
   import Breadcrumb from "./components/Breadcrumb.svelte";
   import Footer from "./components/Footer.svelte";
+  import GlobalStyles from "./GlobalStyles.svelte";
 
   // Pages
   import AppList from "./pages/AppList.svelte";
@@ -84,28 +84,68 @@
 </script>
 
 <style>
-  .brand {
-    @apply text-gray-100;
+  .mzp-c-navigation {
+    background-color: black;
+    padding-top: $spacing-md;
+    .mzp-c-navigation-logo-glean {
+      width: 100%;
+      display: flex;
+      padding-top: $spacing-xs;
+      .glean-logo {
+        text-decoration: none;
+        img {
+          max-width: 113px;
+        }
+      }
+      h5 {
+        display: inline-block;
+        color: #e0e3e0;
+        line-height: 0.7;
+        padding-left: $spacing-xs;
+      }
+    }
+  }
+
+  .c-sub-navigation {
+    background: #f9f9fa;
+    box-shadow: inset 0 10px 2px -10px rgba(29, 17, 51, 0.04),
+      inset 0 10px 4px -10px rgba(9, 32, 77, 0.12),
+      inset 0 10px 3px -10px rgba(29, 17, 51, 0.12);
   }
 </style>
 
-<Tailwindcss />
-<nav class="flex items-center justify-between flex-wrap bg-blue-800 p-2">
-  <div class="flex items-center flex-shrink-0 mr-6">
-    <a class="brand font-semibold text-xl tracking-tight" href="/">
-      Glean Dictionary
-      <i>Prototype</i>
-    </a>
+<GlobalStyles />
+
+<div class="mzp-c-navigation mzp-is-sticky">
+  <div class="mzp-c-navigation-l-content">
+    <div class="mzp-c-navigation-container">
+      <div class="mzp-c-navigation-logo-glean">
+        <a class="glean-logo" href="/">
+          <img src="/glean_logo.png" alt="Glean Dictionary Logo" /></a>
+        <a href="/"><h5>Dictionary</h5></a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<nav class="mzp-c-navigation c-sub-navigation">
+  <div class="mzp-c-navigation-l-content">
+    <div class="mzp-c-navigation-container">
+      <Breadcrumb {links} />
+    </div>
   </div>
 </nav>
-<Breadcrumb {links} />
 
-<div class="container py-4 mx-auto">
-  <svelte:component
-    this={component}
-    bind:params
-    bind:queryString
-    on:updateURL={updateURL} />
-</div>
+<main>
+  <div class="mzp-l-content">
+    <article class="mzp-c-article">
+      <svelte:component
+        this={component}
+        bind:params
+        bind:queryString
+        on:updateURL={updateURL} />
+    </article>
+  </div>
+</main>
 
 <Footer />
diff --git a/src/GlobalStyles.svelte b/src/GlobalStyles.svelte
new file mode 100644
index 000000000..39b32ea25
--- /dev/null
+++ b/src/GlobalStyles.svelte
@@ -0,0 +1,3 @@
+<style global>
+  @import "@mozilla-protocol/core/protocol/css/protocol.scss";
+</style>
diff --git a/src/Tailwindcss.svelte b/src/Tailwindcss.svelte
deleted file mode 100644
index 306e7b438..000000000
--- a/src/Tailwindcss.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<style global>
-  @import "main.css";
-</style>
diff --git a/src/__snapshots__/storyshots.test.js.snap b/src/__snapshots__/storyshots.test.js.snap
index 544406454..b11243d87 100644
--- a/src/__snapshots__/storyshots.test.js.snap
+++ b/src/__snapshots__/storyshots.test.js.snap
@@ -5,25 +5,42 @@ exports[`Storyshots Breadcrumb App Details Page 1`] = `
   class="storybook-snapshot-container"
 >
   <ol
-    class="flex border-b-2 py-2 divide-x "
+    class="svelte-f5f52z"
+    style=""
   >
     <li
-      class="px-2"
+      class="svelte-f5f52z"
     >
       <a
+        class="link-name svelte-f5f52z"
         href="/"
       >
         apps
+         
       </a>
+      <span
+        class="svelte-f5f52z"
+      >
+        /
+      </span>
+       
     </li>
     <li
-      class="px-2"
+      class="svelte-f5f52z"
     >
       <a
+        class="link-name svelte-f5f52z"
         href="/apps/fenix/"
       >
         fenix
+         
       </a>
+      <span
+        class="svelte-f5f52z"
+      >
+        
+      </span>
+       
     </li>
   </ol>
 </section>
@@ -34,16 +51,25 @@ exports[`Storyshots Breadcrumb Apps List Page 1`] = `
   class="storybook-snapshot-container"
 >
   <ol
-    class="flex border-b-2 py-2 divide-x "
+    class="svelte-f5f52z"
+    style=""
   >
     <li
-      class="px-2"
+      class="svelte-f5f52z"
     >
       <a
+        class="link-name svelte-f5f52z"
         href="/"
       >
         apps
+         
       </a>
+      <span
+        class="svelte-f5f52z"
+      >
+        
+      </span>
+       
     </li>
   </ol>
 </section>
@@ -54,43 +80,76 @@ exports[`Storyshots Breadcrumb Big Query Table Page 1`] = `
   class="storybook-snapshot-container"
 >
   <ol
-    class="flex border-b-2 py-2 divide-x "
+    class="svelte-f5f52z"
+    style=""
   >
     <li
-      class="px-2"
+      class="svelte-f5f52z"
     >
       <a
+        class="link-name svelte-f5f52z"
         href="/"
       >
         apps
+         
       </a>
+      <span
+        class="svelte-f5f52z"
+      >
+        /
+      </span>
+       
     </li>
     <li
-      class="px-2"
+      class="svelte-f5f52z"
     >
       <a
+        class="link-name svelte-f5f52z"
         href="/apps/fenix/"
       >
         fenix
+         
       </a>
+      <span
+        class="svelte-f5f52z"
+      >
+        /
+      </span>
+       
     </li>
     <li
-      class="px-2"
+      class="svelte-f5f52z"
     >
       <a
+        class="link-name svelte-f5f52z"
         href="/apps/fenix/pings/activation"
       >
         activation
+         
       </a>
+      <span
+        class="svelte-f5f52z"
+      >
+        /
+      </span>
+       
     </li>
     <li
-      class="px-2"
+      class="svelte-f5f52z"
     >
       <a
+        class="link-name svelte-f5f52z"
         href="/apps/fenix/tables/activation/"
       >
         activation table
+         
       </a>
+      <span
+        class="svelte-f5f52z"
+      >
+        
+      </span>
+       
     </li>
   </ol>
 </section>
@@ -101,34 +160,59 @@ exports[`Storyshots Breadcrumb Metric Page 1`] = `
   class="storybook-snapshot-container"
 >
   <ol
-    class="flex border-b-2 py-2 divide-x "
+    class="svelte-f5f52z"
+    style=""
   >
     <li
-      class="px-2"
+      class="svelte-f5f52z"
     >
       <a
+        class="link-name svelte-f5f52z"
         href="/"
       >
         apps
+         
       </a>
+      <span
+        class="svelte-f5f52z"
+      >
+        /
+      </span>
+       
     </li>
     <li
-      class="px-2"
+      class="svelte-f5f52z"
     >
       <a
+        class="link-name svelte-f5f52z"
         href="/apps/fenix/"
       >
         fenix
+         
       </a>
+      <span
+        class="svelte-f5f52z"
+      >
+        /
+      </span>
+       
     </li>
     <li
-      class="px-2"
+      class="svelte-f5f52z"
     >
       <a
+        class="link-name svelte-f5f52z"
         href="/apps/fenix/metrics/about_page.libraries_tapped"
       >
         about_page.libraries_tapped
+         
       </a>
+      <span
+        class="svelte-f5f52z"
+      >
+        
+      </span>
+       
     </li>
   </ol>
 </section>
@@ -139,34 +223,59 @@ exports[`Storyshots Breadcrumb Ping Page 1`] = `
   class="storybook-snapshot-container"
 >
   <ol
-    class="flex border-b-2 py-2 divide-x "
+    class="svelte-f5f52z"
+    style=""
   >
     <li
-      class="px-2"
+      class="svelte-f5f52z"
     >
       <a
+        class="link-name svelte-f5f52z"
         href="/"
       >
         apps
+         
       </a>
+      <span
+        class="svelte-f5f52z"
+      >
+        /
+      </span>
+       
     </li>
     <li
-      class="px-2"
+      class="svelte-f5f52z"
     >
       <a
+        class="link-name svelte-f5f52z"
         href="/apps/fenix/"
       >
         fenix
+         
       </a>
+      <span
+        class="svelte-f5f52z"
+      >
+        /
+      </span>
+       
     </li>
     <li
-      class="px-2"
+      class="svelte-f5f52z"
     >
       <a
+        class="link-name svelte-f5f52z"
         href="/apps/fenix/pings/activation"
       >
         activation
+         
       </a>
+      <span
+        class="svelte-f5f52z"
+      >
+        
+      </span>
+       
     </li>
   </ol>
 </section>
@@ -177,27 +286,30 @@ exports[`Storyshots Email Addresses Multiple Emails 1`] = `
   class="storybook-snapshot-container"
 >
   <span
-    class="block"
+    class="svelte-15gk75t"
   >
     <a
+      class="svelte-15gk75t"
       href="mailto:example@example.com"
     >
       example@example.com
     </a>
   </span>
   <span
-    class="block"
+    class="svelte-15gk75t"
   >
     <a
+      class="svelte-15gk75t"
       href="mailto:email@email.com"
     >
       email@email.com
     </a>
   </span>
   <span
-    class="block"
+    class="svelte-15gk75t"
   >
     <a
+      class="svelte-15gk75t"
       href="mailto:post@pigeon.com"
     >
       post@pigeon.com
@@ -212,9 +324,10 @@ exports[`Storyshots Email Addresses Single Email 1`] = `
   class="storybook-snapshot-container"
 >
   <span
-    class="block"
+    class="svelte-15gk75t"
   >
     <a
+      class="svelte-15gk75t"
       href="mailto:glean@mozilla.com"
     >
       glean@mozilla.com
@@ -232,11 +345,11 @@ exports[`Storyshots FilterInput Basic 1`] = `
     class="container"
   >
     <div
-      class="container py-4 mx-auto"
+      class="svelte-y697ub"
     >
       <input
-        class="shadow appearance-none border rounded w-full p-2 text-gray-700
-    leading-tight focus:outline-none focus:shadow-outline"
+        class="svelte-y697ub"
+        id="filter-input"
         placeholder="filter terms"
         type="text"
       />
@@ -268,275 +381,377 @@ exports[`Storyshots ItemList Default 1`] = `
   class="storybook-snapshot-container"
 >
   <div
-    class="container py-4 mx-auto"
+    class="svelte-y697ub"
   >
     <input
-      class="shadow appearance-none border rounded w-full p-2 text-gray-700
-    leading-tight focus:outline-none focus:shadow-outline"
+      class="svelte-y697ub"
+      id="filter-input"
       placeholder="filter terms"
       type="text"
     />
   </div>
    
   <div
-    class="item-browser mx-auto my-4 p-2 svelte-xr7n6m"
+    class="item-browser svelte-w4aaiz"
   >
-    <ul>
-      <li>
+    <ul
+      class="svelte-w4aaiz"
+    >
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 0"
         >
           Test metric 0
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 0
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 1"
         >
           Test metric 1
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 1
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 2"
         >
           Test metric 2
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 2
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 3"
         >
           Test metric 3
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 3
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 4"
         >
           Test metric 4
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 4
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 5"
         >
           Test metric 5
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 5
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 6"
         >
           Test metric 6
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 6
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 7"
         >
           Test metric 7
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 7
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 8"
         >
           Test metric 8
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 8
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 9"
         >
           Test metric 9
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 9
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 10"
         >
           Test metric 10
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 10
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 11"
         >
           Test metric 11
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 11
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 12"
         >
           Test metric 12
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 12
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 13"
         >
           Test metric 13
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 13
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 14"
         >
           Test metric 14
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 14
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 15"
         >
           Test metric 15
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 15
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 16"
         >
           Test metric 16
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 16
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 17"
         >
           Test metric 17
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 17
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 18"
         >
           Test metric 18
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 18
           
         </i>
          
       </li>
-      <li>
+      <li
+        class="svelte-w4aaiz"
+      >
         <a
+          class="svelte-w4aaiz"
           href="/apps/app-name/metrics/Test metric 19"
         >
           Test metric 19
         </a>
          
-        <i>
+        <i
+          class="svelte-w4aaiz"
+        >
           This is test metric 19
           
         </i>
@@ -545,104 +760,116 @@ exports[`Storyshots ItemList Default 1`] = `
     </ul>
   </div>
    
-  <p>
-    Page
-  
-    <code>
-      1
-    </code>
-    
-  of
-  
-    <code>
-      2
-    </code>
+  <div
+    class="pagination-position svelte-bkgwc9"
+  >
+    <p
+      class="svelte-bkgwc9"
+    >
+      Page
     
-  (
-    <code>
-      1
-    </code>
+      <code
+        class="svelte-bkgwc9"
+      >
+        1
+      </code>
+      
+    of
     
-  -
-  
-    <code>
-      20
-    </code>
+      <code
+        class="svelte-bkgwc9"
+      >
+        2
+      </code>
+      
+    (
+      <code
+        class="svelte-bkgwc9"
+      >
+        1
+      </code>
+      
+    -
     
-  on
-  
-    <code>
-      21
-    </code>
+      <code
+        class="svelte-bkgwc9"
+      >
+        20
+      </code>
+      
+    on
     
-  items)
-  </p>
+      <code
+        class="svelte-bkgwc9"
+      >
+        21
+      </code>
+      
+    items)
+    </p>
+  </div>
    
   <div
-    class="flex flex-col items-center my-12"
+    class="pagination-bar svelte-bkgwc9"
   >
     <div
-      class="flex text-gray-700"
+      class="pagination-button current-page svelte-bkgwc9"
+    >
+      <svg
+        class="feather feather-chevron-left w-6 h-6"
+        fill="none"
+        height="100%"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="100%"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <polyline
+          points="15 18 9 12 15 6"
+        />
+      </svg>
+    </div>
+     
+    <div
+      class="pages svelte-bkgwc9"
     >
       <div
-        class="h-12 w-12 mr-1 flex justify-center items-center rounded-full bg-gray-200 cursor-pointer bg-teal-600 text-white"
-      >
-        <svg
-          class="feather feather-chevron-left w-6 h-6"
-          fill="none"
-          height="100%"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          width="100%"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <polyline
-            points="15 18 9 12 15 6"
-          />
-        </svg>
-      </div>
-       
-      <div
-        class="flex h-12 font-medium rounded-full bg-gray-200"
+        class="page current-page svelte-bkgwc9"
       >
-        <div
-          class="w-12 md:flex justify-center items-center hidden cursor-pointer bg-teal-600 text-white"
-        >
-          1
-           
-        </div>
-        <div
-          class="w-12 md:flex justify-center items-center hidden cursor-pointer "
-        >
-          2
-           
-        </div>
+        1
+         
       </div>
-       
       <div
-        class="h-12 w-12 ml-1 flex justify-center items-center rounded-full bg-gray-200 cursor-pointer "
-      >
-        <svg
-          class="feather feather-chevron-right w-6 h-6"
-          fill="none"
-          height="100%"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          width="100%"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <polyline
-            points="9 18 15 12 9 6"
-          />
-        </svg>
+        class="page  svelte-bkgwc9"
+      >
+        2
+         
       </div>
     </div>
+     
+    <div
+      class="pagination-button  svelte-bkgwc9"
+    >
+      <svg
+        class="feather feather-chevron-right w-6 h-6"
+        fill="none"
+        height="100%"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="100%"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <polyline
+          points="9 18 15 12 9 6"
+        />
+      </svg>
+    </div>
   </div>
   
   
@@ -672,122 +899,134 @@ exports[`Storyshots Pagination Default 1`] = `
 <section
   class="storybook-snapshot-container"
 >
-  <p>
-    Page
-  
-    <code>
-      1
-    </code>
-    
-  of
-  
-    <code>
-      11
-    </code>
+  <div
+    class="pagination-position svelte-w3m83n"
+  >
+    <p
+      class="svelte-w3m83n"
+    >
+      Page
     
-  (
-    <code>
-      1
-    </code>
+      <code
+        class="svelte-w3m83n"
+      >
+        1
+      </code>
+      
+    of
     
-  -
-  
-    <code>
-      20
-    </code>
+      <code
+        class="svelte-w3m83n"
+      >
+        11
+      </code>
+      
+    (
+      <code
+        class="svelte-w3m83n"
+      >
+        1
+      </code>
+      
+    -
     
-  on
-  
-    <code>
-      210
-    </code>
+      <code
+        class="svelte-w3m83n"
+      >
+        20
+      </code>
+      
+    on
     
-  items)
-  </p>
+      <code
+        class="svelte-w3m83n"
+      >
+        210
+      </code>
+      
+    items)
+    </p>
+  </div>
    
   <div
-    class="flex flex-col items-center my-12"
+    class="pagination-bar svelte-w3m83n"
   >
     <div
-      class="flex text-gray-700"
+      class="pagination-button current-page svelte-w3m83n"
+    >
+      <svg
+        class="feather feather-chevron-left w-6 h-6"
+        fill="none"
+        height="100%"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="100%"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <polyline
+          points="15 18 9 12 15 6"
+        />
+      </svg>
+    </div>
+     
+    <div
+      class="pages svelte-w3m83n"
     >
       <div
-        class="h-12 w-12 mr-1 flex justify-center items-center rounded-full bg-gray-200 cursor-pointer bg-teal-600 text-white"
-      >
-        <svg
-          class="feather feather-chevron-left w-6 h-6"
-          fill="none"
-          height="100%"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          width="100%"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <polyline
-            points="15 18 9 12 15 6"
-          />
-        </svg>
+        class="page current-page svelte-w3m83n"
+      >
+        1
+         
       </div>
-       
       <div
-        class="flex h-12 font-medium rounded-full bg-gray-200"
+        class="page  svelte-w3m83n"
       >
-        <div
-          class="w-12 md:flex justify-center items-center hidden cursor-pointer bg-teal-600 text-white"
-        >
-          1
-           
-        </div>
-        <div
-          class="w-12 md:flex justify-center items-center hidden cursor-pointer "
-        >
-          2
-           
-        </div>
-        <div
-          class="w-12 md:flex justify-center items-center hidden cursor-pointer "
-        >
-          3
-           
-        </div>
-        <div
-          class="w-12 md:flex justify-center items-center hidden cursor-pointer "
-        >
-          ...
-           
-        </div>
-        <div
-          class="w-12 md:flex justify-center items-center hidden cursor-pointer "
-        >
-          11
-           
-        </div>
+        2
+         
       </div>
-       
       <div
-        class="h-12 w-12 ml-1 flex justify-center items-center rounded-full bg-gray-200 cursor-pointer "
-      >
-        <svg
-          class="feather feather-chevron-right w-6 h-6"
-          fill="none"
-          height="100%"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          width="100%"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <polyline
-            points="9 18 15 12 9 6"
-          />
-        </svg>
+        class="page  svelte-w3m83n"
+      >
+        3
+         
+      </div>
+      <div
+        class="page  svelte-w3m83n"
+      >
+        ...
+         
+      </div>
+      <div
+        class="page  svelte-w3m83n"
+      >
+        11
+         
       </div>
     </div>
+     
+    <div
+      class="pagination-button  svelte-w3m83n"
+    >
+      <svg
+        class="feather feather-chevron-right w-6 h-6"
+        fill="none"
+        height="100%"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="100%"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <polyline
+          points="9 18 15 12 9 6"
+        />
+      </svg>
+    </div>
   </div>
   
 </section>
@@ -798,7 +1037,7 @@ exports[`Storyshots Pill Deprecated 1`] = `
   class="storybook-snapshot-container"
 >
   <div
-    class="pill svelte-1ohi0f1"
+    class="pill svelte-zw85gu"
     style="background-color: rgb(74, 85, 104);"
   >
     Deprecated
@@ -810,142 +1049,175 @@ exports[`Storyshots Schema Viewer Basic 1`] = `
 <section
   class="storybook-snapshot-container"
 >
-  <h2>
-    Schema
-  </h2>
-   
   <div
-    class="container py-4 mx-auto"
+    class="schema-viewer svelte-1m543xb"
   >
-    <input
-      class="shadow appearance-none border rounded w-full p-2 text-gray-700
-    leading-tight focus:outline-none focus:shadow-outline"
-      placeholder="filter terms"
-      type="text"
-    />
-  </div>
-   
-  <div
-    class="container schema-browser mx-auto svelte-gyw6bu"
-  >
-    <p>
-      <div
-        style=""
+    <h1
+      class="svelte-cviqid"
+    >
+      Schema
+    </h1>
+     
+    <div
+      class="svelte-y697ub"
+    >
+      <input
+        class="svelte-y697ub"
+        id="filter-input"
+        placeholder="filter terms"
+        type="text"
+      />
+    </div>
+     
+    <div
+      class="schema-browser svelte-1m543xb"
+    >
+      <p
+        class="svelte-1m543xb"
       >
-        <p>
-          <span
-            class="text-gray-700"
-          >
-            
-            
-          </span>
-          <span>
-            additional_properties
-          </span>
-        </p>
-         
-        <p
-          class="text-gray-600 text-xs ml-2"
+        <div
+          class="svelte-19dwd80"
+          style=""
         >
-          A JSON string containing any payload properties not present in the schema
-        </p>
-         
-      </div>
-       
-      
-      <div
-        style=""
-      >
-        <p>
-          <span
-            class="text-gray-700"
+          <p
+            class="node svelte-19dwd80"
           >
-            
-            
-          </span>
-          <span>
-            client_info
-          </span>
-        </p>
-         
+            <span
+              class="parent-node svelte-19dwd80"
+            >
+              
+              
+            </span>
+            <span
+              class="svelte-19dwd80"
+            >
+              additional_properties
+            </span>
+             
+            <p
+              class="node-description svelte-19dwd80"
+            >
+              A JSON string containing any payload properties not present in the schema
+            </p>
+             
+          </p>
+        </div>
          
-      </div>
-       
-      <div
-        style=""
-      >
-        <p>
-          <span
-            class="text-gray-700"
+        
+        <div
+          class="svelte-19dwd80"
+          style=""
+        >
+          <p
+            class="node svelte-19dwd80"
           >
-            client_info
-            .
-          </span>
-          <span>
-            os_version
-          </span>
-        </p>
+            <span
+              class="parent-node svelte-19dwd80"
+            >
+              
+              
+            </span>
+            <span
+              class="svelte-19dwd80"
+            >
+              client_info
+            </span>
+             
+             
+          </p>
+        </div>
          
-        <p
-          class="text-gray-600 text-xs ml-2"
+        <div
+          class="svelte-19dwd80"
+          style=""
         >
-          The user-visible version of the operating system (e.g. "1.2.3"). If the version detection fails, this metric gets set to \`Unknown\`.
-        </p>
-         
-      </div>
-       
-      
-      <div
-        style=""
-      >
-        <p>
-          <span
-            class="text-gray-700"
+          <p
+            class="node svelte-19dwd80"
           >
-            client_info
-            .
-          </span>
-          <span>
-            telemetry_sdk_build
-          </span>
-        </p>
+            <span
+              class="parent-node svelte-19dwd80"
+            >
+              client_info
+              .
+            </span>
+            <span
+              class="svelte-19dwd80"
+            >
+              os_version
+            </span>
+             
+            <p
+              class="node-description svelte-19dwd80"
+            >
+              The user-visible version of the operating system (e.g. "1.2.3"). If the version detection fails, this metric gets set to \`Unknown\`.
+            </p>
+             
+          </p>
+        </div>
          
-        <p
-          class="text-gray-600 text-xs ml-2"
+        
+        <div
+          class="svelte-19dwd80"
+          style=""
         >
-          The version of the Glean SDK
-        </p>
-         
-      </div>
-       
-      
-      
-      
-      <div
-        style=""
-      >
-        <p>
-          <span
-            class="text-gray-700"
+          <p
+            class="node svelte-19dwd80"
           >
-            
-            
-          </span>
-          <span>
-            document_id
-          </span>
-        </p>
+            <span
+              class="parent-node svelte-19dwd80"
+            >
+              client_info
+              .
+            </span>
+            <span
+              class="svelte-19dwd80"
+            >
+              telemetry_sdk_build
+            </span>
+             
+            <p
+              class="node-description svelte-19dwd80"
+            >
+              The version of the Glean SDK
+            </p>
+             
+          </p>
+        </div>
          
-        <p
-          class="text-gray-600 text-xs ml-2"
+        
+        
+        
+        <div
+          class="svelte-19dwd80"
+          style=""
         >
-          The document ID specified in the URI when the client sent this message
-        </p>
+          <p
+            class="node svelte-19dwd80"
+          >
+            <span
+              class="parent-node svelte-19dwd80"
+            >
+              
+              
+            </span>
+            <span
+              class="svelte-19dwd80"
+            >
+              document_id
+            </span>
+             
+            <p
+              class="node-description svelte-19dwd80"
+            >
+              The document ID specified in the URI when the client sent this message
+            </p>
+             
+          </p>
+        </div>
          
-      </div>
-       
-      
-    </p>
+        
+      </p>
+    </div>
   </div>
 </section>
 `;
@@ -955,25 +1227,25 @@ exports[`Storyshots Tab Basic 1`] = `
   class="storybook-snapshot-container"
 >
   <div
-    class="tabs"
+    class="tabs svelte-1diarvn"
   />
    
   <div
-    class="tab-content"
+    class="tab-content svelte-1diarvn"
   >
     <div
-      class="title svelte-19v3j9g active"
+      class="title svelte-1cgp1qr active"
     >
       A
     </div>
     <div
-      class="title svelte-19v3j9g"
+      class="title svelte-1cgp1qr"
     >
       B
     </div>
      
     <div
-      class="box svelte-w20ggk"
+      class="box svelte-1lgs0kh"
     >
       Content for Tab A
     </div>
diff --git a/src/components/AppAlert.svelte b/src/components/AppAlert.svelte
index fd40f5089..28ecd2452 100644
--- a/src/components/AppAlert.svelte
+++ b/src/components/AppAlert.svelte
@@ -3,10 +3,23 @@
   export let bgColor;
 </script>
 
+<style>
+  .app-alert {
+    width: 100%;
+    padding: $spacing-xs;
+    margin-top: $spacing-sm;
+    margin-bottom: $spacing-sm;
+    box-shadow: 4px 2px 2px $color-light-gray-70;
+
+    p {
+      @include text-title-xs;
+      color: $color-light-gray-10;
+    }
+  }
+</style>
+
 <div role="alert">
-  <div
-    style="background-color: {bgColor}"
-    class="flex items-center justify-between w-full p-2 my-3 shadow text-white">
-    {message}
+  <div class="app-alert" style="background-color: {bgColor}">
+    <p>{message}</p>
   </div>
 </div>
diff --git a/src/components/Breadcrumb.svelte b/src/components/Breadcrumb.svelte
index 2f346b9d2..3c7efd488 100644
--- a/src/components/Breadcrumb.svelte
+++ b/src/components/Breadcrumb.svelte
@@ -2,8 +2,30 @@
   export let links;
 </script>
 
-<ol class="flex border-b-2 py-2 divide-x {!links.length ? 'hidden' : ''}">
+<style>
+  ol {
+    display: flex;
+    li {
+      @include text-title-3xs;
+      font-weight: bold;
+      padding-bottom: $spacing-md;
+      padding-left: $spacing-sm;
+
+      .link-name {
+        text-decoration: none;
+      }
+      span {
+        color: $color-dark-gray-10;
+      }
+    }
+  }
+</style>
+
+<ol style={!links.length ? 'display: none;' : ''}>
   {#each links as link}
-    <li class="px-2"><a href={link.url}>{link.name}</a></li>
+    <li>
+      <a class="link-name" href={link.url}>{link.name} </a><span
+        class>{links.indexOf(link) === links.length - 1 ? '' : '/'}</span>
+    </li>
   {/each}
 </ol>
diff --git a/src/components/EmailAddresses.svelte b/src/components/EmailAddresses.svelte
index 875a6e908..fb99ad347 100644
--- a/src/components/EmailAddresses.svelte
+++ b/src/components/EmailAddresses.svelte
@@ -2,6 +2,10 @@
   export let emails;
 </script>
 
-{#each emails as email}
-  <span class="block"> <a href="mailto:{email}">{email}</a></span>
-{/each}
+<style>
+  span {
+    display: block;
+  }
+</style>
+
+{#each emails as email}<span> <a href="mailto:{email}">{email}</a></span>{/each}
diff --git a/src/components/FilterInput.svelte b/src/components/FilterInput.svelte
index 3b4d656a2..89e7a868c 100644
--- a/src/components/FilterInput.svelte
+++ b/src/components/FilterInput.svelte
@@ -9,11 +9,20 @@
   };
 </script>
 
-<div class="container py-4 mx-auto">
+<style>
+  div {
+    margin-top: $spacing-xs;
+    margin-bottom: $spacing-xs;
+  }
+  input {
+    width: 100%;
+  }
+</style>
+
+<div>
   <input
-    class="shadow appearance-none border rounded w-full p-2 text-gray-700
-    leading-tight focus:outline-none focus:shadow-outline"
     type="text"
+    id="filter-input"
     bind:value={filterText}
     on:input={throttle(changeText, 200)}
     placeholder="filter terms" />
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index df9b63fd3..51f81d031 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -1,45 +1,43 @@
 <script>
-  import MozillaLogo from "./icons/MozillaLogo.svelte";
-
   const rev = "__VERSION__";
 </script>
 
-<style>
-  .glean-footer {
-    @apply flex;
-    @apply items-center;
-    @apply justify-between;
-    @apply px-8;
-    @apply py-4;
-  }
-  .project-links {
-    @apply flex;
-  }
-  .project-links li {
-    @apply ml-2;
-  }
-  .mozilla-logo {
-    @apply text-black;
-  }
-</style>
-
-<footer class="glean-footer">
-  <a class="mozilla-logo" href="https://www.mozilla.org/"><MozillaLogo /></a>
-  <ul class="project-links">
-    <li>
-      <a href="https://www.mozilla.org/privacy/websites/#cookies">Cookies</a>
-    </li>
-    <li>
-      <a
-        href="https://chat.mozilla.org/#/room/#glean-dictionary:mozilla.org">Chat</a>
-    </li>
-    <li>
-      <a href="https://github.com/mozilla/glean-dictionary/issues">Issues</a>
-    </li>
-    <li><a href="https://github.com/mozilla/glean-dictionary">Source</a></li>
-    <li>
-      <span>Source - </span><a
-        href="https://github.com/mozilla/glean-dictionary/tree/{rev}">{rev.substring(0, 10)}</a>
-    </li>
-  </ul>
+<footer class="mzp-c-footer">
+  <div class="mzp-l-content">
+    <nav class="mzp-c-footer-secondary">
+      <div class="mzp-c-footer-primary-logo">
+        <a
+          href="https://www.mozilla.org/"
+          data-link-type="footer"
+          data-link-name="Mozilla">Mozilla</a>
+      </div>
+      <div class="mzp-c-footer-legal">
+        <ul class="mzp-c-footer-terms">
+          <li>
+            <a
+              href="https://www.mozilla.org/privacy/websites/#cookies">Cookies</a>
+          </li>
+          <li>
+            <a
+              href="https://chat.mozilla.org/#/room/#glean-dictionary:mozilla.org">Chat</a>
+          </li>
+          <li>
+            <a
+              href="https://github.com/mozilla/glean-dictionary/issues">Issues</a>
+          </li>
+          <li>
+            <a href="https://github.com/mozilla/glean-dictionary">Source</a>
+          </li>
+        </ul>
+        <p>
+          Alpha Software - revision
+          <a
+            href="https://github.com/mozilla/glean-dictionary/tree/{rev}">{rev.substring(0, 10)}</a>
+        </p>
+        <p class="mzp-c-footer-license">
+          © 2020 - 2021 Mozilla and other contributors.
+        </p>
+      </div>
+    </nav>
+  </div>
 </footer>
diff --git a/src/components/HelpHoverable.svelte b/src/components/HelpHoverable.svelte
index 3b3af0298..3d9e4275d 100644
--- a/src/components/HelpHoverable.svelte
+++ b/src/components/HelpHoverable.svelte
@@ -13,8 +13,7 @@
 
 <style>
   .main {
-    @apply inline-block;
-    @apply text-gray-500;
+    display: inline-block;
   }
 </style>
 
diff --git a/src/components/ItemList.svelte b/src/components/ItemList.svelte
index 897faf19d..b5b6df440 100644
--- a/src/components/ItemList.svelte
+++ b/src/components/ItemList.svelte
@@ -40,6 +40,10 @@
   .item-browser {
     max-height: 400px;
     overflow: scroll;
+    margin: $spacing-md auto $spacing-md auto;
+    a {
+      text-decoration: none;
+    }
   }
 </style>
 
@@ -47,7 +51,7 @@
   <p>Currently, there are no {itemType} available for {items.name}</p>
 {:else}
   <FilterInput onChangeText={filterItems} />
-  <div class="item-browser mx-auto my-4 p-2">
+  <div class="item-browser">
     <ul>
       {#each filteredItems as item}
         <li>
diff --git a/src/components/PageTitle.svelte b/src/components/PageTitle.svelte
new file mode 100644
index 000000000..52ee8b0bc
--- /dev/null
+++ b/src/components/PageTitle.svelte
@@ -0,0 +1,15 @@
+<script>
+  export let text;
+</script>
+
+<style>
+  h1 {
+    font-size: 32px;
+  }
+</style>
+
+<slot>
+  <h1>
+    {@html text}
+  </h1>
+</slot>
diff --git a/src/components/Pagination.svelte b/src/components/Pagination.svelte
index 7d4320f2d..cd09ed186 100644
--- a/src/components/Pagination.svelte
+++ b/src/components/Pagination.svelte
@@ -52,41 +52,72 @@
   }
 </script>
 
-<p>
-  Page
-  <code>{$currentPage}</code>
-  of
-  <code>{lastPage}</code>
-  (<code>{from}</code>
-  -
-  <code>{to}</code>
-  on
-  <code>{totalItems}</code>
-  items)
-</p>
+<style>
+  .pagination-position {
+    margin-top: $spacing-md;
+  }
+  .pagination-bar {
+    display: flex;
+    justify-content: center;
+    color: $color-dark-gray-70;
+    .pagination-button {
+      height: 2.5rem;
+      width: 2.5rem;
+    }
+
+    .pages {
+      display: flex;
+      justify-content: center;
+      .page {
+        @include text-body-md;
+        height: 3rem;
+        font-weight: bold;
+        margin: 0.5rem;
+        cursor: pointer;
+      }
+    }
+    .current-page {
+      color: $color-light-gray-50;
+      cursor: not-allowed;
+    }
+  }
+</style>
+
+<div class="pagination-position">
+  <p>
+    Page
+    <code>{$currentPage}</code>
+    of
+    <code>{lastPage}</code>
+    (<code>{from}</code>
+    -
+    <code>{to}</code>
+    on
+    <code>{totalItems}</code>
+    items)
+  </p>
+</div>
 
 {#if itemsPerPage < totalItems}
-  <div class="flex flex-col items-center my-12">
-    <div class="flex text-gray-700">
-      <div
-        on:click|preventDefault={() => changePage($currentPage !== 1 ? $currentPage - 1 : 1)}
-        class="h-12 w-12 mr-1 flex justify-center items-center rounded-full bg-gray-200 cursor-pointer {$currentPage === 1 ? 'bg-teal-600 text-white' : ''}">
-        <BackButton />
-      </div>
-      <div class="flex h-12 font-medium rounded-full bg-gray-200">
-        {#each truncatedPagination($currentPage, lastPage) as page}
-          <div
-            on:click|preventDefault={() => changePage(Number.isInteger(page) ? page : $currentPage)}
-            class="w-12 md:flex justify-center items-center hidden cursor-pointer {page === $currentPage ? 'bg-teal-600 text-white' : ''}">
-            {page}
-          </div>
-        {/each}
-      </div>
-      <div
-        on:click|preventDefault={() => changePage($currentPage !== lastPage ? $currentPage + 1 : lastPage)}
-        class="h-12 w-12 ml-1 flex justify-center items-center rounded-full bg-gray-200 cursor-pointer {currentPage === lastPage ? 'bg-teal-600 text-white' : ''}">
-        <ForwardButton />
-      </div>
+  <div class="pagination-bar">
+    <div
+      on:click|preventDefault={() => changePage($currentPage !== 1 ? $currentPage - 1 : 1)}
+      class="pagination-button {$currentPage === 1 ? 'current-page' : ''}">
+      <BackButton />
+    </div>
+    <div class="pages">
+      {#each truncatedPagination($currentPage, lastPage) as page}
+        <div
+          on:click|preventDefault={() => changePage(Number.isInteger(page) ? page : $currentPage)}
+          class="page {page === $currentPage ? 'current-page' : ''}">
+          {page}
+        </div>
+      {/each}
+    </div>
+    <div
+      on:click|preventDefault={() => changePage($currentPage !== lastPage ? $currentPage + 1 : lastPage)}
+      class="pagination-button {$currentPage === lastPage ? 'current-page' : ''}">
+      <ForwardButton />
     </div>
   </div>
 {/if}
diff --git a/src/components/Pill.svelte b/src/components/Pill.svelte
index 9bc25ccce..f6b0fabbf 100644
--- a/src/components/Pill.svelte
+++ b/src/components/Pill.svelte
@@ -5,15 +5,13 @@
 
 <style>
   .pill {
-    @apply inline-block;
-    @apply border-transparent;
-    @apply rounded-full;
-    @apply px-2;
-    @apply py-0;
-    @apply text-sm;
-    @apply leading-5;
-    @apply text-white;
-    @apply font-medium;
+    @include text-body-sm;
+    display: inline-block;
+    border-radius: 9999px;
+    border-color: transparent;
+    padding: 0 $spacing-sm 0 $spacing-sm;
+    color: $color-light-gray-05;
+    font-weight: bold;
   }
 </style>
 
diff --git a/src/components/SchemaNode.svelte b/src/components/SchemaNode.svelte
index fe9871c8a..5bbe74c83 100644
--- a/src/components/SchemaNode.svelte
+++ b/src/components/SchemaNode.svelte
@@ -4,19 +4,37 @@
   export let parentFields = [];
 </script>
 
+<style>
+  p {
+    margin: 0;
+  }
+  .node {
+    @include text-body-md;
+    .parent-node {
+      color: $color-dark-gray-60;
+    }
+    .node-description,
+    .node-link {
+      @include text-body-sm;
+      color: $color-dark-gray-20;
+      margin-left: $spacing-sm;
+    }
+  }
+</style>
+
 <div style={node.visible ? '' : 'display: none;'}>
-  <p>
+  <p class="node">
     <span
-      class="text-gray-700">{parentFields.join('.')}{parentFields.length ? '.' : ''}</span><span>{node.name}</span>
+      class="parent-node">{parentFields.join('.')}{parentFields.length ? '.' : ''}</span><span>{node.name}</span>
+    {#if node.description}
+      <p class="node-description">{node.description}</p>
+    {/if}
+    {#if parentFields.length === 2 && parentFields[0] === 'metrics'}
+      <p class="node-link">
+        <a href={`/apps/${app}/metrics/${node.name}`}>[metric]</a>
+      </p>
+    {/if}
   </p>
-  {#if node.description}
-    <p class="text-gray-600 text-xs ml-2">{node.description}</p>
-  {/if}
-  {#if parentFields.length === 2 && parentFields[0] === 'metrics'}
-    <p class="text-gray-600 text-xs ml-2">
-      <a href={`/apps/${app}/metrics/${node.name}`}>[metric]</a>
-    </p>
-  {/if}
 </div>
 
 {#if node.fields && node.childrenVisible}
diff --git a/src/components/SchemaViewer.svelte b/src/components/SchemaViewer.svelte
index 3e28a9613..8ad07196a 100644
--- a/src/components/SchemaViewer.svelte
+++ b/src/components/SchemaViewer.svelte
@@ -2,6 +2,7 @@
   import { createEventDispatcher } from "svelte";
   import SchemaNode from "./SchemaNode.svelte";
   import FilterInput from "./FilterInput.svelte";
+  import PageTitle from "./PageTitle.svelte";
 
   export let app;
   export let nodes = [];
@@ -56,21 +57,28 @@
 </script>
 
 <style>
-  .schema-browser {
-    @apply p-2;
-    @apply border-4;
-    @apply border-gray-400;
-    max-height: 400px;
-    overflow: scroll;
+  .schema-viewer {
+    margin-top: 2rem;
+    .schema-browser {
+      padding: $spacing-sm;
+      border: 0.25rem solid $color-light-gray-60;
+      max-height: 400px;
+      overflow: scroll;
+      margin-left: auto;
+      margin-right: auto;
+    }
   }
 </style>
 
-<h2>Schema</h2>
-<FilterInput onChangeText={filterTextChanged} filterText={searchText} />
-<div class="container schema-browser mx-auto">
-  <p>
-    {#each nodesWithVisibility as node}
-      <SchemaNode {app} {node} />
-    {/each}
-  </p>
+<div class="schema-viewer">
+  <PageTitle text={'Schema'} />
+
+  <FilterInput onChangeText={filterTextChanged} filterText={searchText} />
+  <div class="schema-browser">
+    <p>
+      {#each nodesWithVisibility as node}
+        <SchemaNode {app} {node} />
+      {/each}
+    </p>
+  </div>
 </div>
diff --git a/src/components/icons/InfoIcon.svelte b/src/components/icons/InfoIcon.svelte
index 69c8fb0dd..fd48337e9 100644
--- a/src/components/icons/InfoIcon.svelte
+++ b/src/components/icons/InfoIcon.svelte
@@ -1,3 +1,11 @@
+<style>
+  svg {
+    display: inline-block;
+    width: 15px;
+    color: $color-light-gray-50;
+  }
+</style>
+
 <svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 20 20"
diff --git a/src/components/icons/MozillaLogo.svelte b/src/components/icons/MozillaLogo.svelte
index f275ead33..1bc5a8488 100644
--- a/src/components/icons/MozillaLogo.svelte
+++ b/src/components/icons/MozillaLogo.svelte
@@ -3,6 +3,12 @@
   const height = Math.floor((36 * width) / 100);
 </script>
 
+<style>
+  svg {
+    display: block;
+  }
+</style>
+
 <svg
   xmlns="http://www.w3.org/2000/svg"
   fill="currentColor"
diff --git a/src/components/tabs/Tab.svelte b/src/components/tabs/Tab.svelte
index 0610f5c80..74517afc1 100644
--- a/src/components/tabs/Tab.svelte
+++ b/src/components/tabs/Tab.svelte
@@ -11,19 +11,20 @@
 
 <style>
   .title {
-    @apply border-b-0;
-    @apply rounded-t-lg;
-    @apply p-4;
-    @apply bg-white;
-    @apply text-black;
-    @apply inline-block;
-  }
-  .title.active {
-    @apply bg-gray-300;
-  }
-  .title:not(.active):hover {
-    @apply bg-gray-100;
-    @apply cursor-pointer;
+    @include text-title-3xs;
+    border-top-width: 0px;
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+    padding: 1rem;
+    background-color: $color-light-gray-10;
+    display: inline-block;
+    &.active {
+      background-color: $color-light-gray-40;
+    }
+    &:not(.active):hover {
+      background-color: $color-light-gray-20;
+      cursor: pointer;
+    }
   }
 </style>
 
diff --git a/src/components/tabs/TabContent.svelte b/src/components/tabs/TabContent.svelte
index 2f127e363..deeefc9fb 100644
--- a/src/components/tabs/TabContent.svelte
+++ b/src/components/tabs/TabContent.svelte
@@ -7,10 +7,10 @@
 
 <style>
   .box {
-    @apply p-8;
-    @apply border;
-    @apply border-gray-200;
-    @apply rounded-b-lg;
+    padding: 2rem;
+    border: 1px solid $color-light-gray-40;
+    border-bottom-right-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
   }
 </style>
 
diff --git a/src/components/tabs/TabGroup.svelte b/src/components/tabs/TabGroup.svelte
index 3dd7b6b29..b03a0e47f 100644
--- a/src/components/tabs/TabGroup.svelte
+++ b/src/components/tabs/TabGroup.svelte
@@ -7,6 +7,12 @@
   setContext("activeTab", store);
 </script>
 
+<style>
+  .tab-content {
+    margin-top: $spacing-lg;
+  }
+</style>
+
 <div class="tabs">
   <slot name="tabs" />
 </div>
diff --git a/src/pages/AppDetail.svelte b/src/pages/AppDetail.svelte
index 3cf44baae..72ca0c84b 100644
--- a/src/pages/AppDetail.svelte
+++ b/src/pages/AppDetail.svelte
@@ -7,6 +7,7 @@
   import NotFound from "../components/NotFound.svelte";
   import Pill from "../components/Pill.svelte";
   import { TabGroup, Tab, TabContent } from "../components/tabs";
+  import PageTitle from "../components/PageTitle.svelte";
 
   export let params;
 
@@ -14,29 +15,33 @@
 </script>
 
 <style>
-  .table-header {
-    @apply table-auto;
-    @apply my-4;
+  a {
+    text-decoration: none;
   }
-  .table-header td {
-    @apply border;
-    @apply p-2;
+  .mzp-u-data-table {
+    margin-top: $spacing-md;
+    margin-bottom: $spacing-lg;
+    td {
+      border: 1px solid $color-light-gray-40;
+      padding: 0.5rem;
+    }
   }
 </style>
 
 {#await appDataPromise then app}
-  <h1>{params.app}</h1>
+  <PageTitle text={params.app} />
+
   {#if app.deprecated}
     <Pill message="Deprecated" bgColor="#4a5568" />
   {/if}
-  <p class="mt-2">{app.description}</p>
-  <table class="table-header">
+  <p>{app.description}</p>
+  <table class="mzp-u-data-table">
     <tr>
-      <td>Source code Url</td>
+      <td>Source Code</td>
       <td><a href={app.url}>{app.url}</a></td>
     </tr>
     <tr>
-      <td>Application id</td>
+      <td>Application ID</td>
       <td><code>{app.app_id}</code></td>
     </tr>
     <tr>
diff --git a/src/pages/AppList.svelte b/src/pages/AppList.svelte
index 49751d0dd..b0d8d508f 100644
--- a/src/pages/AppList.svelte
+++ b/src/pages/AppList.svelte
@@ -2,6 +2,7 @@
   import { onMount } from "svelte";
   import FilterInput from "../components/FilterInput.svelte";
   import Pill from "../components/Pill.svelte";
+  import PageTitle from "../components/PageTitle.svelte";
   import { fetchJSON } from "../state/api";
 
   const URL = "data/apps.json";
@@ -20,17 +21,34 @@
   let showDeprecated = false;
 </script>
 
-<h2>Applications</h2>
+<style>
+  .app-detail {
+    @include text-title-3xs;
+    a {
+      text-decoration: none;
+    }
+    i {
+      @include text-body-md;
+    }
+  }
+  .deprecation-checkbox {
+    margin-bottom: $spacing-sm;
+  }
+</style>
+
+<PageTitle text="Applications" />
 
-<label>
-  <input type="checkbox" bind:checked={showDeprecated} />
-  Show deprecated applications
-</label>
+<div class="deprecation-checkbox">
+  <label>
+    <input type="checkbox" bind:checked={showDeprecated} />
+    Show deprecated applications
+  </label>
+</div>
 {#if apps}
   <FilterInput onChangeText={filterApps} />
   {#each filteredApps as app}
     {#if showDeprecated || !app.deprecated}
-      <p class="mb-2">
+      <p class="app-detail">
         <a href="/apps/{app.name}">{app.name}</a>
         {#if app.description}<i>{app.description}</i>{/if}
         {#if app.deprecated}
diff --git a/src/pages/MetricDetail.svelte b/src/pages/MetricDetail.svelte
index 5c356b827..4ac5f398d 100644
--- a/src/pages/MetricDetail.svelte
+++ b/src/pages/MetricDetail.svelte
@@ -5,6 +5,7 @@
   import NotFound from "../components/NotFound.svelte";
   import HelpHoverable from "../components/HelpHoverable.svelte";
   import helpText from "../data/help";
+  import PageTitle from "../components/PageTitle.svelte";
 
   export let params;
   let metricName = params.metric.replaceAll("-", ".");
@@ -51,18 +52,21 @@
 </script>
 
 <style>
-  .metrics-table {
-    @apply table-auto;
-    @apply my-4;
+  a {
+    text-decoration: none;
   }
-  .metrics-table td {
-    @apply border;
-    @apply p-2;
+  .mzp-u-data-table {
+    margin-top: $spacing-md;
+    margin-bottom: $spacing-lg;
+    td {
+      border: 1px solid $color-light-gray-40;
+      padding: 0.5rem;
+    }
   }
 </style>
 
 {#await metricDataPromise then metric}
-  <h1>{metric.name}</h1>
+  <PageTitle text={metric.name} />
   <p>
     <Markdown text={metric.description} />
   </p>
@@ -75,7 +79,7 @@
     that
     {getExpiryInfo(metric.expires)}
   </p>
-  <table class="metrics-table">
+  <table class="mzp-u-data-table">
     <tr>
       <td>
         Relevant Bugs
diff --git a/src/pages/PingDetail.svelte b/src/pages/PingDetail.svelte
index 93f09e482..f02e25cfc 100644
--- a/src/pages/PingDetail.svelte
+++ b/src/pages/PingDetail.svelte
@@ -5,26 +5,29 @@
   import ItemList from "../components/ItemList.svelte";
   import NotFound from "../components/NotFound.svelte";
   import Markdown from "../components/Markdown.svelte";
+  import PageTitle from "../components/PageTitle.svelte";
 
   export let params;
   const pingDataPromise = getPingData(params.app, params.ping);
 </script>
 
 <style>
-  .table-header {
-    @apply table-auto;
-    @apply my-4;
+  a {
+    text-decoration: none;
   }
-
-  .table-header td {
-    @apply border;
-    @apply p-2;
+  .mzp-u-data-table {
+    margin-top: $spacing-md;
+    margin-bottom: $spacing-lg;
+    td {
+      border: 1px solid $color-light-gray-40;
+      padding: 0.5rem;
+    }
   }
 </style>
 
 {#await pingDataPromise then ping}
-  <h1>{ping.name}</h1>
-  <table class="table-header">
+  <PageTitle text={ping.name} />
+  <table class="mzp-u-data-table">
     <tr>
       <td>Description</td>
       <td>
@@ -37,18 +40,15 @@
         {#each ping.bugs as bug}
           {#if typeof bug === 'number'}
             <a
-              class="mr-2"
               href={`https://bugzilla.mozilla.org/show_bug.cgi?id=${bug}`}>{bug}</a>
-          {:else}<a class="mr-2" href={bug}>{bug}</a>{/if}
+          {:else}<a href={bug}>{bug}</a>{/if}
         {/each}
       </td>
     </tr>
     <tr>
       <td>Reviews Data</td>
       <td>
-        {#each ping.data_reviews as review}
-          <a class="mr-2" href={review}>{review}</a>
-        {/each}
+        {#each ping.data_reviews as review}<a href={review}>{review}</a>{/each}
       </td>
     </tr>
     <tr>
diff --git a/src/pages/TableDetail.svelte b/src/pages/TableDetail.svelte
index d976e9940..4dcead4f5 100644
--- a/src/pages/TableDetail.svelte
+++ b/src/pages/TableDetail.svelte
@@ -4,6 +4,7 @@
   import { fetchJSON, getTableData } from "../state/api";
 
   import NotFound from "../components/NotFound.svelte";
+  import PageTitle from "../components/PageTitle.svelte";
 
   export let params;
   export let queryString;
@@ -23,22 +24,24 @@
 </script>
 
 <style>
-  .table-header {
-    @apply table-auto;
-    @apply my-4;
+  a {
+    text-decoration: none;
   }
-
-  .table-header td {
-    @apply border;
-    @apply p-2;
+  .mzp-u-data-table {
+    margin-top: $spacing-md;
+    margin-bottom: $spacing-lg;
+    td {
+      border: 1px solid $color-light-gray-40;
+      padding: 0.5rem;
+    }
   }
 </style>
 
 {#await pingDataPromise then data}
-  <h1>Table <code>{data.table.name}</code> for {params.app}</h1>
-  <table class="table-header">
+  <PageTitle text={`Table <code>${data.table.name}</code> for ${params.app}`} />
+  <table class="mzp-u-data-table">
     <tr>
-      <td>BigQuery definition</td>
+      <td>BigQuery Definition</td>
       <td>
         <a href={data.table.bq_definition}>
           {data.table.bq_definition.split('/').slice(-1)}
diff --git a/stories/Pagination.svelte b/stories/Pagination.svelte
index f3cea01b9..f747bc937 100644
--- a/stories/Pagination.svelte
+++ b/stories/Pagination.svelte
@@ -49,41 +49,71 @@
   }
 </script>
 
-<p>
-  Page
-  <code>{currentPage}</code>
-  of
-  <code>{lastPage}</code>
-  (<code>{from}</code>
-  -
-  <code>{to}</code>
-  on
-  <code>{totalItems}</code>
-  items)
-</p>
+<style>
+  .pagination-position {
+    margin-top: 3rem;
+  }
+  .pagination-bar {
+    display: flex;
+    justify-content: center;
+    .pagination-button {
+      height: 2.5rem;
+      width: 2.5rem;
+    }
+
+    .pages {
+      display: flex;
+      justify-content: center;
+      .page {
+        @include text-body-md;
+        height: 3rem;
+        font-weight: bold;
+        margin: $spacing-sm;
+        cursor: pointer;
+      }
+    }
+    .current-page {
+      color: $color-light-gray-70;
+      cursor: not-allowed;
+    }
+  }
+</style>
+
+<div class="pagination-position">
+  <p>
+    Page
+    <code>{currentPage}</code>
+    of
+    <code>{lastPage}</code>
+    (<code>{from}</code>
+    -
+    <code>{to}</code>
+    on
+    <code>{totalItems}</code>
+    items)
+  </p>
+</div>
 
 {#if itemsPerPage < totalItems}
-  <div class="flex flex-col items-center my-12">
-    <div class="flex text-gray-700">
-      <div
-        on:click|preventDefault={() => changePage(currentPage !== 1 ? currentPage - 1 : 1)}
-        class="h-12 w-12 mr-1 flex justify-center items-center rounded-full bg-gray-200 cursor-pointer {currentPage === 1 ? 'bg-teal-600 text-white' : ''}">
-        <BackButton />
-      </div>
-      <div class="flex h-12 font-medium rounded-full bg-gray-200">
-        {#each truncatedPagination(currentPage, lastPage) as page}
-          <div
-            on:click|preventDefault={() => changePage(Number.isInteger(page) ? page : currentPage)}
-            class="w-12 md:flex justify-center items-center hidden cursor-pointer {page === currentPage ? 'bg-teal-600 text-white' : ''}">
-            {page}
-          </div>
-        {/each}
-      </div>
-      <div
-        on:click|preventDefault={() => changePage(currentPage !== lastPage ? currentPage + 1 : lastPage)}
-        class="h-12 w-12 ml-1 flex justify-center items-center rounded-full bg-gray-200 cursor-pointer {currentPage === lastPage ? 'bg-teal-600 text-white' : ''}">
-        <ForwardButton />
-      </div>
+  <div class="pagination-bar">
+    <div
+      on:click|preventDefault={() => changePage(currentPage !== 1 ? currentPage - 1 : 1)}
+      class="pagination-button {currentPage === 1 ? 'current-page' : ''}">
+      <BackButton />
+    </div>
+    <div class="pages">
+      {#each truncatedPagination(currentPage, lastPage) as page}
+        <div
+          on:click|preventDefault={() => changePage(Number.isInteger(page) ? page : currentPage)}
+          class="page {page === currentPage ? 'current-page' : ''}">
+          {page}
+        </div>
+      {/each}
+    </div>
+    <div
+      on:click|preventDefault={() => changePage(currentPage !== lastPage ? currentPage + 1 : lastPage)}
+      class="pagination-button {currentPage === lastPage ? 'current-page' : ''}">
+      <ForwardButton />
     </div>
   </div>
 {/if}
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 000000000..b8e15ea4b
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,16 @@
+const sveltePreprocess = require("svelte-preprocess");
+const autoPrefixer = require("autoprefixer");
+
+module.exports = {
+  preprocess: sveltePreprocess({
+    defaults: {
+      style: "scss",
+    },
+    scss: {
+      prependData: `@import 'node_modules/@mozilla-protocol/core/protocol/css/protocol.scss';`,
+    },
+    postcss: {
+      plugins: [autoPrefixer],
+    },
+  }),
+};
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index fe9608ba2..000000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,22 +0,0 @@
-const production = !process.env.ROLLUP_WATCH;
-
-module.exports = {
-  future: {},
-  purge: {
-    content: ["./src/**/*.svelte", "./src/**/*.html"],
-    enabled: production, // disable purge in dev
-    options: {
-      whitelist: [/svelte-/],
-      /* eslint-disable no-unused-vars */
-      defaultExtractor: (content) =>
-        [...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(
-          ([_match, group, ..._rest]) => group
-        ),
-    },
-  },
-  theme: {
-    extend: {},
-  },
-  variants: {},
-  plugins: [],
-};