diff --git a/docs/sandbox.md b/docs/sandbox.md
new file mode 100644
index 0000000000..ecbed07109
--- /dev/null
+++ b/docs/sandbox.md
@@ -0,0 +1,73 @@
+---
+title: Visual sandbox
+description: Reference page for reviewing the visual refresh.
+unlisted: true
+slug: /sandbox
+---
+
+# Visual sandbox
+
+Reference page rendering one example of every pattern from the visual refresh ([issue #492](https://github.com/openrewrite/rewrite-docs/issues/492)). Used for designer/PM review of staged PRs.
+
+## Typography
+
+# Heading 1 — page title scale
+
+## Heading 2 — section
+
+### Heading 3 — subsection
+
+#### Heading 4
+
+Body paragraph using Inter at the docs base size. Includes an [inline link](/sandbox) and `inline code`. Set against the off-white background that runs across the site.
+
+## Admonitions
+
+:::info
+For a better understanding of the permissions requested, please review our [GitHub permissions reference documentation](/sandbox).
+:::
+
+:::tip
+Run `mod recipe debug` first if you want to see the LST output before applying any change.
+:::
+
+:::note
+Running a recipe _does not_ automatically update the code in the selected repositories. You will be able to view the results and decide what you want to commit.
+:::
+
+:::warning
+Depending on what organization you ran the recipe against, you may not have access to commit code or create a PR. Please don't try and open PRs against random projects that aren't your own.
+:::
+
+:::caution
+If you are still on the legacy Neon development database, do not share your `DATABASE_URL`. It contains your database credentials.
+:::
+
+:::danger
+Force-pushing to `master` rewrites history for every collaborator. Coordinate before doing this.
+:::
+
+## Markdown link-list cards
+
+Plain markdown bulleted lists where every item is just a link render as cards. This pattern shows up on recipe README pages.
+
+### Categories
+
+- [FF4j](/sandbox)
+- [LaunchDarkly](/sandbox)
+- [OpenFeature](/sandbox)
+- [Quarkus](/sandbox)
+
+### Recipes
+
+- [Remove a String feature flag for feature key](/sandbox)
+- [Remove a boolean feature flag for feature key](/sandbox)
+- [Remove a double feature flag for feature key](/sandbox)
+
+## DocCard layout
+
+Generated index page cards (e.g. `/changelog`, `/recipes`, `/authoring-recipes`) are full-width and stacked vertically. See [Changelog](/changelog) for a live example.
+
+## Sidebar nav
+
+The left-hand sidebar uses bold dark text for collapsible categories, blue for the active expanded section, and regular weight for child items.
diff --git a/src/css/custom.css b/src/css/custom.css
index 6a3b48ed13..15d564c0e3 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -4,17 +4,9 @@
  * work well for content-centric websites.
  */
 
-@font-face {
-    font-family: 'Beausite';
-    src: url('https://cdn.prod.website-files.com/664e62fe66f5b31edc6c3aeb/664e7a833d9ad9fa2febd048_BeausiteSlickWeb-Light.woff2') format('woff2'), url('https://cdn.prod.website-files.com/664e62fe66f5b31edc6c3aeb/664e7a830c62d5d188a8f45a_BeausiteSlickWeb-Light.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
-}
-
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-background-color: #F8F8FF;
+  --ifm-background-color: #FAFAFF;
   --ifm-color-mint: #85FE99;
   --ifm-color-primary: #4169e1;
   --ifm-color-primary-dark: #2855dd;
@@ -24,7 +16,7 @@
   --ifm-color-primary-lighter: #6787e7;
   --ifm-color-primary-lightest: #8ca4ed;
   --ifm-color-border: #D9D9D9;
-  --ifm-code-font-size: 95%;
+  --ifm-code-font-size: 87.5%;
   --ifm-color-base: rgba(4, 24, 52);
   --ifm-color-content: var(--ifm-color-base);
   --ifm-color-announcement-bar-bg: var(--ifm-color-mint);
@@ -53,6 +45,13 @@
   --ifm-navbar-shadow: none;
   --ifm-toc-border-color: transparent;
   --ifm-section-divider-color: rgba(4, 24, 52, 0.3);
+
+  --neo-border-card: rgba(4, 24, 52, 0.12);
+  --neo-grey-300: rgba(4, 24, 52, 0.25);
+  --neo-shadow-card: 0 1px 2px rgba(4, 24, 52, 0.06), 0 4px 12px rgba(4, 24, 52, 0.05);
+  --neo-card-hover-bg: #FFFFFF;
+  --neo-double-border: rgba(4, 24, 52, 0.08);
+  --neo-frame-bg: rgba(4, 24, 52, 0.03);
 }
 
 /* Use selector for specificity */
@@ -82,11 +81,28 @@ html[data-theme='dark'] {
   --ifm-link-color: #85fe99;
   --ifm-toc-border-color: transparent;
   --ifm-section-divider-color: #d9d9d9;
-  --ifm-card-background-color: #fff;
   --ifm-heading-line-height: 1.25;
-  .theme-code-block {
-    border: 1.5px solid var(--ifm-color-border);
-  }
+
+  --neo-border-card: rgba(255, 255, 255, 0.14);
+  --neo-grey-300: rgba(255, 255, 255, 0.3);
+  --neo-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
+  --neo-card-hover-bg: rgba(255, 255, 255, 0.06);
+  --neo-card-bg: rgba(255, 255, 255, 0.025);
+  --neo-double-border: rgba(255, 255, 255, 0.28);
+  --neo-frame-bg: rgba(255, 255, 255, 0.04);
+}
+
+html[data-theme='dark'] .theme-code-block {
+  border: 1px solid rgba(255, 255, 255, 0.25);
+}
+
+/* Tighten vertical padding on the inner code element so code blocks
+   don't feel over-padded. Scoped via .theme-code-block code so this
+   only applies to actual code blocks — does NOT touch cards or
+   anything else that reads --ifm-pre-padding. */
+.theme-code-block code {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
 .navbar__logo img {
@@ -103,8 +119,42 @@ figure figcaption {
   text-align: center;
 }
 
-.reactPlayer {
-  margin: auto;
+.reactPlayer,
+.react-player {
+  margin: 3rem auto;
+  border-radius: 12px;
+  overflow: hidden;
+  outline: 1px solid var(--neo-double-border);
+  outline-offset: 14px;
+}
+
+.reactPlayer iframe,
+.reactPlayer video,
+.react-player iframe,
+.react-player video,
+.react-player > div > iframe {
+  border-radius: 12px;
+}
+
+.reactPlayer iframe,
+.react-player iframe,
+.reactPlayer video,
+.react-player video {
+  outline: none !important;
+  border: none !important;
+}
+
+.markdown img,
+figure img {
+  border-radius: 12px;
+  outline: 1.5px solid var(--neo-double-border);
+  outline-offset: 18px;
+  border-radius: 12px;
+  margin: 2.5rem auto;
+}
+
+figure {
+  margin: 2.5rem auto;
 }
 
 /* Zoomed image background */
@@ -118,6 +168,13 @@ figure figcaption {
 
 .navbar {
   border-bottom: 1px solid var(--ifm-section-divider-color);
+  background-color: rgba(250, 250, 255, 0.7);
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+}
+
+html[data-theme='dark'] .navbar {
+  background-color: rgba(4, 24, 52, 0.7);
 }
 
 .navbar .navbar__link {
@@ -137,6 +194,41 @@ figure figcaption {
   color: var(--ifm-heading-color);
 }
 
+.theme-doc-sidebar-menu .menu__list-item {
+  margin-top: 0;
+}
+
+.theme-doc-sidebar-menu .menu__list .menu__list {
+  padding-left: 0.75rem;
+  margin-top: 0;
+}
+
+.theme-doc-sidebar-menu .menu__link {
+  padding: 0.3rem 0.5rem;
+  line-height: 1.4;
+}
+
+.theme-doc-sidebar-menu .menu__link--sublist {
+  font-weight: 600;
+  color: var(--ifm-heading-color);
+}
+
+.theme-doc-sidebar-menu .menu__list-item-collapsible:has(.menu__link--active) .menu__link--sublist,
+.theme-doc-sidebar-menu .menu__link--sublist.menu__link--active {
+  color: var(--ifm-link-color);
+}
+
+.theme-doc-sidebar-menu .menu__link:not(.menu__link--sublist) {
+  font-weight: 400;
+  color: var(--ifm-menu-color);
+}
+
+.theme-doc-sidebar-menu .menu__link:not(.menu__link--sublist).menu__link--active {
+  font-weight: 700;
+  font-family: "Inter", sans-serif;
+  color: var(--ifm-link-color);
+}
+
 .theme-doc-sidebar-menu .menu__caret:before {
   background-image: url("data:image/svg+xml, %3Csvg%20width=%228%22%20height=%2213%22%20viewBox=%220%200%208%2013%22%20fill=%22none%22%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d=%22M1%2012L7%206.5L1%201%22%20stroke=%22%23415067%22%20stroke-width=%221.25%22%2F%3E%0A%3C%2Fsvg%3E%0A");
   background-repeat: no-repeat;
@@ -202,10 +294,10 @@ html[data-theme=dark] [class^=docMainContainer_] .breadcrumbs__link:hover {
 }
 
 [class^=docMainContainer_] h1 {
-  --ifm-heading-font-weight: 300;
-  --ifm-heading-font-family: "Beausite", sans-serif;
-  --ifm-h1-font-size: 3.75rem;
-  --ifm-leading: 1;
+  --ifm-heading-font-weight: 600;
+  --ifm-heading-font-family: "Inter", sans-serif;
+  --ifm-h1-font-size: 2.25rem;
+  --ifm-leading: 1.2;
 
   margin-bottom: 1.25rem;
 }
@@ -215,34 +307,41 @@ html[data-theme=dark] [class^=docMainContainer_] .breadcrumbs__link:hover {
   position: relative;
 }
 
-[class^=docMainContainer_] [class^=generatedIndexPage_]::before {
-  position: absolute;
-  background: url(/img/gems-bg.webp) no-repeat 0 0;
-  width: 1322px;
-  height: 1070px;
-  z-index: -1;
-  content: '';
+[class^=docMainContainer_] [class^=generatedIndexPage_] .row > .col,
+[class^=docMainContainer_] [class^=generatedIndexPage_] .col--6 {
+  display: flex;
+  flex: 0 0 100% !important;
+  max-width: 100% !important;
 }
 
-[class^=docMainContainer_] [class^=generatedIndexPage_] .row[class*=list_] > .col {
-  display: flex;
+[class^=docMainContainer_] [class^=generatedIndexPage_] .card {
+  padding: 0.75rem 1.25rem !important;
 }
 
 [class^=docMainContainer_] [class^=generatedIndexPage_] .margin-top--lg {
   margin-top: 4.5rem !important;
 }
 
-[class^=docMainContainer_] [class^=generatedIndexPage_] .margin-bottom--lg {
-  margin-bottom: 2.5rem !important;
+html body .margin-bottom--lg {
+  margin-bottom: 1.25rem !important;
+}
+
+html body section.row .col {
+  margin-bottom: 1.25rem !important;
 }
 
 html[data-theme='dark'] [class^=docMainContainer_] .card {
-  --ifm-heading-color: #041834;
+  --ifm-heading-color: #fff;
+}
+
+html[data-theme='dark'] [class*=cardDescription_],
+html[data-theme='dark'] [class*=cardContainer_] p {
+  color: rgba(255, 255, 255, 0.7) !important;
 }
 
 .markdown {
-  --ifm-heading-font-family: "Beausite", sans-serif;
-  --ifm-heading-font-weight: 300;
+  --ifm-heading-font-family: "Inter", sans-serif;
+  --ifm-heading-font-weight: 600;
   --ifm-link-decoration: underline;
 }
 
@@ -412,7 +511,7 @@ html[data-theme='dark'] .footer .footer__bottom::before {
 }
 
 h1, .markdown h2, .markdown h3, .markdown h4 {
-  font-weight: bold;
+  font-weight: 600;
 }
 
 /* Colorblind-friendly code highlighting */
@@ -436,3 +535,342 @@ html[data-theme='dark'] {
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 calc(var(--ifm-pre-padding) - 3px) 0 var(--ifm-pre-padding);
 }
+
+/* Style link lists on recipe README pages as cards.
+ * Targets only the lists that follow specific h2 anchors so it doesn't
+ * affect inline single-link bullets in regular doc content. */
+.markdown h2#categories + ul,
+.markdown h2#recipes + ul,
+.markdown h2#composite-recipes + ul {
+  list-style: none;
+  padding-left: 0;
+  margin-top: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.markdown h2#categories + ul > li,
+.markdown h2#recipes + ul > li,
+.markdown h2#composite-recipes + ul > li {
+  margin: 0 0 1rem 0;
+  padding: 0;
+}
+
+.markdown h2#categories + ul > li::before,
+.markdown h2#recipes + ul > li::before,
+.markdown h2#composite-recipes + ul > li::before {
+  content: none;
+}
+
+.markdown h2#categories + ul > li > a,
+.markdown h2#recipes + ul > li > a,
+.markdown h2#composite-recipes + ul > li > a {
+  display: block;
+  padding: 0.75rem 1.25rem;
+  border: 0.5px solid var(--neo-border-card);
+  border-radius: 8px;
+  background-color: transparent;
+  color: var(--ifm-heading-color);
+  font-weight: 600;
+  font-size: 1.0625rem;
+  text-decoration: none;
+  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.markdown h2#categories + ul > li > a:hover,
+.markdown h2#recipes + ul > li > a:hover,
+.markdown h2#composite-recipes + ul > li > a:hover {
+  background-color: var(--neo-card-hover-bg);
+  border-color: var(--neo-grey-300);
+  box-shadow: var(--neo-shadow-card);
+  text-decoration: none;
+}
+
+/* Admonition base — shared layout for all variants */
+.theme-admonition {
+  border-radius: 10px;
+  padding: 1rem 1.25rem 1rem 3rem;
+  position: relative;
+}
+
+.theme-admonition [class*=admonitionHeading_] {
+  display: none;
+}
+
+.theme-admonition::before {
+  content: '';
+  position: absolute;
+  left: 1.1rem;
+  top: 1.1rem;
+  width: 20px;
+  height: 20px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.theme-admonition [class*=admonitionContent_],
+.theme-admonition [class*=admonitionContent_] p:last-child {
+  margin-bottom: 0;
+}
+
+/* Info — Lucide Info icon, blue */
+.theme-admonition-info {
+  background-color: rgba(40, 58, 247, 0.05);
+  border: 1px solid rgba(40, 58, 247, 0.18);
+  color: #283AF7;
+}
+
+.theme-admonition-info::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23283AF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
+}
+
+.theme-admonition-info [class*=admonitionContent_],
+.theme-admonition-info [class*=admonitionContent_] p {
+  color: #283AF7;
+}
+
+.theme-admonition-info a {
+  color: #283AF7;
+  text-decoration: underline;
+}
+
+/* Tip — Lucide Lightbulb icon, green */
+.theme-admonition-tip {
+  background-color: rgba(21, 128, 61, 0.05);
+  border: 1px solid rgba(21, 128, 61, 0.2);
+  color: #15803D;
+}
+
+.theme-admonition-tip::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
+}
+
+.theme-admonition-tip [class*=admonitionContent_],
+.theme-admonition-tip [class*=admonitionContent_] p {
+  color: #15803D;
+}
+
+.theme-admonition-tip a {
+  color: #15803D;
+  text-decoration: underline;
+}
+
+/* Note — Lucide StickyNote icon, neutral gray */
+.theme-admonition-note,
+.theme-admonition-secondary {
+  background-color: #FFFFFF;
+  border: 1px solid var(--ifm-color-border);
+  color: #041834;
+}
+
+.theme-admonition-note::before,
+.theme-admonition-secondary::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23041834' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M15 3v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E");
+}
+
+.theme-admonition-note [class*=admonitionContent_],
+.theme-admonition-note [class*=admonitionContent_] p,
+.theme-admonition-secondary [class*=admonitionContent_],
+.theme-admonition-secondary [class*=admonitionContent_] p {
+  color: #041834;
+}
+
+.theme-admonition-note a,
+.theme-admonition-secondary a {
+  color: var(--ifm-link-color);
+  text-decoration: underline;
+}
+
+/* Warning / Caution — Lucide TriangleAlert icon, amber */
+.theme-admonition-warning,
+.theme-admonition-caution {
+  background-color: #FEFAE0;
+  border: 1px solid #F0DA8C;
+  color: #8A6B00;
+}
+
+.theme-admonition-warning::before,
+.theme-admonition-caution::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6B00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
+}
+
+.theme-admonition-warning [class*=admonitionContent_],
+.theme-admonition-warning [class*=admonitionContent_] p,
+.theme-admonition-caution [class*=admonitionContent_],
+.theme-admonition-caution [class*=admonitionContent_] p {
+  color: #8A6B00;
+}
+
+.theme-admonition-warning a,
+.theme-admonition-caution a {
+  color: #8A6B00;
+  text-decoration: underline;
+}
+
+.theme-admonition-warning code,
+.theme-admonition-caution code {
+  background-color: rgba(138, 107, 0, 0.1);
+  border-color: rgba(138, 107, 0, 0.2);
+  color: #8A6B00;
+}
+
+/* Danger — Lucide OctagonAlert icon, red */
+.theme-admonition-danger {
+  background-color: rgba(159, 7, 18, 0.05);
+  border: 1px solid rgba(159, 7, 18, 0.2);
+  color: #9F0712;
+}
+
+.theme-admonition-danger::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239F0712' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
+}
+
+.theme-admonition-danger [class*=admonitionContent_],
+.theme-admonition-danger [class*=admonitionContent_] p {
+  color: #9F0712;
+}
+
+.theme-admonition-danger a {
+  color: #9F0712;
+  text-decoration: underline;
+}
+
+/* Extra vertical breathing room in markdown content */
+.markdown > p {
+  margin-bottom: 2.5rem;
+}
+
+.markdown > ul,
+.markdown > ol {
+  margin-top: 2rem;
+  margin-bottom: 2.5rem;
+}
+
+.markdown > ul > li,
+.markdown > ol > li {
+  margin-bottom: 0.75rem;
+}
+
+.markdown h2 {
+  margin-top: 4rem;
+  margin-bottom: 1.5rem;
+}
+
+.markdown h3 {
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+}
+
+.markdown h4 {
+  margin-top: 2.25rem;
+  margin-bottom: 0.75rem;
+}
+
+.markdown pre,
+.markdown .theme-code-block {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  outline: none !important;
+}
+
+.markdown blockquote {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.theme-admonition {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+/* ============================================================
+ * Dark mode adjustments for admonitions and cards
+ * ============================================================ */
+
+html[data-theme='dark'] .theme-admonition-info {
+  background-color: rgba(126, 155, 210, 0.1);
+  border-color: rgba(126, 155, 210, 0.3);
+  color: #b9c8e7;
+}
+
+html[data-theme='dark'] .theme-admonition-info::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9c8e7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
+}
+
+html[data-theme='dark'] .theme-admonition-info,
+html[data-theme='dark'] .theme-admonition-info [class*=admonitionContent_],
+html[data-theme='dark'] .theme-admonition-info [class*=admonitionContent_] p,
+html[data-theme='dark'] .theme-admonition-info a {
+  color: #b9c8e7;
+}
+
+html[data-theme='dark'] .theme-admonition-tip {
+  background-color: rgba(74, 222, 128, 0.1);
+  border-color: rgba(74, 222, 128, 0.3);
+  color: #86efac;
+}
+
+html[data-theme='dark'] .theme-admonition-tip::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386efac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
+}
+
+html[data-theme='dark'] .theme-admonition-tip [class*=admonitionContent_],
+html[data-theme='dark'] .theme-admonition-tip [class*=admonitionContent_] p,
+html[data-theme='dark'] .theme-admonition-tip a {
+  color: #86efac;
+}
+
+html[data-theme='dark'] .theme-admonition-note,
+html[data-theme='dark'] .theme-admonition-secondary {
+  background-color: rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.15);
+  color: #fff;
+}
+
+html[data-theme='dark'] .theme-admonition-note::before,
+html[data-theme='dark'] .theme-admonition-secondary::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M15 3v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E");
+}
+
+html[data-theme='dark'] .theme-admonition-note [class*=admonitionContent_],
+html[data-theme='dark'] .theme-admonition-note [class*=admonitionContent_] p,
+html[data-theme='dark'] .theme-admonition-secondary [class*=admonitionContent_],
+html[data-theme='dark'] .theme-admonition-secondary [class*=admonitionContent_] p {
+  color: #fff;
+}
+
+html[data-theme='dark'] .theme-admonition-warning,
+html[data-theme='dark'] .theme-admonition-caution {
+  background-color: rgba(252, 211, 77, 0.1);
+  border-color: rgba(252, 211, 77, 0.3);
+  color: #fcd34d;
+}
+
+html[data-theme='dark'] .theme-admonition-warning::before,
+html[data-theme='dark'] .theme-admonition-caution::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fcd34d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
+}
+
+html[data-theme='dark'] .theme-admonition-warning [class*=admonitionContent_],
+html[data-theme='dark'] .theme-admonition-warning [class*=admonitionContent_] p,
+html[data-theme='dark'] .theme-admonition-caution [class*=admonitionContent_],
+html[data-theme='dark'] .theme-admonition-caution [class*=admonitionContent_] p,
+html[data-theme='dark'] .theme-admonition-warning a,
+html[data-theme='dark'] .theme-admonition-caution a {
+  color: #fcd34d;
+}
+
+html[data-theme='dark'] .theme-admonition-danger {
+  background-color: rgba(248, 113, 113, 0.1);
+  border-color: rgba(248, 113, 113, 0.3);
+  color: #fca5a5;
+}
+
+html[data-theme='dark'] .theme-admonition-danger::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
+}
+
+html[data-theme='dark'] .theme-admonition-danger [class*=admonitionContent_],
+html[data-theme='dark'] .theme-admonition-danger [class*=admonitionContent_] p,
+html[data-theme='dark'] .theme-admonition-danger a {
+  color: #fca5a5;
+}
diff --git a/src/theme/DocCard/index.tsx b/src/theme/DocCard/index.tsx
index f27321ae15..8d69817e66 100644
--- a/src/theme/DocCard/index.tsx
+++ b/src/theme/DocCard/index.tsx
@@ -44,7 +44,7 @@ function CardContainer({
   return (
     <Link
       href={href}
-      className={clsx("card padding--lg", styles.cardContainer)}
+      className={clsx("card", styles.cardContainer)}
     >
       {children}
     </Link>
diff --git a/src/theme/DocCard/styles.module.css b/src/theme/DocCard/styles.module.css
index e9d429925e..8564675924 100644
--- a/src/theme/DocCard/styles.module.css
+++ b/src/theme/DocCard/styles.module.css
@@ -4,15 +4,22 @@
   --ifm-link-hover-decoration: none;
 
   box-shadow: none;
-  border: 1px solid var(--ifm-color-divider);
-  transition: all var(--ifm-transition-fast) ease;
-  transition-property: border, box-shadow;
+  border: 0.5px solid var(--neo-border-card);
+  border-radius: 8px;
+  background-color: var(--neo-card-bg, transparent);
+  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
   width: 100%;
+  min-height: 3.25rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0.75rem 1.25rem !important;
 }
 
 .cardContainer:hover {
-  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.15);
-  background-color: var(--ifm-color-mint);
+  background-color: var(--neo-card-hover-bg);
+  border-color: var(--neo-grey-300);
+  box-shadow: var(--neo-shadow-card);
 }
 
 .cardContainer *:last-child {
@@ -21,14 +28,16 @@
 
 .cardTitle {
   --ifm-heading-margin-bottom: 8px;
-  font-size: 1.25rem;
+  font-size: 1.0625rem;
   font-weight: 600;
-  line-height: 1.666;
+  line-height: 1.4;
 }
 
 .cardDescription {
-  color: var(--ifm-heading-color);
-  font-size: 1rem;
+  color: rgba(4, 24, 52, 0.65);
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
diff --git a/src/theme/DocCategoryGeneratedIndexPage/index.tsx b/src/theme/DocCategoryGeneratedIndexPage/index.tsx
new file mode 100644
index 0000000000..198fb5a5ba
--- /dev/null
+++ b/src/theme/DocCategoryGeneratedIndexPage/index.tsx
@@ -0,0 +1,116 @@
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {PageMetadata} from '@docusaurus/theme-common';
+import {useCurrentSidebarCategory} from '@docusaurus/plugin-content-docs/client';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import DocCard from '@theme/DocCard';
+import DocPaginator from '@theme/DocPaginator';
+import DocVersionBanner from '@theme/DocVersionBanner';
+import DocVersionBadge from '@theme/DocVersionBadge';
+import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import Heading from '@theme/Heading';
+import TOC from '@theme/TOC';
+import type {Props} from '@theme/DocCategoryGeneratedIndexPage';
+
+import styles from './styles.module.css';
+
+function slugify(input: string): string {
+  return input
+    .toLowerCase()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
+}
+
+function DocCategoryGeneratedIndexPageMetadata({
+  categoryGeneratedIndex,
+}: Props): ReactNode {
+  return (
+    <PageMetadata
+      title={categoryGeneratedIndex.title}
+      description={categoryGeneratedIndex.description}
+      keywords={categoryGeneratedIndex.keywords}
+      image={useBaseUrl(categoryGeneratedIndex.image)}
+    />
+  );
+}
+
+function DocCategoryGeneratedIndexPageContent({
+  categoryGeneratedIndex,
+}: Props): ReactNode {
+  const category = useCurrentSidebarCategory();
+  const items = category.items;
+
+  const toc = items
+    .filter((item: any) => Boolean(item.label))
+    .map((item: any) => ({
+      value: item.label,
+      id: slugify(item.label),
+      level: 2,
+    }));
+
+  const showTOC = toc.length > 0;
+
+  return (
+    <div className="row">
+      <div className={clsx('col', showTOC && styles.docItemCol)}>
+        <div className={styles.generatedIndexPage}>
+          <DocVersionBanner />
+          <DocBreadcrumbs />
+          <DocVersionBadge />
+          <header>
+            <Heading as="h1" className={styles.title}>
+              {categoryGeneratedIndex.title}
+            </Heading>
+            {categoryGeneratedIndex.description && (
+              <p>{categoryGeneratedIndex.description}</p>
+            )}
+          </header>
+          <article className="margin-top--lg">
+            <section className={clsx('row', styles.list)}>
+              {items.map((item: any, index: number) => {
+                const id = item.label ? slugify(item.label) : undefined;
+                return (
+                  <article
+                    key={index}
+                    id={id}
+                    className="col col--6 margin-bottom--lg">
+                    <DocCard item={item} />
+                  </article>
+                );
+              })}
+            </section>
+          </article>
+          <footer className="margin-top--md">
+            <DocPaginator
+              previous={categoryGeneratedIndex.navigation.previous}
+              next={categoryGeneratedIndex.navigation.next}
+            />
+          </footer>
+        </div>
+      </div>
+      {showTOC && (
+        <div className="col col--3">
+          <div className={styles.tocWrapper}>
+            <div className={styles.tocLabel}>On this page</div>
+            <TOC
+              toc={toc}
+              minHeadingLevel={2}
+              maxHeadingLevel={3}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function DocCategoryGeneratedIndexPage(props: Props): ReactNode {
+  return (
+    <>
+      <DocCategoryGeneratedIndexPageMetadata {...props} />
+      <DocCategoryGeneratedIndexPageContent {...props} />
+    </>
+  );
+}
diff --git a/src/theme/DocCategoryGeneratedIndexPage/styles.module.css b/src/theme/DocCategoryGeneratedIndexPage/styles.module.css
new file mode 100644
index 0000000000..71bc8cab2c
--- /dev/null
+++ b/src/theme/DocCategoryGeneratedIndexPage/styles.module.css
@@ -0,0 +1,47 @@
+@media (min-width: 997px) {
+  .generatedIndexPage {
+    max-width: 100%;
+  }
+}
+
+.title {
+  margin-bottom: calc(1.25 * var(--ifm-leading));
+}
+
+.docItemCol {
+  max-width: 75% !important;
+}
+
+.list {
+  /* override base row negative margin so cards align flush */
+  margin: 0;
+}
+
+.tocWrapper {
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+.tocLabel {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--ifm-heading-color);
+  margin-bottom: 0.5rem;
+  padding-left: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tocLabel::before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23041834' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='15' y2='12'/%3E%3Cline x1='3' y1='18' x2='18' y2='18'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+:global(html[data-theme='dark']) .tocLabel::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='15' y2='12'/%3E%3Cline x1='3' y1='18' x2='18' y2='18'/%3E%3C/svg%3E");
+}