diff --git a/package-lock.json b/package-lock.json
index 7710fc4..43080fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1833,6 +1833,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2011,6 +2012,7 @@
       "integrity": "sha512-+VUy01yfDqNmIVMd/LLKl2TTtY0ovZN0rTonh+FhKr65mFwIYgU9WzgIZKS7U9/SPCQvWTsTGx9jyt+qRm/XFw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@bufbuild/protobuf": "^2.5.0",
         "buffer-builder": "^0.2.0",
@@ -2489,6 +2491,7 @@
       "integrity": "sha512-NL8jTlbo0Tn4dUEXEsUg8KeyG/Lkmc4Fnzb8JXN/Ykm9G4HNImjtABMJgkQoVjOBN/j2WAwDTRytdqJbZsah7w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -2563,6 +2566,7 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.25.tgz",
       "integrity": "sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.25",
         "@vue/compiler-sfc": "3.5.25",
diff --git a/public/assets/css/src/_buttons.scss b/public/assets/css/src/_buttons.scss
index e0f4c7e..d46fcd9 100644
--- a/public/assets/css/src/_buttons.scss
+++ b/public/assets/css/src/_buttons.scss
@@ -1,20 +1,21 @@
 button {
   cursor: pointer;
 
-  border: 1px solid var(--color-browngray-300);
-  color: var(--color-browngray-300);
+  border: 1px solid var(--color-interface-300);
+  color: var(--color-interface-300);
   background-color: var(--color-panel-bg);
   border-radius: var(--border-radius);
   padding: 0.1rem 0.3rem;
 
   &.active {
-    border: 1px solid #000;
-    color: #000;
+    border: 1px solid var(--color-interface-700);
+    color: var(--color-interface-700);
+    background-color: var(--color-interface-100);
   }
 
   &.tab {
     &.active {
-      background-color: #000;
+      background-color: var(--color-txt);
       color: #fff;
       border: none;
     }
diff --git a/public/assets/css/src/_fonts.scss b/public/assets/css/src/_fonts.scss
new file mode 100644
index 0000000..e94ed06
--- /dev/null
+++ b/public/assets/css/src/_fonts.scss
@@ -0,0 +1,162 @@
+// DM Sans - Variable font (recommended)
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans[opsz,wght].woff2') format('woff2-variations');
+  font-weight: 100 1000;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2') format('woff2-variations');
+  font-weight: 100 1000;
+  font-style: italic;
+  font-display: swap;
+}
+
+// DM Sans - Static weights (fallback)
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-Thin.woff2') format('woff2');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-ExtraLight.woff2') format('woff2');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-ExtraBold.woff2') format('woff2');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-Black.woff2') format('woff2');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+// Inconsolata - Monospace font
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-Thin.woff2') format('woff2');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-ExtraLight.woff2') format('woff2');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-ExtraBold.woff2') format('woff2');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-Black.woff2') format('woff2');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
diff --git a/public/assets/css/src/_forms.scss b/public/assets/css/src/_forms.scss
index 75f67da..199b2a4 100644
--- a/public/assets/css/src/_forms.scss
+++ b/public/assets/css/src/_forms.scss
@@ -1,9 +1,19 @@
 select,
 input[type="text"],
 input[type="number"] {
-  background-color: var(--color-browngray-300);
+  background-color: white;
+  // border-radius: 4px;
+  min-height: 20px;
+  border: 1px solid var(--color-interface-200);
+  background-color: var(--color-interface-100);
+
+
+  font-family: var(--sans-serif);
 }
 
+
+
+
 .field--view-only {
   opacity: 0.3;
 }
