diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index da42b72fcd..d5676edf5e 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -58,6 +58,7 @@
     "@spectrum-css/popover": "^3.0.1",
     "@spectrum-css/table": "^3.0.1",
     "@spectrum-css/toast": "^3.0.1",
+    "@spectrum-css/typography": "^3.0.1",
     "@spectrum-css/underlay": "^2.0.9",
     "@spectrum-css/vars": "^3.0.1",
     "dayjs": "^1.10.4",
diff --git a/packages/bbui/src/Typography/Body.svelte b/packages/bbui/src/Typography/Body.svelte
index e69de29bb2..12a7b8b99c 100644
--- a/packages/bbui/src/Typography/Body.svelte
+++ b/packages/bbui/src/Typography/Body.svelte
@@ -0,0 +1,29 @@
+<script>
+    import "@spectrum-css/typography/dist/index-vars.css"
+
+    // Sizes
+    export let xxxl = false;
+    export let xxl = false;
+    export let xl = false;
+    export let l = false;
+    export let m = false;
+    export let s = false;
+    export let xs = false;
+    export let xxs = false;
+
+    export let serif = false;
+
+</script>
+
+<p class="spectrum-Body"
+    class:spectrum-Body--serif={serif}
+    class:spectrum-Body--sizeXXXL={xxxl}
+    class:spectrum-Body--sizeXXL={xxl}
+    class:spectrum-Body--sizeXL={xl}
+    class:spectrum-Body--sizeL={l}
+    class:spectrum-Body--sizeM={m}
+    class:spectrum-Body--sizeS={s}
+    class:spectrum-Body--sizeXS={xs}
+    class:spectrum-Body--sizeXXS={xxs}>
+    <slot />
+</p>
\ No newline at end of file
diff --git a/packages/bbui/src/Typography/Code.svelte b/packages/bbui/src/Typography/Code.svelte
index e69de29bb2..1aada8b687 100644
--- a/packages/bbui/src/Typography/Code.svelte
+++ b/packages/bbui/src/Typography/Code.svelte
@@ -0,0 +1,20 @@
+<script>
+    import "@spectrum-css/typography/dist/index-vars.css"
+
+    // Sizes
+    export let xl = false;
+    export let l = false;
+    export let m = false;
+    export let s = false;
+    export let xs = false;
+
+</script>
+
+<code class="spectrum-Code"
+    class:spectrum-Code--sizeXL={xl}
+    class:spectrum-Code--sizeL={l}
+    class:spectrum-Code--sizeM={m}
+    class:spectrum-Code--sizeS={s}
+    class:spectrum-Code--sizeXS={xs}>
+    <slot />
+</code>
\ No newline at end of file
diff --git a/packages/bbui/src/Typography/Detail.svelte b/packages/bbui/src/Typography/Detail.svelte
index e69de29bb2..b1eec70e47 100644
--- a/packages/bbui/src/Typography/Detail.svelte
+++ b/packages/bbui/src/Typography/Detail.svelte
@@ -0,0 +1,21 @@
+<script>
+    import "@spectrum-css/typography/dist/index-vars.css"
+
+    // Sizes
+    export let xl = false;
+    export let l = false;
+    export let m = false;
+    export let s = false;
+
+    export let serif = false;
+
+</script>
+
+<p class="spectrum-Detail"
+    class:spectrum-Detail--serif={serif}
+    class:spectrum-Detail--sizeXL={xl}
+    class:spectrum-Detail--sizeL={l}
+    class:spectrum-Detail--sizeM={m}
+    class:spectrum-Detail--sizeS={s}>
+    <slot />
+</p>
\ No newline at end of file
diff --git a/packages/bbui/src/Typography/Heading.svelte b/packages/bbui/src/Typography/Heading.svelte
index cb6a1551c2..5f5dd28867 100644
--- a/packages/bbui/src/Typography/Heading.svelte
+++ b/packages/bbui/src/Typography/Heading.svelte
@@ -1,5 +1,5 @@
 <script>
-    import "@spectrum-css/heading/dist/index-vars.css"
+    import "@spectrum-css/typography/dist/index-vars.css"
 
     // Level
     export let h1 = false;
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index c120199273..8ebbf019df 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -21,8 +21,6 @@ export { default as DetailSummary } from "./List/Items/DetailSummary.svelte"
 export { default as Switcher } from "./Switcher/Switcher.svelte"
 export { default as DropdownMenu } from "./DropdownMenu/DropdownMenu.svelte"
 export { default as Popover } from "./Popover/Popover.svelte"
-export { default as Body } from "./Styleguide/Body.svelte"
-export { default as Heading } from "./Styleguide/Heading.svelte"
 export { default as Label } from "./Styleguide/Label.svelte"
 export { default as Link } from "./Link/Link.svelte"
 export { default as Close } from "./Button/Close.svelte"
@@ -40,6 +38,13 @@ export { default as Slider } from "./Form/Slider.svelte"
 export { default as Context } from "./context"
 export { default as Table } from "./Table/Table.svelte"
 
+// Typography
+export { default as Body } from "./Typography/Body.svelte"
+export { default as Heading } from "./Typography/Heading.svelte"
+export { default as Detail } from "./Typography/Detail.svelte"
+export { default as Code } from "./Typography/Code.svelte"
+
+
 // Actions
 export { default as autoResizeTextArea } from "./Actions/autoresize_textarea"
 export { default as positionDropdown } from "./Actions/position_dropdown"
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 506c217044..39e15ff5ae 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -485,6 +485,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"
   integrity sha512-jov++S358BrN2tmMfaoYk1N6u9HojgeuQk61keXrK2m3VE5/n94x7Lg3kIPeSWO0odyDfBlMqT9jacbRey3QTg==
 
+"@spectrum-css/typography@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-3.0.1.tgz#957dafd9b18c314fa37a88b549042ba2175f5b3f"
+  integrity sha512-XyR68K2rIZX3u4j7HhMLOqLVHDJZcapp3XUqgYMzMWccBFleA0qPxKpfRWqVIA5DzTMSIw0wEcZPYKWFZ2e6dA==
+
 "@spectrum-css/underlay@^2.0.9":
   version "2.0.9"
   resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.9.tgz#fc10f971d1325cc844b727e6260f7217844060e8"