diff --git a/src/pages/Typography.mdx b/src/core/styles/Typography.stories.tsx
similarity index 50%
rename from src/pages/Typography.mdx
rename to src/core/styles/Typography.stories.tsx
index dd5dc424b..a525bb569 100644
--- a/src/pages/Typography.mdx
+++ b/src/core/styles/Typography.stories.tsx
@@ -1,90 +1,113 @@
-import { Unstyled, Meta } from "@storybook/blocks";
+import clsx from "clsx";
+import React from "react";
 
-<Meta title="Brand/Typography" />
+export default {
+  title: "CSS/Typography",
+};
 
-<Unstyled>
-  <section id="section-typography" className="mb-64">
-    <h1 className="ui-text-h1 mb-32">Typography</h1>
-    <p className="ui-text-p1 mb-32">
-      Type definitions do not include margin as it can be contextual. Figma
-      and the below list include recommended margins.
-    </p>
-    <p className="ui-text-p1 mb-32">
-      The below list is created with ui-text-* helpers which include
-      properties beyond the standard{" "}
-      <code className="ui-inline-code">font-size</code> and{" "}
-      <code className="ui-inline-code">line-height</code> that text-*
-      includes.
-    </p>
-    <div className="mb-40">
-      <hr className="m-0" />
-      <p className="ui-text-title mt-64 mb-40 xs:mt-80 xs:mb-32 xl:mt-96 xl:mb-32">
-        Title - this is a title
-      </p>
-      <hr className="m-0" />
-      <p className="ui-text-h1 mb-40">H1 - this is an h1</p>
-      <hr className="m-0" />
-      <p className="ui-text-h2 mb-36">H2 - this is an h2</p>
-      <hr className="m-0" />
-      <p className="ui-text-h3 mb-24">H3 - this is an h3</p>
-      <hr className="m-0" />
-      <p className="ui-text-h4 mb-16">H4 - this is an h4</p>
-      <hr className="m-0" />
-      <p className="ui-text-h5 mb-16">H5 - this is an h5</p>
-      <hr className="m-0" />
-      <p className="ui-text-p1 mb-32">Paragraph 1</p>
-      <hr className="m-0" />
-      <p className="ui-text-p1 font-bold mb-32">Paragraph 1 (strong)</p>
-      <hr className="m-0" />
-      <p className="ui-text-p2 mb-24">Paragraph 2</p>
-      <hr className="m-0" />
-      <p className="ui-text-p2 font-bold mb-24">Paragraph 2 (strong)</p>
-      <hr className="m-0" />
-      <p className="ui-text-p3 mb-24">Paragraph 3</p>
-      <hr className="m-0" />
-      <p className="ui-text-p3 font-bold mb-24">Paragraph 3 (strong)</p>
-      <hr className="m-0" />
-      <p className="ui-figcaption mb-16">This is a figure caption style</p>
-      <hr className="m-0" />
+const styles = {
+  primary: [
+    { label: "Title XL", className: "ui-text-title text-title-xl" },
+    { label: "Title", className: "ui-text-title" },
+    { label: "Title XS", className: "ui-text-title text-title-xs" },
+    { label: "h1 XL", className: "ui-text-h1 text-h1-xl" },
+    { label: "h1", className: "ui-text-h1" },
+    { label: "h1 XS", className: "ui-text-h1 text-h1-xs" },
+    { label: "h2 XL", className: "ui-text-h2 text-h2-xl" },
+    { label: "h2", className: "ui-text-h2" },
+    { label: "h2 XS", className: "ui-text-h2 text-h2-xs" },
+    { label: "h3", className: "ui-text-h3" },
+    { label: "h4", className: "ui-text-h4" },
+    { label: "h5", className: "ui-text-h5" },
+    { label: "p1", className: "ui-text-p1" },
+    { label: "p2", className: "ui-text-p2" },
+    { label: "p3", className: "ui-text-p3" },
+    { label: "p4", className: "ui-text-p4" },
+  ],
+  decorative: [
+    { label: "Sub-header", className: "ui-text-sub-header" },
+    { label: "Sub-header XS", className: "ui-text-sub-header" },
+    { label: "Overline 1", className: "ui-text-overline1" },
+    { label: "Overline 2", className: "ui-text-overline2" },
+  ],
+  gui: [
+    { label: "Button label 1", className: "ui-text-button1" },
+    { label: "Button label 2", className: "ui-text-button2" },
+    { label: "Button label 3", className: "ui-text-button3" },
+    { label: "Button label 4", className: "ui-text-button4" },
+    { label: "Menu label 1", className: "ui-text-menu1" },
+    { label: "Menu label 2", className: "ui-text-menu2" },
+    { label: "Menu label 3", className: "ui-text-menu3" },
+    { label: "Menu label 4", className: "ui-text-menu4" },
+    { label: "Link", className: "ui-text" },
+  ],
+  code: [
+    { label: "Code 1", className: "ui-text-code" },
+    { label: "Code 2", className: "ui-text-code2" },
+  ],
+};
 