diff --git a/public/assets/css/src/_text.scss b/public/assets/css/src/_text.scss
index 6c537a3..c74bd60 100644
--- a/public/assets/css/src/_text.scss
+++ b/public/assets/css/src/_text.scss
@@ -1,15 +1,10 @@
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-a,
-input,
-select,
-figcaption,
-label {
-  font-family: sans-serif;
+body {
+  font-family: var(--sans-serif);
+  color: var(--color-txt);
 }
+
+// code,
+// pre,
+// .monospace {
+//   font-family: 'Inconsolata', monospace;
+// }
diff --git a/public/assets/css/src/_variables.scss b/public/assets/css/src/_variables.scss
index e8b86eb..29f4d4e 100644
--- a/public/assets/css/src/_variables.scss
+++ b/public/assets/css/src/_variables.scss
@@ -1,9 +1,79 @@
 :root {
-  --color-panel-bg: #e8e6e5;
+
+  
+
   --color-browngray-050: #f5f3f0;
   --color-browngray-200: #d0c4ba;
-  --color-browngray-300: #b5a9a1;
 
+
+  --color-interface-050: #f5f5f5;
+  --color-interface-100: #e2e6ed;
+  --color-interface-200: #d7dce8;
+  --color-interface-300: #c0c4d1;
+  --color-interface-400: #bec4d4;
+  --color-interface-900: #3e414c;
+
+
+
+
+  // MARRON
+  --color-interface-050: #fcf7f4;
+  --color-interface-100: #f5eae4;
+  --color-interface-200: #e9d4c8;
+  --color-interface-300: #d8b7a6;
+  --color-interface-400: #c39986;
+  --color-interface-500: #ad826f;
+  --color-interface-600: #916b5b;
+  --color-interface-700: #755548;
+  --color-interface-800: #5c443a;
+  --color-interface-900: #46342b;
+
+  
+  // BRONZE SUBTIL
+  --color-interface-050: #f5f0ed; 
+  --color-interface-050: #f8f5f4;
+  --color-interface-100: #efe9e6;
+  --color-interface-200: #e0d5d0;
+  --color-interface-300: #cabbb5;
+  --color-interface-400: #b2a29c;
+  --color-interface-500: #998985;
+  --color-interface-600: #7f716e;
+  --color-interface-700: #675b58;
+  --color-interface-800: #5b4f4c; 
+  --color-interface-900: #483c39; 
+
+
+  // CHAMPAGNE
+  // --color-interface-050: #f9f6f4;
+  // --color-interface-100: #f2ebe6;
+  // --color-interface-200: #e6d8cf;
+  // --color-interface-300: #d4c2b7;
+  // --color-interface-400: #c2ac9d;
+  // --color-interface-500: #ac9383;
+  // --color-interface-600: #927a6a;
+  // --color-interface-700: #776356;
+  // --color-interface-800: #5e4e45;
+  // --color-interface-900: #473a32;
+
+  // GREY
+  // --color-interface-050: #f7f6f4;
+  // --color-interface-100: #eceae6;
+  // --color-interface-200: #dedbd6;
+  // --color-interface-300: #c9c5be;
+  // --color-interface-400: #b4afa7;
+  // --color-interface-500: #9d978f;
+  // --color-interface-600: #86817a;
+  // --color-interface-700: #6e6a63;
+  // --color-interface-800: #55534d;
+  // --color-interface-900: #3e3c37;
+
+  
+
+
+
+  --color-txt: var(--color-interface-800);
+  --color-panel-bg: var(--color-interface-050);
+  
   --color-page-highlight: #ff8a50;
   --color-purple: #7136ff;
 
@@ -12,4 +82,7 @@
   --space-xs: 0.5rem;
 
   --curve: cubic-bezier(0.86, 0, 0.07, 1);
+
+  --sans-serif: 'DM Sans', sans-serif;
+  --mono: 'Inconsolata', monospace;
 }
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 2d229d0..a23be1b 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -1,3 +1,143 @@
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans[opsz,wght].woff2") format("woff2-variations");
+  font-weight: 100 1000;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2") format("woff2-variations");
+  font-weight: 100 1000;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-Thin.woff2") format("woff2");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-ExtraLight.woff2") format("woff2");
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-Light.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-ExtraBold.woff2") format("woff2");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-Black.woff2") format("woff2");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-Thin.woff2") format("woff2");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-ExtraLight.woff2") format("woff2");
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-Light.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-ExtraBold.woff2") format("woff2");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-Black.woff2") format("woff2");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
 body,
 html {
   padding: 0;
@@ -26,31 +166,49 @@ button {
 }
 
 :root {
-  --color-panel-bg: #e8e6e5;
   --color-browngray-050: #f5f3f0;
   --color-browngray-200: #d0c4ba;
-  --color-browngray-300: #b5a9a1;
+  --color-interface-050: #f5f5f5;
+  --color-interface-100: #e2e6ed;
+  --color-interface-200: #d7dce8;
+  --color-interface-300: #c0c4d1;
+  --color-interface-400: #bec4d4;
+  --color-interface-900: #3e414c;
+  --color-interface-050: #fcf7f4;
+  --color-interface-100: #f5eae4;
+  --color-interface-200: #e9d4c8;
+  --color-interface-300: #d8b7a6;
+  --color-interface-400: #c39986;
+  --color-interface-500: #ad826f;
+  --color-interface-600: #916b5b;
+  --color-interface-700: #755548;
+  --color-interface-800: #5c443a;
+  --color-interface-900: #46342b;
+  --color-interface-050: #f5f0ed;
+  --color-interface-050: #f8f5f4;
+  --color-interface-100: #efe9e6;
+  --color-interface-200: #e0d5d0;
+  --color-interface-300: #cabbb5;
+  --color-interface-400: #b2a29c;
+  --color-interface-500: #998985;
+  --color-interface-600: #7f716e;
+  --color-interface-700: #675b58;
+  --color-interface-800: #5b4f4c;
+  --color-interface-900: #483c39;
+  --color-txt: var(--color-interface-800);
+  --color-panel-bg: var(--color-interface-050);
   --color-page-highlight: #ff8a50;
   --color-purple: #7136ff;
   --border-radius: 0.2rem;
   --space-xs: 0.5rem;
   --curve: cubic-bezier(0.86, 0, 0.07, 1);
+  --sans-serif: "DM Sans", sans-serif;
+  --mono: "Inconsolata", monospace;
 }
 
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-a,
-input,
-select,
-figcaption,
-label {
-  font-family: sans-serif;
+body {
+  font-family: var(--sans-serif);
+  color: var(--color-txt);
 }
 
 /* PagedJS print styles */
@@ -75,7 +233,11 @@ h2 {
 select,
 input[type=text],
 input[type=number] {
-  background-color: var(--color-browngray-300);
+  background-color: white;
+  min-height: 20px;
+  border: 1px solid var(--color-interface-200);
+  background-color: var(--color-interface-100);
+  font-family: var(--sans-serif);
 }
 
 .field--view-only {
@@ -183,18 +345,19 @@ input[type=number] {
 
 button {
   cursor: pointer;
-  border: 1px solid var(--color-browngray-300);
-  color: var(--color-browngray-300);
+  border: 1px solid var(--color-interface-300);
+  color: var(--color-interface-300);
   background-color: var(--color-panel-bg);
   border-radius: var(--border-radius);
   padding: 0.1rem 0.3rem;
 }
 button.active {
-  border: 1px solid #000;
-  color: #000;
+  border: 1px solid var(--color-interface-700);
+  color: var(--color-interface-700);
+  background-color: var(--color-interface-100);
 }
 button.tab.active {
-  background-color: #000;
+  background-color: var(--color-txt);
   color: #fff;
   border: none;
 }
diff --git a/public/assets/css/style.css.map b/public/assets/css/style.css.map
index 498edd4..2849f12 100644
--- a/public/assets/css/style.css.map
+++ b/public/assets/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss","src/_settings-popup.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["src/_fonts.scss","style.css","src/_reset.scss","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss","src/_settings-popup.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
diff --git a/public/assets/css/style.scss b/public/assets/css/style.scss
index 656ee33..6db5d34 100644
--- a/public/assets/css/style.scss
+++ b/public/assets/css/style.scss
@@ -1,3 +1,4 @@
+@import "src/_fonts.scss";
 @import "src/_reset.scss";
 @import "src/_variables.scss";
 @import "src/_text.scss";
diff --git a/public/assets/fonts/DMSans/DMSans-Black.woff2 b/public/assets/fonts/DMSans/DMSans-Black.woff2
new file mode 100644
index 0000000..3d7df7f
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-Black.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-BlackItalic.woff2 b/public/assets/fonts/DMSans/DMSans-BlackItalic.woff2
new file mode 100644
index 0000000..719c05b
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-BlackItalic.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-Bold.woff2 b/public/assets/fonts/DMSans/DMSans-Bold.woff2
new file mode 100644
index 0000000..af58614
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-Bold.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-BoldItalic.woff2 b/public/assets/fonts/DMSans/DMSans-BoldItalic.woff2
new file mode 100644
index 0000000..d671120
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-BoldItalic.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-ExtraBlack.woff2 b/public/assets/fonts/DMSans/DMSans-ExtraBlack.woff2
new file mode 100644
index 0000000..913890a
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-ExtraBlack.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-ExtraBlackItalic.woff2 b/public/assets/fonts/DMSans/DMSans-ExtraBlackItalic.woff2
new file mode 100644
index 0000000..10a798c
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-ExtraBlackItalic.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-ExtraBold.woff2 b/public/assets/fonts/DMSans/DMSans-ExtraBold.woff2
new file mode 100644
index 0000000..de9f58b
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-ExtraBold.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-ExtraBoldItalic.woff2 b/public/assets/fonts/DMSans/DMSans-ExtraBoldItalic.woff2
new file mode 100644
index 0000000..1c41a90
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-ExtraBoldItalic.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-ExtraLight.woff2 b/public/assets/fonts/DMSans/DMSans-ExtraLight.woff2
new file mode 100644
index 0000000..b30cc79
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-ExtraLight.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-ExtraLightItalic.woff2 b/public/assets/fonts/DMSans/DMSans-ExtraLightItalic.woff2
new file mode 100644
index 0000000..111f1f2
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-ExtraLightItalic.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-Italic.woff2 b/public/assets/fonts/DMSans/DMSans-Italic.woff2
new file mode 100644
index 0000000..c6eafe1
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-Italic.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2 b/public/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2
new file mode 100644
index 0000000..b9224aa
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-Light.woff2 b/public/assets/fonts/DMSans/DMSans-Light.woff2
new file mode 100644
index 0000000..31265a3
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-Light.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-LightItalic.woff2 b/public/assets/fonts/DMSans/DMSans-LightItalic.woff2
new file mode 100644
index 0000000..dfc26f0
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-LightItalic.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-Medium.woff2 b/public/assets/fonts/DMSans/DMSans-Medium.woff2
new file mode 100644
index 0000000..27f223c
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-Medium.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-MediumItalic.woff2 b/public/assets/fonts/DMSans/DMSans-MediumItalic.woff2
new file mode 100644
index 0000000..817a696
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-MediumItalic.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-Regular.woff2 b/public/assets/fonts/DMSans/DMSans-Regular.woff2
new file mode 100644
index 0000000..1b06ad8
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-Regular.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-SemiBold.woff2 b/public/assets/fonts/DMSans/DMSans-SemiBold.woff2
new file mode 100644
index 0000000..225015c
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-SemiBold.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-SemiBoldItalic.woff2 b/public/assets/fonts/DMSans/DMSans-SemiBoldItalic.woff2
new file mode 100644
index 0000000..c4cae67
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-SemiBoldItalic.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-Thin.woff2 b/public/assets/fonts/DMSans/DMSans-Thin.woff2
new file mode 100644
index 0000000..4f25c05
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-Thin.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans-ThinItalic.woff2 b/public/assets/fonts/DMSans/DMSans-ThinItalic.woff2
new file mode 100644
index 0000000..eb72cf4
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans-ThinItalic.woff2 differ
diff --git a/public/assets/fonts/DMSans/DMSans[opsz,wght].woff2 b/public/assets/fonts/DMSans/DMSans[opsz,wght].woff2
new file mode 100644
index 0000000..ab7ecbb
Binary files /dev/null and b/public/assets/fonts/DMSans/DMSans[opsz,wght].woff2 differ
diff --git a/public/assets/fonts/DMSans/stylesheet.css b/public/assets/fonts/DMSans/stylesheet.css
new file mode 100644
index 0000000..fbfe2b1
--- /dev/null
+++ b/public/assets/fonts/DMSans/stylesheet.css
@@ -0,0 +1,137 @@
+/* DMSans Font Faces */
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Black.woff2") format("woff2");
+  font-weight: 900;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-BlackItalic.woff2") format("woff2");
+  font-weight: 900;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-BoldItalic.woff2") format("woff2");
+  font-weight: 700;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-ExtraBlack.woff2") format("woff2");
+  font-weight: 950;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-ExtraBlackItalic.woff2") format("woff2");
+  font-weight: 950;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-ExtraBold.woff2") format("woff2");
+  font-weight: 800;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-ExtraBoldItalic.woff2") format("woff2");
+  font-weight: 800;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-ExtraLight.woff2") format("woff2");
+  font-weight: 200;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-ExtraLightItalic.woff2") format("woff2");
+  font-weight: 200;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Italic[opsz,wght].woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Light.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-LightItalic.woff2") format("woff2");
+  font-weight: 300;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-MediumItalic.woff2") format("woff2");
+  font-weight: 500;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-SemiBoldItalic.woff2") format("woff2");
+  font-weight: 600;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Thin.woff2") format("woff2");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-ThinItalic.woff2") format("woff2");
+  font-weight: 100;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans[opsz,wght].woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+}
+/* Example usage */
+body {
+  font-family: "DMSans", sans-serif;
+}/*# sourceMappingURL=stylesheet.css.map */
\ No newline at end of file
diff --git a/public/assets/fonts/DMSans/stylesheet.css.map b/public/assets/fonts/DMSans/stylesheet.css.map
new file mode 100644
index 0000000..d8d81f8
--- /dev/null
+++ b/public/assets/fonts/DMSans/stylesheet.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["stylesheet.scss","stylesheet.css"],"names":[],"mappings":"AAAA,sBAAA;AACA;EACE,qBAAA;EACA,8CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,oDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,6CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,yDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,kDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,wDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,yDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,+CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,0DAAA;EACA,oBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,8CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,oDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,+CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,qDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,gDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,iDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,uDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,6CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,oBAAA;EACA,kBAAA;ACCF;ADEA,kBAAA;AACA;EACE,iCAAA;ACAF","file":"stylesheet.css"}
\ No newline at end of file
diff --git a/public/assets/fonts/DMSans/stylesheet.scss b/public/assets/fonts/DMSans/stylesheet.scss
new file mode 100644
index 0000000..5cc3671
--- /dev/null
+++ b/public/assets/fonts/DMSans/stylesheet.scss
@@ -0,0 +1,138 @@
+/* DMSans Font Faces */
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-Black.woff2') format('woff2');
+  font-weight: 900;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-BlackItalic.woff2') format('woff2');
+  font-weight: 900;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-BoldItalic.woff2') format('woff2');
+  font-weight: 700;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-ExtraBlack.woff2') format('woff2');
+  font-weight: 950;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-ExtraBlackItalic.woff2') format('woff2');
+  font-weight: 950;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-ExtraBold.woff2') format('woff2');
+  font-weight: 800;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-ExtraBoldItalic.woff2') format('woff2');
+  font-weight: 800;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-ExtraLight.woff2') format('woff2');
+  font-weight: 200;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-ExtraLightItalic.woff2') format('woff2');
+  font-weight: 200;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-Italic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-Italic[opsz,wght].woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-LightItalic.woff2') format('woff2');
+  font-weight: 300;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-MediumItalic.woff2') format('woff2');
+  font-weight: 500;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-SemiBoldItalic.woff2') format('woff2');
+  font-weight: 600;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-Thin.woff2') format('woff2');
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-ThinItalic.woff2') format('woff2');
+  font-weight: 100;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans[opsz,wght].woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+/* Example usage */
+body {
+  font-family: 'DMSans', sans-serif;
+}
\ No newline at end of file
diff --git a/public/assets/fonts/webfont/Inconsolata-Black.woff2 b/public/assets/fonts/webfont/Inconsolata-Black.woff2
new file mode 100644
index 0000000..81e7b8b
Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-Black.woff2 differ
diff --git a/public/assets/fonts/webfont/Inconsolata-Bold.woff2 b/public/assets/fonts/webfont/Inconsolata-Bold.woff2
new file mode 100644
index 0000000..a183d29
Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-Bold.woff2 differ
diff --git a/public/assets/fonts/webfont/Inconsolata-ExtraBold.woff2 b/public/assets/fonts/webfont/Inconsolata-ExtraBold.woff2
new file mode 100644
index 0000000..f43698e
Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-ExtraBold.woff2 differ
diff --git a/public/assets/fonts/webfont/Inconsolata-ExtraLight.woff2 b/public/assets/fonts/webfont/Inconsolata-ExtraLight.woff2
new file mode 100644
index 0000000..e56d763
Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-ExtraLight.woff2 differ
diff --git a/public/assets/fonts/webfont/Inconsolata-Light.woff2 b/public/assets/fonts/webfont/Inconsolata-Light.woff2
new file mode 100644
index 0000000..67c1971
Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-Light.woff2 differ
diff --git a/public/assets/fonts/webfont/Inconsolata-Medium.woff2 b/public/assets/fonts/webfont/Inconsolata-Medium.woff2
new file mode 100644
index 0000000..d1f080b
Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-Medium.woff2 differ
diff --git a/public/assets/fonts/webfont/Inconsolata-Regular.woff2 b/public/assets/fonts/webfont/Inconsolata-Regular.woff2
new file mode 100644
index 0000000..fb2d3c4
Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-Regular.woff2 differ
diff --git a/public/assets/fonts/webfont/Inconsolata-SemiBold.woff2 b/public/assets/fonts/webfont/Inconsolata-SemiBold.woff2
new file mode 100644
index 0000000..bced232
Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-SemiBold.woff2 differ
diff --git a/public/assets/fonts/webfont/Inconsolata-Thin.woff2 b/public/assets/fonts/webfont/Inconsolata-Thin.woff2
new file mode 100644
index 0000000..f5e7aec
Binary files /dev/null and b/public/assets/fonts/webfont/Inconsolata-Thin.woff2 differ
diff --git a/public/assets/fonts/webfont/stylesheet.css b/public/assets/fonts/webfont/stylesheet.css
new file mode 100644
index 0000000..0d26d26
--- /dev/null
+++ b/public/assets/fonts/webfont/stylesheet.css
@@ -0,0 +1,61 @@
+/* Inconsolata Font Faces (ordered from lightest to boldest) */
+@font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-Thin.woff2') format('woff2');
+    font-weight: 100;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-ExtraLight.woff2') format('woff2');
+    font-weight: 200;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-Light.woff2') format('woff2');
+    font-weight: 300;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-Medium.woff2') format('woff2');
+    font-weight: 500;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-SemiBold.woff2') format('woff2');
+    font-weight: 600;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-ExtraBold.woff2') format('woff2');
+    font-weight: 800;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-Black.woff2') format('woff2');
+    font-weight: 900;
+    font-style: normal;
+  }
+  
+  /* Example usage */
+  /* code, pre, .mono {
+    font-family: 'Inconsolata', monospace;
+  } */
+  
\ No newline at end of file
diff --git a/src/components/editor/EditorPanel.vue b/src/components/editor/EditorPanel.vue
index eb2c255..a5753ab 100644
--- a/src/components/editor/EditorPanel.vue
+++ b/src/components/editor/EditorPanel.vue
@@ -100,7 +100,7 @@ nav {
   border: none;
   cursor: pointer;
 
-  color: var(--color-browngray-300);
+  color: var(--color-interface-300);
   transition: color 0.2s ease;
 
   &:hover {