diff --git a/packages/bbui/src/Styleguide/Body.svelte b/packages/bbui/src/Styleguide/Body.svelte
deleted file mode 100644
index 6fc583bc91..0000000000
--- a/packages/bbui/src/Styleguide/Body.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script>
-  export let extraSmall = false,
-    small = false,
-    medium = false,
-    large = false,
-    extraLarge = false,
-    white = false,
-    grey = false,
-    black = false,
-    lh = false
-</script>
-
-<p
-  class="bb-body"
-  class:extraSmall
-  class:small
-  class:medium
-  class:large
-  class:extraLarge
-  class:white
-  class:grey
-  class:black
-  class:lh>
-  <slot />
-</p>
-
-<style>
-  .bb-body {
-    font-family: var(--font-sans);
-    font-weight: 400;
-    text-rendering: var(--text-render);
-    color: var(--ink);
-    font-size: var(--font-size-m);
-    line-height: 0;
-  }
-
-  .extraSmall {
-    font-size: var(--font-size-xs);
-  }
-
-  .small {
-    font-size: var(--font-size-s);
-  }
-
-  .medium {
-    font-size: var(--font-size-m);
-  }
-
-  .large {
-    font-size: var(--font-size-l);
-  }
-
-  .extraLarge {
-    font-size: var(--font-size-xl);
-  }
-
-  .white {
-    color: white;
-  }
-
-  .grey {
-    color: var(--grey-6);
-  }
-
-  .black {
-    color: var(--ink);
-  }
-
-  .lh {
-    line-height: 1.75;
-  }
-</style>
diff --git a/packages/bbui/src/Styleguide/Borders.svench b/packages/bbui/src/Styleguide/Borders.svench
deleted file mode 100644
index 8e2c1f6dab..0000000000
--- a/packages/bbui/src/Styleguide/Borders.svench
+++ /dev/null
@@ -1,175 +0,0 @@
-<script>
-  import { View } from "svench";
-</script>
-
-<h1>Borders</h1>
-<p>Budibase has 2 border variables, light and dark.</p>
-<p><strong>Light</strong> is for layouts.</p>
-<p><strong>Dark</strong> is for components.</p>
-<code>border: var(--border-light);</code>
-<div class="border-light"></div>
-<code>border: var(--border-dark);</code>
-<div class="border-dark"></div>
-
-<hr>
-
-<h2>Border Radius</h2>
-<p>Budibase has 5 border-radius variables:</p>
-
-<table>
-  <tr>
-    <th>Name</th>
-    <th>Var</th>
-    <th>rem</th>
-    <th>px</th>
-    <th>Visual</th>
-  </tr>
-  <tr>
-    <td>Extra Small</td>
-    <td>var(--border-radius-xs)</td>
-    <td>0.125</td>
-    <td>2</td>
-    <td><div class="border-radius-xs">Extra small</div></td>
-  </tr>
-  <tr>
-    <td>Small</td>
-    <td>var(--border-radius-s)</td>
-    <td>0.35</td>
-    <td>5.6px</td>
-    <td><div class="border-radius-s">Small</div></td>
-  </tr>
-  <tr>
-    <td>Medium</td>
-    <td>var(--border-radius-m)</td>
-    <td>0.5</td>
-    <td>8</td>
-    <td><div class="border-radius-m">Medium</div></td>
-  </tr>
-  <tr>
-    <td>Large</td>
-    <td>var(--border-radius-l)</td>
-    <td>1</td>
-    <td>16</td>
-    <td><div class="border-radius-l">Large</div></td>
-  </tr>
-  <tr>
-    <td>Extra Large</td>
-    <td>var(--border-radius-xl)</td>
-    <td>100</td>
-    <td>1600</td>
-    <td><div class="border-radius-xl">Extra large</div></td>
-  </tr>
-</table>
-
-<style>
-
-table {
-  font-family: var(--font-sans);
-  border-collapse: collapse;
-  width: 100%;
-}
-
-code {
-    display: inline-block;
-    box-sizing: border-box;
-    padding: var(--spacing-s) var(--spacing-l);
-    margin: var(--spacing-xl) 0 var(--spacing-s) 0;
-    background-color: var(--grey-2);
-    color: var(--red-dark);
-    border-radius: var(--spacing-xs);
-}
-
-td, th {
-  border: 1px solid var(--grey-4);
-  text-align: left;
-  padding: var(--spacing-m);
-  width: 20%;
-}
-
-tr:nth-child(even) {
-  background-color: var(--grey-3);
-}
-
-hr {
-    margin: var(--layout-xl) 0px;
-}
-
-.border-light {
-    width: 40rem;
-    height: 10rem;
-    background-color: white;
-    border: var(--border-light);
-}
-
-.border-dark {
-    width: 40rem;
-    height: 10rem;
-    background-color: white;
-    border: var(--border-dark);
-}
-
-.border-radius-xs {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-family: var(--font-sans);
-    width: 8rem;
-    height: 3rem;
-    background-color: black;
-    border-radius: var(--border-radius-xs);
-    margin-right: var(--spacing-l);
-}
-
-.border-radius-s {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-family: var(--font-sans);
-    width: 8rem;
-    height: 3rem;
-    background-color: black;
-    border-radius: var(--border-radius-s);
-    margin-right: var(--spacing-l);
-}
-
-.border-radius-m {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-family: var(--font-sans);
-    width: 8rem;
-    height: 3rem;
-    background-color: black;
-    border-radius: var(--border-radius-m);
-    margin-right: var(--spacing-l);
-}
-
-.border-radius-l {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-family: var(--font-sans);
-    width: 8rem;
-    height: 3rem;
-    background-color: black;
-    border-radius: var(--border-radius-l);
-    margin-right: var(--spacing-l);
-}
-
-.border-radius-xl {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-family: var(--font-sans);
-    width: 8rem;
-    height: 3rem;
-    background-color: black;
-    border-radius: var(--border-radius-xl);
-    margin-right: var(--spacing-l);
-}
-</style>
diff --git a/packages/bbui/src/Styleguide/Budibase-logo.svelte b/packages/bbui/src/Styleguide/Budibase-logo.svelte
deleted file mode 100644
index b8dbde3ac0..0000000000
--- a/packages/bbui/src/Styleguide/Budibase-logo.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<svg
-  version="1.1"
-  id="Layer_1"
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  x="0px"
-  y="0px"
-  viewBox="0 0 115 40"
-  style="enable-background:new 0 0 115 40;"
-  xml:space="preserve">
-  <path
-    class="st0"
-    d="M111.16,40H3.91c-2.15,0-3.89-1.74-3.89-3.89V4.04c0-2.15,1.74-3.89,3.89-3.89h107.25
-    c2.15,0,3.89,1.74,3.89,3.89v32.07C115.05,38.26,113.31,40,111.16,40z" />
-  <path
-    class="st1"
-    d="M10.37,10.03v8.57c0.93-1.26,2.33-1.67,3.61-1.67c1.58,0,3.01,0.59,4.02,1.54c1.12,1.05,1.82,2.62,1.82,4.53
-    c0,1.78-0.62,3.42-1.82,4.61c-1.01,1.03-2.26,1.57-3.97,1.57c-2.05,0-3.09-0.95-3.66-1.78v1.39H6.63V10.03H10.37z
-    M10.97,20.98
-    c-0.44,0.46-0.82,1.13-0.82,2.11c0,0.95,0.41,1.64,0.85,2.05c0.59,0.57,1.41,0.85,2.11,0.85c0.64,0,1.36-0.26,1.93-0.8
-    c0.54-0.51,0.9-1.26,0.9-2.11c0-0.92-0.36-1.67-0.9-2.18c-0.59-0.57-1.23-0.77-1.98-0.77C12.26,20.14,11.56,20.37,10.97,20.98z" />
-  <path
-    class="st1"
-    d="M25.08,17.35v6.32c0,0.51,0.05,1.31,0.64,1.85c0.26,0.23,0.72,0.54,1.54,0.54c0.69,0,1.23-0.23,1.56-0.54
-    c0.54-0.51,0.62-1.28,0.62-1.85v-6.32h3.74v6.68c0,1.31-0.13,2.54-1.28,3.67c-1.31,1.28-3.23,1.49-4.59,1.49
-    c-1.41,0-3.31-0.21-4.62-1.49c-1.05-1.03-1.26-2.18-1.26-3.44v-6.91H25.08z" />
-  <path
-    class="st1"
-    d="M47.88,28.79h-3.74V27.4c-0.57,0.82-1.61,1.78-3.66,1.78c-1.71,0-2.96-0.54-3.97-1.57
-    c-1.19-1.18-1.82-2.83-1.82-4.61c0-1.9,0.7-3.47,1.82-4.53c1.01-0.95,2.44-1.54,4.02-1.54c1.27,0,2.67,0.41,3.61,1.67v-8.57h3.74
-    V28.79z
-    M39.53,20.91c-0.54,0.51-0.9,1.26-0.9,2.18c0,0.85,0.36,1.59,0.9,2.11c0.57,0.54,1.28,0.8,1.93,0.8
-    c0.69,0,1.52-0.28,2.11-0.85c0.44-0.41,0.85-1.1,0.85-2.05c0-0.98-0.39-1.64-0.82-2.11c-0.59-0.62-1.28-0.85-2.08-0.85
-    C40.77,20.14,40.12,20.34,39.53,20.91z" />
-  <path
-    class="st1"
-    d="M52.32,10.3c1.21,0,2.16,0.95,2.16,2.16c0,1.21-0.95,2.16-2.16,2.16c-1.21,0-2.16-0.95-2.16-2.16
-    C50.17,11.25,51.12,10.3,52.32,10.3z M54.19,17.35v11.44h-3.74V17.35H54.19z" />
-  <path
-    class="st1"
-    d="M60.49,10.03v8.57c0.93-1.26,2.33-1.67,3.61-1.67c1.58,0,3.01,0.59,4.02,1.54c1.12,1.05,1.82,2.62,1.82,4.53
-    c0,1.78-0.62,3.42-1.82,4.61c-1.01,1.03-2.26,1.57-3.97,1.57c-2.05,0-3.09-0.95-3.66-1.78v1.39h-3.74V10.03H60.49z
-    M61.06,20.98
-    c-0.44,0.46-0.82,1.13-0.82,2.11c0,0.95,0.41,1.64,0.85,2.05c0.59,0.57,1.41,0.85,2.11,0.85c0.64,0,1.36-0.26,1.93-0.8
-    c0.54-0.51,0.9-1.26,0.9-2.11c0-0.92-0.36-1.67-0.9-2.18c-0.59-0.57-1.23-0.77-1.98-0.77C62.34,20.14,61.65,20.37,61.06,20.98z" />
-  <path
-    class="st1"
-    d="M80.26,17.35H84v11.44h-3.74v-1.39c-1.01,1.54-2.46,1.77-3.42,1.77c-1.66,0-3.06-0.41-4.33-1.74
-    c-1.22-1.28-1.69-2.77-1.69-4.28c0-1.92,0.73-3.57,1.79-4.62c1.01-1,2.41-1.56,4.02-1.56c0.99,0,2.57,0.23,3.63,1.67V17.35z
-    M75.57,20.96c-0.39,0.39-0.85,1.05-0.85,2.08c0,1.03,0.44,1.7,0.77,2.05c0.51,0.54,1.31,0.9,2.18,0.9c0.74,0,1.44-0.31,1.93-0.8
-    c0.49-0.46,0.9-1.18,0.9-2.16c0-0.82-0.31-1.59-0.85-2.11c-0.57-0.54-1.39-0.8-2.05-0.8C76.8,20.14,76.06,20.47,75.57,20.96z" />
-  <path
-    class="st1"
-    d="M93.21,20.26c-0.57-0.33-1.31-0.64-2.03-0.64c-0.39,0-0.82,0.1-1.05,0.33c-0.13,0.13-0.23,0.33-0.23,0.51
-    c0,0.26,0.18,0.41,0.36,0.51c0.26,0.15,0.64,0.23,1.1,0.39l0.98,0.31c0.64,0.21,1.31,0.46,1.9,1c0.67,0.62,0.9,1.31,0.9,2.18
-    c0,1.52-0.67,2.49-1.18,3.01c-1.13,1.13-2.52,1.31-3.72,1.31c-1.54,0-3.21-0.33-4.7-1.64l1.57-2.49c0.36,0.31,0.87,0.67,1.26,0.85
-    c0.51,0.26,1.05,0.36,1.54,0.36c0.23,0,0.82,0,1.16-0.26c0.23-0.18,0.39-0.46,0.39-0.74c0-0.21-0.08-0.46-0.41-0.67
-    c-0.26-0.15-0.59-0.26-1.13-0.41l-0.92-0.28c-0.67-0.21-1.36-0.57-1.85-1.05c-0.54-0.57-0.82-1.21-0.82-2.08
-    c0-1.1,0.44-2.03,1.1-2.65c1.03-0.95,2.41-1.16,3.47-1.16c1.7,0,2.88,0.44,3.8,0.98L93.21,20.26z" />
-  <path
-    class="st1"
-    d="M108.43,23.73h-8.55c0,0.62,0.23,1.44,0.69,1.95c0.57,0.62,1.34,0.72,1.9,0.72c0.54,0,1.1-0.1,1.49-0.33
-    c0.05-0.03,0.49-0.31,0.8-0.95l3.49,0.36c-0.51,1.62-1.54,2.47-2.21,2.88c-1.1,0.67-2.34,0.85-3.62,0.85
-    c-1.72,0-3.24-0.31-4.57-1.64c-1-1-1.72-2.52-1.72-4.42c0-1.64,0.59-3.34,1.75-4.52c1.39-1.39,3.11-1.64,4.39-1.64
-    c1.28,0,3.13,0.23,4.55,1.72c1.36,1.44,1.62,3.24,1.62,4.65V23.73z
-    M105.03,21.48c-0.03-0.1-0.21-0.82-0.74-1.34
-    c-0.41-0.39-1-0.64-1.75-0.64c-0.95,0-1.52,0.39-1.87,0.74c-0.28,0.31-0.54,0.72-0.64,1.23H105.03z" />
-</svg>
diff --git a/packages/bbui/src/Styleguide/Color.svench b/packages/bbui/src/Styleguide/Color.svench
deleted file mode 100644
index 0c29669a4c..0000000000
--- a/packages/bbui/src/Styleguide/Color.svench
+++ /dev/null
@@ -1,201 +0,0 @@
-<script>
-  import { View } from "svench";
-</script>
-
-<View name="Base">
-  <div class="white">white</div>
-  <div class="grey1">var(--grey-1)</div>
-  <div class="grey2">var(--grey-2)</div>
-  <div class="grey3">var(--grey-3)</div>
-  <div class="grey4">var(--grey-4)</div>
-  <div class="grey5">var(--grey-5)</div>
-  <div class="grey6">var(--grey-6)</div>
-  <div class="grey7">var(--grey-7)</div>
-  <div class="grey8">var(--grey-8)</div>
-  <div class="grey9">var(--grey-9)</div>
-  <div class="ink">var(--ink)</div>
-</View>
-
-<View name="Blue">
-  <div class="blue-light">var(--blue-light)</div>
-  <div class="blue">var(--blue)</div>
-  <div class="blue-dark">var(--blue-dark)</div>
-</View>
-
-<View name="Yellow">
-  <div class="yellow-light">var(--yellow-light)</div>
-  <div class="yellow">var(--yellow)</div>
-  <div class="yellow-dark">var(--yellow-dark)</div>
-</View>
-
-<View name="Red">
-  <div class="red-light">var(--red-light)</div>
-  <div class="red">var(--red)</div>
-  <div class="red-dark">var(--red-dark)</div>
-</View>
-
-<View name="Orange">
-  <div class="orange-light">var(--orange-light)</div>
-  <div class="orange">var(--orange)</div>
-  <div class="orange-dark">var(--orange-dark)</div>
-</View>
-
-<View name="Green">
-  <div class="green-light">var(--green-light)</div>
-  <div class="green">var(--green)</div>
-  <div class="green-dark">var(--green-dark)</div>
-</View>
-
-<View name="Purple">
-  <div class="purple-light">var(--purple-light)</div>
-  <div class="purple">var(--purple)</div>
-  <div class="purple-dark">var(--purple-dark)</div>
-</View>
-
-<style>
-div {
-  height: 100px;
-  width: 800px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--font-sans);
-}
-
-.white {
- background-color: white;
-}
-
-.grey1 {
-  background-color: var(--grey-1);
-}
-
-.grey1 {
-  background-color: var(--grey-1);
-}
-
-.grey2 {
-  background-color: var(--grey-2);
-}
-
-.grey3 {
-  background-color: var(--grey-3);
-}
-
-.grey4 {
-  background-color: var(--grey-4);
-}
-
-.grey5 {
-  background-color: var(--grey-5);
-}
-
-.grey6 {
-  background-color: var(--grey-6);
-}
-
-.grey7 {
-  background-color: var(--grey-7);
-  color: white;
-}
-
-.grey8 {
-  background-color: var(--grey-8);
-  color: white;
-}
-
-.grey9 {
-  background-color: var(--grey-9);
-  color: white;
-}
-
-.ink {
-  background-color: var(--ink);
-  color: white;
-}
-
-.blue {
-  background-color: var(--blue);
-  color: white;
-}
-
-.blue-light {
-  background-color: var(--blue-light);
-}
-
-.blue-dark {
-  background-color: var(--blue-dark);
-  color: white;
-}
-
-.yellow {
-  background-color: var(--yellow);
-  color: white;
-}
-
-.yellow-light {
-  background-color: var(--yellow-light);
-}
-
-.yellow-dark {
-  background-color: var(--yellow-dark);
-  color: white;
-}
-
-.red {
-  background-color: var(--red);
-  color: white;
-}
-
-.red-light {
-  background-color: var(--red-light);
-}
-
-.red-dark {
-  background-color: var(--red-dark);
-  color: white;
-}
-
-.orange {
-  background-color: var(--orange);
-  color: white;
-}
-
-.orange-light {
-  background-color: var(--orange-light);
-}
-
-.orange-dark {
-  background-color: var(--orange-dark);
-  color: white;
-}
-
-.green {
-  background-color: var(--green);
-  color: white;
-}
-
-.green-light {
-  background-color: var(--green-light);
-}
-
-.green-dark {
-  background-color: var(--green-dark);
-  color: white;
-}
-
-.purple {
-  background-color: var(--purple);
-  color: white;
-}
-
-.purple-light {
-  background-color: var(--purple-light);
-}
-
-.purple-dark {
-  background-color: var(--purple-dark);
-  color: white;
-}
-
-</style>
diff --git a/packages/bbui/src/Styleguide/Heading.svelte b/packages/bbui/src/Styleguide/Heading.svelte
deleted file mode 100644
index d08f1389d8..0000000000
--- a/packages/bbui/src/Styleguide/Heading.svelte
+++ /dev/null
@@ -1,74 +0,0 @@
-<script>
-  export let extraSmall = false,
-    small = false,
-    medium = false,
-    large = false,
-    extraLarge = false,
-    white = false,
-    grey = false,
-    black = false,
-    lh = false
-</script>
-
-<h1
-  class="bb-heading"
-  class:extraSmall
-  class:small
-  class:medium
-  class:large
-  class:extraLarge
-  class:white
-  class:grey
-  class:black
-  class:lh>
-  <slot />
-</h1>
-
-<style>
-  .bb-heading {
-    font-family: var(--font-sans);
-    font-weight: 600;
-    text-rendering: var(--text-render);
-    color: var(--ink);
-    font-size: var(--heading-font-size-m);
-    line-height: 0;
-  }
-
-  .extraSmall {
-    font-size: var(--heading-font-size-xs);
-  }
-
-  .small {
-    font-size: var(--heading-font-size-s);
-  }
-
-  .medium {
-    font-size: var(--heading-font-size-m);
-  }
-
-  .large {
-    font-size: var(--heading-font-size-l);
-    font-weight: 700;
-  }
-
-  .extraLarge {
-    font-size: var(--heading-font-size-xl);
-    font-weight: 700;
-  }
-
-  .white {
-    color: white;
-  }
-
-  .grey {
-    color: var(--grey-6);
-  }
-
-  .black {
-    color: var(--ink);
-  }
-
-  .lh {
-    line-height: 1.3;
-  }
-</style>
diff --git a/packages/bbui/src/Styleguide/Label.svelte b/packages/bbui/src/Styleguide/Label.svelte
deleted file mode 100644
index 5ca8b52672..0000000000
--- a/packages/bbui/src/Styleguide/Label.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-  import "@spectrum-css/fieldlabel/dist/index-vars.css"
-</script>
-
-<label
-  class={`spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-Form-itemLabel`}>
-  <slot />
-</label>
-
-<style>
-  label {
-    white-space: nowrap;
-  }
-</style>
diff --git a/packages/bbui/src/Styleguide/Logo.svelte b/packages/bbui/src/Styleguide/Logo.svelte
deleted file mode 100644
index 6164fe11eb..0000000000
--- a/packages/bbui/src/Styleguide/Logo.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-  import BudibaseLogo from "./Budibase-logo.svelte"
-</script>
-
-<div class="home-logo">
-  <BudibaseLogo />
-</div>
-
-<style>
-  .home-logo {
-    cursor: pointer;
-    height: 40px;
-    width: 100px;
-    margin-bottom: 20px;
-  }
-</style>
diff --git a/packages/bbui/src/Styleguide/Logo.svench b/packages/bbui/src/Styleguide/Logo.svench
deleted file mode 100644
index f71bf9f262..0000000000
--- a/packages/bbui/src/Styleguide/Logo.svench
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Logo from "./Logo.svelte";
-</script>
-
-<View name="default">
-  <Logo />
-</View>
diff --git a/packages/bbui/src/Styleguide/Spacing.svench b/packages/bbui/src/Styleguide/Spacing.svench
deleted file mode 100644
index ca727da18e..0000000000
--- a/packages/bbui/src/Styleguide/Spacing.svench
+++ /dev/null
@@ -1,191 +0,0 @@
-<script>
-  import { View } from "svench";
-</script>
-
-<h1>2 Scales, 1 Spatial System</h1>
-<p>Budibase has 2 scales, spacing and layout, and follows a 4pt grid system.</p>
-<p><strong>Spacing</strong> is used for smaller, more refined spacing needs, specifically within the context of a component.</p>
-<p><strong>Layout</strong> is used for laying out your page and positing components within that page.</p>
-<p>Spacing and layout will mostly exist alongside margin and padding.</p>
-<p><code>margin: var(--spacing-s);</code></p>
-<code>padding: var(--spacing-s) var(--spacing-l);</code>
-
-<hr>
-
-<h2>Spacing</h2>
-
-<table>
-  <tr>
-    <th>Var</th>
-    <th>rem</th>
-    <th>px</th>
-    <th>Visual</th>
-  </tr>
-  <tr>
-    <td>var(--spacing-xs)</td>
-    <td>0.25</td>
-    <td>4</td>
-    <td><div class="xs"></div></td>
-  </tr>
-  <tr>
-    <td>var(--spacing-s)</td>
-    <td>0.5</td>
-    <td>8</td>
-    <td><div class="s"></div></td>
-  </tr>
-  <tr>
-    <td>var(--spacing-m)</td>
-    <td>.75</td>
-    <td>12</td>
-    <td><div class="m"></div></td>
-  </tr>
-  <tr>
-    <td>var(--spacing-l)</td>
-    <td>1</td>
-    <td>16</td>
-    <td><div class="l"></div></td>
-  </tr>
-  <tr>
-    <td>var(--spacing-xl)</td>
-    <td>1.25</td>
-    <td>20</td>
-    <td><div class="xl"></div></td>
-  </tr>
-</table>
-
-<hr>
-
-<h2>Layout</h2>
-
-<table>
-  <tr>
-    <th>Var</th>
-    <th>rem</th>
-    <th>px</th>
-    <th>Visual</th>
-  </tr>
-  <tr>
-    <td>var(--layout-xs)</td>
-    <td>1.25</td>
-    <td>20</td>
-    <td><div class="layout-xs"></div></td>
-  </tr>
-  <tr>
-    <td>var(--layout-s)</td>
-    <td>1.5</td>
-    <td>24</td>
-    <td><div class="layout-s"></div></td>
-  </tr>
-  <tr>
-    <td>var(--layout-m)</td>
-    <td>2</td>
-    <td>32</td>
-    <td><div class="layout-m"></div></td>
-  </tr>
-  <tr>
-    <td>var(--layout-l)</td>
-    <td>3</td>
-    <td>48</td>
-    <td><div class="layout-l"></div></td>
-  </tr>
-  <tr>
-    <td>var(--layout-xl)</td>
-    <td>4</td>
-    <td>64</td>
-    <td><div class="layout-xl"></div></td>
-  </tr>
-</table>
-
-<style>
-
-table {
-  font-family: var(--font-sans);
-  border-collapse: collapse;
-  width: 100%;
-}
-
-code {
-    display: inline-block;
-    box-sizing: border-box;
-    padding: var(--spacing-s) var(--spacing-l);
-    margin: var(--spacing-s) 0;
-    background-color: var(--grey-2);
-    color: var(--red-dark);
-    border-radius: var(--spacing-xs);
-}
-
-td, th {
-  border: 1px solid var(--grey-4);
-  text-align: left;
-  padding: var(--spacing-m);
-  width: 25%;
-}
-
-tr:nth-child(even) {
-  background-color: var(--grey-3);
-}
-
-hr {
-    margin: var(--layout-xl) 0px;
-}
-
-.xs {
-    height: var(--spacing-xs);
-    width:  var(--spacing-xs);
-    background-color: var(--purple);
-}
-
-.s {
-    height: var(--spacing-s);
-    width:  var(--spacing-s);
-    background-color: var(--purple);
-}
-
-.m {
-    height: var(--spacing-m);
-    width:  var(--spacing-m);
-    background-color: var(--purple);
-}
-
-.l {
-    height: var(--spacing-l);
-    width:  var(--spacing-l);
-    background-color: var(--purple);
-}
-
-.xl {
-    height: var(--spacing-xl);
-    width:  var(--spacing-xl);
-    background-color: var(--purple);
-}
-
-.layout-xs {
-    height: var(--layout-xs);
-    width:  var(--layout-xs);
-    background-color: var(--blue);
-}
-
-.layout-s {
-    height: var(--layout-s);
-    width:  var(--layout-s);
-    background-color: var(--blue);
-}
-
-.layout-m {
-    height: var(--layout-m);
-    width:  var(--layout-m);
-    background-color: var(--blue);
-}
-
-.layout-l {
-    height: var(--layout-l);
-    width:  var(--layout-l);
-    background-color: var(--blue);
-}
-
-.layout-xl {
-    height: var(--layout-xl);
-    width:  var(--layout-xl);
-    background-color: var(--blue);
-}
-</style>
\ No newline at end of file
diff --git a/packages/bbui/src/Styleguide/Typography.svench b/packages/bbui/src/Styleguide/Typography.svench
deleted file mode 100644
index dfab94eb84..0000000000
--- a/packages/bbui/src/Styleguide/Typography.svench
+++ /dev/null
@@ -1,227 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Heading from "./Heading.svelte";
-  import Body from "./Body.svelte";
-  import Label from "./Label.svelte";
-
-  const username = "bbuserexample";
-</script>
-
-<style>
-  .typography-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .typography-column {
-    padding: var(--spacing-l);
-  }
-
-  .typography-column--grey {
-    background-color: var(--grey-5);
-  }
-
-  .label-wrapper {
-    padding: var(--spacing-m);
-  }
-</style>
-
-<h1 class="bb-heading bb-heading--large bb-heading--heavy">Typography</h1>
-<p>
-  Budibase uses Inter as its typeface and three types can be used,
-  <strong>heading</strong>
-  ,
-  <strong>body</strong>
-  and
-  <strong>label</strong>
-</p>
-<p>Each type has 5 sizes, xs, s, m l and xl.</p>
-<p>Each type is available in the colors white, grey or black.</p>
-
-<View name="Heading">
-  <div class="typography-container">
-    <div class="typography-column">
-      <Heading extraLarge black>Heading Extra Large Black</Heading>
-
-      <Heading large black>Heading Large Black</Heading>
-
-      <Heading medium black>Heading Medium Black</Heading>
-
-      <Heading small black>Heading Small Black</Heading>
-
-      <Heading extraSmall black>Heading Extra Small Black</Heading>
-    </div>
-
-    <div class="typography-column">
-      <Heading extraLarge grey>Heading Extra Large Grey</Heading>
-
-      <Heading large grey>Heading Large Grey</Heading>
-
-      <Heading medium grey>Heading Medium Grey</Heading>
-
-      <Heading small grey>Heading Small Grey</Heading>
-
-      <Heading extraSmall grey>Heading Extra Small Grey</Heading>
-    </div>
-
-    <div class="typography-column typography-column--grey">
-      <Heading extraLarge white>Heading Extra Large White</Heading>
-
-      <Heading large white>Heading Large White</Heading>
-
-      <Heading medium white>Heading Medium White</Heading>
-
-      <Heading small white>Heading Small White</Heading>
-
-      <Heading extraSmall white>Heading Extra Small White</Heading>
-    </div>
-
-    <div class="typography-column">
-      <Heading extraLarge black lh>Heading Extra Large Black Line Height</Heading>
-
-      <Heading large black lh>Heading Large Black Line Height</Heading>
-
-      <Heading medium black lh>Heading Medium Black Line Height</Heading>
-
-      <Heading small black lh>Heading Small Black Line Height</Heading>
-
-      <Heading extraSmall black lh>Heading Extra Small Black Line Height</Heading>
-    </div>
-  </div>
-</View>
-
-<View name="Body">
-  <div class="typography-container">
-    <div class="typography-column">
-      <Body extraLarge black>Body Extra Large Black</Body>
-
-      <Body large black>Body Large Black</Body>
-
-      <Body medium black>Body Medium Black</Body>
-
-      <Body small black>Body Small Black</Body>
-
-      <Body extraSmall black>Body Extra Small Black</Body>
-    </div>
-
-    <div class="typography-column">
-      <Body extraLarge lh black>Body Extra Large Black Line-height</Body>
-
-      <Body large lh black>Body Large Black Line-height</Body>
-
-      <Body medium lh black>Body Medium Black Line-height</Body>
-
-      <Body small lh black>Body Small Black Line-height</Body>
-
-      <Body extraSmall lh black>Body Extra Small Black Line-height</Body>
-    </div>
-
-    <div class="typography-column">
-      <Body extraLarge grey>Body Extra Large Grey</Body>
-
-      <Body large grey>Body Large Grey</Body>
-
-      <Body medium grey>Body Medium Grey</Body>
-
-      <Body small grey>Body Small Grey</Body>
-
-      <Body extraSmall grey>Body Extra Small Grey</Body>
-    </div>
-
-    <div class="typography-column typography-column--grey">
-      <Body extraLarge white>Body Extra Large White</Body>
-
-      <Body large white>Body Large White</Body>
-
-      <Body medium white>Body Medium White</Body>
-
-      <Body small white>Body Small White</Body>
-
-      <Body extraSmall white>Body Extra Small White</Body>
-    </div>
-  </div>
-</View>
-
-<View name="Label">
-  <div class="typography-container">
-    <div class="label-wrapper">
-      <Label extraLarge black forAttr={username}>Label Extra Large Black</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label large black forAttr={username}>Label Large Black</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label medium black forAttr={username}>Label Medium Black</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label small black forAttr={username}>Label Small Black</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label extraSmall black forAttr={username}>Label Extra Small Black</Label>
-      <input type="text" />
-    </div>
-  </div>
-
-  <div class="typography-container">
-    <div class="label-wrapper">
-      <Label extraLarge grey forAttr={username}>Label Extra Large Grey</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label large grey forAttr={username}>Label Large Grey</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label medium grey forAttr={username}>Label Medium Grey</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label small grey forAttr={username}>Label Small Grey</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label extraSmall grey forAttr={username}>Label Extra Small Grey</Label>
-      <input type="text" />
-    </div>
-  </div>
-
-  <div class="typography-container typography-column--grey">
-    <div class="label-wrapper">
-      <Label extraLarge white forAttr={username}>Label Extra Large White</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label large white forAttr={username}>Label Large White</Label>
-
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label medium white forAttr={username}>Label Medium White</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label small white forAttr={username}>Label Small White</Label>
-      <input type="text" />
-    </div>
-
-    <div class="label-wrapper">
-      <Label extraSmall white forAttr={username}>Label Extra Small White</Label>
-      <input type="text" />
-    </div>
-  </div>
-</View>