diff --git a/package-lock.json b/package-lock.json
index bc87286..f57b118 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1563,6 +1563,21 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@inkline/inkline": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@inkline/inkline/-/inkline-3.2.0.tgz",
+      "integrity": "sha512-h14lFCtcD0A80LtpAA+NF27CCC+wfmdxK9Q/No05Cqx6a4tnQFAVjYVtH6OktC/ZEAAn1gjjl7S0RQdXJz03YQ==",
+      "dependencies": {
+        "@popperjs/core": "2.11.6"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/alexgrozav"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -2114,6 +2129,15 @@
         "typescript": "^3 || ^4"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -2928,7 +2952,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -3205,7 +3228,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3317,7 +3339,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -3523,7 +3544,6 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -5894,7 +5914,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -6124,7 +6143,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -6285,7 +6303,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -6562,6 +6579,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz",
+      "integrity": "sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -6672,7 +6694,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -6766,7 +6787,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6787,7 +6807,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -6827,7 +6846,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -8269,7 +8287,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8836,7 +8853,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -9688,7 +9704,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -9939,6 +9954,22 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/sass": {
+      "version": "1.57.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
+      "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -10467,7 +10498,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -11327,6 +11357,9 @@
       "version": "1.0.0-dev",
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
+        "@eternagame/design-system-tokens": "^1.0.0-dev",
+        "@inkline/inkline": "^3.2.0",
+        "sass": "^1.57.1",
         "vue": "^3.2.45"
       }
     },
diff --git a/packages/design-system/token-transformer/src/lib.ts b/packages/design-system/token-transformer/src/lib.ts
index 342df59..038980f 100644
--- a/packages/design-system/token-transformer/src/lib.ts
+++ b/packages/design-system/token-transformer/src/lib.ts
@@ -22,8 +22,19 @@ function parseTokensFromJSON(object: Record<string, any>, parent = '', tokens: R
     if (object[key].value) {
       const tokenName = (parent !== '') ? `--${parent}-${key}` : `--${key}`;
       const tokenValue = object[key].value;
-      // eslint-disable-next-line no-param-reassign
-      tokens[tokenName] = tokenValue;
+
+      // If the value is an object (like type or shadow), the token
+      // applies multiple properties and needs to be split up into
+      // separate rules for CSS.
+      if (typeof tokenValue === 'object') {
+        for (const property of Object.keys(tokenValue)) {
+          // eslint-disable-next-line no-param-reassign
+          tokens[`${tokenName}-${property}`] = tokenValue[property];
+        }
+      } else {
+        // eslint-disable-next-line no-param-reassign
+        tokens[tokenName] = tokenValue;
+      }
     } else {
       // If the object doesn't have a value property, it's a token group,
       // so parse that object for token definitions
@@ -81,15 +92,6 @@ export default function convertFile(inputPath: path.ParsedPath, outputPath: path
 
           cssFormattedOutput += `:root${theme ? `.${theme}` : ''} {\n`;
           Object.keys(tokens).forEach((tokenName) => {
-            // Hack to handle CSS font-family with fallback
-            // console.log(tokens[tokenName])
-            // FIXME: determine if Tokens Studio supports custom fields to avoid description parsing
-            if (tokenName === '--fontFamily') {
-              const cssRule = tokenSet.tokens['fontFamily'].description.split('font-family: ')[1];
-              // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-              cssFormattedOutput += convertTokenToCSSVariable(`\t${tokenName}: ${cssRule};\n`);
-              return;
-            }
             // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
             cssFormattedOutput += convertTokenToCSSVariable(`\t${tokenName}: ${tokens[tokenName]};\n`);
           });
diff --git a/packages/design-system/tokens/package.json b/packages/design-system/tokens/package.json
index 6a70974..b242aa0 100644
--- a/packages/design-system/tokens/package.json
+++ b/packages/design-system/tokens/package.json
@@ -6,11 +6,14 @@
   "license": "SEE LICENSE IN LICENSE",
   "scripts": {
     "build": "node ../token-transformer tokens.json ./dist/tokens.css",
-    "build:watch": "chokidar \"tokens.json\" -c \"nx run build\""
+    "build:watch": "chokidar \"tokens.json\" -c \"npm run build\" --initial"
   },
   "nx": {
     "implicitDependencies": [
       "design-system-token-transformer"
     ]
+  },
+  "exports": {
+    "./tokens.css": "./dist/tokens.css"
   }
 }
\ No newline at end of file
diff --git a/packages/design-system/tokens/tokens.json b/packages/design-system/tokens/tokens.json
index c15c71d..4a9b1af 100644
--- a/packages/design-system/tokens/tokens.json
+++ b/packages/design-system/tokens/tokens.json
@@ -480,6 +480,42 @@
         "description": "#31121E"
       }
     },
