CSS update UI refresh

Font changed to Inter Colors reflect BBUI Panel background removed
6 years ago · a77be47076
110 changed files with 339 additions and 376 deletions
--- a/packages/builder/assets/Inter-Black.woff
+++ b/packages/builder/assets/Inter-Black.woff
--- a/packages/builder/assets/Inter-Black.woff2
+++ b/packages/builder/assets/Inter-Black.woff2
--- a/packages/builder/assets/Inter-Bold.woff
+++ b/packages/builder/assets/Inter-Bold.woff
--- a/packages/builder/assets/Inter-Bold.woff2
+++ b/packages/builder/assets/Inter-Bold.woff2
--- a/packages/builder/assets/Inter-ExtraBold.woff
+++ b/packages/builder/assets/Inter-ExtraBold.woff
--- a/packages/builder/assets/Inter-ExtraBold.woff2
+++ b/packages/builder/assets/Inter-ExtraBold.woff2
--- a/packages/builder/assets/Inter-Medium.woff
+++ b/packages/builder/assets/Inter-Medium.woff
--- a/packages/builder/assets/Inter-Medium.woff2
+++ b/packages/builder/assets/Inter-Medium.woff2
--- a/packages/builder/assets/Inter-Regular.woff
+++ b/packages/builder/assets/Inter-Regular.woff
--- a/packages/builder/assets/Inter-Regular.woff2
+++ b/packages/builder/assets/Inter-Regular.woff2
--- a/packages/builder/assets/Inter-SemiBold.woff
+++ b/packages/builder/assets/Inter-SemiBold.woff
--- a/packages/builder/assets/Inter-SemiBold.woff2
+++ b/packages/builder/assets/Inter-SemiBold.woff2
--- a/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff
+++ b/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff
--- a/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff2
+++ b/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff2
--- a/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff
+++ b/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff
--- a/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff2
+++ b/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff2
--- a/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff
+++ b/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff
--- a/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff2
+++ b/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff2
--- a/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff
+++ b/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff
--- a/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff2
+++ b/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff2
--- a/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff
+++ b/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff
--- a/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff2
+++ b/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff2
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -39,7 +39,7 @@
  },
  "dependencies": {
    "@beyonk/svelte-notifications": "^2.0.3",
-    "@budibase/bbui": "^1.8.0",
+    "@budibase/bbui": "^1.9.0",
    "@budibase/client": "^0.0.32",
    "@nx-js/compiler-util": "^2.0.0",
    "codemirror": "^5.51.0",
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@ -72,14 +72,14 @@
 }

 .budibase__nav-item:hover {
-    background: var(--grey-light);
+    background: var(--grey-1);
 }

 .budibase__input {
    height: 35px;
    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 +100,7 @@
 }

 .budibase__table {
-    border: 1px solid var(--grey-dark);
+    border: 1px solid var(--grey-4);
    background: #fff;
    border-radius: 2px;
 }
@ -116,12 +116,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;
--- 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;
  }

--- 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-7) !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>
--- 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>
--- 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;
--- 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 {
--- 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 = {}

--- a/packages/builder/src/components/common/Input.svelte
+++ b/packages/builder/src/components/common/Input.svelte
@ -37,7 +37,7 @@
    /* width: 32px; */
    height: 32px;
    font-size: 12px;
-    font-weight: 700;
+    font-weight: 500;
    margin: 0px 0px 0px 1px;
    color: var(--ink);
    opacity: 0.7;
@ -46,7 +46,7 @@
    /* padding: 12px; */
    width: 164px;
    box-sizing: border-box;
-    border: 1px solid var(--grey);
+    border: 1px solid var(--grey-2);
    border-radius: 2px;
    outline: none;
  }
--- 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>
--- 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 {
--- 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 {
--- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
@ -145,7 +145,7 @@
  }

  table {
-    border: 1px solid var(--grey-dark);
+    border: 1px solid var(--grey-4);
    background: #fff;
    border-radius: 3px;
    border-collapse: collapse;
@ -153,7 +153,7 @@

  thead {
    background: var(--blue-light);
-    border: 1px solid var(--grey-dark);
+    border: 1px solid var(--grey-4);
  }

  thead th {
@ -162,18 +162,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 {
--- 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>
--- 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>
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
@ -128,7 +128,7 @@
  }

  tbody > tr:hover {
-    background-color: var(--grey-light);
+    background-color: var(--grey-1);
  }

  .table-controls {
@ -154,7 +154,7 @@
  }

  footer {
-    background-color: var(--grey-light);
+    background-color: var(--grey-1);
    margin-top: 40px;
    padding: 20px 40px 20px 40px;
    display: flex;
--- 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;
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
@ -93,7 +93,7 @@
  }
  footer {
    padding: 20px;
-    background: #fafafa;
+    background: var(--grey-1);
    border-radius: 0.5rem;
  }
 </style>
--- 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;
  }
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
@ -59,7 +59,7 @@

  .title {
    font-size: 24px;
-    font-weight: 700;
+    font-weight: 600;
    color: var(--ink);
    margin-left: 12px;
  }
@ -74,7 +74,7 @@
    align-items: center;
    justify-content: flex-end;
    padding: 20px;
-    background: var(--grey-light);
+    background: var(--grey-1);
    border-radius: 0 0 5px 5px;
  }

--- a/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
@ -37,13 +37,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;
  }

