diff --git a/polaris.shopify.com/content/tokens/border.mdx b/polaris.shopify.com/content/tokens/border.mdx
new file mode 100644
index 00000000000..a10ba6b3c57
--- /dev/null
+++ b/polaris.shopify.com/content/tokens/border.mdx
@@ -0,0 +1,19 @@
+---
+title: Border
+showTOC: false
+---
+
+# Tokens → {frontmatter.title}
+
+<TokensNav selected="border" />
+
+<TokenList>
+  {tokens.border
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="border"
+        token={token}
+      />
+    ))}
+</TokenList>
diff --git a/polaris.shopify.com/content/tokens/breakpoints.mdx b/polaris.shopify.com/content/tokens/breakpoints.mdx
new file mode 100644
index 00000000000..9841321548c
--- /dev/null
+++ b/polaris.shopify.com/content/tokens/breakpoints.mdx
@@ -0,0 +1,68 @@
+---
+title: Breakpoints
+showTOC: false
+---
+
+# Tokens &rarr; {frontmatter.title}
+
+<TokensNav selected="breakpoints" />
+
+<TokenList>
+  {tokens.breakpoints
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="breakpoints"
+        token={token}
+      />
+    ))}
+</TokenList>
+
+<p id="usage" role="heading" aria-level="2">Usage in Media Queries</p>
+
+### Sass variables
+
+A transform takes the above values and generates Sass variables (which can be
+used in media conditions) for each breakpoint in \`up\`, \`down\`, and \`only\` directions.
+While we currently support \`down\` media conditions, we encourage developers to
+adopt a mobile first strategy and use \`up\` wherever possible.
+
+Example of generated output for \`breakpoints-md\`:
+```scss
+@media #{$p-breakpoints-md-up} {/*...*/}
+@media #{$p-breakpoints-md-down} {/*...*/}
+@media #{$p-breakpoints-md-only} {/*...*/}
+```
+
+To use these Sass variables you will need to import the \`media-queries.scss\`
+file from \`@shopify/polaris-tokens\` in your project:
+
+```scss
+@import 'path/to/node_modules/@shopify/polaris-tokens/dist/scss/media-queries';
+```
+
+### Media query variables
+
+A collection of all Sass variables for applying responsive styles at a given breakpoint alias.
+
+```scss
+$p-breakpoints-xs-up: '(min-width: 0em)';
+$p-breakpoints-xs-down: '(max-width: -0.0025em)';
+$p-breakpoints-xs-only: '(min-width: 0em) and (max-width: 30.6225em)';
+
+$p-breakpoints-sm-up: '(min-width: 30.625em)';
+$p-breakpoints-sm-down: '(max-width: 30.6225em)';
+$p-breakpoints-sm-only: '(min-width: 30.625em) and (max-width: 47.9975em)';
+
+$p-breakpoints-md-up: '(min-width: 48em)';
+$p-breakpoints-md-down: '(max-width: 47.9975em)';
+$p-breakpoints-md-only: '(min-width: 48em) and (max-width: 64.9975em)';
+
+$p-breakpoints-lg-up: '(min-width: 65em)';
+$p-breakpoints-lg-down: '(max-width: 64.9975em)';
+$p-breakpoints-lg-only: '(min-width: 65em) and (max-width: 89.9975em)';
+
+$p-breakpoints-xl-up: '(min-width: 90em)';
+$p-breakpoints-xl-down: '(max-width: 89.9975em)';
+$p-breakpoints-xl-only: '(min-width: 90em)';
+```
diff --git a/polaris.shopify.com/content/tokens/color.mdx b/polaris.shopify.com/content/tokens/color.mdx
new file mode 100644
index 00000000000..7da89ec1f03
--- /dev/null
+++ b/polaris.shopify.com/content/tokens/color.mdx
@@ -0,0 +1,19 @@
+---
+title: Color
+showTOC: false
+---
+
+# Tokens &rarr; {frontmatter.title}
+
+<TokensNav selected="color" />
+
+<TokenList>
+  {tokens.color
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="color"
+        token={token}
+      />
+    ))}
+</TokenList>
diff --git a/polaris.shopify.com/content/tokens/font.mdx b/polaris.shopify.com/content/tokens/font.mdx
new file mode 100644
index 00000000000..a16ff7af18c
--- /dev/null
+++ b/polaris.shopify.com/content/tokens/font.mdx
@@ -0,0 +1,19 @@
+---
+title: Font
+showTOC: false
+---
+
+# Tokens &rarr; {frontmatter.title}
+
+<TokensNav selected="font" />
+
+<TokenList>
+  {tokens.font
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="font"
+        token={token}
+      />
+    ))}
+</TokenList>
diff --git a/polaris.shopify.com/content/tokens/height.mdx b/polaris.shopify.com/content/tokens/height.mdx
new file mode 100644
index 00000000000..04a7c22f125
--- /dev/null
+++ b/polaris.shopify.com/content/tokens/height.mdx
@@ -0,0 +1,19 @@
+---
+title: Height
+showTOC: false
+---
+
+# Tokens &rarr; {frontmatter.title}
+
+<TokensNav selected="height" />
+
+<TokenList>
+  {tokens.height
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="height"
+        token={token}
+      />
+    ))}
+</TokenList>
diff --git a/polaris.shopify.com/content/tokens/motion.mdx b/polaris.shopify.com/content/tokens/motion.mdx
new file mode 100644
index 00000000000..a2fa158983d
--- /dev/null
+++ b/polaris.shopify.com/content/tokens/motion.mdx
@@ -0,0 +1,31 @@
+---
+title: Motion
+showTOC: false
+---
+
+# Tokens &rarr; {frontmatter.title}
+
+<TokensNav selected="motion" />
+
+<TokenList>
+  {tokens.motion
+    .sort((token) =>
+      token.name.includes('ease') || token.name.includes('linear')
+        ? -1
+        : 1,
+    )
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="motion"
+        token={token}
+      />
+    ))}
+</TokenList>
+
+<style>
+  {tokens.motion
+    .filter(({name}) => name.includes('keyframes'))
+    .map(({name, value}) => `@keyframes ${name} ${value}`)
+    .join('\n')}
+</style>
diff --git a/polaris.shopify.com/content/tokens/shadow.mdx b/polaris.shopify.com/content/tokens/shadow.mdx
new file mode 100644
index 00000000000..2b273abcda6
--- /dev/null
+++ b/polaris.shopify.com/content/tokens/shadow.mdx
@@ -0,0 +1,19 @@
+---
+title: Shadow
+showTOC: false
+---
+
+# Tokens &rarr; {frontmatter.title}
+
+<TokensNav selected="shadow" />
+
+<TokenList>
+  {tokens.shadow
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="shadow"
+        token={token}
+      />
+    ))}
+</TokenList>
diff --git a/polaris.shopify.com/content/tokens/space.mdx b/polaris.shopify.com/content/tokens/space.mdx
new file mode 100644
index 00000000000..c94cdebb015
--- /dev/null
+++ b/polaris.shopify.com/content/tokens/space.mdx
@@ -0,0 +1,19 @@
+---
+title: Space
+showTOC: false
+---
+
+# Tokens &rarr; {frontmatter.title}
+
+<TokensNav selected="space" />
+
+<TokenList>
+  {tokens.space
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="space"
+        token={token}
+      />
+    ))}
+</TokenList>
diff --git a/polaris.shopify.com/content/tokens/text.mdx b/polaris.shopify.com/content/tokens/text.mdx
new file mode 100644
index 00000000000..2d9ae719e1b
--- /dev/null
+++ b/polaris.shopify.com/content/tokens/text.mdx
@@ -0,0 +1,19 @@
+---
+title: Text
+showTOC: false
+---
+
+# Tokens &rarr; {frontmatter.title}
+
+<TokensNav selected="text" />
+
+<TokenList>
+  {tokens.text
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="text"
+        token={token}
+      />
+    ))}
+</TokenList>
diff --git a/polaris.shopify.com/content/tokens/width.mdx b/polaris.shopify.com/content/tokens/width.mdx
new file mode 100644
index 00000000000..8d8b39b6358
--- /dev/null
+++ b/polaris.shopify.com/content/tokens/width.mdx
@@ -0,0 +1,19 @@
+---
+title: Width
+showTOC: false
+---
+
+# Tokens &rarr; {frontmatter.title}
+
+<TokensNav selected="width" />
+
+<TokenList>
+  {tokens.width
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="width"
+        token={token}
+      />
+    ))}
+</TokenList>
diff --git a/polaris.shopify.com/content/tokens/z-index.mdx b/polaris.shopify.com/content/tokens/z-index.mdx
new file mode 100644
index 00000000000..3611d9770ba
--- /dev/null
+++ b/polaris.shopify.com/content/tokens/z-index.mdx
@@ -0,0 +1,19 @@
+---
+title: Z-Index
+showTOC: false
+---
+
+# Tokens &rarr; {frontmatter.title}
+
+<TokensNav selected="z-index" />
+
+<TokenList>
+  {tokens['zIndex']
+    .map((token) => (
+      <TokenList.Item
+        key={token.name}
+        category="z-index"
+        token={token}
+      />
+    ))}
+</TokenList>
diff --git a/polaris.shopify.com/package.json b/polaris.shopify.com/package.json
index ea4610fefb1..7b0d33004a0 100644
--- a/polaris.shopify.com/package.json
+++ b/polaris.shopify.com/package.json
@@ -40,6 +40,7 @@
     "@juggle/resize-observer": "^3.4.0",
     "lodash.get": "^4.4.2",
     "lodash.throttle": "^4.1.1",
+    "lodash.mapvalues": "^4.6.0",
     "nanoid": "^4.0.2",
     "next": "^13.0.6",
     "next-mdx-remote": "^4.4.1",
@@ -67,6 +68,7 @@
     "@types/js-yaml": "^4.0.5",
     "@types/lodash.get": "^4.4.7",
     "@types/lodash.throttle": "^4.1.7",
+    "@types/lodash.mapvalues": "^4.6.9",
     "@types/marked": "^4.0.3",
     "@types/prismjs": "^1.26.0",
     "@types/react": "^18.2.0",
diff --git a/polaris.shopify.com/pages/[...slug].tsx b/polaris.shopify.com/pages/[...slug].tsx
index 2f78e796f8c..5432da58704 100644
--- a/polaris.shopify.com/pages/[...slug].tsx
+++ b/polaris.shopify.com/pages/[...slug].tsx
@@ -6,6 +6,8 @@ import type {
 import Link from 'next/link';
 import fs from 'fs';
 import globby from 'globby';
+import {metaThemeDefault as tokenGroups} from '@shopify/polaris-tokens';
+import mapValues from 'lodash.mapvalues';
 
 import {serializeMdx} from '../src/components/Markdown/serialize';
 import Markdown from '../src/components/Markdown';
@@ -98,7 +100,7 @@ const CatchAllTemplate = ({
     <Page
       editPageLinkPath={editPageLinkPath}
       isContentPage={isContentPage}
-      showTOC={showTOC || isContentPage}
+      showTOC={showTOC}
       collapsibleTOC={collapsibleTOC}
     >
       <PageMeta title={title} description={seoDescription} noIndex={noIndex} />
@@ -310,6 +312,25 @@ export const getStaticProps: GetStaticProps<Props, {slug: string[]}> = async ({
         end();
       },
     ],
+    [
+      // token pages need token info
+      () => !pathIsDirectory && params.slug[0] === 'tokens',
+      async (end) => {
+        // Flatten each group to an array of objects
+        const tokenGroupObjects = mapValues(tokenGroups, (tokens) =>
+          Object.entries(tokens)
+            .map(([name, value]) => ({name, ...value}))
+            // Some tokens have custom sorting for display
+            .sort((token) =>
+              token.name.includes('ease') || token.name.includes('linear')
+                ? -1
+                : 1,
+            ),
+        );
+        scope.tokens = tokenGroupObjects;
+        end();
+      },
+    ],
     // index pages need to know the files in their folder
     [
       () => pathIsDirectory,
@@ -330,12 +351,14 @@ export const getStaticProps: GetStaticProps<Props, {slug: string[]}> = async ({
       ? mdx.frontmatter.seoDescription
       : (data.firstParagraph as string) ?? null;
 
+  const isContentPage = !pathIsDirectory;
+
   const props: Props = {
     mdx,
     seoDescription,
     editPageLinkPath,
-    isContentPage: !pathIsDirectory,
-    showTOC: mdx.frontmatter.showTOC || false,
+    isContentPage,
+    showTOC: mdx.frontmatter.showTOC ?? isContentPage,
     collapsibleTOC: mdx.frontmatter.collapsibleTOC || false,
   };
 
@@ -344,7 +367,6 @@ export const getStaticProps: GetStaticProps<Props, {slug: string[]}> = async ({
 
 const catchAllTemplateExcludeList = [
   '/icons',
-  '/tokens',
   '/sandbox',
   '/tools/stylelint-polaris/rules',
 ];
diff --git a/polaris.shopify.com/pages/tokens/border.tsx b/polaris.shopify.com/pages/tokens/border.tsx
deleted file mode 100644
index 68b580aa24c..00000000000
--- a/polaris.shopify.com/pages/tokens/border.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type {NextPage} from 'next';
-import React from 'react';
-import TokensPage from '../../src/components/TokensPage';
-import PageMeta from '../../src/components/PageMeta';
-
-const Components: NextPage = () => {
-  return (
-    <>
-      <PageMeta title="Border tokens" />
-
-      <TokensPage tokenGroup={'border'} />
-    </>
-  );
-};
-
-export default Components;
diff --git a/polaris.shopify.com/pages/tokens/breakpoints.tsx b/polaris.shopify.com/pages/tokens/breakpoints.tsx
deleted file mode 100644
index c95f5d65aa9..00000000000
--- a/polaris.shopify.com/pages/tokens/breakpoints.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import type {GetStaticProps, InferGetStaticPropsType} from 'next';
-import React from 'react';
-import endent from 'endent';
-import {VFile} from 'vfile';
-import {serializeMdx} from '../../src/components/Markdown/serialize';
-import type {SerializedMdx} from '../../src/types';
-import TokensPage from '../../src/components/TokensPage';
-import PageMeta from '../../src/components/PageMeta';
-import Container from '../../src/components/Container';
-import Longform from '../../src/components/Longform';
-import Markdown from '../../src/components/Markdown';
-
-interface Props {
-  mdx: SerializedMdx;
-}
-
-export const getStaticProps: GetStaticProps<Props> = async () => {
-  const file = new VFile({
-    value: endent`
-    <p id="usage" role="heading" aria-level="2">Usage in Media Queries</p>
-
-    ### Sass variables
-
-    A transform takes the above values and generates Sass variables (which can be
-    used in media conditions) for each breakpoint in \`up\`, \`down\`, and \`only\` directions.
-    While we currently support \`down\` media conditions, we encourage developers to
-    adopt a mobile first strategy and use \`up\` wherever possible.
-
-    Example of generated output for \`breakpoints-md\`:
-    \`\`\`scss
-    @media #{$p-breakpoints-md-up} {/*...*/}
-    @media #{$p-breakpoints-md-down} {/*...*/}
-    @media #{$p-breakpoints-md-only} {/*...*/}
-    \`\`\`
-
-    To use these Sass variables you will need to import the \`media-queries.scss\`
-    file from \`@shopify/polaris-tokens\` in your project:
-
-    \`\`\`scss
-    @import 'path/to/node_modules/@shopify/polaris-tokens/dist/scss/media-queries';
-    \`\`\`
-
-    ### Media query variables
-
-    A collection of all Sass variables for applying responsive styles at a given breakpoint alias.
-
-    \`\`\`scss
-    $p-breakpoints-xs-up: '(min-width: 0em)';
-    $p-breakpoints-xs-down: '(max-width: -0.0025em)';
-    $p-breakpoints-xs-only: '(min-width: 0em) and (max-width: 30.6225em)';
-
-    $p-breakpoints-sm-up: '(min-width: 30.625em)';
-    $p-breakpoints-sm-down: '(max-width: 30.6225em)';
-    $p-breakpoints-sm-only: '(min-width: 30.625em) and (max-width: 47.9975em)';
-
-    $p-breakpoints-md-up: '(min-width: 48em)';
-    $p-breakpoints-md-down: '(max-width: 47.9975em)';
-    $p-breakpoints-md-only: '(min-width: 48em) and (max-width: 64.9975em)';
-
-    $p-breakpoints-lg-up: '(min-width: 65em)';
-    $p-breakpoints-lg-down: '(max-width: 64.9975em)';
-    $p-breakpoints-lg-only: '(min-width: 65em) and (max-width: 89.9975em)';
-
-    $p-breakpoints-xl-up: '(min-width: 90em)';
-    $p-breakpoints-xl-down: '(max-width: 89.9975em)';
-    $p-breakpoints-xl-only: '(min-width: 90em)';
-    \`\`\`
-  `,
-    path: '/tokens/breakpoints',
-  });
-
-  const [mdx] = await serializeMdx(file);
-  return {props: {mdx}};
-};
-
-const Components = ({mdx}: InferGetStaticPropsType<typeof getStaticProps>) => {
-  return (
-    <>
-      <PageMeta title="Breakpoints" />
-
-      <TokensPage tokenGroup={'breakpoints'} />
-
-      <Container>
-        <Longform>
-          <Markdown {...mdx} />
-        </Longform>
-        <br />
-        <br />
-      </Container>
-    </>
-  );
-};
-
-export default Components;
diff --git a/polaris.shopify.com/pages/tokens/color.tsx b/polaris.shopify.com/pages/tokens/color.tsx
deleted file mode 100644
index 40d3789f732..00000000000
--- a/polaris.shopify.com/pages/tokens/color.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type {NextPage} from 'next';
-import React from 'react';
-import TokensPage from '../../src/components/TokensPage';
-import PageMeta from '../../src/components/PageMeta';
-
-const Components: NextPage = () => {
-  return (
-    <>
-      <PageMeta title="Color tokens" />
-
-      <TokensPage tokenGroup={'color'} />
-    </>
-  );
-};
-
-export default Components;
diff --git a/polaris.shopify.com/pages/tokens/font.tsx b/polaris.shopify.com/pages/tokens/font.tsx
deleted file mode 100644
index 6ffed38ac99..00000000000
--- a/polaris.shopify.com/pages/tokens/font.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type {NextPage} from 'next';
-import React from 'react';
-import TokensPage from '../../src/components/TokensPage';
-import PageMeta from '../../src/components/PageMeta';
-
-const Components: NextPage = () => {
-  return (
-    <>
-      <PageMeta title="Font tokens" />
-
-      <TokensPage tokenGroup={'font'} />
-    </>
-  );
-};
-
-export default Components;
diff --git a/polaris.shopify.com/pages/tokens/height.tsx b/polaris.shopify.com/pages/tokens/height.tsx
deleted file mode 100644
index 186fe8ece09..00000000000
--- a/polaris.shopify.com/pages/tokens/height.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type {NextPage} from 'next';
-import React from 'react';
-import TokensPage from '../../src/components/TokensPage';
-import PageMeta from '../../src/components/PageMeta';
-
-const Components: NextPage = () => {
-  return (
-    <>
-      <PageMeta title="Height tokens" />
-
-      <TokensPage tokenGroup={'height'} />
-    </>
-  );
-};
-
-export default Components;
diff --git a/polaris.shopify.com/pages/tokens/motion.tsx b/polaris.shopify.com/pages/tokens/motion.tsx
deleted file mode 100644
index d027325dd49..00000000000
--- a/polaris.shopify.com/pages/tokens/motion.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type {NextPage} from 'next';
-import React from 'react';
-import TokensPage from '../../src/components/TokensPage';
-import PageMeta from '../../src/components/PageMeta';
-
-const Components: NextPage = () => {
-  return (
-    <>
-      <PageMeta title="Motion tokens" />
-
-      <TokensPage tokenGroup={'motion'} />
-    </>
-  );
-};
-
-export default Components;
diff --git a/polaris.shopify.com/pages/tokens/shadow.tsx b/polaris.shopify.com/pages/tokens/shadow.tsx
deleted file mode 100644
index ed3a9564fb6..00000000000
--- a/polaris.shopify.com/pages/tokens/shadow.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type {NextPage} from 'next';
-import React from 'react';
-import TokensPage from '../../src/components/TokensPage';
-import PageMeta from '../../src/components/PageMeta';
-
-const Components: NextPage = () => {
-  return (
-    <>
-      <PageMeta title="Shadow tokens" />
-
-      <TokensPage tokenGroup={'shadow'} />
-    </>
-  );
-};
-
-export default Components;
diff --git a/polaris.shopify.com/pages/tokens/space.tsx b/polaris.shopify.com/pages/tokens/space.tsx
deleted file mode 100644
index b2170cd05f0..00000000000
--- a/polaris.shopify.com/pages/tokens/space.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type {NextPage} from 'next';
-import React from 'react';
-import TokensPage from '../../src/components/TokensPage';
-import PageMeta from '../../src/components/PageMeta';
-
-const Components: NextPage = () => {
-  return (
-    <>
-      <PageMeta title="Space tokens" />
-      <TokensPage tokenGroup={'space'} />
-    </>
-  );
-};
-
-export default Components;
diff --git a/polaris.shopify.com/pages/tokens/text.tsx b/polaris.shopify.com/pages/tokens/text.tsx
deleted file mode 100644
index ea614d99ab5..00000000000
--- a/polaris.shopify.com/pages/tokens/text.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type {NextPage} from 'next';
-import React from 'react';
-import TokensPage from '../../src/components/TokensPage';
-import PageMeta from '../../src/components/PageMeta';
-
-const Components: NextPage = () => {
-  return (
-    <>
-      <PageMeta title="Text tokens" />
-
-      <TokensPage tokenGroup={'text'} />
-    </>
-  );
-};
-
-export default Components;
diff --git a/polaris.shopify.com/pages/tokens/width.tsx b/polaris.shopify.com/pages/tokens/width.tsx
deleted file mode 100644
index 52a31fdea07..00000000000
--- a/polaris.shopify.com/pages/tokens/width.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type {NextPage} from 'next';
-import React from 'react';
-import TokensPage from '../../src/components/TokensPage';
-import PageMeta from '../../src/components/PageMeta';
-
-const Components: NextPage = () => {
-  return (
-    <>
-      <PageMeta title="Width tokens" />
-
-      <TokensPage tokenGroup={'width'} />
-    </>
-  );
-};
-
-export default Components;
diff --git a/polaris.shopify.com/pages/tokens/z-index.tsx b/polaris.shopify.com/pages/tokens/z-index.tsx
deleted file mode 100644
index 769741c7126..00000000000
--- a/polaris.shopify.com/pages/tokens/z-index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type {NextPage} from 'next';
-import React from 'react';
-import TokensPage from '../../src/components/TokensPage';
-import PageMeta from '../../src/components/PageMeta';
-
-const Components: NextPage = () => {
-  return (
-    <>
-      <PageMeta title="Z index tokens" />
-
-      <TokensPage tokenGroup={'zIndex'} />
-    </>
-  );
-};
-
-export default Components;
diff --git a/polaris.shopify.com/src/components/Markdown/Markdown.tsx b/polaris.shopify.com/src/components/Markdown/Markdown.tsx
index 5ad089df1d1..90251a17eaa 100644
--- a/polaris.shopify.com/src/components/Markdown/Markdown.tsx
+++ b/polaris.shopify.com/src/components/Markdown/Markdown.tsx
@@ -41,6 +41,8 @@ import {
   Large,
   ExtraLarge,
 } from './components/Layout';
