diff --git a/docs/src/app/(private)/docs-theme/fonts.css b/docs/src/app/(private)/docs-theme/fonts.css
new file mode 100644
index 00000000000..f3bf1cc3163
--- /dev/null
+++ b/docs/src/app/(private)/docs-theme/fonts.css
@@ -0,0 +1,11 @@
+@font-face {
+  font-family: 'die grotesk a';
+  font-weight: normal;
+  src: url('../../(website)/css/fonts/die-grotesk-a-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'die grotesk b';
+  font-weight: normal;
+  src: url('../../(website)/css/fonts/die-grotesk-b-regular.woff2') format('woff2');
+}
diff --git a/docs/src/app/(private)/docs-theme/page.module.css b/docs/src/app/(private)/docs-theme/page.module.css
new file mode 100644
index 00000000000..5d418e14b84
--- /dev/null
+++ b/docs/src/app/(private)/docs-theme/page.module.css
@@ -0,0 +1,259 @@
+.page {
+  padding: var(--space-8);
+  color: var(--gray-t2);
+  background: var(--gray-s1);
+  font-family: var(--font-sans-a);
+}
+
+.hero {
+  max-width: 52rem;
+}
+
+.hero h1 {
+  margin: 0;
+  font-family: var(--font-sans-b);
+  font-size: var(--font-size-9);
+  line-height: var(--line-height-9);
+  font-weight: var(--font-weight-2);
+}
+
+.kicker {
+  margin: 0 0 var(--space-2);
+  color: var(--gray-t1);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.section {
+  padding: var(--space-10) 0;
+}
+
+.section + .section {
+  border-top: 1px solid var(--gray-c1);
+}
+
+.tokenName {
+  margin: 0;
+  color: var(--gray-t1);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+}
+
+.colorMatrixSection + .colorMatrixSection {
+  margin-top: var(--space-8);
+}
+
+.colorMatrixGrid {
+  display: grid;
+  grid-template-columns: 7rem repeat(9, 6.5rem);
+  row-gap: 2px;
+  align-items: start;
+  width: max-content;
+}
+
+.colorMatrixRow {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: subgrid;
+  column-gap: 2px;
+}
+
+.colorMatrixRowLabel {
+  display: flex;
+  align-items: center;
+  color: var(--gray-t1);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+}
+
+.colorMatrixHeaderCell {
+  color: var(--gray-p2);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  text-transform: lowercase;
+  text-align: center;
+}
+
+.swatch {
+  position: relative;
+  isolation: isolate;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 3rem;
+  --swatch-composite: rgb(
+    from var(--swatch-color) calc(r * alpha + 255 * (1 - alpha)) calc(g * alpha + 255 * (1 - alpha))
+      calc(b * alpha + 255 * (1 - alpha))
+  );
+}
+
+.swatch:hover {
+  outline: 2px solid var(--gray-t2);
+}
+
+.swatchTokenName {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: black;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.swatch:hover .swatchTokenName {
+  opacity: 1;
+}
+
+@supports (color: lch(from white 50 0 0deg)) {
+  .swatchTokenName {
+    /* Automatic black/white label based on the swatch color lightness */
+    color: lch(from var(--swatch-composite) round((100 - l), 100) 0 0deg);
+  }
+}
+
+/* Tune blackA readability (auto color can be too faint on near-white alpha steps) */
+.colorMatrixRowAlpha > .colorMatrixCell {
+  background-color: var(--gray-s1);
+  background-image:
+    linear-gradient(45deg, var(--gray-c1) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--gray-c1) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--gray-c1) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--gray-c1) 75%);
+  background-size: 12px 12px;
+  background-position:
+    0 0,
+    0 6px,
+    6px -6px,
+    -6px 0;
+}
+
+.colorMatrixRowAlpha > .colorMatrixCell:nth-child(-n + 6) .swatchTokenName {
+  color: black;
+}
+
+.colorMatrixRowAlpha > .colorMatrixCell:nth-child(7) .swatchTokenName {
+  color: white;
+}
+
+@media (prefers-color-scheme: dark) {
+  .colorMatrixRowAlpha > .colorMatrixCell:nth-child(-n + 6) .swatchTokenName,
+  .colorMatrixRowAlpha > .colorMatrixCell:nth-child(7) .swatchTokenName {
+    color: white;
+  }
+}
+
+.typeGrid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.radiusGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
+  gap: var(--space-6);
+}
+
+.shadowGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
+  gap: var(--space-6);
+}
+
+.typeCard,
+.radiusCard,
+.shadowCard {
+  border-radius: var(--radius-5);
+}
+
+.typeSample {
+  margin: var(--space-2) 0 0;
+  font-size: var(--font-size-4);
+  line-height: var(--line-height-4);
+}
+
+.typeScale {
+  display: grid;
+  gap: var(--space-7);
+}
+
+.typeScaleRow {
+  border-radius: var(--radius-5);
+}
+
+.typeScaleRow p:last-child {
+  margin: var(--space-2) 0 0;
+}
+
+.spaceList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.spaceRow {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  border-radius: var(--radius-5);
+}
+
+.spaceRow .tokenName {
+  width: 6.5rem;
+  flex: 0 0 6.5rem;
+}
+
+.spaceBar {
+  min-width: 1px;
+  height: 0.75rem;
+  background: var(--gray-t2);
+}
+
+.radiusShape {
+  margin-top: var(--space-3);
+  background: var(--gray-t2);
+}
+
+.radiusShapeSquare {
+  width: 4rem;
+  height: 4rem;
+}
+
+.radiusShapePill {
+  width: 6rem;
+  height: 4rem;
+}
+
+.shadowSurface {
+  height: 5rem;
+  margin-top: var(--space-3);
+  border-radius: var(--radius-4);
+  background: var(--gray-s1);
+
+  /* Hack to make the surface visible in dark mode since there are no shadows in dark mode */
+  @media (prefers-color-scheme: dark) {
+    background: var(--gray-s2);
+  }
+}
+
+@media (max-width: 48rem) {
+  .page {
+    padding: var(--space-6);
+  }
+
+  .hero h1 {
+    font-size: var(--font-size-8);
+    line-height: var(--line-height-8);
+  }
+}
diff --git a/docs/src/app/(private)/docs-theme/page.tsx b/docs/src/app/(private)/docs-theme/page.tsx
new file mode 100644
index 00000000000..dd54676235c
--- /dev/null
+++ b/docs/src/app/(private)/docs-theme/page.tsx
@@ -0,0 +1,224 @@
+import type { Metadata } from 'next';
+import * as React from 'react';
+
+import './fonts.css';
+import 'docs/src/css/theme-redesign.css';
+import styles from './page.module.css';
+
+const coreScaleSteps = ['s1', 's2', 'c1', 'c2', 'c3', 'p1', 'p2', 't1', 't2'] as const;
+const coreColorRows = ['gray', 'indigo'] as const;
+const accentColorRows = ['poppy', 'blue', 'green', 'orange', 'pink', 'grape', 'lime'] as const;
+const alphaColorRows = ['blackA'] as const;
+const alphaScaleSteps = ['1', '2', '3', '4', '5', '6'] as const;
+const allCoreRows = [...coreColorRows, ...accentColorRows];
+
+const typefaces = [
+  { token: 'font-sans-a', sample: 'Die Grotesk A for UI copy' },
+  { token: 'font-sans-b', sample: 'Die Grotesk B for UI copy' },
+  { token: 'font-mono', sample: 'Söhne Mono for code and data' },
+  { token: 'font-serif', sample: 'Georgia for editorial accents' },
+] as const;
+
+const fontWeights = [
+  { token: 'font-weight-1', sample: 'Regular' },
+  { token: 'font-weight-2', sample: 'Medium' },
+  { token: 'font-weight-3', sample: 'Semi-bold' },
+] as const;
+
+const textScale = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
+const spaceScale = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] as const;
+const radiusScale = ['1', '2', '3', '4', '5', '6', '7', 'pill', 'circle'] as const;
+const shadows = ['1', '2', '3', '4', '5'] as const;
+
+export default function ThemePage() {
+  return (
+    <main className={styles.page} data-theme="redesign">
+      <header className={styles.hero}>
+        <p className={styles.kicker}>
+          <span aria-hidden="true">🔒</span> Private
+        </p>
+        <h1>Docs Theme</h1>
+      </header>
+
+      <section className={styles.section}>
+        <div className={styles.colorMatrixSection}>
+          <div className={styles.colorMatrixGrid}>
+            <div className={styles.colorMatrixRow}>
+              <div className={styles.colorMatrixHeaderCell} />
+              {coreScaleSteps.map((step) => (
+                <div key={`core-step-${step}`} className={styles.colorMatrixHeaderCell}>
+                  {step}
+                </div>
+              ))}
+            </div>
+
+            {allCoreRows.map((row) => {
+              const isAccentRow = accentColorRows.includes(row as (typeof accentColorRows)[number]);
+
+              return (
+                <div key={`core-row-${row}`} className={styles.colorMatrixRow}>
+                  <div className={styles.colorMatrixRowLabel}>{row}</div>
+                  {coreScaleSteps.map((step) => {
+                    if (isAccentRow && step !== 't1') {
+                      return <div key={`${row}-${step}`} />;
+                    }
+
+                    const token = isAccentRow ? `${row}-t1` : `${row}-${step}`;
+                    const swatchStyle = {
+                      backgroundColor: `var(--${token})`,
+                      '--swatch-color': `var(--${token})`,
+                    } as React.CSSProperties;
+
+                    return (
+                      <div key={token} className={styles.colorMatrixCell}>
+                        <div className={styles.swatch} style={swatchStyle}>
+                          <span className={styles.swatchTokenName}>--{token}</span>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className={styles.colorMatrixSection}>
+          <div className={styles.colorMatrixGrid}>
+            <div className={styles.colorMatrixRow}>
+              <div className={styles.colorMatrixHeaderCell} />
+              {alphaScaleSteps.map((step) => (
+                <div key={`alpha-step-${step}`} className={styles.colorMatrixHeaderCell}>
+                  {step}
+                </div>
+              ))}
+            </div>
+
+            {alphaColorRows.map((row) => (
+              <div
+                key={`alpha-row-${row}`}
+                className={`${styles.colorMatrixRow} ${styles.colorMatrixRowAlpha}`}
+              >
+                <div className={styles.colorMatrixRowLabel}>{row}</div>
+                {alphaScaleSteps.map((step) => {
+                  const token = `${row}-${step}`;
+                  const swatchStyle = {
+                    backgroundColor: `var(--${token})`,
+                    '--swatch-color': `var(--${token})`,
+                  } as React.CSSProperties;
+
+                  return (
+                    <div key={token} className={styles.colorMatrixCell}>
+                      <div className={styles.swatch} style={swatchStyle}>
+                        <span className={styles.swatchTokenName}>--{token}</span>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.typeGrid}>
+          {typefaces.map((typeface) => (
+            <article key={typeface.token} className={styles.typeCard}>
+              <p className={styles.tokenName}>--{typeface.token}</p>
+              <p className={styles.typeSample} style={{ fontFamily: `var(--${typeface.token})` }}>
+                {typeface.sample}
+              </p>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.typeScale}>
+          {textScale.map((step) => (
+            <article key={step} className={styles.typeScaleRow}>
+              <p className={styles.tokenName}>
+                --font-size-{step} / --line-height-{step}
+              </p>
+              <p
+                style={{
+                  fontFamily: 'var(--font-sans-a)',
+                  fontSize: `var(--font-size-${step})`,
+                  lineHeight: `var(--line-height-${step})`,
+                }}
+              >
+                The quick brown fox jumps over the lazy dog.
+              </p>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.typeGrid}>
+          {fontWeights.map((weight) => (
+            <article key={weight.token} className={styles.typeCard}>
+              <p className={styles.tokenName}>--{weight.token}</p>
+              <p
+                className={styles.typeSample}
+                style={{ fontFamily: 'var(--font-sans-a)', fontWeight: `var(--${weight.token})` }}
+              >
+                {weight.sample}
+              </p>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.spaceList}>
+          {spaceScale.map((step) => (
+            <article key={step} className={styles.spaceRow}>
+              <p className={styles.tokenName}>--space-{step}</p>
+              <div className={styles.spaceBar} style={{ width: `var(--space-${step})` }} />
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.radiusGrid}>
+          {radiusScale.map((step) => (
+            <article key={step} className={styles.radiusCard}>
+              <p className={styles.tokenName}>--radius-{step}</p>
+              <div
+                className={`${styles.radiusShape} ${step === 'pill' ? styles.radiusShapePill : styles.radiusShapeSquare}`}
+                style={{
+                  borderRadius: `var(--radius-${step})`,
+                }}
+              />
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.shadowGrid}>
+          {shadows.map((step) => (
+            <article key={step} className={styles.shadowCard}>
+              <p className={styles.tokenName}>--shadow-{step}</p>
+              <div
+                className={styles.shadowSurface}
+                style={{ boxShadow: `var(--shadow-${step})` }}
+              />
+            </article>
+          ))}
+        </div>
+      </section>
+    </main>
+  );
+}
+
+export const metadata: Metadata = {
+  title: 'Docs Theme',
+  robots: {
+    index: false,
+    follow: false,
+  },
+};
diff --git a/docs/src/css/theme-redesign.css b/docs/src/css/theme-redesign.css
new file mode 100644
index 00000000000..1c243660432
--- /dev/null
+++ b/docs/src/css/theme-redesign.css
@@ -0,0 +1,158 @@
+@layer theme {
+  [data-theme='redesign'] {
+    color-scheme: light dark;
+
+    /* Typeface */
+    --font-sans-a:
+      'die grotesk a', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', arial,
+      sans-serif;
+    --font-sans-b:
+      'die grotesk b', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', arial,
+      sans-serif;
+    --font-mono:
+      'Söhne Mono', 'SF Mono', Menlo, 'DejaVu Sans Mono', Consolas, Inconsolata, monospace;
+    --font-serif: Georgia, 'Times New Roman', Times, 'Noto Serif', 'DejaVu Serif', serif;
+
+    /* Font size */
+    --font-size-1: 0.75rem; /* 12px */
+    --font-size-2: 0.875rem; /* 14px */
+    --font-size-3: 0.9375rem; /* 15px */
+    --font-size-4: 1rem; /* 16px */
+    --font-size-5: 1.125rem; /* 18px */
+    --font-size-6: 1.3125rem; /* 21px */
+    --font-size-7: 1.5rem; /* 24px */
+    --font-size-8: 2.25rem; /* 36px */
+    --font-size-9: 2.625rem; /* 42px */
+
+    /* Line height */
+    --line-height-1: 1rem; /* 16px */
+    --line-height-2: 1.125rem; /* 18px */
+    --line-height-3: 1.375rem; /* 22px */
+    --line-height-4: 1.5rem; /* 24px */
+    --line-height-5: 1.5625rem; /* 25px */
+    --line-height-6: 1.75rem; /* 28px */
+    --line-height-7: 2rem; /* 32px */
+    --line-height-8: 2.375rem; /* 38px */
+    --line-height-9: 2.75rem; /* 44px */
+
+    /* Font weight */
+    --font-weight-1: 400;
+    --font-weight-2: 600;
+
+    /* Spacing */
+    --space-1: 0.25rem; /* 4px */
+    --space-2: 0.5rem; /* 8px */
+    --space-3: 0.75rem; /* 12px */
+    --space-4: 1rem; /* 16px */
+    --space-5: 1.25rem; /* 20px */
+    --space-6: 1.5rem; /* 24px */
+    --space-7: 1.75rem; /* 28px */
+    --space-8: 2rem; /* 32px */
+    --space-9: 2.5rem; /* 40px */
+    --space-10: 3rem; /* 48px */
+
+    /* Radius */
+    --radius-1: 0.125rem; /* 2px */
+    --radius-2: 0.1875rem; /* 3px */
+    --radius-3: 0.25rem; /* 4px */
+    --radius-4: 0.375rem; /* 6px */
+    --radius-5: 0.5rem; /* 8px */
+    --radius-6: 0.75rem; /* 12px */
+    --radius-7: 1rem; /* 16px */
+    --radius-pill: 9999px;
+    --radius-circle: 50%;
+
+    /* Shadow */
+    --shadow-1:
+      0 1px 1px 0 var(--blackA-1), 0 2px 1px -1px var(--blackA-1), 0 1px 3px 0 var(--blackA-1);
+    --shadow-2:
+      0 1px 1px 0 var(--blackA-1), 0 1px 3px -1px var(--blackA-1), 0 4px 8px -2px var(--blackA-1);
+    --shadow-3:
+      0 1px 1px 0 var(--blackA-1), 0 2px 6px -1px var(--blackA-1), 0 6px 12px -3px var(--blackA-1),
+      0 8px 16px -4px var(--blackA-1);
+    --shadow-4:
+      0 1px 1px 0 var(--blackA-1), 0 2px 4px -1px var(--blackA-1), 0 4px 8px -2px var(--blackA-1),
+      0 12px 32px -6px var(--blackA-3), 0 20px 48px -10px var(--blackA-1);
+    --shadow-5:
+      0 10px 32px var(--blackA-5), 0 1px 1px var(--blackA-1), 0 4px 6px var(--blackA-2),
+      0 1px 1px var(--blackA-2), 0 24px 68px var(--blackA-4);
+
+    /* Gray */
+    --gray-s1: hsl(0deg 0% 99%);
+    --gray-s2: hsl(0deg 0% 97.5%);
+    --gray-c1: hsl(0deg 0% 95.25%);
+    --gray-c2: hsl(0deg 0% 94%);
+    --gray-c3: hsl(0deg 0% 93.1%);
+    --gray-p1: hsl(0deg 0% 55%);
+    --gray-p2: hsl(0deg 0% 51%);
+    --gray-t1: hsl(0deg 0% 46.4%);
+    --gray-t2: hsl(0deg 0% 18%);
+
+    /* Indigo */
+    --indigo-s1: hsl(204deg 100% 98.75%);
+    --indigo-s2: hsl(198deg 100% 97.5%);
+    --indigo-c1: hsl(204deg 100% 95%);
+    --indigo-c2: hsl(205deg 100% 93.5%);
+    --indigo-c3: hsl(206deg 100% 92.5%);
+    --indigo-p1: hsl(214deg 98% 50%);
+    --indigo-p2: hsl(207deg 96% 48%);
+    --indigo-t1: hsl(221deg 74% 51%);
+    --indigo-t2: hsl(221deg 74% 19.8%);
+
+    /* Alpha for shadows/borders/backdrops */
+    --blackA-1: hsl(0deg 0% 0% / 4%);
+    --blackA-2: hsl(0deg 0% 0% / 8%);
+    --blackA-3: hsl(0deg 0% 0% / 12%);
+    --blackA-4: hsl(0deg 0% 0% / 16%);
+    --blackA-5: hsl(0deg 0% 0% / 24%);
+    --blackA-6: hsl(0deg 0% 0% / 64%);
+
+    /* Syntax + accent copy */
+    --poppy-t1: hsl(10deg 86% 48%);
+    --blue-t1: hsl(211deg 100% 49%);
+    --green-t1: hsl(156deg 81% 29%);
+    --orange-t1: hsl(14deg 96% 52.5%);
+    --pink-t1: hsl(316deg 84% 51%);
+    --grape-t1: hsl(276deg 66% 54%);
+    --lime-t1: hsl(91deg 64% 38.75%);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [data-theme='redesign'] {
+      --gray-s1: hsl(0deg 0% 7.5%);
+      --gray-s2: hsl(0deg 0% 10%);
+      --gray-c1: hsl(0deg 0% 13%);
+      --gray-c2: hsl(0deg 0% 16%);
+      --gray-c3: hsl(0deg 0% 20%);
+      --gray-p1: hsl(0deg 0% 60%);
+      --gray-p2: hsl(0deg 0% 64%);
+      --gray-t1: hsl(0deg 0% 70%);
+      --gray-t2: hsl(0deg 0% 90%);
+
+      --indigo-s1: hsl(223deg 38% 10%);
+      --indigo-s2: hsl(223deg 42% 12%);
+      --indigo-c1: hsl(222deg 50% 16%);
+      --indigo-c2: hsl(221deg 56% 20%);
+      --indigo-c3: hsl(220deg 62% 24%);
+      --indigo-p1: hsl(214deg 94% 60%);
+      --indigo-p2: hsl(207deg 96% 64%);
+      --indigo-t1: hsl(214deg 93% 66%);
+      --indigo-t2: hsl(210deg 100% 86%);
+
+      --blackA-1: transparent;
+      --blackA-2: transparent;
+      --blackA-3: transparent;
+      --blackA-4: transparent;
+      --blackA-5: transparent;
+      --blackA-6: transparent;
+
+      --poppy-t1: hsl(10deg 96% 63%);
+      --blue-t1: hsl(210deg 98% 66%);
+      --green-t1: hsl(156deg 68% 54%);
+      --orange-t1: hsl(26deg 98% 63%);
+      --pink-t1: hsl(316deg 86% 68%);
+      --grape-t1: hsl(276deg 86% 70%);
+      --lime-t1: hsl(91deg 72% 56%);
+    }
+  }
+}