diff --git a/packages/builder/assets/Inter-Black.woff b/packages/builder/assets/Inter-Black.woff
new file mode 100644
index 0000000000..07800f4b74
Binary files /dev/null and b/packages/builder/assets/Inter-Black.woff differ
diff --git a/packages/builder/assets/Inter-Black.woff2 b/packages/builder/assets/Inter-Black.woff2
new file mode 100644
index 0000000000..9a615e6e83
Binary files /dev/null and b/packages/builder/assets/Inter-Black.woff2 differ
diff --git a/packages/builder/assets/Inter-Bold.woff b/packages/builder/assets/Inter-Bold.woff
new file mode 100644
index 0000000000..61e1c25e64
Binary files /dev/null and b/packages/builder/assets/Inter-Bold.woff differ
diff --git a/packages/builder/assets/Inter-Bold.woff2 b/packages/builder/assets/Inter-Bold.woff2
new file mode 100644
index 0000000000..6c401bb09b
Binary files /dev/null and b/packages/builder/assets/Inter-Bold.woff2 differ
diff --git a/packages/builder/assets/Inter-ExtraBold.woff b/packages/builder/assets/Inter-ExtraBold.woff
new file mode 100644
index 0000000000..433fb3285c
Binary files /dev/null and b/packages/builder/assets/Inter-ExtraBold.woff differ
diff --git a/packages/builder/assets/Inter-ExtraBold.woff2 b/packages/builder/assets/Inter-ExtraBold.woff2
new file mode 100644
index 0000000000..5a08b364d5
Binary files /dev/null and b/packages/builder/assets/Inter-ExtraBold.woff2 differ
diff --git a/packages/builder/assets/Inter-Medium.woff b/packages/builder/assets/Inter-Medium.woff
new file mode 100644
index 0000000000..8c36a6345e
Binary files /dev/null and b/packages/builder/assets/Inter-Medium.woff differ
diff --git a/packages/builder/assets/Inter-Medium.woff2 b/packages/builder/assets/Inter-Medium.woff2
new file mode 100644
index 0000000000..3b31d3350a
Binary files /dev/null and b/packages/builder/assets/Inter-Medium.woff2 differ
diff --git a/packages/builder/assets/Inter-Regular.woff b/packages/builder/assets/Inter-Regular.woff
new file mode 100644
index 0000000000..7d587c40bf
Binary files /dev/null and b/packages/builder/assets/Inter-Regular.woff differ
diff --git a/packages/builder/assets/Inter-Regular.woff2 b/packages/builder/assets/Inter-Regular.woff2
new file mode 100644
index 0000000000..d5ffd2a1f1
Binary files /dev/null and b/packages/builder/assets/Inter-Regular.woff2 differ
diff --git a/packages/builder/assets/Inter-SemiBold.woff b/packages/builder/assets/Inter-SemiBold.woff
new file mode 100644
index 0000000000..99df06cbee
Binary files /dev/null and b/packages/builder/assets/Inter-SemiBold.woff differ
diff --git a/packages/builder/assets/Inter-SemiBold.woff2 b/packages/builder/assets/Inter-SemiBold.woff2
new file mode 100644
index 0000000000..df746af999
Binary files /dev/null and b/packages/builder/assets/Inter-SemiBold.woff2 differ
diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff b/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff
deleted file mode 100644
index 72f1207930..0000000000
Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff and /dev/null differ
diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff2 b/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff2
deleted file mode 100644
index 05fda6ab5c..0000000000
Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff2 and /dev/null differ
diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff b/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff
deleted file mode 100644
index fb70b7e915..0000000000
Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff and /dev/null differ
diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff2 b/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff2
deleted file mode 100644
index 96981bc870..0000000000
Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff2 and /dev/null differ
diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff b/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff
deleted file mode 100644
index d023f3de32..0000000000
Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff and /dev/null differ
diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff2 b/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff2
deleted file mode 100644
index fd49210352..0000000000
Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff2 and /dev/null differ
diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff b/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff
deleted file mode 100644
index 397450501b..0000000000
Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff and /dev/null differ
diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff2 b/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff2
deleted file mode 100644
index 5cd76971f1..0000000000
Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff2 and /dev/null differ
diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff b/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff
deleted file mode 100644
index f9849dfbee..0000000000
Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff and /dev/null differ
diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff2 b/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff2
deleted file mode 100644
index 1f7dd5b890..0000000000
Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff2 and /dev/null differ
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 1d7786a090..80038d3ceb 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@beyonk/svelte-notifications": "^2.0.3",
-    "@budibase/bbui": "^1.8.0",
+    "@budibase/bbui": "^1.10.1",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index 3d880cbfa2..b40029e230 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -57,13 +57,14 @@
 .budibase__nav-item {
     cursor: pointer;
     padding: 0 4px 0 2px;
-    height: 35px;
-    margin: 5px 0px 4px 0px;
-    border-radius: 0 5px 5px 0;
+    height: 36px;
+    margin: 0px 0px 0px 0px;
+    border-radius: 5px;
     display: flex;
     align-items: center;
     font-size: 14px;
     transition: 0.2s;
+    border-top: var(--grey-1) .5px solid;
 }
 
 .budibase__nav-item.selected {
@@ -72,14 +73,14 @@
 }
 
 .budibase__nav-item:hover {
-    background: var(--grey-light);
+    background: var(--grey-1);
 }
 
 .budibase__input {
-    height: 35px;
+    height: 36px;
     width: 220px;
     border-radius: 3px;
-    border: 1px solid var(--grey-dark);
+    border: 1px solid var(--grey-4);
     text-align: left;
     color: var(--ink);
     font-size: 14px;
@@ -100,7 +101,7 @@
 }
 
 .budibase__table {
-    border: 1px solid var(--grey-dark);
+    border: 1px solid var(--grey-4);
     background: #fff;
     border-radius: 2px;
 }
@@ -116,12 +117,12 @@
 }
 
 .budibase__table tr {
-    border-bottom: 1px solid var(--grey-light);
+    border-bottom: 1px solid var(--grey-1);
 }
 
 .button--toggled {
     background: var(--blue-light);
-    color: var(--ink-light);
+    color: var(--grey-7);
     width: 40px;
     height: 40px;
     display: flex;
diff --git a/packages/builder/src/components/common/ActionButton.svelte b/packages/builder/src/components/common/ActionButton.svelte
index 147737b5c6..3af21e4398 100644
--- a/packages/builder/src/components/common/ActionButton.svelte
+++ b/packages/builder/src/components/common/ActionButton.svelte
@@ -41,7 +41,7 @@
 
   .secondary {
     color: var(--ink);
-    border: solid 1px var(--grey-dark);
+    border: solid 1px var(--grey-4);
     background: white;
   }
 
diff --git a/packages/builder/src/components/common/AppNotification.svelte b/packages/builder/src/components/common/AppNotification.svelte
index 2e8723ab53..74ea1c1fd4 100644
--- a/packages/builder/src/components/common/AppNotification.svelte
+++ b/packages/builder/src/components/common/AppNotification.svelte
@@ -55,9 +55,8 @@
   }
 
   :global(.uk-notification-message-danger) {
-    background: var(--ink-light) !important;
+    background: var(--grey-9) !important;
     color: #fff !important;
-    font-family: Roboto;
     font-size: 16px !important;
   }
 
@@ -72,6 +71,6 @@
   }
 
   :global(.refresh-page-button):hover {
-    background: var(--grey-light);
+    background: var(--grey-1);
   }
 </style>
