diff --git a/.github/workflows/create-plugin-pr.yml b/.github/workflows/create-plugin-pr.yml
index 3c71504..c864517 100644
--- a/.github/workflows/create-plugin-pr.yml
+++ b/.github/workflows/create-plugin-pr.yml
@@ -16,6 +16,7 @@ jobs:
     steps:
       - uses: actions/github-script@v9
         with:
+          retries: 3
           script: |
             const body = context.payload.issue.body ?? '';
             const issueNumber = context.payload.issue.number;
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index c03b5ee..20bc678 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -68,6 +68,11 @@ jobs:
         with:
           ref: ${{ github.event.pull_request.head.sha || github.ref }}
           fetch-depth: 0
+          persist-credentials: false
+          # Deploy from fork PRs only runs after a maintainer explicitly adds the
+          # '🚀request-deploy' label (gated by the job's `if` condition above), so
+          # opting in to fork checkout here is an intentional, reviewed trust boundary.
+          allow-unsafe-pr-checkout: true
 
       - name: Remove built-in Yarn
         run: npm uninstall -g yarn
diff --git a/README.md b/README.md
index 8490d61..5acaf24 100644
--- a/README.md
+++ b/README.md
@@ -34,6 +34,24 @@ yarn build
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
+## Community homepage and theme
+
+The [homepage](src/pages/index.tsx) highlights the knowledge base, plugin directory, and ways to
+contribute. Its curated notebook and topic links point to existing community content; update these
+alongside the content they feature. Keep recommendations descriptive rather than implying popularity
+or endorsement.
+
+[Homepage styles](src/pages/index.module.scss) use the shared `--cp-*` palette in
+[the community theme](src/scss/_community-theme.scss), which is loaded after the existing custom
+styles. The shared theme maps those tokens to Infima so documentation and the plugin directory use
+the same visual language without replacing their layouts. Existing admonition and syntax-highlighting
+colours retain their semantic meaning.
+
+Docusaurus owns theme detection and persistence, including the native light/dark switch and operating
+system preference. Avoid adding a separate theme-detection script that would compete with it.
+Keep keyboard focus visible, respect reduced-motion preferences, and check both themes at mobile and
+desktop widths when changing the design. Run `yarn typecheck` and `yarn build` before submitting changes.
+
 ## Deployment
 
 Using SSH:
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 65ac176..9be0e12 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -66,7 +66,7 @@ const commonDocsPluginConfig = {
 /** @type {import('@docusaurus/types').Config} */
 const config: Config = {
   title: 'Docusaurus.community',
-  tagline: 'Docusaurus community knowledge sharing and plugin directory.',
+  tagline: 'Guides, plugins, and components shared by Docusaurus users.',
   favicon: 'img/favicon.ico',
   url: 'https://docusaurus.community',
   baseUrl: '/',
@@ -119,7 +119,7 @@ const config: Config = {
           alt: 'Docusaurus.community Logo',
           src: 'img/logo.svg',
         },
-        hideOnScroll: true,
+        hideOnScroll: false,
         items: [
           {
             type: 'doc',
@@ -145,28 +145,24 @@ const config: Config = {
             label: 'Sponsor',
             position: 'right',
             target: '_blank',
-            className: 'sponsorship-link',
           },
           {
             to: 'https://docusaurus.io',
             label: 'Docusaurus',
             position: 'right',
             target: '_blank',
-            className: 'docusaurus-link',
           },
           {
             to: 'https://discord.gg/docusaurus',
             label: 'Discord',
             position: 'right',
             target: '_blank',
-            className: 'discord-link',
           },
           {
             to: 'https://github.com/DocusaurusCommunity/website',
             label: 'GitHub',
             position: 'right',
             target: '_blank',
-            className: 'github-link',
           },
         ],
       },
@@ -187,6 +183,18 @@ const config: Config = {
                 label: 'Knowledge',
                 to: '/knowledge/',
               },
+              {
+                label: 'Plugin directory',
+                to: '/plugindirectory/',
+              },
+              {
+                label: 'Contribute a guide',
+                to: '/contributing/customisations/',
+              },
+              {
+                label: 'Add a plugin',
+                to: '/contributing/plugins/',
+              },
             ],
           },
           {
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 9f71a5d..6e79df6 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -1,23 +1,495 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
+.home {
+  background: var(--cp-bg);
+  color: var(--cp-text);
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
+  gap: 4rem;
+  align-items: center;
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+}
+
+.eyebrow {
+  margin-bottom: 1.25rem;
+  color: var(--cp-accent);
+  font-size: 0.75rem;
+  font-weight: 750;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.heroCopy {
+  > .eyebrow {
+    display: flex;
+    gap: 0.625rem;
+    align-items: center;
   }
+
+  h1 {
+    margin-bottom: 1.5rem;
+    font-size: clamp(3rem, 5.3vw, 4.75rem);
+    font-weight: 800;
+    letter-spacing: -0.065em;
+    line-height: 1.04;
+
+    span {
+      color: var(--cp-accent);
+    }
+  }
+}
+
+.statusDot {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: var(--cp-accent);
+}
+
+.intro {
+  max-width: 33rem;
+  margin-bottom: 2rem;
+  color: var(--cp-text-muted);
+  font-size: 1.1875rem;
+  line-height: 1.75;
 }
 
-.buttons {
+.actions {
   display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.primaryButton,
+.secondaryButton {
+  display: inline-flex;
+  gap: 0.75rem;
   align-items: center;
   justify-content: center;
+  min-height: 3rem;
+  padding: 0.75rem 1.25rem;
+  border: 1px solid var(--cp-border-strong);
+  border-radius: 0.625rem;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  transition:
+    background 160ms ease,
+    transform 160ms ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    text-decoration: none;
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+
+.primaryButton {
+  border-color: var(--cp-accent);
+  background: var(--cp-accent);
+  color: var(--cp-accent-fg);
+
+  &:hover {
+    border-color: var(--cp-accent-hover);
+    background: var(--cp-accent-hover);
+    color: var(--cp-accent-fg);
+  }
+}
+
+.secondaryButton {
+  background: var(--cp-bg-elevated);
+  color: var(--cp-text);
+
+  &:hover {
+    background: var(--cp-surface);
+    color: var(--cp-accent);
+  }
+}
+
+.heroNote {
+  margin: 1rem 0 0;
+  color: var(--cp-text-muted);
+  font-size: 0.8125rem;
+}
+
+.fieldNotes {
+  overflow: hidden;
+  border: 1px solid var(--cp-border);
+  border-radius: 16px;
+  background: var(--cp-bg-elevated);
+}
+
+.noteMasthead {
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--cp-border);
+  color: var(--cp-text-muted);
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.6875rem;
+  letter-spacing: 0.08em;
+}
+
+.noteFeature {
+  padding: 2rem 1.5rem;
+  border-bottom: 1px solid var(--cp-border);
+  background: var(--cp-accent-soft);
+
+  .eyebrow {
+    margin-bottom: 0.75rem;
+  }
+
+  h2 {
+    max-width: 20ch;
+    font-size: 2rem;
+    letter-spacing: -0.04em;
+    line-height: 1.15;
+  }
+
+  > p:not(.eyebrow) {
+    color: var(--cp-text-muted);
+  }
+}
+
+.textLink {
+  display: inline-flex;
+  gap: 0.75rem;
+  align-items: center;
+  color: var(--cp-accent);
+  font-weight: 700;
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+
+.noteLink {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--cp-border);
+  color: var(--cp-text);
+  font-weight: 650;
+
+  small {
+    display: block;
+    margin-bottom: 0.25rem;
+    color: var(--cp-text-muted);
+    font-size: 0.625rem;
+    letter-spacing: 0.12em;
+  }
+
+  &:hover {
+    background: var(--cp-accent-soft);
+    color: var(--cp-accent);
+    text-decoration: none;
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+
+.noteFooter {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  color: var(--cp-text-muted);
+  font-size: 0.6875rem;
+}
+
+.communityStrip {
+  border-block: 1px solid var(--cp-border);
+}
+
+.stripInner {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 2rem;
+  align-items: center;
+  padding-block: 1.25rem;
+  color: var(--cp-text-muted);
+  font-size: 0.8125rem;
+
+  p {
+    margin: 0 auto 0 0;
+    color: var(--cp-text);
+    font-weight: 650;
+  }
+
+  > span::before {
+    margin-right: 0.625rem;
+    color: var(--cp-accent);
+    content: '+';
+  }
+}
+
+.section {
+  padding-block: 4.5rem;
+}
+
+.sectionHeading {
+  display: flex;
+  gap: 2rem;
+  align-items: end;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+
+  .eyebrow {
+    margin-bottom: 0.75rem;
+  }
+
+  h2 {
+    max-width: 24ch;
+    margin-bottom: 0;
+    font-size: clamp(1.875rem, 3vw, 2.5rem);
+    letter-spacing: -0.045em;
+    line-height: 1.15;
+    text-wrap: balance;
+  }
+
+  > p {
+    max-width: 19rem;
+    margin-bottom: 0;
+    color: var(--cp-text-muted);
+  }
+}
+
+.cardGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1.25rem;
+}
+
+.pathwayCard {
+  display: flex;
+  flex-direction: column;
+  padding: 1.75rem;
+  border: 1px solid var(--cp-border);
+  border-radius: 16px;
+  background: var(--cp-surface);
+  color: var(--cp-text);
+  transition:
+    border-color 160ms ease,
+    transform 160ms ease;
+
+  h3 {
+    margin-block: 2.25rem 1rem;
+    font-size: 1.625rem;
+    letter-spacing: -0.035em;
+    line-height: 1.2;
+  }
+
+  > p {
+    margin-bottom: 2rem;
+    color: var(--cp-text-muted);
+    font-size: 0.9375rem;
+  }
+
+  &:hover {
+    transform: translateY(-4px);
+    border-color: var(--cp-accent);
+    color: var(--cp-text);
+    text-decoration: none;
+  }
+}
+
+.cardTop {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--cp-accent);
+  font-size: 0.8125rem;
+  font-weight: 650;
+}
+
+.cardNumber {
+  color: var(--cp-text-muted);
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.cardAction {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
+  color: var(--cp-accent);
+  font-size: 0.875rem;
+  font-weight: 700;
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+
+.topicsSection {
+  border-block: 1px solid var(--cp-border);
+  background: var(--cp-bg-elevated);
+}
+
+.topicCard {
+  padding: 1.5rem 0;
+  border-top: 2px solid var(--cp-border-strong);
+  color: var(--cp-text);
+  transition: border-color 160ms ease;
+
+  .eyebrow {
+    margin-bottom: 1rem;
+  }
+
+  h3 {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 1.25rem;
+    letter-spacing: -0.025em;
+  }
+
+  > p:last-child {
+    margin: 0;
+    color: var(--cp-text-muted);
+    font-size: 0.9375rem;
+  }
+
+  &:hover {
+    border-color: var(--cp-accent);
+    color: var(--cp-accent);
+    text-decoration: none;
+  }
+}
+
+.docsNote {
+  margin: 2rem 0 0;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--cp-border);
+  color: var(--cp-text-muted);
+  font-size: 0.875rem;
+}
+
+.communityCallout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
+  gap: 3rem;
+  align-items: center;
+  padding: 3rem;
+  border: 1px solid var(--cp-border);
+  border-radius: 16px;
+  background: var(--cp-accent-soft);
+
+  .eyebrow {
+    margin-bottom: 0.75rem;
+  }
+
+  h2 {
+    font-size: clamp(1.875rem, 3vw, 2.5rem);
+    letter-spacing: -0.045em;
+    line-height: 1.15;
+  }
+
+  p:last-child {
+    max-width: 34rem;
+    margin: 0;
+    color: var(--cp-text-muted);
+  }
+}
+
+.communityActions {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  align-items: center;
+}
+
+.transparency {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem 1.5rem;
+  margin-top: 2rem;
+  font-size: 0.8125rem;
+
+  p {
+    margin: 0 auto 0 0;
+    color: var(--cp-text-muted);
+  }
+}
+
+@media (max-width: 996px) {
+  .hero {
+    gap: 2rem;
+    padding-block: 3rem;
+  }
+
+  .heroCopy h1 {
+    font-size: 3.25rem;
+  }
+
+  .cardGrid {
+    gap: 1rem;
+  }
+
+  .pathwayCard {
+    padding: 1.25rem;
+  }
+
+  .communityCallout {
+    gap: 2rem;
+    padding: 2rem;
+  }
+}
+
+@media (max-width: 767px) {
+  .hero,
+  .cardGrid,
+  .communityCallout {
+    grid-template-columns: 1fr;
+  }
+
+  .heroCopy h1 {
+    font-size: clamp(2.5rem, 10vw, 4rem);
+  }
+
+  .section {
+    padding-block: 3rem;
+  }
+
+  .sectionHeading {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: start;
+
+    > p {
+      max-width: none;
+    }
+  }
+
+  .pathwayCard h3 {
+    margin-top: 1.5rem;
+  }
+
+  .communityActions {
+    align-items: start;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .home a {
+    transition: none;
+
+    &:hover {
+      transform: none;
+    }
+  }
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1d68ec3..400bda8 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,38 +1,242 @@
-import React from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-import HomepageDocumentation from '@site/src/components/HomepageDocumentation';
-import HomepageAnalytics from '@site/src/components/HomepageAnalytics';
-
-import styles from './index.module.scss';
-
-function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+import React, { type ReactNode } from 'react'
+import clsx from 'clsx'
+import Link from '@docusaurus/Link'
+import Layout from '@theme/Layout'
+
+import styles from './index.module.scss'
+
+const pathways = [
+  {
+    number: '01',
+    label: 'Knowledge base',
+    title: 'See how others did it.',
+    description:
+      'Guides and customisations written by people using Docusaurus. Find an answer, try something new, or save yourself a bit of trial and error.',
+    to: '/knowledge/',
+    action: 'Explore the knowledge base',
+  },
+  {
+    number: '02',
+    label: 'Plugin directory',
+    title: 'Find a plugin for the job.',
+    description:
+      'Looking for search, analytics, or something more specific? Browse plugins from across the ecosystem and see what fits your site.',
+    to: '/plugindirectory/',
+    action: 'Browse the plugin directory',
+  },
+  {
+    number: '03',
+    label: 'Contributing',
+    title: 'Share what worked for you.',
+    description:
+      "Got a useful snippet or a fix for a confusing guide? Send it our way. You can also add a plugin or fill in details we're missing.",
+    to: '/contributing/',
+    action: 'How to contribute',
+  },
+]
+
+const topics = [
+  {
+    label: 'Colours, fonts & details',
+    title: 'Design & styling',
+    description: 'Change the look of your site with CSS, icons, and custom styling.',
+    to: '/knowledge/design/',
+  },
+  {
+    label: 'Things you can reuse',
+    title: 'Component library',
+    description: 'Explore reusable buttons, cards, columns, timelines, and more.',
+    to: '/knowledge/component-library/',
+  },
+  {
+    label: 'Ready to publish?',
+    title: 'Deployment guides',
+    description: 'Get your site online with Docker, Cloudflare Pages, or nginx.',
+    to: '/knowledge/deployment/',
+  },
+]
+
+function Arrow({ diagonal = false }: { diagonal?: boolean }) {
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-      </div>
-    </header>
-  );
+    <svg
+      aria-hidden="true"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      {diagonal ? <path d="M6 18 18 6M6 6h12v12" /> : <path d="M4 12h16m-6-6 6 6-6 6" />}
+    </svg>
+  )
 }
 
-export default function Home(): JSX.Element {
-  const {siteConfig} = useDocusaurusContext();
+export default function Home(): ReactNode {
   return (
     <Layout
-      title={`${siteConfig.title}`}
-      description={`${siteConfig.tagline}`}>
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-        <HomepageDocumentation />
-        <HomepageAnalytics />
+      title="Building with Docusaurus?"
+      description="Guides, plugins, and reusable components shared by Docusaurus users. Find help with your site or share something you've learned."
+    >
+      <main className={styles.home}>
+        <header className={clsx('container', styles.hero)}>
+          <div className={styles.heroCopy}>
+            <p className={styles.eyebrow}>
+              <span className={styles.statusDot} aria-hidden="true" />
+              By Docusaurus users, for Docusaurus users
+            </p>
+            <h1>
+              Building with <br />
+              <span>Docusaurus?</span>
+            </h1>
+            <p className={styles.intro}>
+              Find a plugin, borrow a component, or see how someone else solved that thing
+              you&apos;re stuck on. This is a place for Docusaurus users to share what works.
+            </p>
+            <div className={styles.actions}>
+              <Link className={styles.primaryButton} to="/knowledge/">
+                Browse the guides <Arrow />
+              </Link>
+              <Link className={styles.secondaryButton} to="/plugindirectory/">
+                Find a plugin <Arrow diagonal />
+              </Link>
+            </div>
+            <p className={styles.heroNote}>
+              An unofficial community site. Everyone&apos;s welcome.
+            </p>
+          </div>
+
+          <aside className={styles.fieldNotes} aria-labelledby="field-notes-title">
+            <div className={styles.noteMasthead}>
+              <span>FROM THE KNOWLEDGE BASE</span>
+              <Arrow diagonal />
+            </div>
+            <div className={styles.noteFeature}>
+              <p className={styles.eyebrow}>Need a component?</p>
+              <h2 id="field-notes-title">You don&apos;t have to start from scratch.</h2>
+              <p>
+                We&apos;ve collected buttons, cards, columns, and timelines you can use in your own
+                site. Have a look and adapt one to suit.
+              </p>
+              <Link to="/knowledge/component-library/" className={styles.textLink}>
+                Open the component library <Arrow />
+              </Link>
+            </div>
+            <Link to="/knowledge/design/css/variables/" className={styles.noteLink}>
+              <span>
+                <small>STYLING YOUR SITE</small>
+                Get to know your CSS variables
+              </span>
+              <Arrow diagonal />
+            </Link>
+            <Link to="/contributing/customisations/" className={styles.noteLink}>
+              <span>
+                <small>HAVE SOMETHING TO ADD?</small>
+                Share a customisation
+              </span>
+              <Arrow diagonal />
+            </Link>
+            <div className={styles.noteFooter}>
+              <span className={styles.statusDot} aria-hidden="true" />
+              Still growing. Corrections and additions welcome.
+            </div>
+          </aside>
+        </header>
+
+        <div className={styles.communityStrip}>
+          <div className={clsx('container', styles.stripInner)}>
+            <p>You don&apos;t need to figure it all out yourself.</p>
+            <span>Guides & tutorials</span>
+            <span>Plugins</span>
+            <span>Reusable components</span>
+          </div>
+        </div>
+
+        <section className={clsx('container', styles.section)} aria-labelledby="pathways-title">
+          <div className={styles.sectionHeading}>
+            <div>
+              <p className={styles.eyebrow}>Have a look around</p>
+              <h2 id="pathways-title">What brings you here?</h2>
+            </div>
+            <p>
+              Whether it&apos;s your first site or your fifth, we hope you find something useful.
+            </p>
+          </div>
+          <div className={styles.cardGrid}>
+            {pathways.map((pathway) => (
+              <Link key={pathway.number} to={pathway.to} className={styles.pathwayCard}>
+                <div className={styles.cardTop}>
+                  <span>{pathway.label}</span>
+                  <span className={styles.cardNumber}>{pathway.number}</span>
+                </div>
+                <h3>{pathway.title}</h3>
+                <p>{pathway.description}</p>
+                <span className={styles.cardAction}>
+                  {pathway.action} <Arrow />
+                </span>
+              </Link>
+            ))}
+          </div>
+        </section>
+
+        <section className={styles.topicsSection} aria-labelledby="topics-title">
+          <div className={clsx('container', styles.section)}>
+            <div className={styles.sectionHeading}>
+              <div>
+                <p className={styles.eyebrow}>In the knowledge base</p>
+                <h2 id="topics-title">What are you working on?</h2>
+              </div>
+              <Link to="/knowledge/" className={styles.textLink}>
+                Browse all knowledge <Arrow />
+              </Link>
+            </div>
+            <div className={styles.cardGrid}>
+              {topics.map((topic) => (
+                <Link key={topic.to} to={topic.to} className={styles.topicCard}>
+                  <p className={styles.eyebrow}>{topic.label}</p>
+                  <h3>
+                    {topic.title} <Arrow diagonal />
+                  </h3>
+                  <p>{topic.description}</p>
+                </Link>
+              ))}
+            </div>
+            <p className={styles.docsNote}>
+              New to Docusaurus? Start with the{' '}
+              <Link to="https://docusaurus.io/docs">official Docusaurus documentation</Link>. The
+              guides here pick up where you might want a few more examples.
+            </p>
+          </div>
+        </section>
+
+        <section className={clsx('container', styles.section)} aria-labelledby="community-title">
+          <div className={styles.communityCallout}>
+            <div>
+              <p className={styles.eyebrow}>Come say hello</p>
+              <h2 id="community-title">Stuck on something? Ask around.</h2>
+              <p>
+                The Docusaurus Discord is a good place to ask questions and talk through ideas. You
+                can share what you&apos;re building there, too. We&apos;d love to see it.
+              </p>
+            </div>
+            <div className={styles.communityActions}>
+              <Link to="https://discord.gg/docusaurus" className={styles.primaryButton}>
+                Join the Discord <Arrow diagonal />
+              </Link>
+              <Link to="/contributing/plugins/" className={styles.textLink}>
+                Built a plugin? Add it here <Arrow />
+              </Link>
+            </div>
+          </div>
+          <div className={styles.transparency}>
+            <p>This site is open source, and our analytics are public.</p>
+            <Link to="https://github.com/DocusaurusCommunity/website">Find us on GitHub</Link>
+            <Link to="https://plausible.io/docusaurus.community/">View our public analytics</Link>
+          </div>
+        </section>
       </main>
     </Layout>
-  );
+  )
 }
diff --git a/src/scss/_community-theme.scss b/src/scss/_community-theme.scss
new file mode 100644
index 0000000..bf953b2
--- /dev/null
+++ b/src/scss/_community-theme.scss
@@ -0,0 +1,228 @@
+:root {
+  color-scheme: light;
+  --cp-bg: #f7f4ef;
+  --cp-bg-elevated: #fcfbf8;
+  --cp-surface: #ffffff;
+  --cp-surface-soft: #f5f5f5;
+  --cp-border: #dedede;
+  --cp-border-strong: #919191;
+  --cp-text: #242424;
+  --cp-text-muted: #5c5c5c;
+  --cp-text-soft: #6f6f6f;
+  --cp-accent: #b11f4b;
+  --cp-accent-hover: #9a1a41;
+  --cp-accent-soft: rgba(177, 31, 75, 0.08);
+  --cp-accent-fg: #ffffff;
+  --cp-success: #16a34a;
+  --cp-danger: #dc2626;
+  --cp-warning: #f59e0b;
+  --cp-link: #0078d4;
+  --cp-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
+  --cp-overlay: rgba(255, 255, 255, 0.8);
+  --cp-panel: rgba(255, 255, 255, 0.86);
+  --cp-panel-strong: rgba(255, 255, 255, 0.96);
+  --cp-sheen: rgba(255, 255, 255, 0.55);
+  --cp-highlight: rgba(177, 31, 75, 0.12);
+}
+
+html[data-theme='dark'] {
+  color-scheme: dark;
+  --cp-bg: #3d3b3a;
+  --cp-bg-elevated: #343231;
+  --cp-surface: #292929;
+  --cp-surface-soft: #2e2e2e;
+  --cp-border: #474747;
+  --cp-border-strong: #5f5f5f;
+  --cp-text: #dedede;
+  --cp-text-muted: #919191;
+  --cp-text-soft: #b0b0b0;
+  --cp-accent: #fd8ea1;
+  --cp-accent-hover: #fb7b91;
+  --cp-accent-soft: rgba(253, 142, 161, 0.14);
+  --cp-accent-fg: #1a1a1a;
+  --cp-success: #4ade80;
+  --cp-danger: #f87171;
+  --cp-warning: #fbbf24;
+  --cp-link: #4da6ff;
+  --cp-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
+  --cp-overlay: rgba(41, 41, 41, 0.88);
+  --cp-panel: rgba(41, 41, 41, 0.72);
+  --cp-panel-strong: rgba(41, 41, 41, 0.96);
+  --cp-sheen: rgba(255, 255, 255, 0.04);
+  --cp-highlight: rgba(253, 142, 161, 0.12);
+}
+
+:root,
+html[data-theme='dark'] {
+  --ifm-color-primary: var(--cp-accent);
+  --ifm-color-primary-dark: var(--cp-accent-hover);
+  --ifm-color-primary-darker: var(--cp-accent-hover);
+  --ifm-color-primary-darkest: var(--cp-accent-hover);
+  --ifm-color-primary-light: var(--cp-accent);
+  --ifm-color-primary-lighter: var(--cp-accent);
+  --ifm-color-primary-lightest: var(--cp-accent);
+  --ifm-color-emphasis-100: var(--cp-bg-elevated);
+  --ifm-color-emphasis-200: var(--cp-border);
+  --ifm-color-emphasis-300: var(--cp-border-strong);
+  --ifm-color-emphasis-600: var(--cp-text-muted);
+  --ifm-color-emphasis-700: var(--cp-text-muted);
+  --ifm-color-emphasis-800: var(--cp-text);
+  --ifm-color-emphasis-900: var(--cp-text);
+  --ifm-color-content: var(--cp-text);
+  --ifm-color-content-secondary: var(--cp-text-muted);
+  --ifm-background-color: var(--cp-bg);
+  --ifm-background-surface-color: var(--cp-surface);
+  --ifm-font-color-base: var(--cp-text);
+  --ifm-heading-color: var(--cp-text);
+  --ifm-font-family-base: 'Segoe UI', Aptos, Calibri, -apple-system, BlinkMacSystemFont, sans-serif;
+  --ifm-font-family-monospace: Consolas, 'Courier New', Courier, monospace;
+  --ifm-heading-font-weight: 750;
+  --ifm-line-height-base: 1.7;
+  --ifm-navbar-background-color: var(--cp-bg-elevated);
+  --ifm-navbar-link-color: var(--cp-text);
+  --ifm-navbar-height: 4.5rem;
+  --ifm-navbar-shadow: none;
+  --ifm-footer-background-color: var(--cp-surface);
+  --ifm-footer-color: var(--cp-text-muted);
+  --ifm-footer-link-color: var(--cp-text);
+  --ifm-footer-title-color: var(--cp-text);
+  --ifm-menu-color: var(--cp-text-muted);
+  --ifm-menu-color-active: var(--cp-accent);
+  --ifm-menu-color-background-active: var(--cp-accent-soft);
+  --ifm-menu-color-background-hover: var(--cp-accent-soft);
+  --ifm-card-background-color: var(--cp-surface);
+  --ifm-card-border-radius: 16px;
+  --ifm-global-radius: 0.625rem;
+  --ifm-toc-border-color: var(--cp-border);
+  --ifm-hr-border-color: var(--cp-border);
+  --ifm-table-border-color: var(--cp-border);
+  --ifm-blockquote-border-color: var(--cp-accent);
+  --ifm-code-background: var(--cp-accent-soft);
+  --ifm-link-color: var(--cp-accent);
+  --ifm-link-hover-color: var(--cp-accent-hover);
+  --docusaurus-highlighted-code-line-bg: var(--cp-highlight);
+  --site-color-favourite-background: var(--cp-accent-soft);
+  --site-color-tooltip: var(--cp-surface);
+  --site-color-tooltip-background: var(--cp-text);
+  --site-color-svg-icon-favourite: var(--cp-accent);
+  --site-color-checkbox-checked-bg: var(--cp-accent-soft);
+}
+
+// Keep small text readable on the warmer dark canvas, including tinted panels.
+html[data-theme='dark'] {
+  --cp-text-muted: var(--cp-text-soft);
+}
+
+body {
+  height: auto;
+  min-height: 100vh;
+}
+
+.navbar {
+  border-bottom: 1px solid var(--cp-border);
+}
+
+.navbar__title {
+  font-size: 1rem;
+  font-weight: 800;
+  letter-spacing: -0.035em;
+}
+
+.navbar__link {
+  font-size: 0.875rem;
+  font-weight: 650;
+}
+
+.navbar__logo {
+  margin-right: 0.625rem;
+}
+
+.footer {
+  border-top: 1px solid var(--cp-border);
+}
+
+.footer--dark {
+  --ifm-footer-background-color: var(--cp-surface);
+  --ifm-footer-color: var(--cp-text-muted);
+  --ifm-footer-link-color: var(--cp-text);
+  --ifm-footer-title-color: var(--cp-text);
+}
+
+.footer__copyright {
+  color: var(--cp-text-muted);
+  font-size: 0.8125rem;
+}
+
+.footer__link-item:hover {
+  color: var(--cp-accent);
+}
+
+.button--primary {
+  --ifm-button-color: var(--cp-accent-fg);
+}
+
+.button--secondary {
+  --ifm-button-background-color: var(--cp-surface);
+  --ifm-button-border-color: var(--cp-border-strong);
+  --ifm-button-color: var(--cp-text);
+
+  &:hover {
+    --ifm-button-background-color: var(--cp-accent-soft);
+    --ifm-button-border-color: var(--cp-accent);
+  }
+}
+
+.pagination-nav__link,
+.card {
+  border: 1px solid var(--cp-border);
+  box-shadow: none;
+}
+
+.markdown h1 {
+  font-size: clamp(2rem, 4vw, 3rem);
+  letter-spacing: -0.045em;
+}
+
+.markdown h2,
+.markdown h3 {
+  letter-spacing: -0.025em;
+}
+
+.theme-doc-sidebar-container {
+  border-color: var(--cp-border);
+}
+
+.menu__link {
+  border-radius: 0.625rem;
+}
+
+.designedBy .heart {
+  fill: var(--cp-accent);
+}
+
+:focus-visible {
+  outline: 2px solid var(--cp-accent);
+  outline-offset: 4px;
+}
+
+::selection {
+  background: var(--cp-highlight);
+  color: var(--cp-text);
+}
+
+@media (max-width: 1200px) and (min-width: 997px) {
+  .navbar__item {
+    padding-inline: 0.5rem;
+  }
+
+  .navbar__title {
+    font-size: 0.875rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .designedBy .heart,
+  .sponsorship-link::before {
+    animation: none;
+  }
+}
diff --git a/src/scss/custom.scss b/src/scss/custom.scss
index 6d7c9ad..09bd570 100644
--- a/src/scss/custom.scss
+++ b/src/scss/custom.scss
@@ -1,3 +1,5 @@
+@use 'sass:meta';
+
 /**
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to
@@ -304,3 +306,5 @@ html[data-theme='dark'] .alert--docusaurus {
   --ifm-alert-foreground-color: rgb(255,255,255);
   --ifm-alert-border-color: #e5ff00;
 }
+
+@include meta.load-css('community-theme');