diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 2cd29b4..1837668 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -1,14 +1,107 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 import Layout from '@theme/Layout';
+import styles from './index.module.css';
+
+const capabilities = [
+  {
+    title: 'Build',
+    description: 'Compile single-package repositories and monorepos with shared, predictable defaults.'
+  },
+  {
+    title: 'Test',
+    description: 'Run Node.js and browser test suites with Vitest and Playwright.'
+  },
+  {
+    title: 'Lint',
+    description: 'Format and lint JavaScript and TypeScript with the shared Biome configuration.'
+  },
+  {
+    title: 'Publish',
+    description: 'Bundle, measure, version, and publish packages using the project conventions.'
+  }
+];
 
 export default function Home() {
   return (
-    <Layout title="vis.gl development tools" description="Shared development tools for vis.gl projects">
-      <main className="container margin-vert--lg">
-        <h1>vis.gl development tools</h1>
-        <p>Shared tools for building, testing, linting, bundling, and publishing vis.gl projects.</p>
-        <Link className="button button--primary" to="/docs">Read the documentation</Link>
+    <Layout title="dev-tools" description="Shared development tools for vis.gl projects">
+      <header className={styles.hero}>
+        <div className="container">
+          <div className={styles.heroContent}>
+            <p className={styles.eyebrow}>VIS.GL DEVELOPER INFRASTRUCTURE</p>
+            <h1>dev-tools</h1>
+            <p className={styles.tagline}>
+              Shared tools for building, testing, linting, bundling, and publishing open source
+              JavaScript frameworks.
+            </p>
+            <div className={styles.actions}>
+              <Link className="button button--primary button--lg" to="/docs/dev-tools">
+                Get started
+              </Link>
+              <Link className="button button--secondary button--lg" to="/docs">
+                Explore the docs
+              </Link>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main>
+        <section className={styles.section}>
+          <div className="container">
+            <div className={styles.sectionIntro}>
+              <p className={styles.eyebrow}>ONE TOOLKIT, SHARED ACROSS PROJECTS</p>
+              <h2>Build better libraries with less setup</h2>
+              <p>
+                dev-tools collects the build, test, and release workflows used across the vis.gl
+                ecosystem into reusable commands and configurations.
+              </p>
+            </div>
+            <div className="row">
+              {capabilities.map(capability => (
+                <div className="col col--3" key={capability.title}>
+                  <article className={styles.card}>
+                    <span className={styles.cardNumber}>0{capabilities.indexOf(capability) + 1}</span>
+                    <h3>{capability.title}</h3>
+                    <p>{capability.description}</p>
+                  </article>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section className={`${styles.section} ${styles.sectionMuted}`}>
+          <div className="container">
+            <div className={styles.sectionIntro}>
+              <p className={styles.eyebrow}>THE TOOLKIT</p>
+              <h2>Packages for the vis.gl ecosystem</h2>
+            </div>
+            <div className="row">
+              <div className="col col--4">
+                <article className={styles.packageCard}>
+                  <h3>@vis.gl/dev-tools</h3>
+                  <p>Build, lint, test, bundle, measure, and publish JavaScript packages.</p>
+                  <Link to="/docs/dev-tools">Read dev-tools docs →</Link>
+                </article>
+              </div>
+              <div className="col col--4">
+                <article className={styles.packageCard}>
+                  <h3>@vis.gl/ts-plugins</h3>
+                  <p>TypeScript transforms and compiler helpers for modern graphics projects.</p>
+                  <Link to="/docs/ts-plugins/ts-transform-webgpu">Read TypeScript plugin docs →</Link>
+                </article>
+              </div>
+              <div className="col col--4">
+                <article className={styles.packageCard}>
+                  <h3>@vis.gl/docusaurus-website</h3>
+                  <p>Shared configuration and components for current vis.gl documentation sites.</p>
+                  <Link to="/docs/docusaurus-website">Read website docs →</Link>
+                </article>
+              </div>
+            </div>
+          </div>
+        </section>
       </main>
     </Layout>
   );
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
new file mode 100644
index 0000000..8b700b7
--- /dev/null
+++ b/website/src/pages/index.module.css
@@ -0,0 +1,131 @@
+.hero {
+  background:
+    radial-gradient(circle at 80% 20%, rgb(0 173 230 / 30%), transparent 32%),
+    linear-gradient(120deg, var(--ifm-color-gray-900), #1a5069);
+  color: var(--ifm-color-white);
+  padding: 7rem 0 8rem;
+}
+
+.heroContent {
+  max-width: 52rem;
+}
+
+.hero h1 {
+  color: inherit;
+  font-size: clamp(3.5rem, 10vw, 7rem);
+  letter-spacing: -0.06em;
+  line-height: 0.95;
+  margin: 0 0 1.5rem;
+}
+
+.eyebrow {
+  color: var(--ifm-color-primary);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  margin-bottom: 1rem;
+}
+
+.hero .eyebrow {
+  color: #8ee5ff;
+}
+
+.tagline {
+  color: var(--ifm-color-gray-200);
+  font-size: 1.35rem;
+  line-height: 1.5;
+  margin: 0;
+  max-width: 42rem;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 2.5rem;
+}
+
+.actions :global(.button--secondary) {
+  background: transparent;
+  border-color: var(--ifm-color-gray-300);
+  color: var(--ifm-color-white);
+}
+
+.section {
+  padding: 6rem 0;
+}
+
+.sectionMuted {
+  background: var(--ifm-color-gray-200);
+}
+
+.sectionIntro {
+  margin: 0 auto 3rem;
+  max-width: 42rem;
+  text-align: center;
+}
+
+.sectionIntro h2 {
+  font-size: 2.25rem;
+  margin-bottom: 1rem;
+}
+
+.sectionIntro p:last-child {
+  color: var(--ifm-color-gray-700);
+  font-size: 1.1rem;
+  line-height: 1.6;
+}
+
+.card,
+.packageCard {
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-gray-300);
+  border-radius: 0.5rem;
+  color: var(--ifm-font-color-base);
+  height: 100%;
+  padding: 1.75rem;
+}
+
+.card {
+  border-top: 3px solid var(--ifm-color-primary);
+}
+
+.cardNumber {
+  color: var(--ifm-color-primary);
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  margin-bottom: 2rem;
+}
+
+.card h3,
+.packageCard h3 {
+  color: var(--ifm-heading-color);
+  font-size: 1.3rem;
+  margin-bottom: 0.75rem;
+}
+
+.card p,
+.packageCard p {
+  color: var(--ifm-font-color-base);
+  line-height: 1.6;
+  margin-bottom: 0;
+}
+
+.packageCard a {
+  display: inline-block;
+  font-weight: 600;
+  margin-top: 1.5rem;
+}
+
+@media (max-width: 996px) {
+  .hero {
+    padding: 5rem 0 6rem;
+  }
+
+  .card,
+  .packageCard {
+    margin-bottom: 1.5rem;
+  }
+}