+import TokenList from '../../components/TokenList';
+import TokensNav from '../../components/TokensNav';
 
 const CodeVisibilityContext = createContext<
   [
@@ -263,6 +265,8 @@ function Markdown<
         Medium,
         Large,
         ExtraLarge,
+        TokenList,
+        TokensNav,
         Tip: ({children}) => (
           <div className="tip-banner">
             <div className="tip-banner__header">
diff --git a/polaris.shopify.com/src/components/TokensPage/TokensPage.module.scss b/polaris.shopify.com/src/components/TokensNav/TokensNav.module.scss
similarity index 78%
rename from polaris.shopify.com/src/components/TokensPage/TokensPage.module.scss
rename to polaris.shopify.com/src/components/TokensNav/TokensNav.module.scss
index 64b9ac7337a..e29c2d8e446 100644
--- a/polaris.shopify.com/src/components/TokensPage/TokensPage.module.scss
+++ b/polaris.shopify.com/src/components/TokensNav/TokensNav.module.scss
@@ -2,28 +2,6 @@
 @import '../../styles/mixins.scss';
 @import '../../styles/variables.scss';
 
-.TokensPage {
-  margin-top: var(--header-margin);
-  margin-bottom: var(--header-margin);
-}
-
-.Banner {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-
-  h1 {
-    @include heading-1;
-  }
-
-  p {
-    max-width: 43rem;
-    font-size: var(--font-size-700);
-    letter-spacing: var(--letter-spacing-300);
-    color: var(--text-strong);
-  }
-}
-
 .TokensNav {
   margin: 1.5rem 0 3.5rem;
 
diff --git a/polaris.shopify.com/src/components/TokensNav/TokensNav.tsx b/polaris.shopify.com/src/components/TokensNav/TokensNav.tsx
new file mode 100644
index 00000000000..4d799bf48fa
--- /dev/null
+++ b/polaris.shopify.com/src/components/TokensNav/TokensNav.tsx
@@ -0,0 +1,95 @@
+import styles from './TokensNav.module.scss';
+import Link from 'next/link';
+import {slugify} from '../../utils/various';
+
+interface Props {
+  selected?:
+    | 'border'
+    | 'breakpoints'
+    | 'color'
+    | 'font'
+    | 'height'
+    | 'motion'
+    | 'shadow'
+    | 'space'
+    | 'text'
+    | 'width'
+    | 'zIndex';
+}
+
+export type NavItem = {
+  title: string;
+  url?: string;
+};
+
+const navItems: NavItem[] = [
+  {
+    title: 'Border',
+    url: `/tokens/border`,
+  },
+  {
+    title: 'Breakpoints',
+    url: `/tokens/breakpoints`,
+  },
+  {
+    title: 'Color',
+    url: `/tokens/color`,
+  },
+  {
+    title: 'Font',
+    url: `/tokens/font`,
+  },
+  {
+    title: 'Height',
+    url: `/tokens/height`,
+  },
+  {
+    title: 'Motion',
+    url: `/tokens/motion`,
+  },
+  {
+    title: 'Shadow',
+    url: `/tokens/shadow`,
+  },
+  {
+    title: 'Space',
+    url: `/tokens/space`,
+  },
+  {
+    title: 'Text',
+    url: `/tokens/text`,
+  },
+  {
+    title: 'Width',
+    url: `/tokens/width`,
+  },
+  {
+    title: 'Z-Index',
+    url: `/tokens/z-index`,
+  },
+];
+
+function TokensNav({selected}: Props) {
+  return (
+    <nav className={styles.TokensNav}>
+      <ul>
+        {navItems.map((item) => {
+          if (!item.url) return null;
+          const isCurrent = selected === slugify(item.title);
+          return (
+            <li key={item.title}>
+              <Link
+                href={item.url}
+                aria-current={isCurrent ? 'page' : undefined}
+              >
+                {item.title}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}
+
+export default TokensNav;
diff --git a/polaris.shopify.com/src/components/TokensNav/index.ts b/polaris.shopify.com/src/components/TokensNav/index.ts
new file mode 100644
index 00000000000..5d069434754
--- /dev/null
+++ b/polaris.shopify.com/src/components/TokensNav/index.ts
@@ -0,0 +1,3 @@
+import TokensNav from './TokensNav';
+
+export default TokensNav;
diff --git a/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx b/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx
deleted file mode 100644
index e10b014dfcb..00000000000
--- a/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import styles from './TokensPage.module.scss';
-import {MetaTokenGroupShape, metaThemeDefault} from '@shopify/polaris-tokens';
-import {Status, TokenPropertiesWithName} from '../../types';
-import TokenList from '../TokenList';
-import Link from 'next/link';
-import {slugify} from '../../utils/various';
-import {useRouter} from 'next/router';
-import Page from '../Page';
-
-interface Props {
-  tokenGroup:
-    | 'border'
-    | 'breakpoints'
-    | 'color'
-    | 'font'
-    | 'height'
-    | 'motion'
-    | 'shadow'
-    | 'space'
-    | 'text'
-    | 'width'
-    | 'zIndex';
-}
-
-export type NavItem = {
-  title: string;
-  url?: string;
-  status?: Status;
-  children?: NavItem[];
-};
-
-const navItems: NavItem[] = [
-  {
-    title: 'Border',
-    url: `/tokens/border`,
-  },
-  {
-    title: 'Breakpoints',
-    url: `/tokens/breakpoints`,
-  },
-  {
-    title: 'Color',
-    url: `/tokens/color`,
-  },
-  {
-    title: 'Font',
-    url: `/tokens/font`,
-  },
-  {
-    title: 'Height',
-    url: `/tokens/height`,
-  },
-  {
-    title: 'Motion',
-    url: `/tokens/motion`,
-  },
-  {
-    title: 'Shadow',
-    url: `/tokens/shadow`,
-  },
-  {
-    title: 'Space',
-    url: `/tokens/space`,
-  },
-  {
-    title: 'Text',
-    url: `/tokens/text`,
-  },
-  {
-    title: 'Width',
-    url: `/tokens/width`,
-  },
-  {
-    title: 'Z-Index',
-    url: `/tokens/z-index`,
-  },
-];
-
-function tokensToFilteredArray(
-  filter: string,
-  tokenGroup: MetaTokenGroupShape,
-): TokenPropertiesWithName[] {
-  return Object.entries(tokenGroup)
-    .filter(([name]) => {
-      return name.toLowerCase().includes(filter.toLowerCase());
-    })
-    .map(([name, value]) => {
-      return {name, ...value};
-    });
-}
-
-function TokensPage({tokenGroup}: Props) {
-  const filter = '';
-  const router = useRouter();
-
-  const tokens = {
-    border: tokensToFilteredArray(filter, metaThemeDefault.border),
-    breakpoints: tokensToFilteredArray(filter, metaThemeDefault.breakpoints),
-    color: tokensToFilteredArray(filter, metaThemeDefault.color),
-    font: tokensToFilteredArray(filter, metaThemeDefault.font),
-    height: tokensToFilteredArray(filter, metaThemeDefault.height),
-    motion: tokensToFilteredArray(filter, metaThemeDefault.motion),
-    shadow: tokensToFilteredArray(filter, metaThemeDefault.shadow),
-    space: tokensToFilteredArray(filter, metaThemeDefault.space),
-    text: tokensToFilteredArray(filter, metaThemeDefault.text),
-    width: tokensToFilteredArray(filter, metaThemeDefault.width),
-    zIndex: tokensToFilteredArray(filter, metaThemeDefault.zIndex),
-  };
-
-  const keyframeStyles = tokens['motion']
-    .filter(({name}) => name.includes('keyframes'))
-    .map(({name, value}) => `@keyframes ${name} ${value}`)
-    .join('\n');
-
-  return (
-    <Page>
-      <div className={styles.TokensPage}>
-        <div className={styles.Banner}>
-          <h1>Tokens</h1>
-        </div>
-
-        <div className={styles.Tokens}>
-          <nav className={styles.TokensNav}>
-            <ul>
-              {navItems.map((item) => {
-                if (!item.url) return null;
-                const isCurrent = router.asPath.endsWith(slugify(item.title));
-                return (
-                  <li key={item.title}>
-                    <Link
-                      href={item.url}
-                      aria-current={isCurrent ? 'page' : undefined}
-                    >
-                      {item.title}
-                    </Link>
-                  </li>
-                );
-              })}
-            </ul>
-          </nav>
-          <TokenList>
-            {tokens[tokenGroup]
-              .sort((token) =>
-                token.name.includes('ease') || token.name.includes('linear')
-                  ? -1
-                  : 1,
-              )
-              .map((token) => (
-                <TokenList.Item
-                  key={token.name}
-                  category={tokenGroup}
-                  token={token}
-                />
-              ))}
-          </TokenList>
-        </div>
-
-        <style jsx>{keyframeStyles}</style>
-      </div>
-    </Page>
-  );
-}
-
-export default TokensPage;
diff --git a/polaris.shopify.com/src/components/TokensPage/index.ts b/polaris.shopify.com/src/components/TokensPage/index.ts
deleted file mode 100644
index e3d55d04cba..00000000000
--- a/polaris.shopify.com/src/components/TokensPage/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import TokensPage from './TokensPage';
-
-export default TokensPage;
diff --git a/yarn.lock b/yarn.lock
index 6bba78f243b..d042e517616 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4046,6 +4046,13 @@
   dependencies:
     "@types/lodash" "*"
 
+"@types/lodash.mapvalues@^4.6.9":
+  version "4.6.9"
+  resolved "https://registry.yarnpkg.com/@types/lodash.mapvalues/-/lodash.mapvalues-4.6.9.tgz#1edb4b1d299db332166b474221b06058b34030a7"
+  integrity sha512-NyAIgUrI+nnr3VoJbiAlUfqBT2M/65mOCm+LerHgYE7lEyxXUAalZiMIL37GBnfg0QOMMBEPW4osdiMjsoEA4g==
+  dependencies:
+    "@types/lodash" "*"
+
 "@types/lodash.throttle@^4.1.7":
   version "4.1.7"
   resolved "https://registry.yarnpkg.com/@types/lodash.throttle/-/lodash.throttle-4.1.7.tgz#4ef379eb4f778068022310ef166625f420b6ba58"
@@ -13645,6 +13652,11 @@ lodash.isplainobject@^4.0.6:
   resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
   integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
 
+lodash.mapvalues@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz#1bafa5005de9dd6f4f26668c30ca37230cc9689c"
+  integrity sha512-JPFqXFeZQ7BfS00H58kClY7SPVeHertPE0lNuCyZ26/XlN8TvakYD7b9bGyNmXbT/D3BbtPAAmq90gPWqLkxlQ==
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"