--- 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);
  }
--- 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;
--- 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);
  }
--- 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;
--- 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;
  }
--- a/packages/builder/src/components/userInterface/CategoryTab.svelte
+++ b/packages/builder/src/components/userInterface/CategoryTab.svelte
@ -20,11 +20,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;
  }
--- 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>
--- 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>
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@ -89,7 +89,7 @@
    font-size: 24px;
    width: 20px;
    margin-top: 2px;
-    color: var(--ink-light);
+    color: var(--grey-7);
  }

  .icon:nth-of-type(2) {
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@ -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>
--- 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;
  }

--- 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) {
--- 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;
--- 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>
--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@ -32,9 +32,8 @@
    padding: 8px 2px;
    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;
@ -43,8 +42,8 @@
  }

  .selected {
-    background: var(--ink-light);
-    color: #ffffff;
+    background: var(--grey-3);
+    color: var(--ink);
  }

  i {
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@ -30,7 +30,7 @@
 <style>
  .newscreen {
    cursor: pointer;
-    border: 1px solid var(--grey-dark);
+    border: 1px solid var(--grey-4);
    border-radius: 3px;
    width: 100%;
    padding: 8px 16px;
@ -46,7 +46,7 @@
  }

  .newscreen:hover {
-    background: var(--grey-light);
+    background: var(--grey-1);
  }

  .icon {
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@ -24,12 +24,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;
  }
@ -51,6 +51,6 @@

  i {
    font-size: 24px;
-    color: var(--ink-light);
+    color: var(--grey-7);
  }
 </style>
--- 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;
--- 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 {
--- 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>
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@ -151,15 +151,14 @@
    cursor: pointer;
    display: flex;
    padding: 5px 10px;
-    background-color: #f2f2f2;
-    border-radius: 2px;
-    border: 1px solid var(--grey-dark);
+    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 +172,8 @@
  }

  .selected {
-    color: #565a66;
-    font-weight: 500;
+    color: var(--ink);
+    font-weight: 400;
  }

  .bb-select-menu {
@ -185,15 +184,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;
--- 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);
+    color: var(--grey-7);
  }

  :global(svg) {
--- 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>
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@ -46,19 +46,20 @@
    padding: 8px 16px;
    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>
--- 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;
--- 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 {
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@ -14,7 +14,7 @@ export const layout = [
    control: OptionSelect,
    initialValue: "",
    options: [
-      { label: "", value: "" },
+      { label: " ", value: " " },
      { label: "Flex", value: "flex" },
      { label: "Inline Flex", value: "inline-flex" },
    ],
@ -103,7 +103,6 @@ export const size = [
    key: "width",
    control: Input,
    placeholder: "px",
-    width: "48px",
    textAlign: "center",
  },
  {
@ -111,7 +110,6 @@ export const size = [
    key: "height",
    control: Input,
    placeholder: "px",
-    width: "48px",
    textAlign: "center",
  },
  {
@ -119,7 +117,6 @@ export const size = [
    key: "min-width",
    control: Input,
    placeholder: "px",
-    width: "48px",
    textAlign: "center",
  },
  {
@ -127,7 +124,6 @@ export const size = [
    key: "min-height",
    control: Input,
    placeholder: "px",
-    width: "48px",
    textAlign: "center",
  },
  {
@ -135,7 +131,6 @@ export const size = [
    key: "max-width",
    control: Input,
    placeholder: "px",
-    width: "48px",
    textAlign: "center",
  },
  {
@ -143,7 +138,6 @@ export const size = [
    key: "max-height",
    control: Input,
    placeholder: "px",
-    width: "48px",
    textAlign: "center",
  },
 ]
@ -167,7 +161,6 @@ export const position = [
    key: "top",
    control: Input,
    placeholder: "px",
-    width: "48px",
    textAlign: "center",
  },
  {
@ -175,7 +168,6 @@ export const position = [
    key: "right",
    control: Input,
    placeholder: "px",
-    width: "48px",
    textAlign: "center",
  },
  {
@ -183,7 +175,6 @@ export const position = [
    key: "bottom",
    control: Input,
    placeholder: "px",
-    width: "48px",
    textAlign: "center",
  },
  {
@ -191,7 +182,6 @@ export const position = [
    key: "left",
    control: Input,
    placeholder: "px",
-    width: "48px",
    textAlign: "center",
  },
  {
@ -199,7 +189,6 @@ export const position = [
    key: "z-index",
    control: Input,
    placeholder: "num",
-    width: "48px",
    textAlign: "center",
  },
 ]
@ -242,7 +231,6 @@ export const typography = [
    defaultValue: "",
    control: Input,
    placeholder: "px",
-    width: "48px",
    textAlign: "center",
  },
  {
@ -250,7 +238,6 @@ export const typography = [
    key: "line-height",
    control: Input,
    placeholder: "lh",
-    width: "48px",
    textAlign: "center",
  },
  {
--- a/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte
@ -42,7 +42,7 @@
 <style>
  header {
    font-size: 24px;
-    color: var(--font);
+    color: var(--ink);
    font-weight: bold;
    padding: 30px;
  }
@ -51,7 +51,7 @@
    margin-right: 10px;
    font-size: 20px;
    background: var(--secondary);
-    color: var(--dark-grey);
+    color: var(--grey-4);
    padding: 8px;
  }

@ -70,7 +70,7 @@
    grid-gap: 5px;
    grid-auto-columns: 3fr 1fr 1fr;
    padding: 20px;
-    background: #fafafa;
+    background: var(--grey-1);
    border-radius: 0.5rem;
  }

--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@ -160,7 +160,7 @@

  header {
    font-size: 20px;
-    font-weight: 700;
+    font-weight: 600;
    display: flex;
    align-items: center;
    margin-bottom: 18px;
@ -181,14 +181,14 @@
  .config-item {
    margin: 0px 0px 4px 0px;
    padding: 12px;
-    background: var(--light-grey);
+    background: var(--grey-1);
  }

  .budibase_input {
    height: 35px;
    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;
@ -196,7 +196,7 @@
  }

  header > span {
-    color: var(--ink-lighter);
+    color: var(--grey-5);
    margin-right: 20px;
  }

@ -241,7 +241,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;
@ -257,7 +257,7 @@
  }

  .workflow-button:hover {
-    background: var(--grey-light);
+    background: var(--grey-1);
  }

  .access-level {
--- a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
@ -67,7 +67,7 @@
 <style>
  .block-field {
    border-radius: 3px;
-    background: var(--grey-light);
+    background: var(--grey-1);
    padding: 12px;
    margin: 0px 0px 4px 0px;
  }
@ -76,7 +76,7 @@
    height: 35px;
    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;
--- 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>
--- 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 {
--- a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
@ -64,18 +64,18 @@
  .subtabs span {
    transition: 0.3s all;
    text-align: center;
-    color: var(--dark-grey);
+    color: var(--grey-7);
    font-weight: 500;
    padding: 10px;
  }

  .subtabs span.selected {
-    background: var(--dark-grey);
+    background: var(--grey-7);
    color: var(--white);
    border-radius: 2px;
  }

  .subtabs span:not(.selected) {
-    color: var(--dark-grey);
+    color: var(--grey-7);
  }
 </style>
--- a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
@ -16,7 +16,7 @@
 </script>

 <div class="workflow-block hoverable" on:click={addBlockToWorkflow}>
-  <div>
+  <div class="icon">
    <i class={blockDefinition.icon} />
  </div>
  <div class="workflow-text">
@ -27,19 +27,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 {
@ -50,7 +65,7 @@

  p {
    font-size: 12px;
-    color: var(--dark-grey);
+    color: var(--grey-7);
    margin: 0;
  }
 </style>
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
@ -42,7 +42,7 @@
 <style>
  header {
    font-size: 24px;
-    color: var(--font);
+    color: var(--ink);
    font-weight: bold;
    padding: 30px;
  }
@ -51,7 +51,7 @@
    margin-right: 10px;
    font-size: 20px;
    background: var(--secondary);
-    color: var(--dark-grey);
+    color: var(--grey-4);
    padding: 8px;
  }

@ -70,7 +70,7 @@
    grid-gap: 5px;
    grid-auto-columns: 3fr 1fr 1fr;
    padding: 20px;
-    background: #fafafa;
+    background: var(--grey-1);
    border-radius: 0.5rem;
  }

--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
@ -90,7 +90,7 @@

  .workflow-item:hover {
    cursor: pointer;
-    background: var(--grey-light);
+    background: var(--grey-1);
  }

  .workflow-item.selected {
@ -99,7 +99,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;
@ -114,7 +114,7 @@
  }

  .new-workflow-button:hover {
-    background: var(--grey-light);
+    background: var(--grey-1);
  }

  .icon {
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
@ -34,7 +34,7 @@
 <style>
  header {
    font-size: 18px;
-    font-weight: 700;
+    font-weight: 600;
    background: none;
    display: flex;
    align-items: center;
@ -46,7 +46,7 @@
  }

  span:not(.selected) {
-    color: var(--ink-lighter);
+    color: var(--grey-5);
  }

  span:not(.selected):hover {
--- 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 {
--- 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-family: 'Inter';
  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+ */
+  font-weight: 500;
+  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-500 - latin-ext_latin */
+/* Inter-600 - 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+ */
+  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('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-700 - latin-ext_latin */
+/* Inter-800 - latin-ext_latin */
@font-face {
-  font-family: 'Roboto';
+  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 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+ */
 }
-/* roboto-900 - latin-ext_latin */
+/* Inter-900 - latin-ext_latin */
@font-face {
-  font-family: 'Roboto';
+  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+ */
 }
  
--- 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;
-
-    --tertiary: #F2F5F7;
-
-    --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;
+    --font-black: "Inter Black";
+    --font-bold: "Inter Bold";
+    --fontsemibold: "Inter Medium";
+    --font-normal: "Inter";
+
+    --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;
+
+
 }

 html, body {
    display: grid;
-    font-family: var(--fontnormal);
-    color: var(--secondary80);
+    font-family: var(--font-normal);
+    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 {
--- 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"
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@ -49,7 +49,7 @@
          </span>
        {/each}
        <!-- <IconButton icon="home"
-                      color="var(--slate)"
+                      color="var(--grey-2)"
                      hoverColor="var(--secondary75)"/> -->
      </div>
      <div class="toprightnav">
@ -91,7 +91,7 @@

  a {
    text-transform: none;
-    color: var(--ink-lighter);
+    color: var(--grey-5);
  }

  .top-nav {
@ -103,7 +103,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 {
@ -122,18 +122,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;
  }

@ -144,7 +144,7 @@

  .topnavitemright {
    cursor: pointer;
-    color: var(--ink-light);
+    color: var(--grey-7);
    margin: 0px 20px 0px 0px;
    padding-top: 4px;
    font-weight: 500;
--- 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 {
--- a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte
@ -43,7 +43,7 @@
 {#if $backendUiStore.selectedDatabase._id && $backendUiStore.selectedModel.name}
  <ModelDataTable {selectRecord} />
 {:else}
-  <i style="color: var(--grey-dark)">
+  <i style="color: var(--grey-4)">
    create your first model to start building
  </i>
 {/if}
--- 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>
--- 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);
  }

--- a/packages/builder/src/pages/_layout.svelte
+++ b/packages/builder/src/pages/_layout.svelte
@ -63,7 +63,7 @@
    grid-template-columns: 300px 1fr;
    height: 100%;
    width: 100%;
-    background: var(--grey-light);
+    background: var(--grey-1);
  }

  .main {
@ -76,7 +76,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 +98,7 @@
  .nav-section-title {
    font-size: 20px;
    color: var(--ink);
-    font-weight: 700;
+    font-weight: 600;
    margin-bottom: 12px;
  }
 </style>
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@ -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>
--- a/packages/server/builder/assets/Inter-Black.woff
+++ b/packages/server/builder/assets/Inter-Black.woff
--- a/packages/server/builder/assets/Inter-Black.woff2
+++ b/packages/server/builder/assets/Inter-Black.woff2
--- a/packages/server/builder/assets/Inter-Bold.woff
+++ b/packages/server/builder/assets/Inter-Bold.woff
--- a/packages/server/builder/assets/Inter-Bold.woff2
+++ b/packages/server/builder/assets/Inter-Bold.woff2
--- a/packages/server/builder/assets/Inter-ExtraBold.woff
+++ b/packages/server/builder/assets/Inter-ExtraBold.woff
--- a/packages/server/builder/assets/Inter-ExtraBold.woff2
+++ b/packages/server/builder/assets/Inter-ExtraBold.woff2
--- a/packages/server/builder/assets/Inter-Medium.woff
+++ b/packages/server/builder/assets/Inter-Medium.woff
--- a/packages/server/builder/assets/Inter-Medium.woff2
+++ b/packages/server/builder/assets/Inter-Medium.woff2
--- a/packages/server/builder/assets/Inter-Regular.woff
+++ b/packages/server/builder/assets/Inter-Regular.woff