+    "tint": {
+      "20": {
+        "value": "rgba(255,255,255,0.20)",
+        "type": "color"
+      },
+      "40": {
+        "value": "rgba(255,255,255,0.40)",
+        "type": "color"
+      },
+      "60": {
+        "value": "rgba(255,255,255,0.60)",
+        "type": "color"
+      },
+      "80": {
+        "value": "rgba(255,255,255,0.80)",
+        "type": "color"
+      }
+    },
+    "shade": {
+      "20": {
+        "value": "rgba(0,0,0,0.20)",
+        "type": "color"
+      },
+      "40": {
+        "value": "rgba(0,0,0,0.40)",
+        "type": "color"
+      },
+      "60": {
+        "value": "rgba(0,0,0,0.60)",
+        "type": "color"
+      },
+      "80": {
+        "value": "rgba(0,0,0,0.80)",
+        "type": "color"
+      }
+    },
     "space": {
       "xxs": {
         "value": "2px",
@@ -663,61 +699,632 @@
       "type": "fontSizes"
     },
     "fontFamily": {
-      "value": "Open Sans",
-      "type": "fontFamilies",
-      "description": "Open Sans, with fallbacks to system fonts and sans-serif. CSS = font-family:  \"Open Sans\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;"
+      "primary": {
+        "value": "\"Open Sans\",\"-apple-system\",\"BlinkMacSystemFont\",\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif;",
+        "type": "fontFamilies",
+        "description": "Open Sans, with fallbacks to system fonts and sans-serif. CSS = font-family:  \"Open Sans\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;"
+      },
+      "monospace": {
+        "value": "monospace",
+        "type": "fontFamilies"
+      }
     },
-    "text-xxs": {
-      "value": "{text-xs} / {fontScale}",
-      "type": "fontSizes"
+    "text": {
+      "xxs": {
+        "value": "{text.xs} / {fontScale}",
+        "type": "fontSizes"
+      },
+      "xs": {
+        "value": "{text.sm} / {fontScale}",
+        "type": "fontSizes"
+      },
+      "sm": {
+        "value": "{text.md} / {fontScale}",
+        "type": "fontSizes"
+      },
+      "md": {
+        "value": "{fontSizeBase} * 1",
+        "type": "fontSizes"
+      },
+      "lg": {
+        "value": "{text.md} * {fontScale}",
+        "type": "fontSizes"
+      },
+      "xl": {
+        "value": "{text.lg} * {fontScale}",
+        "type": "fontSizes"
+      },
+      "2xl": {
+        "value": "{text.xl} * {fontScale}",
+        "type": "fontSizes"
+      },
+      "3xl": {
+        "value": "{text.2xl} * {fontScale}",
+        "type": "fontSizes"
+      },
+      "4xl": {
+        "value": "{text.3xl} * {fontScale}",
+        "type": "fontSizes"
+      }
     },
-    "text-xs": {
-      "value": "{text-sm} / {fontScale}",
-      "type": "fontSizes"
+    "fontWeight": {
+      "extralight": {
+        "value": "200",
+        "type": "fontWeights"
+      },
+      "light": {
+        "value": "300",
+        "type": "fontWeights"
+      },
+      "default": {
+        "value": "400",
+        "type": "fontWeights"
+      },
+      "semibold": {
+        "value": "600",
+        "type": "fontWeights"
+      },
+      "bold": {
+        "value": "700",
+        "type": "fontWeights"
+      },
+      "black": {
+        "value": "800",
+        "type": "fontWeights"
+      }
     },
-    "text-sm": {
-      "value": "{text-md} / {fontScale}",
-      "type": "fontSizes"
+    "lineHeight": {
+      "default": {
+        "value": "1.5",
+        "type": "lineHeights"
+      },
+      "display": {
+        "value": "1.2",
+        "type": "lineHeights"
+      }
     },
-    "text-md": {
-      "value": "{fontSizeBase} * 1",
-      "type": "fontSizes"
+    "type": {
+      "body": {
+        "value": {
+          "fontFamily": "{fontFamily.primary}",
+          "fontWeight": "{fontWeight.default}",
+          "lineHeight": "{lineHeight.default}"
+        },
+        "type": "typography",
+        "description": "Type for default body text"
+      },
+      "light": {
+        "value": {
+          "fontFamily": "{fontFamily.primary}",
+          "fontWeight": "{fontWeight.light}",
+          "lineHeight": "{lineHeight.default}"
+        },
+        "type": "typography"
+      },
+      "bold": {
+        "value": {
+          "fontFamily": "{fontFamily.primary}",
+          "fontWeight": "{fontWeight.bold}",
+          "lineHeight": "{lineHeight.default}"
+        },
+        "type": "typography"
+      },
+      "black": {
+        "value": {
+          "fontFamily": "{fontFamily.primary}",
+          "fontWeight": "{fontWeight.black}",
+          "lineHeight": "{lineHeight.default}"
+        },
+        "type": "typography"
+      },
+      "code": {
+        "value": {
+          "fontFamily": "{fontFamily.monospace}",
+          "fontWeight": "{fontWeight.default}",
+          "lineHeight": "{lineHeight.default}"
+        },
+        "type": "typography"
+      }
     },
-    "text-lg": {
-      "value": "{text-md} * {fontScale}",
-      "type": "fontSizes"
+    "border": {
+      "width": {
+        "value": "0.125rem",
+        "type": "borderWidth"
+      },
+      "radius": {
+        "value": "0.25rem",
+        "type": "borderRadius"
+      },
+      "default": {
+        "value": {
+          "color": "{gray.80}",
+          "width": "{border.width}",
+          "style": "solid"
+        },
+        "type": "border"
+      }
     },
-    "text-xl": {
-      "value": "{text-lg} * {fontScale}",
-      "type": "fontSizes"
+    "shadow": {
+      "default": {
+        "value": {
+          "x": "0",
+          "y": "2",
+          "blur": "4",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.1)",
+          "type": "dropShadow"
+        },
+        "type": "boxShadow"
+      },
+      "elevated": {
+        "value": {
+          "x": "0",
+          "y": "12",
+          "blur": "24",
+          "spread": "-6",
+          "color": "rgba(0,0,0,0.25)",
+          "type": "dropShadow"
+        },
+        "type": "boxShadow"
+      },
+      "inner": {
+        "value": {
+          "x": "0",
+          "y": "0",
+          "blur": "2",
+          "spread": "1",
+          "color": "rgba(0,0,0,0.1)",
+          "type": "innerShadow"
+        },
+        "type": "boxShadow"
+      }
+    }
+  },
+  "default": {
+    "background": {
+      "value": "{blue.90}",
+      "type": "color",
+      "description": "Default page background"
     },
-    "text-2xl": {
-      "value": "{text-xl} * {fontScale}",
-      "type": "fontSizes"
+    "layer-01": {
+      "value": "{blue.80}",
+      "type": "color",
+      "description": "Container color on $background"
     },
-    "text-3xl": {
-      "value": "{text-2xl} * {fontScale}",
-      "type": "fontSizes"
+    "layer-02": {
+      "value": "{blue.70}",
+      "type": "color",
+      "description": "Container color on $layer-01"
     },
-    "text-4xl": {
-      "value": "{text-3xl} * {fontScale}",
-      "type": "fontSizes"
+    "layer-03": {
+      "value": "{blue.60}",
+      "type": "color",
+      "description": "Container color on $layer-02"
+    },
+    "focus": {
+      "value": "{blue.30}",
+      "type": "color",
+      "description": "Focus border; Focus underline"
+    },
+    "overlay": {
+      "value": "{shade.20}",
+      "type": "color",
+      "description": "Background overlay"
+    },
+    "highlight": {
+      "value": "{blue.10}",
+      "type": "color",
+      "description": "Highlight color"
+    },
+    "text": {
+      "primaryColor": {
+        "value": "{neutrals.white}",
+        "type": "color",
+        "description": "Primary text; Body copy; Headers"
+      },
+      "secondaryColor": {
+        "value": "{gray.05}",
+        "type": "color",
+        "description": "Secondary text; Input labels"
+      },
+      "placeholder": {
+        "value": "{gray.40}",
+        "type": "color",
+        "description": "Placeholder text"
+      },
+      "disabled": {
+        "value": "{tint.20}",
+        "type": "color",
+        "description": "Disabled text"
+      },
+      "onColor": {
+        "value": "{neutrals.white}",
+        "type": "color",
+        "description": "Text on button colors"
+      },
+      "error": {
+        "value": "{red.60}",
+        "type": "color",
+        "description": "Error message text"
+      }
+    },
+    "border": {
+      "default": {
+        "value": {
+          "color": "{gray.20}",
+          "width": "{border.width}",
+          "style": "solid"
+        },
+        "type": "border"
+      }
+    },
+    "link": {
+      "primary": {
+        "value": "{yellow.20}",
+        "type": "color",
+        "description": "Primary link"
+      },
+      "primary-hover": {
+        "value": "{yellow.10}",
+        "type": "color",
+        "description": "Hover color for $link-primary"
+      },
+      "visited": {
+        "value": "{orange.40}",
+        "type": "color",
+        "description": "Color for visited links"
+      }
+    },
+    "button": {
+      "primary": {
+        "value": "{blue.40}",
+        "type": "color",
+        "description": "Primary button color"
+      },
+      "primary-hover": {
+        "value": "{blue.30}",
+        "type": "color",
+        "description": "Hover color for $primary-button"
+      },
+      "primary-active": {
+        "value": "{blue.50}",
+        "type": "color",
+        "description": "Hover color for $primary-button"
+      },
+      "secondary": {
+        "value": "{green.40}",
+        "type": "color",
+        "description": "Secondary button color"
+      },
+      "secondary-hover": {
+        "value": "{green.30}",
+        "type": "color",
+        "description": "Hover color for $button-secondary"
+      },
+      "secondary-active": {
+        "value": "{green.50}",
+        "type": "color",
+        "description": "Active color for $button-secondary"
+      },
+      "danger": {
+        "value": "{red.70}",
+        "type": "color",
+        "description": "Primary danger button"
+      },
+      "danger-hover": {
+        "value": "{red.60}",
+        "type": "color",
+        "description": "Hover color for $button-danger"
+      },
+      "danger-active": {
+        "value": "{red.80}",
+        "type": "color",
+        "description": "Active color for $button-danger"
+      },
+      "disabled": {
+        "value": "{gray.40}",
+        "type": "color",
+        "description": "Disabled button"
+      }
+    },
+    "field": {
+      "01": {
+        "value": "{blue.80}",
+        "type": "color",
+        "description": "Default input fields; Fields on $background"
+      },
+      "01-hover": {
+        "value": "{blue.80}",
+        "type": "color",
+        "description": "Hover color for $field-01"
+      },
+      "02": {
+        "value": "{blue.70}",
+        "type": "color",
+        "description": "Secondary input fields; Fields on $layer-01"
+      },
+      "02-hover": {
+        "value": "{blue.70}",
+        "type": "color",
+        "description": "Hover color for $field-02 "
+      },
+      "03": {
+        "value": "{blue.60}",
+        "type": "color",
+        "description": "Tertiary input fields; Fields on $layer-02"
+      },
+      "03-hover": {
+        "value": "{blue.60}",
+        "type": "color",
+        "description": "Hover color for $field-03"
+      }
+    },
+    "support": {
+      "error": {
+        "value": "{red.60}",
+        "type": "color",
+        "description": "Error; Invalid state"
+      },
+      "info": {
+        "value": "{aqua.40}",
+        "type": "color",
+        "description": "Informational"
+      },
+      "success": {
+        "value": "{green.50}",
+        "type": "color",
+        "description": "Success"
+      },
+      "warning": {
+        "value": "{yellow.30}",
+        "type": "color",
+        "description": "Warning; Caution"
+      }
+    },
+    "base": {
+      "A": {
+        "value": "#FAC244",
+        "type": "color",
+        "description": "Default color for Adenine"
+      },
+      "C": {
+        "value": "#48BB48",
+        "type": "color",
+        "description": "Default color for Cytosine"
+      },
+      "G": {
+        "value": "#D53732",
+        "type": "color",
+        "description": "Default color for Guanine"
+      },
+      "U": {
+        "value": "#3397DB",
+        "type": "color",
+        "description": "Default color for Uracil"
+      }
     }
   },
   "dark": {
     "background": {
-      "value": "{blue.90}",
+      "value": "{gray.90}",
       "type": "color",
       "description": "Default page background"
     },
-    "layer-1": {
-      "value": "{blue.70}",
-      "type": "color"
+    "layer-01": {
+      "value": "{gray.80}",
+      "type": "color",
+      "description": "Container color on $background"
+    },
+    "layer-02": {
+      "value": "{gray.70}",
+      "type": "color",
+      "description": "Container color on $layer-01"
+    },
+    "layer-03": {
+      "value": "{gray.60}",
+      "type": "color",
+      "description": "Container color on $layer-02"
+    },
+    "focus": {
+      "value": "{blue.30}",
+      "type": "color",
+      "description": "Focus border; Focus underline"
+    },
+    "overlay": {
+      "value": "{shade.20}",
+      "type": "color",
+      "description": "Background overlay"
+    },
+    "highlight": {
+      "value": "{blue.10}",
+      "type": "color",
+      "description": "Highlight color"
     },
     "text": {
-      "default": {
+      "primaryColor": {
         "value": "{neutrals.white}",
-        "type": "color"
+        "type": "color",
+        "description": "Primary text; Body copy; Headers"
+      },
+      "secondaryColor": {
+        "value": "{gray.05}",
+        "type": "color",
+        "description": "Secondary text; Input labels"
+      },
+      "placeholder": {
+        "value": "{gray.40}",
+        "type": "color",
+        "description": "Placeholder text"
+      },
+      "disabled": {
+        "value": "{tint.20}",
+        "type": "color",
+        "description": "Disabled text"
+      },
+      "onColor": {
+        "value": "{neutrals.white}",
+        "type": "color",
+        "description": "Text on button colors"
+      },
+      "error": {
+        "value": "{red.60}",
+        "type": "color",
+        "description": "Error message text"
+      }
+    },
+    "border": {
+      "default": {
+        "value": {
+          "color": "{gray.20}",
+          "width": "{border.width}",
+          "style": "solid"
+        },
+        "type": "border"
+      }
+    },
+    "link": {
+      "primary": {
+        "value": "{yellow.20}",
+        "type": "color",
+        "description": "Primary link"
+      },
+      "primary-hover": {
+        "value": "{yellow.10}",
+        "type": "color",
+        "description": "Hover color for $link-primary"
+      },
+      "visited": {
+        "value": "{orange.40}",
+        "type": "color",
+        "description": "Color for visited links"
+      }
+    },
+    "button": {
+      "primary": {
+        "value": "{blue.40}",
+        "type": "color",
+        "description": "Primary button color"
+      },
+      "primary-hover": {
+        "value": "{blue.30}",
+        "type": "color",
+        "description": "Hover color for $primary-button"
+      },
+      "primary-active": {
+        "value": "{blue.50}",
+        "type": "color",
+        "description": "Hover color for $primary-button"
+      },
+      "secondary": {
+        "value": "{green.40}",
+        "type": "color",
+        "description": "Secondary button color"
+      },
+      "secondary-hover": {
+        "value": "{green.30}",
+        "type": "color",
+        "description": "Hover color for $button-secondary"
+      },
+      "secondary-active": {
+        "value": "{green.50}",
+        "type": "color",
+        "description": "Active color for $button-secondary"
+      },
+      "danger": {
+        "value": "{red.70}",
+        "type": "color",
+        "description": "Primary danger button"
+      },
+      "danger-hover": {
+        "value": "{red.60}",
+        "type": "color",
+        "description": "Hover color for $button-danger"
+      },
+      "danger-active": {
+        "value": "{red.80}",
+        "type": "color",
+        "description": "Active color for $button-danger"
+      },
+      "disabled": {
+        "value": "{gray.40}",
+        "type": "color",
+        "description": "Disabled button"
+      }
+    },
+    "field": {
+      "01": {
+        "value": "{blue.80}",
+        "type": "color",
+        "description": "Default input fields; Fields on $background"
+      },
+      "01-hover": {
+        "value": "{blue.80}",
+        "type": "color",
+        "description": "Hover color for $field-01"
+      },
+      "02": {
+        "value": "{blue.70}",
+        "type": "color",
+        "description": "Secondary input fields; Fields on $layer-01"
+      },
+      "02-hover": {
+        "value": "{blue.70}",
+        "type": "color",
+        "description": "Hover color for $field-02 "
+      },
+      "03": {
+        "value": "{blue.60}",
+        "type": "color",
+        "description": "Tertiary input fields; Fields on $layer-02"
+      },
+      "03-hover": {
+        "value": "{blue.60}",
+        "type": "color",
+        "description": "Hover color for $field-03"
+      }
+    },
+    "support": {
+      "error": {
+        "value": "{red.60}",
+        "type": "color",
+        "description": "Error; Invalid state"
+      },
+      "info": {
+        "value": "{aqua.40}",
+        "type": "color",
+        "description": "Informational"
+      },
+      "success": {
+        "value": "{green.50}",
+        "type": "color",
+        "description": "Success"
+      },
+      "warning": {
+        "value": "{yellow.30}",
+        "type": "color",
+        "description": "Warning; Caution"
+      }
+    },
+    "base": {
+      "A": {
+        "value": "#FAC244",
+        "type": "color",
+        "description": "Default color for Adenine"
+      },
+      "C": {
+        "value": "#48BB48",
+        "type": "color",
+        "description": "Default color for Cytosine"
+      },
+      "G": {
+        "value": "#D53732",
+        "type": "color",
+        "description": "Default color for Guanine"
+      },
+      "U": {
+        "value": "#3397DB",
+        "type": "color",
+        "description": "Default color for Uracil"
       }
     }
   },
@@ -727,14 +1334,221 @@
       "type": "color",
       "description": "Default page background"
     },
-    "layer-1": {
+    "layer-01": {
+      "value": "{neutrals.white}",
+      "type": "color",
+      "description": "Container color on $background"
+    },
+    "layer-02": {
+      "value": "{gray.05}",
+      "type": "color",
+      "description": "Container color on $layer-01"
+    },
+    "layer-03": {
       "value": "{neutrals.white}",
-      "type": "color"
+      "type": "color",
+      "description": "Container color on $layer-02"
+    },
+    "focus": {
+      "value": "{blue.50}",
+      "type": "color",
+      "description": "Focus border; Focus underline"
+    },
+    "overlay": {
+      "value": "{shade.20}",
+      "type": "color",
+      "description": "Background overlay"
+    },
+    "highlight": {
+      "value": "{blue.10}",
+      "type": "color",
+      "description": "Highlight color"
     },
     "text": {
-      "default": {
+      "primaryColor": {
         "value": "{neutrals.black}",
-        "type": "color"
+        "type": "color",
+        "description": "Primary text; Body copy; Headers"
+      },
+      "secondaryColor": {
+        "value": "{gray.80}",
+        "type": "color",
+        "description": "Secondary text; Input labels"
+      },
+      "placeholder": {
+        "value": "{gray.40}",
+        "type": "color",
+        "description": "Placeholder text"
+      },
+      "disabled": {
+        "value": "{shade.20}",
+        "type": "color",
+        "description": "Disabled text"
+      },
+      "onColor": {
+        "value": "{neutrals.white}",
+        "type": "color",
+        "description": "Text on button colors"
+      },
+      "error": {
+        "value": "{red.60}",
+        "type": "color",
+        "description": "Error message text"
+      }
+    },
+    "border": {
+      "default": {
+        "value": {
+          "color": "{gray.20}",
+          "width": "{border.width}",
+          "style": "solid"
+        },
+        "type": "border"
+      }
+    },
+    "link": {
+      "primary": {
+        "value": "{blue.60}",
+        "type": "color",
+        "description": "Primary link"
+      },
+      "primary-hover": {
+        "value": "{blue.70}",
+        "type": "color",
+        "description": "Hover color for $link-primary"
+      },
+      "visited": {
+        "value": "{purple.60}",
+        "type": "color",
+        "description": "Color for visited links"
+      }
+    },
+    "button": {
+      "primary": {
+        "value": "{blue.70}",
+        "type": "color",
+        "description": "Primary button color"
+      },
+      "primary-hover": {
+        "value": "{blue.60}",
+        "type": "color",
+        "description": "Hover color for $primary-button"
+      },
+      "primary-active": {
+        "value": "{blue.80}",
+        "type": "color",
+        "description": "Hover color for $primary-button"
+      },
+      "secondary": {
+        "value": "{gray.70}",
+        "type": "color",
+        "description": "Secondary button color"
+      },
+      "secondary-hover": {
+        "value": "{gray.60}",
+        "type": "color",
+        "description": "Hover color for $button-secondary"
+      },
+      "secondary-active": {
+        "value": "{gray.80}",
+        "type": "color",
+        "description": "Active color for $button-secondary"
+      },
+      "danger": {
+        "value": "{red.50}",
+        "type": "color",
+        "description": "Primary danger button"
+      },
+      "danger-hover": {
+        "value": "{red.40}",
+        "type": "color",
+        "description": "Hover color for $button-danger"
+      },
+      "danger-active": {
+        "value": "{red.60}",
+        "type": "color",
+        "description": "Active color for $button-danger"
+      },
+      "disabled": {
+        "value": "{gray.40}",
+        "type": "color",
+        "description": "Disabled button"
+      }
+    },
+    "field": {
+      "01": {
+        "value": "{neutrals.white}",
+        "type": "color",
+        "description": "Default input fields; Fields on $background"
+      },
+      "01-hover": {
+        "value": "{gray.05}",
+        "type": "color",
+        "description": "Hover color for $field-01"
+      },
+      "02": {
+        "value": "{gray.05}",
+        "type": "color",
+        "description": "Secondary input fields; Fields on $layer-01"
+      },
+      "02-hover": {
+        "value": "{gray.10}",
+        "type": "color",
+        "description": "Hover color for $field-02 "
+      },
+      "03": {
+        "value": "{neutrals.white}",
+        "type": "color",
+        "description": "Tertiary input fields; Fields on $layer-02"
+      },
+      "03-hover": {
+        "value": "{gray.05}",
+        "type": "color",
+        "description": "Hover color for $field-03"
+      }
+    },
+    "support": {
+      "error": {
+        "value": "{red.40}",
+        "type": "color",
+        "description": "Error; Invalid state"
+      },
+      "info": {
+        "value": "{aqua.30}",
+        "type": "color",
+        "description": "Informational"
+      },
+      "success": {
+        "value": "{green.40}",
+        "type": "color",
+        "description": "Success"
+      },
+      "warning": {
+        "value": "{yellow.20}",
+        "type": "color",
+        "description": "Warning; Caution"
+      }
+    },
+    "base": {
+      "A": {
+        "value": "#FAC244",
+        "type": "color",
+        "description": "Default color for Adenine"
+      },
+      "C": {
+        "value": "#48BB48",
+        "type": "color",
+        "description": "Default color for Cytosine"
+      },
+      "G": {
+        "value": "#D53732",
+        "type": "color",
+        "description": "Default color for Guanine"
+      },
+      "U": {
+        "value": "#3397DB",
+        "type": "color",
+        "description": "Default color for Uracil"
       }
     }
   },
diff --git a/packages/design-system/vue/package.json b/packages/design-system/vue/package.json
index 029caac..029c791 100644
--- a/packages/design-system/vue/package.json
+++ b/packages/design-system/vue/package.json
@@ -15,10 +15,16 @@
   "type": "module",
   "main": "./dist/index.js",
   "exports": {
-    "import": "./dist/index.js",
-    "require": "./dist/index.cjs"
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./src/assets/style.css"
   },
   "dependencies": {
+    "@eternagame/design-system-tokens": "^1.0.0-dev",
+    "@inkline/inkline": "^3.2.0",
+    "sass": "^1.57.1",
     "vue": "^3.2.45"
   }
 }
diff --git a/packages/design-system/vue/src/assets/inklineOverrides.css b/packages/design-system/vue/src/assets/inklineOverrides.css
new file mode 100644
index 0000000..ba74cc8
--- /dev/null
+++ b/packages/design-system/vue/src/assets/inklineOverrides.css
@@ -0,0 +1,201 @@
+:root {
+  /** Animation **/
+  --transition-duration: 300ms;
+  --transition-easing: ease;
+
+  /** Border **/
+  /*  --border-radius and --border-width are overwritten by our tokens
+  */
+  --border-style: solid;
+  --border-color-light: var(--gray-20);
+  --border-color-dark: var(--gray-70);
+  --border-color: var(--border-color--light);
+
+  /** Box Shadow **/
+  --box-shadow-offset-x: var(--shadow-default-x);
+  --box-shadow-offset-y: var(--shadow-default-y);
+  --box-shadow-blur-radius: var(--shadow-default-blur);
+  --box-shadow-spread-radius: var(--shadow-default-spread);
+  --box-shadow-color: var(--shadow-default-color);
+  --box-shadow: var(--box-shadow-offset-x) var(--box-shadow-offset-y) var(--box-shadow-blur-radius) var(--box-shadow-spread-radius) var(--box-shadow-color);
+
+  /** Breakpoints **/
+  /*  Inkline uses Sass mixins + Sass variables for their media queries
+      We use CSS variables alone
+  */
+  --breakpoints-xs: 0;
+  --breakpoints-sm: 600px;
+  --breakpoints-md: 900px;
+  --breakpoints-lg: 1200px;
+  --breakpoints-xl: 1800px;
+
+  /** Colors **/
+  --color--primary: var(--blue-40);
+  --color--secondary: var(--aqua-40);
+  --color--info: var(--support-info);
+  --color--warning: var(--support-warning);
+  --color--danger: var(--support-error);
+  --color--success: var(--support-success);
+  --color--red: var(--red-50);
+  --color--orange: var(--orange-40);
+  --color--yellow: var(--yellow-20);
+  --color--green: var(--green-50);
+  --color--teal: var(--aqua-50);
+  --color--blue: var(--blue-60);
+  --color--purple: var(--purple-60);
+  --color--pink: var(--pink-50);
+  --color--white: var(--neutrals-white);
+  --color--black: var(--neutrals-black);
+  --color--gray: var(--gray-60);
+  --color--light: var(--gray-10);
+  --color--dark: var(--gray-90);
+  --contrast-color-for-light-background: var(--gray-90);
+  --contrast-color-for-dark-background: var(--neutrals-white);
+
+  /** Core **/
+  --body--background--light: var(--gray-05);
+  --body--color--light: var(--gray-80);
+  --body--background--dark: var(--gray-90);
+  --body--color--dark: var(--gray-10);
+  --body--background: var(--body--background--light);
+  --body--color: var(--body--color--light);
+
+  /** Grid **/
+  /*  Inkline uses a Sass mixin defined grid system
+      We use Flexbox and CSS Grid
+  */
+
+  /** Gutter **/
+  --gutter: var(--space-md);
+  /* --gutter-xs: var(--space-xs); */
+  /* --gutter-sm: var(--space-sm); */
+  /* --gutter-md: var(--space-md); */
+  /* --gutter-lg: var(--space-lg); */
+  /* --gutter-xl: var(--space-xl); */
+  /* --gutter-xxl: var(); */
+
+  /** Images **/
+  --thumbnail--padding: calc(var(--spacing) / 2);
+  --thumbnail--background: var(--gray-30);
+  --thumbnail--border-width: var(--border-width);
+  --thumbnail--border-color: var(--gray-40);
+  --thumbnail--border-radius: var(--border-radius);
+  --thumbnail--box-shadow: var(--box-shadow);
+  --thumbnail--transition: all 0.3s ease-in-out;
+  --polaroid--padding: calc(var(--spacing) * 3);
+  --figure--caption--font-size: 90%;
+  --figure--caption--font-color: var(--gray-60);
+  --figure--image--font-size: calc(var(--spacing) / 2);
+
+  /** Print **/
+  /* Inkline uses a Sass mixin to define print-specific styles */
+
+  /** Ratios **/
+  --scale-ratio: var(--scale-ratio--major-third);
+  --scale-ratio-secondary: var(--scale-ratio--augmented-fourth); 
+
+  /** Sizes **/
+  --size-percentage--0: 0%;
+  --size-percentage--25: 25%;
+  --size-percentage--50: 50%;
+  --size-percentage--75: 75%;
+  --size-percentage--100: 100%;
+  --size-multiplier: 1;
+  --size-multiplier--xs: var(--size-xs);
+  --size-multiplier--sm: var(--size-sm);
+  --size-multiplier--md: var(--size-md);
+  --size-multiplier--lg: var(--size-lg);
+  --size-multiplier--xl: var(--size-xl);
+
+  /** Spacing **/
+  --spacing: var(--space-md);
+  --margin: var(--inset-md);
+  --padding: var(--inset-md);
+
+  /** Typography **/
+  --font-family-primary--base: var(--fontFamily);
+  --font-family-primary--monospace: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --font-family-primary--print: 'Georgia', 'Times New Roman', 'Times', serif;
+  --font-family-secondary--base: var(--font-family-primary--base);
+  --font-family-secondary--monospace: var(--font-family-primary--monospace);
+  --font-family-secondary--print: var(--font-family-primary--print);
+  --letter-spacing: 0;
+  --font-size: var(--fontSizeBase);
+  --font-size--xs: var(--text-xs);
+  --font-size--sm: var(--text-sm);
+  --font-size--md: var(--text-md);
+  --font-size--lg: var(--text-lg);
+  --font-size--xl: var(--text-xl);
+  --line-height: var(--lineHeight-default);
+  --text-muted: var(--gray-60);
+  --font-weight--extralight: var(--fontWeight-extralight);
+  --font-weight--light: var(--fontWeight-light);
+  --font-weight--normal: var(--fontWeight-default);
+  --font-weight--semibold: 600;
+  --font-weight--bold: var(--fontWeight-bold);
+  --font-weight--black: var(--fontWeight-black);
+  --font-weight--lighter: lighter;
+  --font-weight--bolder: bolder;
+  --h1--font-size: var(--text-xxl);
+  --h2--font-size: var(--text-xl);
+  --h3--font-size: var(--text-lg);
+  --h4--font-size: var(--text-md);
+  --h5--font-size: var(--text-sm);
+  --h6--font-size: var(--text-xs);
+  --heading--margin-top: calc(var(--spacing) * 2.5);
+  --heading--margin-bottom: var(-spacing);
+  --heading--font-family: var(--font-family-secondary--base);
+  --heading--font-weight: var(--font-weight--semibold);
+  --heading--line-height: var(--lineHeight-display);
+  --heading--color: inherit;
+  --display--font-weight: var(--font-weight--semibold);
+  --display--line-height: var(--lineHeight-display);
+  --link--color: var(--link-primary);
+  --link--color--hover: var(--link-primary-hover);
+  --link--decoration: none;
+  --link--decoration--hover: underline;
+  --lead--font-size: var(--text-lg);
+  --lead--font-weight: var(--font-weight--light);
+  --list--item--padding--inline: var(--inline-md);
+  --list--item--margin-bottom: var(--stack-md);
+  --dt--font-weight: var(--font-weight--bold);
+  --small--font-size: var(--text-sm);
+  --small--font-weight: var(--font-weight--normal);
+  --blockquote--footer--color: var(--gray-60);
+  --blockquote--font-size: var(--text-lg);
+  --blockquote--border: var(--border-width) var(--border-style) var(--border-color);
+  --blockquote--margin: var(--inset-md);
+  --blockquote--padding--bordered: var(--inset-md);
+  --hr--border-color: var(--shade-20), rgba(0,0,0,0.1);
+  --hr--border-width: var(--border-width);
+  --hr--border-style: var(--border-style);
+  --hr--margin: var(--stack-md);
+  --mark--padding: var(--stretch-xs);
+  --mark--color: var(--gray-90);
+  --mark--background-color: var(--yellow-10);
+  --code--font-size: var(--text-md);
+  --code--padding: var(--stretch-sm);
+  --code--color: var(--gray-80);
+  --code--background: var(--gray-10);
+  --code--color--dark: var(--gray-10);
+  --code--background--dark: var(--gray-80);
+  --kbd--font-size: var(--text-md);
+  --kbd--box-shadow: inset var(--shadow-inner-x) var(--shadow-inner-y) var(--shadow-inner-blur) var(--shade-20);
+  --kbd--nested-font-weight: var(--font-weight--bold);
+  --kbd--padding: var(--code--padding);
+  --kbd--color: var(--neutrals-black);
+  --kbd--background: var(--gray-05);
+  --pre--font-size: var(--text-md);
+  --pre--color: var(--gray-90);
+  --pre--background: var(--neutrals-white);
+  --pre--scrollable-max-height: 340px;
+
+  /** Z-Index **/
+  --z-index--dropdown: 1000;
+  --z-index--sticky: 1020;
+  --z-index--fixed: 1030;
+  --z-index--modal-backdrop: 1040;
+  --z-index--modal: 1050;
+  --z-index--popover: 1060;
+  --z-index--tooltip: 1070;
+}
\ No newline at end of file
diff --git a/packages/design-system/vue/src/assets/style.css b/packages/design-system/vue/src/assets/style.css
index d4e3bfc..d2b935a 100644
--- a/packages/design-system/vue/src/assets/style.css
+++ b/packages/design-system/vue/src/assets/style.css
@@ -1,8 +1,9 @@
+@import url('@inkline/inkline/inkline.css');
+@import url('@eternagame/design-system-tokens/tokens.css');
+@import url('./inklineOverrides.css');
+
 body {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  margin: 0;
 }
diff --git a/packages/frontend/web/src/assets/style.css b/packages/frontend/web/src/assets/style.css
index d4e3bfc..dd4c5fe 100644
--- a/packages/frontend/web/src/assets/style.css
+++ b/packages/frontend/web/src/assets/style.css
@@ -1,8 +1 @@
-body {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+@import url('@eternagame/design-system-vue/style.css');