-      <p className="ui-text-quote mb-24">Quote</p>
-      <hr className="m-0" />
-      <p className="ui-text-sub-header mb-40 xs:mb-48">Sub-header</p>
-      <hr className="m-0" />
-      <p className="ui-text-overline1 mb-12">Overline 1</p>
-      <hr className="m-0" />
-      <p className="ui-text-overline2 mb-8">Overline 2</p>
-      <hr className="m-0" />
-      <p className="ui-text-menu1">Menu label 1</p>
-      <hr className="m-0" />
-      <p className="ui-text-menu1 font-bold">Menu label 1 (strong)</p>
-      <hr className="m-0" />
-      <p className="ui-text-menu2">Menu label 2</p>
-      <hr className="m-0" />
-      <p className="ui-text-menu2 font-bold">Menu label 2 (strong)</p>
-      <hr className="m-0" />
-      <p className="ui-text-menu3">Menu label 3</p>
-      <hr className="m-0" />
-      <p className="ui-text-menu3 font-bold">Menu label 3 (strong)</p>
-      <hr className="m-0" />
-      <p className="ui-text-code">Code 1 font for code blocks</p>
-      <hr className="m-0" />
-      <p className="ui-text-code2">Code 2 font for code blocks</p>
-      <hr className="m-0" />
-      <p className="ui-text-p1 mt-12 mb-12">
-        Text, then styling for{" "}
-        <span className="ui-text-code-inline">inline code</span>, within
-        paragraphs.
-      </p>
-      <hr className="m-0" />
+const fontCell = (style) => (
+  <div
+    key={style.label}
+    className={clsx(
+      "rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000",
+      style.className,
+    )}
+  >
+    <div>{style.label}</div>
+    <code className="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
+      {style.className
+        .split(" ")
+        .map((className) => `.${className}`)
+        .join("")}
+    </code>
+  </div>
+);
 
+export const Primary = {
+  render: () => (
+    <div className="grid sm:grid-cols-3 gap-16">
+      {styles.primary.map((style) => fontCell(style))}
     </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "CSS classes for headings and paragraphs. Title, H1 and H2 have three sizes: XL, default, and XS - the default classes responsively adapt to the screen size, so the variant visible here will correspond to that.",
+      },
+    },
+  },
+};
 
-    {" "}
+export const Decorative = {
+  render: () => (
+    <div className="grid sm:grid-cols-3 gap-16">
+      {styles.decorative.map((style) => fontCell(style))}
+    </div>
+  ),
+};
+
+export const GUI = {
+  render: () => (
+    <div className="grid sm:grid-cols-3 gap-16">
+      {styles.gui.map((style) => fontCell(style))}
+    </div>
+  ),
+};
 
-    {" "}
+export const Code = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-16">
+      {styles.code.map((style) => fontCell(style))}
+    </div>
+  ),
+};
 