diff --git a/packages/builder/src/components/common/Button.svelte b/packages/builder/src/components/common/Button.svelte
index 5b8f2fb593..a5fe3752a2 100644
--- a/packages/builder/src/components/common/Button.svelte
+++ b/packages/builder/src/components/common/Button.svelte
@@ -42,14 +42,14 @@
 
   /* ---- PRIMARY ----*/
   .primary {
-    background-color: var(--primary100);
-    border-color: var(--primary100);
+    background-color: var(--blue);
+    border-color: var(--blue);
     color: var(--white);
   }
 
   .primary:hover {
-    background-color: var(--primary75);
-    border-color: var(--primary75);
+    background-color: var(--blue);
+    border-color: var(--blue);
   }
 
   .primary:active {
@@ -59,8 +59,8 @@
 
   .primary-outline {
     background-color: var(--white);
-    border-color: var(--primary100);
-    color: var(--primary100);
+    border-color: var(--blue);
+    color: var(--blue);
   }
 
   .primary-outline:hover {
@@ -74,8 +74,8 @@
   /* ---- secondary ----*/
 
   .secondary {
-    background-color: var(--secondary100);
-    border-color: var(--secondary100);
+    background-color: var(--ink);
+    border-color: var(--ink);
     color: var(--white);
   }
 
@@ -91,8 +91,8 @@
 
   .secondary-outline {
     background-color: var(--white);
-    border-color: var(--secondary100);
-    color: var(--secondary100);
+    border-color: var(--ink);
+    color: var(--ink);
   }
 
   .secondary-outline:hover {
@@ -136,32 +136,36 @@
 
   /* ---- deletion ----*/
   .deletion {
-    background-color: var(--deletion100);
-    border-color: var(--deletion100);
+    background-color: var(--red);
+    border-color: var(--red);
     color: var(--white);
   }
 
   .deletion:hover {
-    background-color: var(--deletion75);
-    border-color: var(--deletion75);
+    background-color: var(--red-light);
+    border-color: var(--red);
+    color: var(--red);
   }
 
   .deletion:pressed {
-    background-color: var(--deletiondark);
-    border-color: var(--deletiondark);
+    background-color: var(--red-dark);
+    border-color: var(--red-dark);
+    color: var(--white);
   }
 
   .deletion-outline {
     background-color: var(--white);
-    border-color: var(--deletion100);
-    color: var(--deletion100);
+    border-color: var(--red);
+    color: var(--red);
   }
 
   .deletion-outline:hover {
-    background-color: var(--deletion10);
+    background-color: var(--red-light);
+    color: var(--red);
   }
 
   .deletion-outline:pressed {
-    background-color: var(--deletion25);
+    background-color: var(--red-dark);
+    color: var(--white);
   }
 </style>
diff --git a/packages/builder/src/components/common/CodeArea.svelte b/packages/builder/src/components/common/CodeArea.svelte
index e6a4fac030..afa12dfcca 100644
--- a/packages/builder/src/components/common/CodeArea.svelte
+++ b/packages/builder/src/components/common/CodeArea.svelte
@@ -11,7 +11,7 @@
     padding: 10px;
     margin-top: 5px;
     margin-bottom: 10px;
-    background: var(--secondary80);
+    background: var(--grey-7);
     color: var(--white);
     font-family: "Courier New", Courier, monospace;
     height: 200px;
diff --git a/packages/builder/src/components/common/ConfirmDialog.svelte b/packages/builder/src/components/common/ConfirmDialog.svelte
index 98524caa18..cd3ffb9b79 100644
--- a/packages/builder/src/components/common/ConfirmDialog.svelte
+++ b/packages/builder/src/components/common/ConfirmDialog.svelte
@@ -54,7 +54,7 @@
 
 <style>
   .uk-modal-footer {
-    background: var(--lightslate);
+    background: var(--grey-1);
   }
 
   .uk-modal-dialog {
diff --git a/packages/builder/src/components/common/IconButton.svelte b/packages/builder/src/components/common/IconButton.svelte
index d589d6ce79..6a01973181 100644
--- a/packages/builder/src/components/common/IconButton.svelte
+++ b/packages/builder/src/components/common/IconButton.svelte
@@ -4,7 +4,7 @@
   export let size = 18
   export let icon = ""
   export let style = ""
-  export let color = "var(--secondary100)"
+  export let color = "var(--ink)"
   export let hoverColor = "var(--secondary75)"
   export let attributes = {}
 
diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte
index 5db342b2c8..730a9ed043 100644
--- a/packages/builder/src/components/common/Input.svelte
+++ b/packages/builder/src/components/common/Input.svelte
@@ -37,19 +37,18 @@
 <style>
   input {
     /* width: 32px; */
-    height: 32px;
-    font-size: 12px;
-    font-weight: 700;
-    margin: 0px 0px 0px 1px;
+    height: 36px;
+    font-size: 14px;
+    font-weight: 400;
+    margin: 0px 0px 0px 2px;
     color: var(--ink);
-    opacity: 0.7;
-    padding: 0px 4px;
-    line-height: 1.3;
-    /* padding: 12px; */
+    padding: 0px 8px;
+    font-family: inter;
     width: 164px;
     box-sizing: border-box;
-    border: 1px solid var(--grey);
-    border-radius: 2px;
+    background-color: var(--grey-2);
+    border-radius: 4px;
+    border: 1px solid var(--grey-2);
     outline: none;
   }
 
diff --git a/packages/builder/src/components/common/PlusButton.svelte b/packages/builder/src/components/common/PlusButton.svelte
index 6e2e4cf58a..25b8a147c2 100644
--- a/packages/builder/src/components/common/PlusButton.svelte
+++ b/packages/builder/src/components/common/PlusButton.svelte
@@ -17,7 +17,7 @@
     align-items: center;
 
     font-size: 1.2rem;
-    font-weight: 700;
-    color: var(--secondary100);
+    font-weight: 600;
+    color: var(--ink);
   }
 </style>
diff --git a/packages/builder/src/components/common/Select.svelte b/packages/builder/src/components/common/Select.svelte
index 4bdd2a941e..0eb368dac9 100644
--- a/packages/builder/src/components/common/Select.svelte
+++ b/packages/builder/src/components/common/Select.svelte
@@ -21,7 +21,7 @@
   .select-container {
     font-size: 14px;
     position: relative;
-    border: var(--grey-dark) 1px solid;
+    border: var(--grey-4) 1px solid;
   }
 
   .adjusted {
diff --git a/packages/builder/src/components/common/Switcher.svelte b/packages/builder/src/components/common/Switcher.svelte
index 484d52ee07..59c44190af 100644
--- a/packages/builder/src/components/common/Switcher.svelte
+++ b/packages/builder/src/components/common/Switcher.svelte
@@ -43,7 +43,7 @@
     display: flex;
     flex-direction: column;
     padding: 20px 20px;
-    border-left: solid 1px var(--grey);
+    border-left: solid 1px var(--grey-2);
     box-sizing: border-box;
   }
 
@@ -60,10 +60,11 @@
     padding: 0;
     cursor: pointer;
     font-size: 18px;
-    font-weight: 700;
-    color: var(--ink-lighter);
+    font-weight: 600;
+    color: var(--grey-5);
     margin-right: 20px;
     background: none;
+    outline: none;
   }
 
   .switcher > .selected {
diff --git a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
index 8eb6defa8f..69e2011989 100644
--- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
@@ -55,14 +55,12 @@
 
   $: {
     if ($backendUiStore.selectedView) {
-      api
-        .fetchDataForView($backendUiStore.selectedView)
-        .then(records => {
-          data = records || []
-          headers = Object.keys($backendUiStore.selectedModel.schema).filter(
-            key => !INTERNAL_HEADERS.includes(key)
-          )
-        })
+      api.fetchDataForView($backendUiStore.selectedView).then(records => {
+        data = records || []
+        headers = Object.keys($backendUiStore.selectedModel.schema).filter(
+          key => !INTERNAL_HEADERS.includes(key)
+        )
+      })
     }
   }
 
@@ -143,7 +141,7 @@
   }
 
   table {
-    border: 1px solid var(--grey-dark);
+    border: 1px solid var(--grey-4);
     background: #fff;
     border-radius: 3px;
     border-collapse: collapse;
@@ -151,7 +149,7 @@
 
   thead {
     background: var(--blue-light);
-    border: 1px solid var(--grey-dark);
+    border: 1px solid var(--grey-4);
   }
 
   thead th {
@@ -160,18 +158,17 @@
     font-weight: 500;
     font-size: 14px;
     text-rendering: optimizeLegibility;
-    letter-spacing: 1px;
   }
 
   tbody tr {
-    border-bottom: 1px solid var(--grey-dark);
+    border-bottom: 1px solid var(--grey-4);
     transition: 0.3s background-color;
     color: var(--ink);
     font-size: 14px;
   }
 
   tbody tr:hover {
-    background: var(--grey-light);
+    background: var(--grey-1);
   }
 
   .table-controls {
diff --git a/packages/builder/src/components/database/ModelDataTable/TablePagination.svelte b/packages/builder/src/components/database/ModelDataTable/TablePagination.svelte
index 52a480f224..508ee60b23 100644
--- a/packages/builder/src/components/database/ModelDataTable/TablePagination.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/TablePagination.svelte
@@ -58,20 +58,19 @@
     padding: 10px;
     margin: 0;
     background: #fff;
-    border: 1px solid #ccc;
+    border: 1px solid var(--grey-4);
     text-transform: capitalize;
     border-radius: 3px;
-    font-family: Roboto;
     min-width: 20px;
     transition: 0.3s background-color;
   }
 
   .pagination__buttons button:hover {
     cursor: pointer;
-    background-color: #fafafa;
+    background-color: var(--grey-1);
   }
 
   .selected {
-    color: var(--button-text);
+    color: var(--blue);
   }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte
index b9208b15a3..d50adc2d10 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte
@@ -34,7 +34,7 @@
   }
   footer {
     padding: 20px;
-    background: #fafafa;
+    background: var(--grey-1);
     border-radius: 0.5rem;
   }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
index a01acdc68d..6e1a1d564b 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
@@ -130,7 +130,7 @@
   }
 
   tbody > tr:hover {
-    background-color: var(--grey-light);
+    background-color: var(--grey-1);
   }
 
   .table-controls {
@@ -156,7 +156,7 @@
   }
 
   footer {
-    background-color: var(--grey-light);
+    background-color: var(--grey-1);
     margin-top: 40px;
     padding: 20px 40px 20px 40px;
     display: flex;
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
index c17a0ac9c8..75f6585298 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
@@ -94,7 +94,7 @@
     border-radius: 0 0 5px 5px;
     bottom: 0;
     left: 0;
-    background: var(--grey-light);
+    background: var(--grey-1);
     display: flex;
     align-items: center;
     justify-content: flex-end;
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
index a97cdc0ca1..7e1eb5fd08 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
@@ -90,7 +90,7 @@
   }
   footer {
     padding: 20px;
-    background: #fafafa;
+    background: var(--grey-1);
     border-radius: 0.5rem;
   }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
index 53cb3e2cc6..c7d3ec8af0 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
@@ -96,7 +96,7 @@
   .snippet-selector__heading {
     margin-right: 20px;
     font-size: 14px;
-    color: var(--ink-lighter);
+    color: var(--grey-5);
   }
 
   .header {
@@ -116,7 +116,7 @@
   .buttons {
     display: flex;
     justify-content: flex-end;
-    background-color: var(--grey-light);
+    background-color: var(--grey-1);
     margin: 0 40px;
     padding: 20px 0;
   }
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
index 2587f00ea8..eef38ecfec 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
@@ -69,7 +69,7 @@
 
   .title {
     font-size: 24px;
-    font-weight: 700;
+    font-weight: 600;
     color: var(--ink);
     margin-left: 12px;
   }
@@ -84,7 +84,7 @@
     align-items: center;
     justify-content: flex-end;
     padding: 20px;
-    background: var(--grey-light);
+    background: var(--grey-1);
     border-radius: 0 0 5px 5px;
   }
 
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
index aa192b32eb..f3c32633cc 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
@@ -5,7 +5,6 @@
 
   export let record
   export let onClosed
-
 </script>
 
 <section>
@@ -36,13 +35,13 @@
 <style>
   .alert {
     color: rgba(255, 0, 31, 1);
-    background: #fafafa;
+    background: var(--grey-1);
     padding: 5px;
   }
 
   .modal-actions {
     padding: 10px;
-    background: #fafafa;
+    background: var(--grey-1);
     border-top: 1px solid #ccc;
   }
 
diff --git a/packages/builder/src/components/nav/BackendNav.svelte b/packages/builder/src/components/nav/BackendNav.svelte
index 9a790ed75d..53546ad071 100644
--- a/packages/builder/src/components/nav/BackendNav.svelte
+++ b/packages/builder/src/components/nav/BackendNav.svelte
@@ -70,7 +70,7 @@
   .hierarchy-title {
     align-items: center;
     font-size: 18px;
-    font-weight: 700;
+    font-weight: 600;
     text-rendering: optimizeLegibility;
     color: var(--ink);
   }
diff --git a/packages/builder/src/components/nav/DatabasesList.svelte b/packages/builder/src/components/nav/DatabasesList.svelte
index 4cded5cd01..060ccf29e9 100644
--- a/packages/builder/src/components/nav/DatabasesList.svelte
+++ b/packages/builder/src/components/nav/DatabasesList.svelte
@@ -50,7 +50,7 @@
 <style>
   .root {
     font-size: 13px;
-    color: var(--secondary100);
+    color: var(--ink);
     position: relative;
     padding-left: 20px;
   }
@@ -76,7 +76,6 @@
     margin: 0 0 0 6px;
     padding: 0;
     border: none;
-    font-family: Roboto;
     font-size: 13px;
     outline: none;
     cursor: pointer;
diff --git a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
index 9465c85140..483d6648fd 100644
--- a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
+++ b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
@@ -126,7 +126,7 @@
   .hierarchy-title {
     align-items: center;
     font-size: 18px;
-    font-weight: 700;
+    font-weight: 600;
     text-rendering: optimizeLegibility;
     color: var(--ink);
   }
diff --git a/packages/builder/src/components/nav/UsersList.svelte b/packages/builder/src/components/nav/UsersList.svelte
index e213aa066c..1a755eaccb 100644
--- a/packages/builder/src/components/nav/UsersList.svelte
+++ b/packages/builder/src/components/nav/UsersList.svelte
@@ -64,7 +64,6 @@
     margin: 0 0 0 6px;
     padding: 0;
     border: none;
-    font-family: Roboto;
     font-size: 13px;
     outline: none;
     cursor: pointer;
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 8a0f89bb5e..1fcd62a458 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -21,23 +21,25 @@
     max-width: 400px;
     max-height: 150px;
     border-radius: 5px;
-    border: 1px solid var(--grey-medium);
+    border: 1px solid var(--grey-4);
   }
 
   .app-button:hover {
-    background-color: var(--grey-light);
+    background-color: var(--grey-1);
     text-decoration: none;
   }
 
   .app-title {
     font-size: 18px;
-    font-weight: 700;
+    font-weight: 600;
     color: var(--ink);
     text-transform: capitalize;
+    font-family: Inter;
   }
 
   .app-desc {
-    color: var(--ink-light);
+    color: var(--grey-7);
+    font-family: Inter;
   }
 
   .card-footer {
@@ -56,7 +58,7 @@
     justify-content: center;
     padding: 12px 20px;
     border-radius: 5px;
-    border: 1px var(--grey) solid;
+    border: 1px var(--grey-2) solid;
     font-size: 14px;
     font-weight: 400;
     cursor: pointer;
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index f012860194..eb4a9f2206 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -142,11 +142,11 @@
     background-color: var(--blue-light);
   }
   .info {
-    color: var(--primary100);
-    text-decoration-color: var(--primary100);
+    color: var(--blue);
+    text-decoration-color: var(--blue);
   }
   .info :global(svg) {
-    fill: var(--primary100);
+    fill: var(--blue);
     margin-right: 8px;
     width: 24px;
     height: 24px;
@@ -164,7 +164,7 @@
     padding: 30px 40px;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 50px;
-    background-color: var(--grey-light);
+    background-color: var(--grey-1);
   }
   .spinner-container {
     background: white;
@@ -183,7 +183,7 @@
     font-size: 2em;
   }
   .error {
-    color: var(--deletion100);
+    color: var(--red);
     font-weight: bold;
     font-size: 0.8em;
   }
diff --git a/packages/builder/src/components/userInterface/CategoryTab.svelte b/packages/builder/src/components/userInterface/CategoryTab.svelte
index 5f7c3e584e..fe9509bec9 100644
--- a/packages/builder/src/components/userInterface/CategoryTab.svelte
+++ b/packages/builder/src/components/userInterface/CategoryTab.svelte
@@ -21,11 +21,11 @@
     display: flex;
     list-style: none;
     font-size: 18px;
-    font-weight: 700;
+    font-weight: 600;
   }
 
   li {
-    color: var(--ink-lighter);
+    color: var(--grey-5);
     cursor: pointer;
     margin-right: 20px;
   }
diff --git a/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte b/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte
index 134dac772d..a187b4689b 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte
@@ -1,12 +1,21 @@
 <script>
-  import FlatButton from "./FlatButton.svelte";
+  import FlatButton from "./FlatButton.svelte"
 
-  export let format = "hex";
-  export let onclick = format => {};
+  export let format = "hex"
+  export let onclick = format => {}
 
-  let colorFormats = ["hex", "rgb", "hsl"];
+  let colorFormats = ["hex", "rgb", "hsl"]
 </script>
 
+<div class="flatbutton-group">
+  {#each colorFormats as text}
+    <FlatButton
+      selected={format === text}
+      {text}
+      on:click={() => onclick(text)} />
+  {/each}
+</div>
+
 <style>
   .flatbutton-group {
     font-weight: 500;
@@ -18,12 +27,3 @@
     align-self: center;
   }
 </style>
-
-<div class="flatbutton-group">
-  {#each colorFormats as text}
-    <FlatButton
-      selected={format === text}
-      {text}
-      on:click={() => onclick(text)} />
-  {/each}
-</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte b/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
index 19d54523b2..3d64c38921 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
@@ -1,17 +1,25 @@
 <script>
-    import {buildStyle} from "./helpers.js"
-    import {fade} from "svelte/transition"
+  import { buildStyle } from "./helpers.js"
+  import { fade } from "svelte/transition"
 
-    export let backgroundSize = "10px"
-    export let borderRadius = ""
-    export let height = ""
-    export let width = ""
-    export let margin = ""
+  export let backgroundSize = "10px"
+  export let borderRadius = ""
+  export let height = ""
+  export let width = ""
+  export let margin = ""
 
-    $: style = buildStyle({backgroundSize, borderRadius, height, width, margin})
+  $: style = buildStyle({ backgroundSize, borderRadius, height, width, margin })
 
+  $: style = buildStyle({ backgroundSize, borderRadius, height, width })
 </script>
 
+<div {style}>
+  <slot />
+</div>
+<div in:fade {style}>
+  <slot />
+</div>
+
 <style>
   div {
     background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
@@ -19,7 +27,3 @@
     width: fit-content;
   }
 </style>
-
-<div in:fade {style}>
-    <slot />
-</div>
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index 5989e6b3ed..c50b119e53 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -1,39 +1,39 @@
 <script>
-  import { onMount, createEventDispatcher } from "svelte";
-  import { fade } from 'svelte/transition';
-  import Swatch from "./Swatch.svelte";
+  import { onMount, createEventDispatcher } from "svelte"
+  import { fade } from "svelte/transition"
+  import Swatch from "./Swatch.svelte"
   import CheckedBackground from "./CheckedBackground.svelte"
-  import {buildStyle} from "./helpers.js"
+  import { buildStyle } from "./helpers.js"
   import {
     getColorFormat,
     convertToHSVA,
-    convertHsvaToFormat
-  } from "./utils.js";
-  import Slider from "./Slider.svelte";
-  import Palette from "./Palette.svelte";
-  import ButtonGroup from "./ButtonGroup.svelte";
-  import Input from "./Input.svelte";
+    convertHsvaToFormat,
+  } from "./utils.js"
+  import Slider from "./Slider.svelte"
+  import Palette from "./Palette.svelte"
+  import ButtonGroup from "./ButtonGroup.svelte"
+  import Input from "./Input.svelte"
 
-  export let value = "#3ec1d3ff";
+  export let value = "#3ec1d3ff"
   export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
   export let disableSwatches = false
-  export let format = "hexa";
-  export let open = false;
-  
-  export let pickerHeight = 0;
-  export let pickerWidth = 0;
+  export let format = "hexa"
+  export let open = false
 
-  let adder = null;
+  export let pickerHeight = 0
+  export let pickerWidth = 0
 
-  let h = null;
-  let s = null;
-  let v = null;
-  let a = null;
+  let adder = null
 
-  const dispatch = createEventDispatcher();
+  let h = null
+  let s = null
+  let v = null
+  let a = null
+
+  const dispatch = createEventDispatcher()
 
   onMount(() => {
-    if(!swatches.length > 0) {
+    if (!swatches.length > 0) {
       //Don't use locally stored recent colors if swatches have been passed as props
       getRecentColors()
     }
@@ -41,12 +41,12 @@
     if (format) {
       convertAndSetHSVA()
     }
-  });
+  })
 
   function getRecentColors() {
     let colorStore = localStorage.getItem("cp:recent-colors")
     if (colorStore) {
-      swatches = JSON.parse(colorStore)      
+      swatches = JSON.parse(colorStore)
     }
   }
 
