diff --git a/site/decodal-site/src/layouts/ManualLayout.astro b/site/decodal-site/src/layouts/ManualLayout.astro
index 7064459..3523edf 100644
--- a/site/decodal-site/src/layouts/ManualLayout.astro
+++ b/site/decodal-site/src/layouts/ManualLayout.astro
@@ -2,7 +2,7 @@
 import { nav } from '../lib/docs.js';
 import '../style.css';
 
-const { title = 'Decodal', active = '', playground = false } = Astro.props;
+const { title = 'Decodal', active = '', playground = false, frontpage = false } = Astro.props;
 
 function renderNav(items, prefix = []) {
   return `<ul class="nav-tree">${items
@@ -25,20 +25,20 @@ function renderNav(items, prefix = []) {
   </head>
   <body>
     <header class="topbar">
-      <a class="brand" href="/docs/introduction/">Decodal</a>
+      <a class="brand" href="/">Decodal</a>
       <nav class="topnav">
         <a href="/docs/introduction/">Docs</a>
         <a href="/playground/">Playground</a>
       </nav>
     </header>
-    <div class={playground ? 'layout playground-layout' : 'layout'}>
-      {!playground && (
+    <div class={playground || frontpage ? 'layout playground-layout' : 'layout'}>
+      {!playground && !frontpage && (
         <aside class="sidebar">
           <a class="sidebar-title" href="/docs/">Manual</a>
           <nav set:html={renderNav(nav)} />
         </aside>
       )}
-      <main class={playground ? 'playground' : ''}>
+      <main class={playground ? 'playground' : frontpage ? 'frontpage' : ''}>
         <slot />
       </main>
     </div>
diff --git a/site/decodal-site/src/pages/index.astro b/site/decodal-site/src/pages/index.astro
index c35adfa..3895e98 100644
--- a/site/decodal-site/src/pages/index.astro
+++ b/site/decodal-site/src/pages/index.astro
@@ -1,3 +1,64 @@
 ---
-return Astro.redirect('/docs/introduction/');
+import ManualLayout from '../layouts/ManualLayout.astro';
+
+const example = `Port = Int >= 1 & <= 65535 default 8080;
+
+Server = {
+    host = String default "localhost";
+    port = Port;
+};
+
+Production = Server & {
+    host = "example.com";
+};`;
 ---
+<ManualLayout title="Decodal" frontpage>
+  <section class="hero">
+    <p class="eyebrow">Lazy configuration and schema language</p>
+    <h1>Decodal keeps configuration, constraints, and defaults in one composable value.</h1>
+    <p class="hero-copy">
+      Define structured data with constraints, compose it with patches, and materialize the result from Rust,
+      WebAssembly, or the browser playground.
+    </p>
+    <div class="hero-actions">
+      <a class="button primary" href="/playground/">Try the playground</a>
+      <a class="button secondary" href="/docs/introduction/">Read the manual</a>
+    </div>
+  </section>
+
+  <section class="home-grid" aria-label="Decodal overview">
+    <article class="home-card">
+      <h2>What it is</h2>
+      <p>
+        Decodal is a small data language for configuration shapes that need validation, defaults,
+        lazy imports, and predictable composition.
+      </p>
+    </article>
+    <article class="home-card">
+      <h2>Where it runs</h2>
+      <p>
+        Use the Rust crate for runtime embedding, the WASM package in browsers, CodeMirror/Lezer for the Web editor,
+        and Tree-sitter for general editor integration.
+      </p>
+    </article>
+    <article class="home-card">
+      <h2>Start here</h2>
+      <p>
+        Open the playground to run examples in your browser, or read the components page to see how the runtime and
+        editor pieces fit together.
+      </p>
+      <p><a href="/docs/components/">View components →</a></p>
+    </article>
+  </section>
+
+  <section class="home-example" aria-label="Decodal example">
+    <div>
+      <h2>A compact example</h2>
+      <p>
+        Constraints and defaults are values. Compose them with concrete data and materialize when the host knows what
+        output shape it expects.
+      </p>
+    </div>
+    <pre><code>{example}</code></pre>
+  </section>
+</ManualLayout>
diff --git a/site/decodal-site/src/style.css b/site/decodal-site/src/style.css
index 451e8ba..5e365d3 100644
--- a/site/decodal-site/src/style.css
+++ b/site/decodal-site/src/style.css
@@ -458,6 +458,99 @@ button:disabled {
   white-space: nowrap;
 }
 
+.frontpage {
+  max-width: 1120px;
+  margin: 0 auto;
+}
+
+.hero {
+  padding: 5rem 0 4rem;
+}
+
+.eyebrow {
+  color: var(--muted);
+  font-size: 0.9rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  margin: 0 0 1rem;
+  text-transform: uppercase;
+}
+
+.hero h1 {
+  font-size: clamp(2.4rem, 6vw, 5rem);
+  line-height: 0.95;
+  letter-spacing: -0.06em;
+  margin: 0;
+  max-width: 950px;
+}
+
+.hero-copy {
+  color: var(--muted);
+  font-size: 1.2rem;
+  line-height: 1.7;
+  max-width: 760px;
+  margin: 1.5rem 0 0;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.9rem;
+  margin-top: 2rem;
+}
+
+.button {
+  border-radius: 999px;
+  font-weight: 700;
+  padding: 0.8rem 1.15rem;
+  text-decoration: none;
+}
+
+.button.primary {
+  background: var(--link);
+  color: #ffffff;
+}
+
+.button.secondary {
+  border: 1px solid var(--border);
+  color: var(--text);
+}
+
+.home-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-bottom: 1.5rem;
+}
+
+.home-card,
+.home-example {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  padding: 1.4rem;
+}
+
+.home-card h2,
+.home-example h2 {
+  margin-top: 0;
+}
+
+.home-card p:last-child,
+.home-example p:last-child {
+  margin-bottom: 0;
+}
+
+.home-example {
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
+}
+
+.home-example pre {
+  margin: 0;
+}
+
 @media (max-width: 900px) {
   .layout {
     grid-template-columns: 1fr;
@@ -467,7 +560,12 @@ button:disabled {
     border-right: 0;
     max-height: 260px;
   }
-  .playground-shell {
+  .playground-shell,
+  .home-grid,
+  .home-example {
     grid-template-columns: 1fr;
   }
+  .hero {
+    padding-top: 3rem;
+  }
 }