-    <div className="mb-40">
+export const Links = {
+  render: () => (
+    <>
       <h3 className="ui-text-h2 mb-24">Links</h3>
       <p className="ui-text-p1 mb-24">
         The default text color is inherited from the surrounding text.
@@ -94,27 +117,45 @@ import { Unstyled, Meta } from "@storybook/blocks";
           <p className="ui-text-p1 text-charcoal-grey">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
             odio. Class aptent taciti sociosqu ad litora torquent per conubia
-            nostra, <a href="/xyz" className="ui-link"> per inceptos himenaeos</a>.
+            nostra,{" "}
+            <a href="/xyz" className="ui-link">
+              {" "}
+              per inceptos himenaeos
+            </a>
+            .
           </p>
         </div>
         <div className="p-16 mb-16 mr-16 border rounded bg-cool-black">
           <p className="ui-text-p1 text-white">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
             odio. Class aptent taciti sociosqu ad litora torquent per conubia
-            nostra, <a href="/123" className="ui-link"> per inceptos himenaeos</a>.
+            nostra,{" "}
+            <a href="/123" className="ui-link">
+              {" "}
+              per inceptos himenaeos
+            </a>
+            .
           </p>
         </div>
         <div className="p-16 mb-16 mr-16 border rounded bg-jazzy-pink">
           <p className="ui-text-p1 text-charcoal-grey">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
             odio. Class aptent taciti sociosqu ad litora torquent per conubia
-            nostra <a href="/123" className="ui-link-neutral">per inceptos himenaeos</a>.
+            nostra{" "}
+            <a href="/123" className="ui-link-neutral">
+              per inceptos himenaeos
+            </a>
+            .
           </p>
         </div>
       </div>
-    </div>
+    </>
+  ),
+};
 
-    <div className="mb-40">
+export const Lists = {
+  render: () => (
+    <>
       <h3 className="ui-text-h2 mb-24">Lists</h3>
       <p className="ui-text-p1 mb-24">
         Note that lists support having li items and li items with children,
@@ -128,8 +169,8 @@ import { Unstyled, Meta } from "@storybook/blocks";
           This is the preceding paragraph sed nisl id lectus scelerisque
           facilisis consectetur eget nisl. Morbi scelerisque felis vel
           ullamcorper viverra. In id ante quis quam sodales auctor in a ante.
-          Maecenas faucibus, diam sit amet sollicitudin pellentesque, est
-          nulla pellentesque sapien.
+          Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla
+          pellentesque sapien.
         </p>
         <ul className="ui-unordered-list">
           <li>
@@ -154,8 +195,8 @@ import { Unstyled, Meta } from "@storybook/blocks";
           This is the following paragraph sed nisl id lectus scelerisque
           facilisis consectetur eget nisl. Morbi scelerisque felis vel
           ullamcorper viverra. In id ante quis quam sodales auctor in a ante.
-          Maecenas faucibus, diam sit amet sollicitudin pellentesque, est
-          nulla pellentesque sapien.
+          Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla
+          pellentesque sapien.
         </p>
       </div>
 
@@ -165,15 +206,15 @@ import { Unstyled, Meta } from "@storybook/blocks";
           This is the preceding paragraph sed nisl id lectus scelerisque
           facilisis consectetur eget nisl. Morbi scelerisque felis vel
           ullamcorper viverra. In id ante quis quam sodales auctor in a ante.
-          Maecenas faucibus, diam sit amet sollicitudin pellentesque, est
-          nulla pellentesque sapien.
+          Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla
+          pellentesque sapien.
         </p>
         <ol className="ui-ordered-list">
           <li>
             <p>
-              Pellentesque consequat elit eget tristique sagittis. Etiam et
-              erat et lorem elementum commodo. Aenean congue diam a nibh
-              accumsan tincidunt.
+              Pellentesque consequat elit eget tristique sagittis. Etiam et erat
+              et lorem elementum commodo. Aenean congue diam a nibh accumsan
+              tincidunt.
             </p>
             <ol>
               <li>
@@ -195,12 +236,10 @@ import { Unstyled, Meta } from "@storybook/blocks";
           This is the following paragraph sed nisl id lectus scelerisque
           facilisis consectetur eget nisl. Morbi scelerisque felis vel
           ullamcorper viverra. In id ante quis quam sodales auctor in a ante.
-          Maecenas faucibus, diam sit amet sollicitudin pellentesque, est
-          nulla pellentesque sapien.
+          Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla
+          pellentesque sapien.
         </p>
       </div>
-
-    </div>
-
-  </section>
-</Unstyled>
+    </>
+  ),
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index 119addbac..284927569 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  content: ["./src/**/*.{js,ts,tsx,mdx,stories.tsx,json}"],
+  content: ["./src/**/*.{js,ts,tsx,stories.tsx,json}"],
   safelist: [{ pattern: /^hljs.*/ }],
   theme: {
     screens: {