@@ -61,39 +61,39 @@
   }
 
   function convertAndSetHSVA() {
-    let hsva = convertToHSVA(value, format);
-    setHSVA(hsva);
+    let hsva = convertToHSVA(value, format)
+    setHSVA(hsva)
   }
 
   function setHSVA([hue, sat, val, alpha]) {
-    h = hue;
-    s = sat;
-    v = val;
-    a = alpha;
+    h = hue
+    s = sat
+    v = val
+    a = alpha
   }
 
   //fired by choosing a color from the palette
   function setSaturationAndValue({ detail }) {
-    s = detail.s;
-    v = detail.v;
-    value = convertHsvaToFormat([h, s, v, a], format);
+    s = detail.s
+    v = detail.v
+    value = convertHsvaToFormat([h, s, v, a], format)
     dispatchValue()
   }
 
-  function setHue({color, isDrag}) {
-    h = color;
-    value = convertHsvaToFormat([h, s, v, a], format);   
-    if(!isDrag) {
+  function setHue({ color, isDrag }) {
+    h = color
+    value = convertHsvaToFormat([h, s, v, a], format)
+    if (!isDrag) {
       dispatchValue()
-    } 
+    }
   }
 
-  function setAlpha({color, isDrag}) {
-    a = color === "1.00" ? "1" : color;
-    value = convertHsvaToFormat([h, s, v, a], format);    
-    if(!isDrag) {
-        dispatchValue()
-      } 
+  function setAlpha({ color, isDrag }) {
+    a = color === "1.00" ? "1" : color
+    value = convertHsvaToFormat([h, s, v, a], format)
+    if (!isDrag) {
+      dispatchValue()
+    }
   }
 
   function dispatchValue() {
@@ -101,43 +101,42 @@
   }
 
   function changeFormatAndConvert(f) {
-    format = f;
-    value = convertHsvaToFormat([h, s, v, a], format);
+    format = f
+    value = convertHsvaToFormat([h, s, v, a], format)
   }
 
   function handleColorInput(text) {
     let format = getColorFormat(text)
-    if(format) {
+    if (format) {
       value = text
       convertAndSetHSVA()
     }
   }
 
   function dispatchInputChange() {
-    if(format) {
+    if (format) {
       dispatchValue()
     }
   }
 
   function addSwatch() {
-    if(format) {
+    if (format) {
       dispatch("addswatch", value)
       setRecentColor(value)
     }
   }
 
   function removeSwatch(idx) {
-    let removedSwatch = swatches.splice(idx, 1);
+    let removedSwatch = swatches.splice(idx, 1)
     swatches = swatches
     dispatch("removeswatch", removedSwatch)
     localStorage.setItem("cp:recent-colors", JSON.stringify(swatches))
   }
-  
 
   function applySwatch(color) {
-    if(value !== color) {
+    if (value !== color) {
       format = getColorFormat(color)
-      if(format) {
+      if (format) {
         value = color
         convertAndSetHSVA()
         dispatchValue()
@@ -145,11 +144,112 @@
     }
   }
 
-    $: border = (v > 90 && s < 5) ? "1px dashed #dedada" : ""
-    $: style = buildStyle({background: value, border})
-    $: shrink = swatches.length > 0
+  $: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
+  $: style = buildStyle({ background: value, border })
+  $: shrink = swatches.length > 0
 </script>
 
+<div class="colorpicker-container">
+
+  <div class="palette-panel">
+    <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
+  </div>
+
+  <div class="control-panel">
+    <div class="alpha-hue-panel">
+      <div>
+        <CheckedBackground borderRadius="50%" backgroundSize="8px">
+          <div class="selected-color" {style} />
+        </CheckedBackground>
+      </div>
+      <div>
+        <Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
+
+        <CheckedBackground borderRadius="10px" backgroundSize="7px">
+          <Slider
+            type="alpha"
+            value={a}
+            on:change={alpha => setAlpha(alpha.detail)} />
+        </CheckedBackground>
+
+      </div>
+    </div>
+
+    <div class="format-input-panel">
+      <ButtonGroup {format} onclick={changeFormatAndConvert} />
+      <Input {value} on:input={event => handleColorInput(event.target.value)} />
+    </div>
+  </div>
+
+</div>
+<div
+  class="colorpicker-container"
+  bind:clientHeight={pickerHeight}
+  bind:clientWidth={pickerWidth}>
+
+  <div class="palette-panel">
+    <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
+  </div>
+
+  <div class="control-panel">
+    <div class="alpha-hue-panel">
+      <div>
+        <CheckedBackground borderRadius="50%" backgroundSize="8px">
+          <div class="selected-color" {style} />
+        </CheckedBackground>
+      </div>
+      <div>
+        <Slider
+          type="hue"
+          value={h}
+          on:change={hue => setHue(hue.detail)}
+          on:dragend={dispatchValue} />
+
+        <CheckedBackground borderRadius="10px" backgroundSize="7px">
+          <Slider
+            type="alpha"
+            value={a}
+            on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
+            on:dragend={dispatchValue} />
+        </CheckedBackground>
+
+      </div>
+    </div>
+
+    {#if !disableSwatches}
+      <div transition:fade class="swatch-panel">
+        {#if swatches.length > 0}
+          {#each swatches as color, idx}
+            <Swatch
+              {color}
+              on:click={() => applySwatch(color)}
+              on:removeswatch={() => removeSwatch(idx)} />
+          {/each}
+        {/if}
+        {#if swatches.length !== 12}
+          <div
+            bind:this={adder}
+            transition:fade
+            class="adder"
+            on:click={addSwatch}
+            class:shrink>
+            <span>&plus;</span>
+          </div>
+        {/if}
+      </div>
+    {/if}
+
+    <div class="format-input-panel">
+      <ButtonGroup {format} onclick={changeFormatAndConvert} />
+      <Input
+        {value}
+        on:input={event => handleColorInput(event.target.value)}
+        on:change={dispatchInputChange} />
+    </div>
+  </div>
+
+</div>
+
 <style>
   .colorpicker-container {
     display: flex;
@@ -161,7 +261,8 @@
     width: 220px;
     background: #ffffff;
     border-radius: 2px;
-    box-shadow: 0 0.15em 1.5em 0 rgba(0,0,0,.1), 0 0 1em 0 rgba(0,0,0,.03);
+    box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1),
+      0 0 1em 0 rgba(0, 0, 0, 0.03);
   }
 
   .palette-panel {
@@ -192,7 +293,7 @@
     border-radius: 50%;
   }
 
-   .swatch-panel {
+  .swatch-panel {
     flex: 0 0 15px;
     display: flex;
     flex-flow: row wrap;
@@ -203,7 +304,7 @@
 
   .adder {
     flex: 1;
-    height: 20px;		
+    height: 20px;
     display: flex;
     transition: flex 0.5s;
     justify-content: center;
@@ -217,7 +318,7 @@
     font-weight: 500;
   }
 
-  .shrink { 
+  .shrink {
     flex: 0 0 20px;
   }
 
@@ -228,54 +329,3 @@
     padding-top: 3px;
   }
 </style>
-
-<div class="colorpicker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth}>
-
-  <div class="palette-panel">
-    <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
-  </div>
-
-  <div class="control-panel">
-    <div class="alpha-hue-panel">
-      <div>
-        <CheckedBackground borderRadius="50%" backgroundSize="8px">
-          <div class="selected-color" {style} />
-        </CheckedBackground>
-      </div>
-      <div>
-        <Slider type="hue" value={h} on:change={(hue) => setHue(hue.detail)} on:dragend={dispatchValue} />
-
-        <CheckedBackground borderRadius="10px" backgroundSize="7px">
-          <Slider
-            type="alpha"
-            value={a}
-            on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)} 
-            on:dragend={dispatchValue}
-            />
-        </CheckedBackground>
-        
-      </div>
-    </div>
-
-      {#if !disableSwatches}
-        <div transition:fade class="swatch-panel">
-          {#if swatches.length > 0}
-            {#each swatches as color, idx}
-              <Swatch {color} on:click={() => applySwatch(color)} on:removeswatch={() => removeSwatch(idx)} />
-            {/each}
-          {/if}
-          {#if swatches.length !== 12}
-            <div bind:this={adder} transition:fade class="adder" on:click={addSwatch} class:shrink>
-              <span>&plus;</span>
-            </div>
-          {/if}
-        </div>
-      {/if}
-
-    <div class="format-input-panel">
-      <ButtonGroup {format} onclick={changeFormatAndConvert} />
-      <Input {value} on:input={event => handleColorInput(event.target.value)} on:change={dispatchInputChange} />
-    </div>
-  </div>
-
-</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
index 32a5e63ff3..72da43181e 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
@@ -1,152 +1,184 @@
 <script>
-    import Colorpicker from "./Colorpicker.svelte"
-    import CheckedBackground from "./CheckedBackground.svelte"
-    import {createEventDispatcher, afterUpdate, beforeUpdate} from "svelte"
+  import Colorpicker from "./Colorpicker.svelte"
+  import CheckedBackground from "./CheckedBackground.svelte"
+  import { createEventDispatcher, afterUpdate, beforeUpdate } from "svelte"
 
-    import {buildStyle} from "./helpers.js"
-    import { fade } from 'svelte/transition';
-    import {getColorFormat} from "./utils.js"
+  import { buildStyle } from "./helpers.js"
+  import { fade } from "svelte/transition"
+  import { getColorFormat } from "./utils.js"
 
-    export let value = "#3ec1d3ff"
-    export let swatches = []
-    export let disableSwatches = false
-    export let open = false;
-    export let width = "25px"
-    export let height = "25px"
+  export let value = "#3ec1d3ff"
+  export let swatches = []
+  export let disableSwatches = false
+  export let open = false
+  export let width = "25px"
+  export let height = "25px"
 
-    let format = "hexa";
-    let dimensions = {top: 0, left: 0}
-    let colorPreview = null
+  let format = "hexa"
+  let dimensions = { top: 0, left: 0 }
+  let colorPreview = null
 
-    let previewHeight = null    
-    let previewWidth = null
-    let pickerWidth = 0
-    let pickerHeight = 0
+  let previewHeight = null
+  let previewWidth = null
+  let pickerWidth = 0
+  let pickerHeight = 0
 
-    let anchorEl = null
-    let parentNodes = [];
-    let errorMsg = null
+  let anchorEl = null
+  let parentNodes = []
+  let errorMsg = null
 
-    $: previewStyle = buildStyle({width, height, background: value})
-    $: errorPreviewStyle = buildStyle({width, height})
-    $: pickerStyle = buildStyle({top: `${dimensions.top}px`, left: `${dimensions.left}px`})    
+  $: previewStyle = buildStyle({ width, height, background: value })
+  $: errorPreviewStyle = buildStyle({ width, height })
+  $: pickerStyle = buildStyle({
+    top: `${dimensions.top}px`,
+    left: `${dimensions.left}px`,
+  })
 
-    const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher()
 
-    beforeUpdate(() => {
-       format = getColorFormat(value)
-       if(!format) {
-           errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
-           console.error(errorMsg)
-       }else{
-           errorMsg = null
-       }
-    })
+  beforeUpdate(() => {
+    format = getColorFormat(value)
+    if (!format) {
+      errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
+      console.error(errorMsg)
+    } else {
+      errorMsg = null
+    }
+  })
 
-    afterUpdate(() => {
-        if(colorPreview && colorPreview.offsetParent && !anchorEl) {
-            //Anchor relative to closest positioned ancestor element. If none, then anchor to body
-            anchorEl = colorPreview.offsetParent 
-                let curEl = colorPreview
-                let els = []
-                //Travel up dom tree from preview element to find parent elements that scroll
-                while(!anchorEl.isSameNode(curEl)) {
-                    curEl = curEl.parentNode
-                    let elOverflow = window.getComputedStyle(curEl).getPropertyValue("overflow")                    
-                    if(/scroll|auto/.test(elOverflow)) {
-                        els.push(curEl)
-                    }
-                } 
-                parentNodes = els
-        }
-    })
-
-
-    function openColorpicker(event) {
-        if(colorPreview) {
-            open = true;        
+  afterUpdate(() => {
+    if (colorPreview && colorPreview.offsetParent && !anchorEl) {
+      //Anchor relative to closest positioned ancestor element. If none, then anchor to body
+      anchorEl = colorPreview.offsetParent
+      let curEl = colorPreview
+      let els = []
+      //Travel up dom tree from preview element to find parent elements that scroll
+      while (!anchorEl.isSameNode(curEl)) {
+        curEl = curEl.parentNode
+        let elOverflow = window
+          .getComputedStyle(curEl)
+          .getPropertyValue("overflow")
+        if (/scroll|auto/.test(elOverflow)) {
+          els.push(curEl)
         }
+      }
+      parentNodes = els
     }
+  })
 
-    $: if(open && colorPreview) {
-        const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect()   
-        const {innerHeight, innerWidth} = window
-
-        const {offsetLeft, offsetTop} = colorPreview
-        //get the scrollTop value for all scrollable parent elements 
-        let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0);
-
-        const spaceBelow = (innerHeight - spaceAbove) - previewHeight
-        const top = spaceAbove > spaceBelow ? (offsetTop - pickerHeight) - scrollTop : (offsetTop + previewHeight) - scrollTop      
-        
-        //TOO: Testing and Scroll Awareness for x Scroll
-        const spaceRight = (innerWidth - spaceLeft) + previewWidth
-        const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) : offsetLeft - pickerWidth
-
-        dimensions = {top, left}
+  function openColorpicker(event) {
+    if (colorPreview) {
+      open = true
     }
+  }
 
-    function onColorChange(color) {
-        value = color.detail;
-        dispatch("change", color.detail)
-    }
+  $: if (open && colorPreview) {
+    const {
+      top: spaceAbove,
+      width,
+      bottom,
+      right,
+      left: spaceLeft,
+    } = colorPreview.getBoundingClientRect()
+    const { innerHeight, innerWidth } = window
 
+    const { offsetLeft, offsetTop } = colorPreview
+    //get the scrollTop value for all scrollable parent elements
+    let scrollTop = parentNodes.reduce(
+      (scrollAcc, el) => (scrollAcc += el.scrollTop),
+      0
+    )
+
+    const spaceBelow = innerHeight - spaceAbove - previewHeight
+    const top =
+      spaceAbove > spaceBelow
+        ? offsetTop - pickerHeight - scrollTop
+        : offsetTop + previewHeight - scrollTop
+
+    //TOO: Testing and Scroll Awareness for x Scroll
+    const spaceRight = innerWidth - spaceLeft + previewWidth
+    const left =
+      spaceRight > spaceLeft
+        ? offsetLeft + previewWidth
+        : offsetLeft - pickerWidth
+
+    dimensions = { top, left }
+  }
+
+  function onColorChange(color) {
+    value = color.detail
+    dispatch("change", color.detail)
+  }
 </script>
 
 <div class="color-preview-container">
-    {#if !errorMsg}
-        <CheckedBackground borderRadius="3px" backgroundSize="8px">
-            <div bind:this={colorPreview} bind:clientHeight={previewHeight} bind:clientWidth={previewWidth} class="color-preview" style={previewStyle} on:click={openColorpicker} />        
-        </CheckedBackground>
+  {#if !errorMsg}
+    <CheckedBackground borderRadius="3px" backgroundSize="8px">
+      <div
+        bind:this={colorPreview}
+        bind:clientHeight={previewHeight}
+        bind:clientWidth={previewWidth}
+        class="color-preview"
+        style={previewStyle}
+        on:click={openColorpicker} />
+    </CheckedBackground>
 
-        {#if open}
-        <div transition:fade class="picker-container" style={pickerStyle}>
-            <Colorpicker on:change={onColorChange} on:addswatch on:removeswatch bind:format bind:value bind:pickerHeight bind:pickerWidth {swatches} {disableSwatches} {open} />
-        </div>
-        <div on:click|self={() => open = false} class="overlay"></div>
-        {/if}
-    {:else}
-        <div class="color-preview preview-error" style={errorPreviewStyle}>
-            <span>&times;</span>
-        </div>
+    {#if open}
+      <div transition:fade class="picker-container" style={pickerStyle}>
+        <Colorpicker
+          on:change={onColorChange}
+          on:addswatch
+          on:removeswatch
+          bind:format
+          bind:value
+          bind:pickerHeight
+          bind:pickerWidth
+          {swatches}
+          {disableSwatches}
+          {open} />
+      </div>
+      <div on:click|self={() => (open = false)} class="overlay" />
     {/if}
+  {:else}
+    <div class="color-preview preview-error" style={errorPreviewStyle}>
+      <span>&times;</span>
+    </div>
+  {/if}
 </div>
 
-
 <style>
-    .color-preview-container{
-        display: flex;
-        flex-flow: row nowrap;
-        height: fit-content;
-    }
+  .color-preview-container {
+    display: flex;
+    flex-flow: row nowrap;
+    height: fit-content;
+  }
 
-    .color-preview {
-        border-radius: 3px;
-        border: 1px solid #dedada;        
-    }
+  .color-preview {
+    border-radius: 3px;
+    border: 1px solid #dedada;
+  }
 
-    .preview-error {
-        background: #cccccc;
-        color: #808080;
-        text-align: center;
-        font-size: 18px;
-        cursor: not-allowed;
-    }
+  .preview-error {
+    background: #cccccc;
+    color: #808080;
+    text-align: center;
+    font-size: 18px;
+    cursor: not-allowed;
+  }
 
-    .picker-container {
-        position: absolute;
-        z-index: 3;
-        width: fit-content;
-        height: fit-content;
-    }
+  .picker-container {
+    position: absolute;
+    z-index: 3;
+    width: fit-content;
+    height: fit-content;
+  }
 
-    .overlay{
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 2;        
-    }
+  .overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+  }
 </style>
-
diff --git a/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte b/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte
index 881f73d134..15bc72fe3c 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte
@@ -1,8 +1,10 @@
 <script>
-  export let text = "";
-  export let selected = false;
+  export let text = ""
+  export let selected = false
 </script>
 
+<div class="flatbutton" class:selected on:click>{text}</div>
+
 <style>
   .flatbutton {
     cursor: pointer;
@@ -25,5 +27,3 @@
     border: none;
   }
 </style>
-
-<div class="flatbutton" class:selected on:click>{text}</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
index 811a51cea6..c148d6bf30 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
@@ -1,7 +1,14 @@
 <script>
-  export let value = "";
+  export let value = ""
 </script>
 
+<div>
+  <input on:input type="text" {value} maxlength="25" />
+</div>
+<div>
+  <input on:input on:change type="text" {value} maxlength="25" />
+</div>
+
 <style>
   div {
     display: flex;
@@ -22,7 +29,3 @@
     font-weight: 550;
   }
 </style>
-
-<div>
-  <input on:input on:change type="text" {value} maxlength="25" />
-</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
index 4763ee86cc..64fac9d9c9 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
@@ -1,42 +1,58 @@
 <script>
-  import { onMount, createEventDispatcher } from "svelte";
+  import { onMount, createEventDispatcher } from "svelte"
   import CheckedBackground from "./CheckedBackground.svelte"
 
   const dispatch = createEventDispatcher()
 
-  export let h = 0;
-  export let s = 0;
-  export let v = 0;
-  export let a = 1;
+  export let h = 0
+  export let s = 0
+  export let v = 0
+  export let a = 1
 
-  let palette;
-
-  let paletteHeight, paletteWidth = 0;
+  let palette
 
+  let paletteHeight,
+    paletteWidth = 0
 
   function handleClick(event) {
-    const { left, top } = palette.getBoundingClientRect();
-    let clickX = (event.clientX - left)
-    let clickY = (event.clientY - top)
-    if((clickX > 0 && clickY > 0) && (clickX < paletteWidth && clickY < paletteHeight)) {
+    const { left, top } = palette.getBoundingClientRect()
+    let clickX = event.clientX - left
+    let clickY = event.clientY - top
+    if (
+      clickX > 0 &&
+      clickY > 0 &&
+      clickX < paletteWidth &&
+      clickY < paletteHeight
+    ) {
       let s = (clickX / paletteWidth) * 100
-      let v = 100 - ((clickY / paletteHeight) * 100)
-      dispatch("change", {s, v})
+      let v = 100 - (clickY / paletteHeight) * 100
+      dispatch("change", { s, v })
     }
-
   }
 
-  $: pickerX = (s * paletteWidth) / 100;
-  $: pickerY =  paletteHeight * ((100 - v) / 100)
+  $: pickerX = (s * paletteWidth) / 100
+  $: pickerY = paletteHeight * ((100 - v) / 100)
 
   $: paletteGradient = `linear-gradient(to top, rgba(0, 0, 0, 1), transparent),
     linear-gradient(to left, hsla(${h}, 100%, 50%, ${a}), rgba(255, 255, 255, ${a}))
-  `;
-  $: style = `background: ${paletteGradient};`;
+  `
+  $: style = `background: ${paletteGradient};`
 
   $: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY - 8}px);`
 </script>
 
+<CheckedBackground width="100%">
+  <div
+    bind:this={palette}
+    bind:clientHeight={paletteHeight}
+    bind:clientWidth={paletteWidth}
+    on:click={handleClick}
+    class="palette"
+    {style}>
+    <div class="picker" style={pickerStyle} />
+  </div>
+</CheckedBackground>
+
 <style>
   .palette {
     position: relative;
@@ -55,9 +71,3 @@
     border-radius: 50%;
   }
 </style>
-
-  <CheckedBackground width="100%">
-    <div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
-      <div class="picker" style={pickerStyle} />
-    </div>
-  </CheckedBackground>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
index edf0888432..906f5f0d6a 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
@@ -1,37 +1,62 @@
 <script>
-  import { onMount, createEventDispatcher } from "svelte";
-  import dragable from "./drag.js";
+  import { onMount, createEventDispatcher } from "svelte"
+  import dragable from "./drag.js"
 
-  export let value = 1;
-  export let type = "hue";
+  export let value = 1
+  export let type = "hue"
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher()
 
-  let slider;
-  let sliderWidth = 0;
+  let slider
+  let sliderWidth = 0
 
   function onSliderChange(mouseX, isDrag = false) {
-    const { left, width } = slider.getBoundingClientRect();
-    let clickPosition = mouseX - left;
+    const { left, width } = slider.getBoundingClientRect()
+    let clickPosition = mouseX - left
 
     let percentageClick = (clickPosition / sliderWidth).toFixed(2)
-    
+
     if (percentageClick >= 0 && percentageClick <= 1) {
-      let value =
-        type === "hue"
-          ? 360 * percentageClick
-          : percentageClick;
-      
-      dispatch("change", {color: value, isDrag});
+      let value = type === "hue" ? 360 * percentageClick : percentageClick
+
+      dispatch("change", { color: value, isDrag })
     }
   }
 
   $: thumbPosition =
-    type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value;
+    type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value
 
-  $: style = `transform: translateX(${thumbPosition - 6}px);`;
+  $: style = `transform: translateX(${thumbPosition - 6}px);`
 </script>
 
+<div
+  bind:this={slider}
+  bind:clientWidth={sliderWidth}
+  on:click={event => handleClick(event.clientX)}
+  class="color-format-slider"
+  class:hue={type === 'hue'}
+  class:alpha={type === 'alpha'}>
+  <div
+    use:dragable
+    on:drag={e => handleClick(e.detail)}
+    class="slider-thumb"
+    {style} />
+</div>
+<div
+  bind:this={slider}
+  bind:clientWidth={sliderWidth}
+  on:click={event => onSliderChange(event.clientX)}
+  class="color-format-slider"
+  class:hue={type === 'hue'}
+  class:alpha={type === 'alpha'}>
+  <div
+    use:dragable
+    on:drag={e => onSliderChange(e.detail, true)}
+    on:dragend
+    class="slider-thumb"
+    {style} />
+</div>
+
 <style>
   .color-format-slider {
     position: relative;
@@ -69,21 +94,6 @@
     border: 1px solid #777676;
     border-radius: 50%;
     background-color: #ffffff;
-    cursor:grab;
+    cursor: grab;
   }
 </style>
-
-<div
-  bind:this={slider}
-  bind:clientWidth={sliderWidth}
-  on:click={event => onSliderChange(event.clientX)}
-  class="color-format-slider"
-  class:hue={type === 'hue'}
-  class:alpha={type === 'alpha'}>
-  <div
-    use:dragable
-    on:drag={e => onSliderChange(e.detail, true)}
-    on:dragend
-    class="slider-thumb"
-    {style} />
-</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte b/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte
index e602b72d33..2424df2003 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte
@@ -1,27 +1,47 @@
 <script>
-    import {createEventDispatcher} from "svelte"
-    import { fade } from 'svelte/transition';
-    import CheckedBackground from "./CheckedBackground.svelte"
+  import { createEventDispatcher } from "svelte"
+  import { fade } from "svelte/transition"
+  import CheckedBackground from "./CheckedBackground.svelte"
 
-    export let hovered = false
-    export let color = "#fff"
-
-    const dispatch = createEventDispatcher()
+  export let hovered = false
+  export let color = "#fff"
 
+  const dispatch = createEventDispatcher()
 </script>
 
+<div class="space">
+  <CheckedBackground borderRadius="6px">
+    <div
+      in:fade
+      class="swatch"
+      style={`background: ${color};`}
+      on:click|self
+      on:mouseover={() => (hovered = true)}
+      on:mouseleave={() => (hovered = false)}>
+      {#if hovered}
+        <div
+          in:fade
+          class="remove-icon"
+          on:click|self={() => dispatch('removeswatch')}>
+          <span on:click|self={() => dispatch('removeswatch')}>&times;</span>
+        </div>
+      {/if}
+    </div>
+  </CheckedBackground>
+</div>
+
 <style>
   .swatch {
     position: relative;
     cursor: pointer;
     border-radius: 6px;
-    border: 1px solid #dedada;  
-    height: 20px; 
+    border: 1px solid #dedada;
+    height: 20px;
     width: 20px;
   }
 
   .space {
-      padding: 3px 5px;
+    padding: 3px 5px;
   }
 
   .remove-icon {
@@ -29,7 +49,7 @@
     right: 0;
     top: -5px;
     right: -4px;
-    width:10px;
+    width: 10px;
     height: 10px;
     border-radius: 50%;
     background-color: #800000;
@@ -39,15 +59,3 @@
     align-items: center;
   }
 </style>
-
-<div class="space">
-  <CheckedBackground borderRadius="6px"> 
-    <div in:fade class="swatch" style={`background: ${color};`} on:click|self on:mouseover={() => hovered = true} on:mouseleave={() => hovered = false}>
-        {#if hovered}
-        <div in:fade class="remove-icon" on:click|self={()=> dispatch("removeswatch")}>
-            <span on:click|self={()=> dispatch("removeswatch")}>&times;</span>
-        </div>
-        {/if}
-    </div>            
-</CheckedBackground>
-</div>
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index 0b51b962ba..28dd59c16f 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -257,21 +257,21 @@
 
   .menu li:not(.disabled) {
     cursor: pointer;
-    color: var(--ink-light);
+    color: var(--grey-7);
   }
 
   .menu li:not(.disabled):hover {
     color: var(--ink);
-    background-color: var(--grey-light);
+    background-color: var(--grey-1);
   }
 
   .disabled {
-    color: var(--grey-dark);
+    color: var(--grey-4);
     cursor: default;
   }
 
   .hr-style {
     margin: 8px 0;
-    color: var(--grey-dark);
+    color: var(--grey-4);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/ComponentSearch.svelte b/packages/builder/src/components/userInterface/ComponentSearch.svelte
index b8583075c8..b65a08b5eb 100644
--- a/packages/builder/src/components/userInterface/ComponentSearch.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSearch.svelte
@@ -38,7 +38,7 @@
     padding: 5px;
     border-style: solid;
     border-width: 0 0 1px 0;
-    border-color: var(--lightslate);
+    border-color: var(--grey-1);
     cursor: pointer;
   }
 
@@ -48,12 +48,12 @@
 
   .component > .title {
     font-size: 13pt;
-    color: var(--secondary100);
+    color: var(--ink);
   }
 
   .component > .description {
     font-size: 10pt;
-    color: var(--primary75);
+    color: var(--blue);
     font-style: italic;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 041377aedc..1381e66221 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -77,8 +77,7 @@
   }
 
   .title {
-    margin-left: 10px;
-    margin-top: 2px;
+    margin-left: 14px;
     font-size: 14px;
     font-weight: 400;
   }
@@ -87,9 +86,8 @@
     display: inline-block;
     transition: 0.2s;
     font-size: 24px;
-    width: 20px;
-    margin-top: 2px;
-    color: var(--ink-light);
+    width: 18px;
+    color: var(--grey-7);
   }
 
   .icon:nth-of-type(2) {
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 43473a85a3..cb9fa9d8ec 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -39,7 +39,7 @@
       <div
         class="budibase__nav-item item"
         class:selected={currentComponent === component}
-        style="padding-left: {level * 20 + 53}px">
+        style="padding-left: {level * 20 + 40}px">
         <div class="nav-item">
           <i class="icon ri-arrow-right-circle-fill" />
           {get_capitalised_name(component._component)}
@@ -73,7 +73,7 @@
     padding: 0px 5px 0px 15px;
     margin: auto 0px;
     border-radius: 3px;
-    height: 35px;
+    height: 36px;
     align-items: center;
   }
 
@@ -90,7 +90,7 @@
   }
 
   .item:hover {
-    background: var(--grey-light);
+    background: var(--grey-1);
     cursor: pointer;
   }
   .item:hover .actions {
@@ -105,7 +105,7 @@
   }
 
   .icon {
-    color: var(--ink-light);
+    color: var(--grey-7);
     margin-right: 8px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
index 9df2a928ca..f79c8e1aa5 100644
--- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
@@ -55,7 +55,7 @@
     display: flex;
     flex-direction: column;
     padding: 20px 5px 20px 10px;
-    border-left: solid 1px var(--grey);
+    border-left: solid 1px var(--grey-2);
   }
 
   .switcher {
@@ -70,8 +70,8 @@
     padding: 0;
     cursor: pointer;
     font-size: 18px;
-    font-weight: 700;
-    color: var(--ink-lighter);
+    font-weight: 600;
+    color: var(--grey-5);
     margin-right: 20px;
   }
 
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 6826bddc5c..7bca352bd1 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -19,7 +19,6 @@
     { value: "normal", text: "Normal" },
     { value: "hover", text: "Hover" },
     { value: "active", text: "Active" },
-    { value: "selected", text: "Selected" },
   ]
 
   $: propertyGroupNames = Object.keys(panelDefinition)
@@ -31,26 +30,26 @@
     <FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} />
   </div>
 
-<div class="positioned-wrapper">
-  <div class="design-view-property-groups">
-    {#if propertyGroupNames.length > 0}
-      {#each propertyGroupNames as groupName}
-        <PropertyGroup
-          name={groupName}
-          properties={getProperties(groupName)}
-          styleCategory={selectedCategory}
-          {onStyleChanged}
-          {componentDefinition}
-          {componentInstance} />
-      {/each}
-    {:else}
-      <div class="no-design">
-        <span>This component does not have any design properties</span>
-      </div>
-    {/if}
+  <div class="positioned-wrapper">
+    <div class="design-view-property-groups">
+      {#if propertyGroupNames.length > 0}
+        {#each propertyGroupNames as groupName}
+          <PropertyGroup
+            name={groupName}
+            properties={getProperties(groupName)}
+            styleCategory={selectedCategory}
+            {onStyleChanged}
+            {componentDefinition}
+            {componentInstance} />
+        {/each}
+      {:else}
+        <div class="no-design">
+          <span>This component does not have any design properties</span>
+        </div>
+      {/if}
+    </div>
   </div>
 </div>
-</div>
 
 <style>
   .design-view-container {
@@ -64,7 +63,7 @@
     flex: 0 0 50px;
   }
 
-  .positioned-wrapper{
+  .positioned-wrapper {
     position: relative;
     display: flex;
     min-height: 0;
diff --git a/packages/builder/src/components/userInterface/EditComponentProps.svelte b/packages/builder/src/components/userInterface/EditComponentProps.svelte
index 775957c64b..d025b67161 100644
--- a/packages/builder/src/components/userInterface/EditComponentProps.svelte
+++ b/packages/builder/src/components/userInterface/EditComponentProps.svelte
@@ -53,7 +53,7 @@
 
   .title > div:nth-child(1) {
     grid-column-start: name;
-    color: var(--secondary100);
+    color: var(--ink);
   }
 
   .title > div:nth-child(2) {
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
index 35faac366f..8132d502d1 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@@ -165,7 +165,7 @@
     padding: 30px 40px;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 50px;
-    background-color: var(--grey-light);
+    background-color: var(--grey-1);
   }
   .save {
     margin-left: 20px;
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
index 5a3fde257d..6a29fd3344 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
@@ -93,7 +93,7 @@
 
   .newevent {
     cursor: pointer;
-    border: 1px solid var(--grey-dark);
+    border: 1px solid var(--grey-4);
     border-radius: 3px;
     width: 100%;
     padding: 8px 16px;
@@ -109,7 +109,7 @@
   }
 
   .newevent:hover {
-    background: var(--grey-light);
+    background: var(--grey-1);
   }
 
   .icon {
@@ -155,7 +155,7 @@
   }
 
   .selected {
-    color: var(--button-text);
-    background: var(--background-button) !important;
+    color: var(--blue);
+    background: var(--grey-1) !important;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte
index 2eff1a6be4..f27a2902ee 100644
--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@@ -3,20 +3,13 @@
   export let value = ""
   export let text = ""
   export let icon = ""
-  export let padding = "8px 5px;"
   export let onClick = value => {}
   export let selected = false
-  export let fontWeight = ""
 
-  $: style = buildStyle({ padding, fontWeight })
   $: useIcon = !!icon
 </script>
 
-<div
-  class="flatbutton"
-  {style}
-  class:selected
-  on:click={() => onClick(value || text)}>
+<div class="flatbutton" class:selected on:click={() => onClick(value || text)}>
   {#if useIcon}
     <i class={icon} />
   {:else}
@@ -29,25 +22,27 @@
 <style>
   .flatbutton {
     cursor: pointer;
+    max-height: 36px;
     padding: 8px 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     text-align: center;
     background: #ffffff;
-    color: var(--ink-light);
+    color: var(--grey-7);
     border-radius: 5px;
-    font-family: Roboto;
     font-size: 14px;
     font-weight: 400;
     transition: all 0.3s;
-    margin-left: 5px;
     text-rendering: optimizeLegibility;
   }
 
   .selected {
-    background: var(--ink-light);
-    color: #ffffff;
+    background: var(--grey-3);
+    color: var(--ink);
   }
 
   i {
-    font-size: 20px;
+    font-size: 16px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
index c9523f4d5a..6789ada5aa 100644
--- a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
+++ b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
@@ -46,6 +46,7 @@
 <style>
   .flatbutton-group {
     display: flex;
+    width: 100%;
   }
 
   .button-container {
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 59fc13bcd1..9495799990 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -14,10 +14,7 @@
 
 <PagesList />
 
-<button class="newscreen" on:click={newScreen}>
-  <i class="icon ri-add-circle-fill" />
-  Create New Screen
-</button>
+<button class="newscreen" on:click={newScreen}>Create New Screen</button>
 
 <PageLayout layout={$store.pages[$store.currentPageName]} />
 
@@ -30,23 +27,26 @@
 <style>
   .newscreen {
     cursor: pointer;
-    border: 1px solid var(--grey-dark);
-    border-radius: 3px;
+    border: 1px solid var(--purple);
+    border-radius: 5px;
     width: 100%;
+    height: 36px;
     padding: 8px 16px;
     margin: 20px 0px 12px 0px;
     display: flex;
     justify-content: center;
     align-items: center;
-    background: white;
-    color: var(--ink);
+    background: var(--purple);
+    color: var(--white);
     font-size: 14px;
     font-weight: 500;
-    transition: all 2ms;
+    transition: all 3ms;
+    outline: none;
   }
 
   .newscreen:hover {
-    background: var(--grey-light);
+    background: var(--purple-light);
+    color: var(--purple);
   }
 
   .icon {
diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index 4e2806b018..f3751aeef7 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -28,12 +28,12 @@
     justify-content: center;
     align-items: center;
     margin-right: 8px;
-    background-color: var(--grey-light);
+    background-color: var(--grey-1);
     border-radius: 3px;
   }
 
   .item-item:hover {
-    background: var(--grey);
+    background: var(--grey-2);
     border-radius: 3px;
     transition: all 0.2s;
   }
@@ -55,6 +55,6 @@
 
   i {
     font-size: 24px;
-    color: var(--ink-light);
+    color: var(--grey-7);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/LayoutEditor.svelte b/packages/builder/src/components/userInterface/LayoutEditor.svelte
index 0f3efaec0a..b36e6aa4a7 100644
--- a/packages/builder/src/components/userInterface/LayoutEditor.svelte
+++ b/packages/builder/src/components/userInterface/LayoutEditor.svelte
@@ -132,8 +132,8 @@
   h3 {
     text-transform: uppercase;
     font-size: 13px;
-    font-weight: 700;
-    color: #000333;
+    font-weight: 600;
+    color: var(--ink);
     opacity: 0.6;
     margin-bottom: 10px;
   }
@@ -142,16 +142,15 @@
     text-transform: uppercase;
     font-size: 10px;
     font-weight: 600;
-    color: #000333;
+    color: var(--ink);
     opacity: 0.4;
-    letter-spacing: 1px;
     margin-bottom: 10px;
   }
 
   h5 {
     font-size: 13px;
     font-weight: 400;
-    color: #000333;
+    color: var(--ink);
     opacity: 0.8;
     padding-top: 13px;
     margin-bottom: 0;
diff --git a/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte b/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte
index dc1395bf0e..05a92d3e77 100644
--- a/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte
+++ b/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte
@@ -50,7 +50,7 @@
 
 <style>
   .selected {
-    color: var(--button-text);
+    color: var(--blue);
     background: #f9f9f9;
     opacity: 1;
   }
@@ -70,7 +70,7 @@
 
     font-size: 1.2rem;
     font-weight: 500;
-    color: #000333;
+    color: var(--ink);
   }
 
   .inputs {
diff --git a/packages/builder/src/components/userInterface/NewScreen.svelte b/packages/builder/src/components/userInterface/NewScreen.svelte
index 5a23bde90f..b09d9b7853 100644
--- a/packages/builder/src/components/userInterface/NewScreen.svelte
+++ b/packages/builder/src/components/userInterface/NewScreen.svelte
@@ -137,7 +137,7 @@
     padding-bottom: 10px;
     font-weight: 500;
     font-size: 16px;
-    color: var(--secondary80);
+    color: var(--grey-7);
   }
 
   .uk-input {
@@ -148,8 +148,8 @@
   .uk-select {
     height: 40px !important;
     font-weight: 500px;
-    color: var(--secondary60);
-    border: 1px solid var(--slate);
+    color: var(--grey-5);
+    border: 1px solid var(--grey-2);
     border-radius: 3px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index 8a1e3685f6..1c85a06392 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -142,24 +142,24 @@
     position: relative;
     outline: none;
     width: 160px;
-    height: 32px;
+    height: 36px;
     cursor: pointer;
-    font-size: 12px;
+    font-size: 14px;
   }
 
   .bb-select-anchor {
     cursor: pointer;
     display: flex;
-    padding: 5px 10px;
-    background-color: #f2f2f2;
-    border-radius: 2px;
-    border: 1px solid var(--grey-dark);
+    padding: 0px 12px;
+    height: 36px;
+    background-color: var(--grey-2);
+    border-radius: 5px;
     align-items: center;
   }
 
   .bb-select-anchor > span {
-    color: #565a66;
-    font-weight: 500;
+    color: var(--ink);
+    font-weight: 400;
     width: 140px;
     overflow-x: hidden;
   }
@@ -173,8 +173,8 @@
   }
 
   .selected {
-    color: #565a66;
-    font-weight: 500;
+    color: var(--ink);
+    font-weight: 400;
   }
 
   .bb-select-menu {
@@ -185,15 +185,15 @@
     opacity: 0;
     width: 160px;
     z-index: 2;
-    color: #808192;
-    font-weight: 500;
+    color: var(--ink);
+    font-weight: 400;
     height: fit-content !important;
     border-bottom-left-radius: 2px;
     border-bottom-right-radius: 2px;
-    border-right: 1px solid var(--grey-dark);
-    border-left: 1px solid var(--grey-dark);
-    border-bottom: 1px solid var(--grey-dark);
-    background-color: #f2f2f2;
+    border-right: 1px solid var(--grey-4);
+    border-left: 1px solid var(--grey-4);
+    border-bottom: 1px solid var(--grey-4);
+    background-color: var(--grey-2);
     transform: scale(0);
     transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1);
     overflow-y: auto;
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index c2ad4b590b..d64ab670ba 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -73,12 +73,12 @@
     display: inline-block;
     transition: 0.2s;
     width: 20px;
-    color: var(--ink-light);
+    color: var(--grey-7);
   }
 
   .icon-big {
-    font-size: 24px;
-    color: var(--ink-light);
+    font-size: 20px;
+    color: var(--grey-7);
   }
 
   :global(svg) {
diff --git a/packages/builder/src/components/userInterface/PageView.svelte b/packages/builder/src/components/userInterface/PageView.svelte
index c00e7591f4..d60a4082de 100644
--- a/packages/builder/src/components/userInterface/PageView.svelte
+++ b/packages/builder/src/components/userInterface/PageView.svelte
@@ -59,7 +59,7 @@
     padding: 15px;
   }
   .help-text {
-    color: var(--slate);
+    color: var(--grey-2);
     font-size: 10pt;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index 5a78ef7121..df8bdf7d99 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -43,22 +43,24 @@
 
   button {
     cursor: pointer;
-    padding: 8px 16px;
+    padding: 0px 16px;
+    height: 36px;
     text-align: center;
     background: #ffffff;
-    color: var(--ink-light);
+    color: var(--grey-7);
     border-radius: 5px;
-    font-family: Roboto;
+    font-family: inter;
     font-size: 14px;
     font-weight: 400;
     transition: all 0.3s;
     text-rendering: optimizeLegibility;
     border: none !important;
     transition: 0.2s;
+    outline: none;
   }
 
   .active {
-    background: var(--ink-light);
-    color: var(--white);
+    background: var(--grey-3);
+    color: var(--ink);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/PropControl.svelte b/packages/builder/src/components/userInterface/PropControl.svelte
index 332f039b03..a7053953f4 100644
--- a/packages/builder/src/components/userInterface/PropControl.svelte
+++ b/packages/builder/src/components/userInterface/PropControl.svelte
@@ -38,7 +38,7 @@
     word-wrap: break-word;
     font-size: 13px;
     font-weight: 400;
-    color: #000333;
+    color: var(--ink);
     opacity: 0.8;
     padding-top: 13px;
     margin-bottom: 0;
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index bd68002b98..b79d01fb32 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -12,7 +12,7 @@
     if (v.target) {
       let val = props.valueKey ? v.target[props.valueKey] : v.target.value
       onChange(key, val)
-    }else if(v.detail) {
+    } else if (v.detail) {
       onChange(key, v.detail)
     } else {
       onChange(key, v)
@@ -55,7 +55,6 @@
     flex: 0 0 50px;
     display: flex;
     align-items: center;
-    padding: 0px 5px;
     font-size: 12px;
     font-weight: 400;
     text-align: left;
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
index d2924675e6..1bf32fd925 100644
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@@ -100,7 +100,7 @@
     grid-template-columns: 300px 1fr 300px;
     height: 100%;
     width: 100%;
-    background: #fbfbfb;
+    background: var(--grey-1);
   }
 
   .ui-nav {
@@ -128,23 +128,21 @@
 
   .components-nav-page {
     font-size: 13px;
-    color: #000333;
+    color: var(--ink);
     text-transform: uppercase;
     padding-left: 20px;
     margin-top: 20px;
     font-weight: 600;
     opacity: 0.4;
-    letter-spacing: 1px;
   }
 
   .components-nav-header {
     font-size: 13px;
-    color: #000333;
+    color: var(--ink);
     text-transform: uppercase;
     margin-top: 20px;
     font-weight: 600;
     opacity: 0.4;
-    letter-spacing: 1px;
   }
 
   .nav-header {
@@ -184,21 +182,20 @@
     vertical-align: bottom;
     grid-column-start: button;
     cursor: pointer;
-    color: var(--primary75);
+    color: var(--blue);
   }
 
   .nav-group-header > div:nth-child(3):hover {
-    color: var(--primary75);
+    color: var(--blue);
   }
 
   .navigator-title {
     font-size: 14px;
-    color: var(--secondary100);
+    color: var(--ink);
     font-weight: 600;
     text-transform: uppercase;
     padding: 0 20px 20px 20px;
     line-height: 1rem !important;
-    letter-spacing: 1px;
   }
 
   .components-list-container {
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index d2043289c8..f0228d5f04 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -1,6 +1,5 @@
 import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
-import InputGroup from "../common/Inputs/InputGroup.svelte"
 import FlatButtonGroup from "./FlatButtonGroup.svelte"
 import Colorpicker from "./Colorpicker"
 /*
@@ -14,7 +13,7 @@ export const layout = [
     control: OptionSelect,
     initialValue: "",
     options: [
-      { label: "", value: "" },
+      { label: "N/A ", value: "N/A" },
       { label: "Flex", value: "flex" },
       { label: "Inline Flex", value: "inline-flex" },
     ],
@@ -73,27 +72,169 @@ export const layout = [
   },
 ]
 
-const spacingMeta = [
-  { placeholder: "T" },
-  { placeholder: "R" },
-  { placeholder: "B" },
-  { placeholder: "L" },
-]
-
-export const spacing = [
+export const margin = [
   {
-    label: "Margin",
+    label: "All sides",
     key: "margin",
-    control: InputGroup,
-    meta: spacingMeta,
-    defaultValue: ["0", "0", "0", "0"],
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
   },
   {
-    label: "Padding",
+    label: "Top",
+    key: "margin-top",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
+  },
+  {
+    label: "Right",
+    key: "margin-right",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
+  },
+  {
+    label: "Bottom",
+    key: "padding-bottom",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
+  },
+  {
+    label: "Left",
+    key: "margin-left",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
+  },
+]
+
+export const padding = [
+  {
+    label: "All sides",
     key: "padding",
-    control: InputGroup,
-    meta: spacingMeta,
-    defaultValue: ["0", "0", "0", "0"],
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
+  },
+  {
+    label: "Top",
+    key: "padding-top",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
+  },
+  {
+    label: "Right",
+    key: "padding-right",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
+  },
+  {
+    label: "Bottom",
+    key: "padding-bottom",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
+  },
+  {
+    label: "Left",
+    key: "padding-left",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
   },
 ]
 
@@ -103,7 +244,6 @@ export const size = [
     key: "width",
     control: Input,
     placeholder: "px",
-    width: "48px",
     textAlign: "center",
   },
   {
@@ -111,39 +251,34 @@ export const size = [
     key: "height",
     control: Input,
     placeholder: "px",
-    width: "48px",
     textAlign: "center",
   },
   {
-    label: "Min W",
+    label: "Min Width",
     key: "min-width",
     control: Input,
     placeholder: "px",
-    width: "48px",
     textAlign: "center",
   },
   {
-    label: "Min H",
-    key: "min-height",
-    control: Input,
-    placeholder: "px",
-    width: "48px",
-    textAlign: "center",
-  },
-  {
-    label: "Max W",
+    label: "Max Width",
     key: "max-width",
     control: Input,
     placeholder: "px",
-    width: "48px",
     textAlign: "center",
   },
   {
-    label: "Max H",
+    label: "Min Height",
+    key: "min-height",
+    control: Input,
+    placeholder: "px",
+    textAlign: "center",
+  },
+  {
+    label: "Max Height",
     key: "max-height",
     control: Input,
     placeholder: "px",
-    width: "48px",
     textAlign: "center",
   },
 ]
@@ -153,8 +288,9 @@ export const position = [
     label: "Position",
     key: "position",
     control: OptionSelect,
-    initialValue: "Wrap",
+    initialValue: "None",
     options: [
+      { label: "None", value: "none" },
       { label: "Static", value: "static" },
       { label: "Relative", value: "relative" },
       { label: "Fixed", value: "fixed" },
@@ -167,7 +303,6 @@ export const position = [
     key: "top",
     control: Input,
     placeholder: "px",
-    width: "48px",
     textAlign: "center",
   },
   {
@@ -175,7 +310,6 @@ export const position = [
     key: "right",
     control: Input,
     placeholder: "px",
-    width: "48px",
     textAlign: "center",
   },
   {
@@ -183,7 +317,6 @@ export const position = [
     key: "bottom",
     control: Input,
     placeholder: "px",
-    width: "48px",
     textAlign: "center",
   },
   {
@@ -191,16 +324,13 @@ export const position = [
     key: "left",
     control: Input,
     placeholder: "px",
-    width: "48px",
     textAlign: "center",
   },
   {
     label: "Z-index",
     key: "z-index",
-    control: Input,
-    placeholder: "num",
-    width: "48px",
-    textAlign: "center",
+    control: OptionSelect,
+    options: ["-9999", "-3", "-2", "-1", "0", "1", "2", "3", "9999"],
   },
 ]
 
@@ -239,19 +369,28 @@ export const typography = [
   {
     label: "size",
     key: "font-size",
-    defaultValue: "",
-    control: Input,
-    placeholder: "px",
-    width: "48px",
+    control: OptionSelect,
+    options: [
+      "8px",
+      "10px",
+      "12px",
+      "14px",
+      "16px",
+      "18px",
+      "20px",
+      "24px",
+      "32px",
+      "48px",
+      "60px",
+      "72px",
+    ],
     textAlign: "center",
   },
   {
     label: "Line H",
     key: "line-height",
-    control: Input,
-    placeholder: "lh",
-    width: "48px",
-    textAlign: "center",
+    control: OptionSelect,
+    options: ["1", "1.25", "1.5", "1.75", "2", "4"],
   },
   {
     label: "Color",
@@ -275,25 +414,20 @@ export const typography = [
     key: "text-transform",
     control: FlatButtonGroup,
     buttonProps: [
-      { text: "BB", padding: "0px 5px", fontWeight: 500, value: "uppercase" },
-      { text: "Bb", padding: "0px 5px", fontWeight: 500, value: "capitalize" },
-      { text: "bb", padding: "0px 5px", fontWeight: 500, value: "lowercase" },
-      {
-        text: "&times;",
-        padding: "0px 5px",
-        fontWeight: 500,
-        value: "none",
-      },
+      { text: "BB", value: "uppercase" },
+      { text: "Bb", value: "capitalize" },
+      { text: "bb", value: "lowercase" },
+      { text: "&times;", value: "none" },
     ],
   },
   {
     label: "Decoration",
     key: "text-decoration-line",
     control: OptionSelect,
-    defaultValue: "Underline",
+    defaultValue: "None",
     options: [
-      { label: "Underline", value: "underline" },
       { label: "None", value: "none" },
+      { label: "Underline", value: "underline" },
       { label: "Overline", value: "overline" },
       { label: "Line-through", value: "line-through" },
       { label: "Under Over", value: "underline overline" },
@@ -308,11 +442,64 @@ export const background = [
     control: Colorpicker,
     defaultValue: "#000",
   },
+  {
+    label: "Gradient",
+    key: "background-image",
+    control: OptionSelect,
+    defaultValue: "None",
+    options: [
+      { label: "None", value: "None" },
+      {
+        label: "Warm Flame",
+        value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
+      },
+      {
+        label: "Night Fade",
+        value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);",
+      },
+      {
+        label: "Spring Warmth",
+        value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);",
+      },
+      {
+        label: "Sunny Morning",
+        value: "linear-gradient(120deg, #f6d365 0%, #fda085 100%);",
+      },
+      {
+        label: "Winter Neva",
+        value: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);",
+      },
+      {
+        label: "Tempting Azure",
+        value: "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);",
+      },
+      {
+        label: "Heavy Rain",
+        value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);",
+      },
+      {
+        label: "Deep Blue",
+        value: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);",
+      },
+      {
+        label: "Near Moon",
+        value: "linear-gradient(to top, #5ee7df 0%, #b490ca 100%);",
+      },
+      {
+        label: "Wild Apple",
+        value: "linear-gradient(to top, #d299c2 0%, #fef9d7 100%);",
+      },
+      {
+        label: "Plum Plate",
+        value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);",
+      },
+    ],
+  },
   {
     label: "Image",
     key: "background-image",
     control: Input,
-    placeholder: "src",
+    placeholder: "Src",
   },
 ]
 
@@ -324,11 +511,13 @@ export const border = [
     defaultValue: "None",
     options: [
       { label: "None", value: "0" },
-      { label: "small", value: "0.125rem" },
-      { label: "Medium", value: "0.25rem;" },
-      { label: "Large", value: "0.375rem" },
-      { label: "Extra large", value: "0.5rem" },
-      { label: "Full", value: "5678px" },
+      { label: "X Small", value: "0.125rem" },
+      { label: "Small", value: "0.25rem" },
+      { label: "Medium", value: "0.5rem" },
+      { label: "Large", value: "1rem" },
+      { label: "X Large", value: "2rem" },
+      { label: "XX Large", value: "4rem" },
+      { label: "Round", value: "5678px" },
     ],
   },
   {
@@ -338,11 +527,11 @@ export const border = [
     defaultValue: "None",
     options: [
       { label: "None", value: "0" },
-      { label: "Extra small", value: "0.5px" },
+      { label: "X Small", value: "0.5px" },
       { label: "Small", value: "1px" },
       { label: "Medium", value: "2px" },
       { label: "Large", value: "4px" },
-      { label: "Extra large", value: "8px" },
+      { label: "X large", value: "8px" },
     ],
   },
   {
@@ -357,16 +546,16 @@ export const border = [
     control: OptionSelect,
     defaultValue: "None",
     options: [
-      "none",
-      "hidden",
-      "dotted",
-      "dashed",
-      "solid",
-      "double",
-      "groove",
-      "ridge",
-      "inset",
-      "outset",
+      "None",
+      "Hidden",
+      "Dotted",
+      "Dashed",
+      "Solid",
+      "Double",
+      "Groove",
+      "Ridge",
+      "Inset",
+      "Outset",
     ],
   },
 ]
@@ -375,28 +564,27 @@ export const effects = [
   {
     label: "Opacity",
     key: "opacity",
-    control: Input,
-    width: "48px",
+    control: OptionSelect,
     textAlign: "center",
-    placeholder: "%",
+    options: ["0", "0.2", "0.4", "0.6", "0.8", "1"],
   },
   {
     label: "Rotate",
-    key: "transform-rotate",
+    key: "transform",
     control: OptionSelect,
     defaultValue: "0",
     options: [
-      "0",
-      "45deg",
-      "90deg",
-      "90deg",
-      "135deg",
-      "180deg",
-      "225deg",
-      "270deg",
-      "315dev",
+      { label: "None", value: "0" },
+      { label: "45 deg", value: "rotate(45deg)" },
+      { label: "90 deg", value: "rotate(90deg)" },
+      { label: "135 deg", value: "rotate(135deg)" },
+      { label: "180 deg", value: "rotate(180deg)" },
+      { label: "225 deg", value: "rotate(225deg)" },
+      { label: "270 deg", value: "rotate(270deg)" },
+      { label: "315 deg", value: "rotate(315deg)" },
+      { label: "360 deg", value: "rotate(360deg)" },
     ],
-  }, //needs special control
+  },
   {
     label: "Shadow",
     key: "box-shadow",
@@ -404,7 +592,7 @@ export const effects = [
     defaultValue: "None",
     options: [
       { label: "None", value: "none" },
-      { label: "Extra small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
+      { label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
       {
         label: "Small",
         value:
@@ -421,7 +609,7 @@ export const effects = [
           "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
       },
       {
-        label: "Extra large",
+        label: "X Large",
         value:
           "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
       },
@@ -453,10 +641,10 @@ export const transitions = [
   {
     label: "Duration",
     key: "transition-duration",
-    control: Input,
-    width: "48px",
+    control: OptionSelect,
     textAlign: "center",
     placeholder: "sec",
+    options: ["0.2ms", "0.4ms", "0.8ms", "1s", "2s", "4s"],
   },
   {
     label: "Ease",
@@ -468,7 +656,8 @@ export const transitions = [
 
 export const all = {
   layout,
-  spacing,
+  margin,
+  padding,
   size,
   position,
   typography,
diff --git a/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte b/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte
index 4eed82bf25..c84117b475 100644
--- a/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte
@@ -41,7 +41,7 @@
 <style>
   header {
     font-size: 24px;
-    color: var(--font);
+    color: var(--ink);
     font-weight: bold;
     padding: 30px;
   }
@@ -50,7 +50,7 @@
     margin-right: 10px;
     font-size: 20px;
     background: var(--secondary);
-    color: var(--dark-grey);
+    color: var(--grey-4);
     padding: 8px;
   }
 
@@ -69,7 +69,7 @@
     grid-gap: 5px;
     grid-auto-columns: 3fr 1fr 1fr;
     padding: 20px;
-    background: #fafafa;
+    background: var(--grey-1);
     border-radius: 0.5rem;
   }
 
diff --git a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
index 2dea51f3e0..44efe62837 100644
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@@ -172,7 +172,7 @@
 
   header {
     font-size: 20px;
-    font-weight: 700;
+    font-weight: 600;
     display: flex;
     align-items: center;
     margin-bottom: 18px;
@@ -192,15 +192,15 @@
 
   .config-item {
     margin: 0px 0px 4px 0px;
-    padding: 12px;
-    background: var(--light-grey);
+    padding: 12px 0px;
   }
 
   .budibase_input {
-    height: 35px;
-    width: 220px;
+    height: 36px;
+    width: 244px;
     border-radius: 3px;
-    border: 1px solid var(--grey-dark);
+    background-color: var(--grey-2);
+    border: 1px solid var(--grey-2);
     text-align: left;
     color: var(--ink);
     font-size: 14px;
@@ -208,7 +208,7 @@
   }
 
   header > span {
-    color: var(--ink-lighter);
+    color: var(--grey-5);
     margin-right: 20px;
   }
 
@@ -253,7 +253,7 @@
 
   .workflow-button {
     cursor: pointer;
-    border: 1px solid var(--grey-dark);
+    border: 1px solid var(--grey-4);
     border-radius: 3px;
     width: 100%;
     padding: 8px 16px;
@@ -269,7 +269,7 @@
   }
 
   .workflow-button:hover {
-    background: var(--grey-light);
+    background: var(--grey-1);
   }
 
   .access-level {
diff --git a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
index 42ebb307fa..20ab71c23a 100644
--- a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
@@ -67,16 +67,16 @@
 <style>
   .block-field {
     border-radius: 3px;
-    background: var(--grey-light);
+    background: var(--grey-1);
     padding: 12px;
     margin: 0px 0px 4px 0px;
   }
 
   .budibase_input {
-    height: 35px;
+    height: 36px;
     width: 220px;
     border-radius: 3px;
-    border: 1px solid var(--grey-dark);
+    border: 1px solid var(--grey-4);
     text-align: left;
     color: var(--ink);
     font-size: 14px;
diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
index 97cb637a6c..b0b213c33a 100644
--- a/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
+++ b/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
@@ -85,6 +85,6 @@
   }
 
   .stop-button.highlighted {
-    background: var(--coral);
+    background: var(--red);
   }
 </style>
diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
index 2ef2b8c462..626a890b69 100644
--- a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
+++ b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
@@ -35,7 +35,7 @@
     border-radius: 5px;
     transition: 0.3s all;
     box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08);
-    background-color: var(--font);
+    background-color: var(--ink);
     font-size: 16px;
     color: var(--white);
   }
@@ -54,17 +54,17 @@
 
   .ACTION {
     background-color: var(--white);
-    color: var(--font);
+    color: var(--ink);
   }
 
   .TRIGGER {
-    background-color: var(--font);
+    background-color: var(--ink);
     color: var(--white);
   }
 
   .LOGIC {
     background-color: var(--secondary);
-    color: var(--font);
+    color: var(--ink);
   }
 
   div:hover {
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
index b70fe93640..3a071ad00f 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
@@ -52,29 +52,31 @@
 
 <style>
   .subtabs {
-    margin-top: 27px;
+    margin-top: 20px;
     display: grid;
-    grid-gap: 5px;
     grid-auto-flow: column;
     grid-auto-columns: 1fr 1fr 1fr;
-    margin-bottom: 10px;
+    margin-bottom: 12px;
   }
 
   .subtabs span {
     transition: 0.3s all;
     text-align: center;
-    color: var(--dark-grey);
-    font-weight: 500;
-    padding: 10px;
+    color: var(--grey-7);
+    font-weight: 400;
+    padding: 8px 16px;
+    text-rendering: optimizeLegibility;
+    border: none !important;
+    outline: none;
   }
 
   .subtabs span.selected {
-    background: var(--dark-grey);
-    color: var(--white);
-    border-radius: 2px;
+    background: var(--grey-3);
+    color: var(--ink);
+    border-radius: 5px;
   }
 
   .subtabs span:not(.selected) {
-    color: var(--dark-grey);
+    color: var(--ink);
   }
 </style>
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
index 95e29cbf91..1882f91b7a 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
@@ -30,19 +30,34 @@
 
 <style>
   .workflow-block {
-    display: flex;
-    padding: 20px;
+    display: grid;
+    grid-template-columns: 40px auto;
     align-items: center;
+    margin-top: 16px;
+    padding: 16px 0px;
+    border-radius: var(--border);
+  }
+
+  .workflow-block:hover {
+    background-color: var(--grey-1);
   }
 
   .workflow-text {
-    margin-left: 10px;
+    margin-left: 12px;
+  }
+
+  .icon {
+    height: 40px;
+    width: 40px;
+    background: var(--blue-light);
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   i {
-    background: var(--secondary);
-    color: var(--dark-grey);
-    padding: 10px;
+    color: var(--grey-7);
+    font-size: 20px;
   }
 
   h4 {
@@ -53,7 +68,7 @@
 
   p {
     font-size: 12px;
-    color: var(--dark-grey);
+    color: var(--grey-7);
     margin: 0;
   }
 </style>
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
index 315332890f..97100b6626 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
@@ -41,7 +41,7 @@
 <style>
   header {
     font-size: 24px;
-    color: var(--font);
+    color: var(--ink);
     font-weight: bold;
     padding: 30px;
   }
@@ -50,7 +50,7 @@
     margin-right: 10px;
     font-size: 20px;
     background: var(--secondary);
-    color: var(--dark-grey);
+    color: var(--grey-4);
     padding: 8px;
   }
 
@@ -69,7 +69,7 @@
     grid-gap: 5px;
     grid-auto-columns: 3fr 1fr 1fr;
     padding: 20px;
-    background: #fafafa;
+    background: var(--grey-1);
     border-radius: 0.5rem;
   }
 
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
index ece0a47016..e5f4e51628 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
@@ -89,7 +89,7 @@
 
   .workflow-item:hover {
     cursor: pointer;
-    background: var(--grey-light);
+    background: var(--grey-1);
   }
 
   .workflow-item.selected {
@@ -98,7 +98,7 @@
 
   .new-workflow-button {
     cursor: pointer;
-    border: 1px solid var(--grey-dark);
+    border: 1px solid var(--grey-4);
     border-radius: 3px;
     width: 100%;
     padding: 8px 16px;
@@ -113,7 +113,7 @@
   }
 
   .new-workflow-button:hover {
-    background: var(--grey-light);
+    background: var(--grey-1);
   }
 
   .icon {
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
index e92ca143b5..f5cd0c440d 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
@@ -35,7 +35,7 @@
 <style>
   header {
     font-size: 18px;
-    font-weight: 700;
+    font-weight: 600;
     background: none;
     display: flex;
     align-items: center;
@@ -47,7 +47,7 @@
   }
 
   span:not(.selected) {
-    color: var(--ink-lighter);
+    color: var(--grey-5);
   }
 
   span:not(.selected):hover {
diff --git a/packages/builder/src/flowy.css b/packages/builder/src/flowy.css
index 1fc6d12b3e..11dd9f04a1 100644
--- a/packages/builder/src/flowy.css
+++ b/packages/builder/src/flowy.css
@@ -4,7 +4,7 @@ body, html {
     overflow: hidden;
     background-repeat: repeat;
     background-size: 30px 30px;
-    background-color: #FBFBFB;
+    background-color: var(--grey-1);
     height: 100%;
 }
 #navigation {
@@ -63,7 +63,7 @@ body, html {
 }
 #leftswitch {
     border: 1px solid #E8E8EF;
-    background-color: #FBFBFB;
+    background-color: var(--grey-1);
     width: 111px;
     height: 39px;
     line-height: 39px;
@@ -326,7 +326,7 @@ body, html {
 
 .blockico i {
   font-size: 24px;
-  color: var(--dark-grey);
+  color: var(--grey-4);
 }
 
 .blockico span {
diff --git a/packages/builder/src/fonts.css b/packages/builder/src/fonts.css
index 6f2d0f28ee..ddbfc942ef 100644
--- a/packages/builder/src/fonts.css
+++ b/packages/builder/src/fonts.css
@@ -1,47 +1,56 @@
 /* latin-ext */
-/* roboto-regular - latin-ext_latin */
+/* Inter-regular - latin-ext_latin */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'),
-       url('/_builder/assets/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/_builder/assets/roboto-v20-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: local('Inter'), local('Inter-Regular'),
+       url('/_builder/assets/Inter-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/_builder/assets/Inter-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-/* roboto-300 - latin-ext_latin */
+/* Inter-500 - latin-ext_latin */
 @font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'),
-       url('/_builder/assets/roboto-v20-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/_builder/assets/roboto-v20-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* roboto-500 - latin-ext_latin */
-@font-face {
-  font-family: 'Roboto';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'),
-       url('/_builder/assets/roboto-v20-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/_builder/assets/roboto-v20-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: local('Inter Medium'), local('Inter-Medium'),
+       url('/_builder/assets/Inter-Medium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/_builder/assets/Inter-Medium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-/* roboto-700 - latin-ext_latin */
+/* Inter-600 - latin-ext_latin */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Inter SemiBold'), local('Inter-SemiBold'),
+       url('/_builder/assets/Inter-SemiBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/_builder/assets/Inter-SemiBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* Inter-700 - latin-ext_latin */
+@font-face {
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'),
-       url('/_builder/assets/roboto-v20-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/_builder/assets/roboto-v20-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: local('Inter Bold'), local('Inter-Bold'),
+       url('/_builder/assets/Inter-Bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/_builder/assets/Inter-Bold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-/* roboto-900 - latin-ext_latin */
+/* Inter-800 - latin-ext_latin */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Inter ExtraBold'), local('Inter-ExtraBold'),
+       url('/_builder/assets/Inter-ExtraBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/_builder/assets/Inter-ExtraBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* Inter-900 - latin-ext_latin */
+@font-face {
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'),
-       url('/_builder/assets/roboto-v20-latin-ext_latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/_builder/assets/roboto-v20-latin-ext_latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: local('Inter Black'), local('Inter-Black'),
+       url('/_builder/assets/Inter-Black.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/_builder/assets/Inter-Black.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
   
\ No newline at end of file
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 7259111c63..ab01825dd2 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -8,97 +8,43 @@
     --blue-dark: #2F4C9B;
 
     --ink: #393C44;
-    --ink-light: #808192;
-    --ink-lighter: #ADAEC4;
+    --grey-7: #808192;
+    --grey-5: #ADAEC4;
     
     --grey: #F2F2F2;
-    --grey-light: #FBFBFB;
-    --grey-medium: #e8e8ef;
-    --grey-dark: #E6E6E6;
+    --grey-1: var(--grey-1);
+    --grey-4: #e8e8ef;
+    --grey-4: #E6E6E6;
 
     --red: #E26D69;
     --red-light:#FFE6E6;
     --red-dark: #800400;
 
-    --primary100: #0055ff;
-    --primary80: rgba(0, 85, 255, 0.8);
-    --primary60: #rgba(0, 85, 255, 0.6);
-    --primary40: #rgba(0, 85, 255, 0.4);
-    --primary20: #rgba(0, 85, 255, 0.2);
-    --primary10: #rgba(0, 85, 255, 0.1);
-    --primary5: #rgba(0, 85, 255, 0.05);
-    --primarydark: #0044cc;
 
-    --secondary100:#393C44;
-    --secondary80: rgba(0, 3, 51, 0.8);
-    --secondary60: rgba(0, 3, 51, 0.6);
-    --secondary40: rgba(0, 3, 51, 0.4);
-    --secondary20: rgba(0, 3, 51, 0.2);
-    --secondary10: rgba(0, 3, 51, 0.1);
-    --secondary5: rgba(0, 3, 51, 0.05);
-    --secondarydark: #00021a;
+    --font-black: "Inter Black";
+    --font-bold: "Inter Bold";
+    --fontsemibold: "Inter Medium";
+    --font-normal: "Inter";
 
-    --tertiary: #F2F5F7;
+    --bodytext: var(--font-normal) "regular" var(--secondary100) 16pt;
+    --bigbodytext: var(--font-normal) "regular" var(--secondary100) 20pt;
+    --smallbodytext: var(--font-normal) "regular" var(--secondary100) 12pt;
+    --lightbodytext: "regular" "normal" 16pt  var(--font-normal);
+    --heavybodytext: var(--font-bold) "regular" var(--secondary100) 16pt;
+    --quotation: var(--font-normal) "italics" var(--darkslate) 16pt;
+    --smallheavybodytext: var(--font-bold) "regular" var(--secondary100) 14pt;
 
-    --success100: #49C39EFF;
-    --success75: #49C39EBF;
-    --success50: #49C39E80;
-    --success25: #49C39E40;
-    --success10: #49C39E1A;
-    --successdark: #44B492;
 
-    --deletion100: #F2545BFF;
-    --deletion75: #F2545BBF;
-    --deletion50: #F2545B80;
-    --deletion25: #F2545B40;
-    --deletion10: #F2545B1A;
-    --deletiondark: #CF4046;
-
-    
-    --darkslate: #1a202c;
-    --slate: #d8d8d8;
-    --lightslate: #f9f9f9;
-
-    --borderradius: 2px;
-    --borderradiusall: 2px 2px 2px 2px;
-
-    --fontblack: "Roboto Black";
-    --fontbold: "Roboto Bold";
-    --fontsemibold: "Roboto Medium";
-    --fontnormal: "Roboto";
-    --fontlight: "Roboto Light";
-
-    --bodytext: var(--fontnormal) "regular" var(--secondary100) 16pt;
-    --bigbodytext: var(--fontnormal) "regular" var(--secondary100) 20pt;
-    --smallbodytext: var(--fontnormal) "regular" var(--secondary100) 12pt;
-    --lightbodytext: "regular" "normal" 16pt  var(--fontnormal);
-    --heavybodytext: var(--fontbold) "regular" var(--secondary100) 16pt;
-    --quotation: var(--fontnormal) "italics" var(--darkslate) 16pt;
-    --smallheavybodytext: var(--fontbold) "regular" var(--secondary100) 14pt;
-
-    --background-button: #f9f9f9;
-    --button-text: #0055ff;
-
-    /* Budibase Styleguide Colors */
-    --primary: #0055ff;
-    --secondary: #f1f4fc;
-    --color: #393c44;
-    --light-grey: #fbfbfb;
-    --dark-grey: #808192;
-    --medium-grey: #e8e8ef;
-    --background: rgb(251, 251, 251);
-    --font: #393c44;
-    --coral: #eb5757;
 }
 
 html, body {
     display: grid;
-    font-family: var(--fontnormal);
-    color: var(--secondary80);
+    font-family: inter;
+    color: var(--ink);
     padding: 0;
     margin: 0;
-    height:100%;
-    width:100%;
+    height: 100%;
+    width: 100%;
 }
 
 #app {
@@ -108,43 +54,43 @@ html, body {
 }
 
 h1 {
-    font-family: var(--fontblack);
+    font-family: var(--font-black);
     font-size: 36pt;
     color: var(--secondary100);
 }
 
 h2 {
-    font-family: var(--fontbold);
+    font-family: var(--font-bold);
     font-size: 30pt;
     color: var(--secondary100);
 }
 
 h3 {
-    font-family: var(--fontbold);
+    font-family: var(--font-bold);
     font-size: 24pt;
     color: var(--secondary60);
 }
 
 h4 {
-    font-family: var(--fontbold);
+    font-family: var(--font-bold);
     font-size: 18pt;
     color: var(--ink);
 }
 
 h5 {
-    font-family: var(--fontblack);
+    font-family: var(--font-black);
     font-size: 14pt;
     color: var(--secondary100);
 }
 
 h5 {
-    font-family: var(--fontblack);
+    font-family: var(--font-black);
     font-size: 12pt;
     color: var(--darkslate);
 }
 
 textarea {
-    font-family: var(--fontnormal);
+    font-family: var(--font-normal);
 }
 
 .hoverable:hover {
diff --git a/packages/builder/src/main.js b/packages/builder/src/main.js
index eb1357fde2..cfc568b564 100644
--- a/packages/builder/src/main.js
+++ b/packages/builder/src/main.js
@@ -1,11 +1,12 @@
 import "./global.css"
 import "./fonts.css"
 import "./budibase.css"
-import "/assets/roboto-v20-latin-ext_latin-300"
-import "/assets/roboto-v20-latin-ext_latin-400"
-import "/assets/roboto-v20-latin-ext_latin-500"
-import "/assets/roboto-v20-latin-ext_latin-700"
-import "/assets/roboto-v20-latin-ext_latin-900"
+import "/assets/Inter-Regular"
+import "/assets/Inter-Medium"
+import "/assets/Inter-SemiBold"
+import "/assets/Inter-Bold"
+import "/assets/Inter-ExtraBold"
+import "/assets/Inter-Black"
 import "/_builder/assets/budibase-logo.png"
 import "/_builder/assets/budibase-logo-only.png"
 import "uikit/dist/css/uikit.min.css"
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index 70e93bc7eb..a0c6897e54 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -50,7 +50,7 @@
           </span>
         {/each}
         <!-- <IconButton icon="home"
-                      color="var(--slate)"
+                      color="var(--grey-2)"
                       hoverColor="var(--secondary75)"/> -->
       </div>
       <div class="toprightnav">
@@ -92,7 +92,7 @@
 
   a {
     text-transform: none;
-    color: var(--ink-lighter);
+    color: var(--grey-5);
   }
 
   .top-nav {
@@ -104,7 +104,7 @@
     box-sizing: border-box;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid var(--grey);
+    border-bottom: 1px solid var(--grey-2);
   }
 
   .content > div {
@@ -123,18 +123,18 @@
 
   .topnavitem {
     cursor: pointer;
-    color: var(--ink-lighter);
+    color: var(--grey-5);
     margin: 0px 00px 0px 20px;
     padding-top: 4px;
     font-weight: 500;
-    font-size: 1rem;
+    font-size: var(--font-size-md);
     height: 100%;
     align-items: center;
     box-sizing: border-box;
   }
 
   .topnavitem:hover {
-    color: var(--ink-light);
+    color: var(--grey-7);
     font-weight: 500;
   }
 
@@ -145,7 +145,7 @@
 
   .topnavitemright {
     cursor: pointer;
-    color: var(--ink-light);
+    color: var(--grey-7);
     margin: 0px 20px 0px 0px;
     padding-top: 4px;
     font-weight: 500;
diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/backend/_layout.svelte
index 0e36980c6c..5d3fc8fb1e 100644
--- a/packages/builder/src/pages/[application]/backend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/backend/_layout.svelte
@@ -23,7 +23,7 @@
   .root {
     height: 100%;
     display: flex;
-    background: #fafafa;
+    background: var(--grey-1);
   }
 
   .content {
diff --git a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte b/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte
index 3ebe117636..165d122dfb 100644
--- a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte
@@ -43,9 +43,7 @@
 {#if $backendUiStore.selectedDatabase._id && $backendUiStore.selectedModel.name}
   <ModelDataTable {selectRecord} />
 {:else}
-  <i style="color: var(--grey-dark)">
-    create your first model to start building
-  </i>
+  <i style="color: var(--grey-4)">create your first model to start building</i>
 {/if}
 
 <style>
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index 8bdb95becf..87b064addf 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -75,7 +75,7 @@
     display: grid;
     grid-template-columns: 300px 1fr 300px;
     width: 100%;
-    background: var(--grey-light);
+    background: var(--grey-1);
     flex: 1;
     min-height: 0;
     align-items: stretch;
@@ -116,10 +116,10 @@
     vertical-align: bottom;
     grid-column-start: button;
     cursor: pointer;
-    color: var(--primary75);
+    color: var(--blue);
   }
 
   .nav-group-header > div:nth-child(3):hover {
-    color: var(--primary75);
+    color: var(--blue);
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/workflow/_layout.svelte b/packages/builder/src/pages/[application]/workflow/_layout.svelte
index 96a0dcbb2f..1b84a255ba 100644
--- a/packages/builder/src/pages/[application]/workflow/_layout.svelte
+++ b/packages/builder/src/pages/[application]/workflow/_layout.svelte
@@ -22,13 +22,13 @@
 <style>
   .content {
     position: relative;
-    background: var(--background);
+    background: var(--grey-1);
   }
 
   .root {
     height: 100%;
     display: flex;
-    background: var(--grey-light);
+    background: var(--grey-1);
   }
 
   .content {
@@ -39,7 +39,7 @@
   .nav {
     overflow: auto;
     width: 300px;
-    border-right: 1px solid var(--grey);
+    border-right: 1px solid var(--grey-2);
     background: var(--white);
   }
 
diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte
index f8a0d1d244..8d4563f7cf 100644
--- a/packages/builder/src/pages/_layout.svelte
+++ b/packages/builder/src/pages/_layout.svelte
@@ -36,7 +36,6 @@
         <Link icon={DocumentationIcon} title="Documentation" href="/" />
         <Link icon={TutorialsIcon} title="Tutorials" href="/" />
         <Link icon={CommunityIcon} title="Community" href="/" />
-        <Link icon={ContributionIcon} title="Contact" href="/" />
       </div>
 
       <div class="nav-section">
@@ -63,7 +62,7 @@
     grid-template-columns: 300px 1fr;
     height: 100%;
     width: 100%;
-    background: var(--grey-light);
+    background: var(--grey-1);
   }
 
   .main {
@@ -76,7 +75,7 @@
     padding: 20px;
     display: flex;
     flex-direction: column;
-    border-right: 1px solid var(--grey-medium);
+    border-right: 1px solid var(--grey-4);
   }
 
   .home-logo {
@@ -98,7 +97,7 @@
   .nav-section-title {
     font-size: 20px;
     color: var(--ink);
-    font-weight: 700;
+    font-weight: 600;
     margin-bottom: 12px;
   }
 </style>
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index e54102db1e..0d2f76a007 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -73,7 +73,7 @@
   .welcome {
     font-size: 42px;
     color: var(--ink);
-    font-weight: 900;
+    font-weight: 700;
     margin: 40px 0px 0px 80px;
   }
 
@@ -136,7 +136,7 @@
   .banner-button:hover {
     background-color: var(--white);
     color: var(--ink);
-    border: var(--grey-dark) 1px solid;
+    border: var(--grey-4) 1px solid;
   }
 
   .app-section-header {
@@ -149,7 +149,7 @@
   .app-section-title {
     font-size: 20px;
     color: var(--ink);
-    font-weight: 700;
+    font-weight: 600;
     margin-bottom: 20px;
   }
 </style>
diff --git a/packages/server/builder/assets/Inter-Black.woff b/packages/server/builder/assets/Inter-Black.woff
new file mode 100644
index 0000000000..07800f4b74
Binary files /dev/null and b/packages/server/builder/assets/Inter-Black.woff differ
diff --git a/packages/server/builder/assets/Inter-Black.woff2 b/packages/server/builder/assets/Inter-Black.woff2
new file mode 100644
index 0000000000..9a615e6e83
Binary files /dev/null and b/packages/server/builder/assets/Inter-Black.woff2 differ
diff --git a/packages/server/builder/assets/Inter-Bold.woff b/packages/server/builder/assets/Inter-Bold.woff
new file mode 100644
index 0000000000..61e1c25e64
Binary files /dev/null and b/packages/server/builder/assets/Inter-Bold.woff differ
diff --git a/packages/server/builder/assets/Inter-Bold.woff2 b/packages/server/builder/assets/Inter-Bold.woff2
new file mode 100644
index 0000000000..6c401bb09b
Binary files /dev/null and b/packages/server/builder/assets/Inter-Bold.woff2 differ
diff --git a/packages/server/builder/assets/Inter-ExtraBold.woff b/packages/server/builder/assets/Inter-ExtraBold.woff
new file mode 100644
index 0000000000..433fb3285c
Binary files /dev/null and b/packages/server/builder/assets/Inter-ExtraBold.woff differ
diff --git a/packages/server/builder/assets/Inter-ExtraBold.woff2 b/packages/server/builder/assets/Inter-ExtraBold.woff2
new file mode 100644
index 0000000000..5a08b364d5
Binary files /dev/null and b/packages/server/builder/assets/Inter-ExtraBold.woff2 differ
diff --git a/packages/server/builder/assets/Inter-Medium.woff b/packages/server/builder/assets/Inter-Medium.woff
new file mode 100644
index 0000000000..8c36a6345e
Binary files /dev/null and b/packages/server/builder/assets/Inter-Medium.woff differ
diff --git a/packages/server/builder/assets/Inter-Medium.woff2 b/packages/server/builder/assets/Inter-Medium.woff2
new file mode 100644
index 0000000000..3b31d3350a
Binary files /dev/null and b/packages/server/builder/assets/Inter-Medium.woff2 differ
diff --git a/packages/server/builder/assets/Inter-Regular.woff b/packages/server/builder/assets/Inter-Regular.woff
new file mode 100644
index 0000000000..7d587c40bf
Binary files /dev/null and b/packages/server/builder/assets/Inter-Regular.woff differ
diff --git a/packages/server/builder/assets/Inter-Regular.woff2 b/packages/server/builder/assets/Inter-Regular.woff2
new file mode 100644
index 0000000000..d5ffd2a1f1
Binary files /dev/null and b/packages/server/builder/assets/Inter-Regular.woff2 differ
diff --git a/packages/server/builder/assets/Inter-SemiBold.woff b/packages/server/builder/assets/Inter-SemiBold.woff
new file mode 100644
index 0000000000..99df06cbee
Binary files /dev/null and b/packages/server/builder/assets/Inter-SemiBold.woff differ
diff --git a/packages/server/builder/assets/Inter-SemiBold.woff2 b/packages/server/builder/assets/Inter-SemiBold.woff2
new file mode 100644
index 0000000000..df746af999
Binary files /dev/null and b/packages/server/builder/assets/Inter-SemiBold.woff2 differ
diff --git a/packages/server/src/utilities/builder/index.template.html b/packages/server/src/utilities/builder/index.template.html
index a21219de9b..91b33cb284 100644
--- a/packages/server/src/utilities/builder/index.template.html
+++ b/packages/server/src/utilities/builder/index.template.html
@@ -11,7 +11,7 @@
     <style>
         html,
         body {
-            font-family: Roboto;
+            font-family: Inter;
             height: 100%;
             width: 100%;
             margin: 0px;
diff --git a/packages/standard-components/public/global.css b/packages/standard-components/public/global.css
index ed776db49b..fee35ba5c5 100644
--- a/packages/standard-components/public/global.css
+++ b/packages/standard-components/public/global.css
@@ -5,11 +5,11 @@ html, body {
 }
 
 body {
-	color: #333;
+	color: #000000;
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }
 
 a {
diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte
index 66df8f9338..c25dd152d1 100644
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@@ -26,7 +26,6 @@
 <style>
   .default {
     align-items: center;
-    font-family: Inter;
     font-size: 16px;
     padding: 0px 16px;
     box-sizing: border-box;
diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index 6188165aa7..1510110ba9 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -109,7 +109,7 @@
   }
 
   hr {
-    border: 1px solid #fafafa;
+    border: 1px solid var(--grey-1);
     margin: 20px 0px;
   }
 
@@ -124,7 +124,6 @@
   }
 
   button {
-    font-family: roboto;
     font-size: 16px;
     padding: 0.4em;
     box-sizing: border-box;
diff --git a/packages/standard-components/src/DataList.svelte b/packages/standard-components/src/DataList.svelte
index 3f30558227..9ef0b92d2c 100644
--- a/packages/standard-components/src/DataList.svelte
+++ b/packages/standard-components/src/DataList.svelte
@@ -52,7 +52,7 @@
   .list {
     display: flex;
     flex-direction: column;
-    font-family: Roboto;
+    font-family: Inter;
   }
 
   .grid {
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 188671b06a..e6f097314c 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -77,7 +77,6 @@
     font-weight: 500;
     font-size: 14px;
     text-rendering: optimizeLegibility;
-    letter-spacing: 1px;
     justify-content: left;
     padding: 16px 20px 16px 8px;
     margin-right: 20px;
@@ -92,6 +91,6 @@
   }
 
   tbody tr:hover {
-    background: #fafafa;
+    background: var(--grey-1);
   }
 </style>
diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
index 9e4ddd6c99..8207ef47ee 100644
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@@ -41,7 +41,7 @@
   .list {
     display: flex;
     flex-direction: column;
-    font-family: Roboto;
+    font-family: Inter;
   }
 
   .grid {
diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte
index 0675c65f46..e9d7adb843 100644
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@@ -23,7 +23,10 @@
 
   const login = async () => {
     loading = true
-    const response = await _bb.api.post("/api/authenticate", { username, password })
+    const response = await _bb.api.post("/api/authenticate", {
+      username,
+      password,
+    })
     if (response.status === 200) {
       const json = await response.json()
       localStorage.setItem("budibase:token", json.token)
@@ -36,47 +39,39 @@
   }
 </script>
 
-<div class="root">
-  <div class="content">
-    {#if logo}
-      <div class="logo-container">
-        <img src={logo} alt="logo" />
-      </div>
-    {/if}
+<div class="container">
+  <div class="root">
+    <div class="content">
+      {#if logo}
+        <div class="logo-container">
+          <img src={logo} alt="logo" />
+        </div>
+      {/if}
 
-    <h1 class="header-content">Log in to {name}</h1>
-
-    <div class="form-root">
-      <div class="control">
-        <input
-          bind:value={username}
-          type="text"
-          placeholder="Username"
-          class={_inputClass} />
+      <div class="login-button-container">
+        <button disabled={loading} on:click={login} class={_buttonClass}>
+          Log in to {name}
+        </button>
       </div>
 
-      <div class="control">
-        <input
-          bind:value={password}
-          type="password"
-          placeholder="Password"
-          class={_inputClass} />
-      </div>
+      {#if error}
+        <div class="incorrect-details-panel">
+          Incorrect username or password
+        </div>
+      {/if}
     </div>
-
-    <div class="login-button-container">
-      <button disabled={loading} on:click={login} class={_buttonClass}>
-        Log in to {name}
-      </button>
-    </div>
-
-    {#if error}
-      <div class="incorrect-details-panel">Incorrect username or password</div>
-    {/if}
   </div>
 </div>
 
 <style>
+  .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+  }
   .root {
     height: 100%;
     display: flex;
@@ -107,7 +102,7 @@
 
   .header-content {
     font-family: Inter;
-    font-weight: 700;
+    font-weight: 600;
     color: #1f1f1f;
     font-size: 48px;
     line-height: 72px;