stnd.buildSTANDARD MANUAL2026-09-20

Landing Page Recipe

Architectural blueprint and file tree for building a modern landing page with Standard.

On this page

Landing Page Recipe

This recipe details the construction of a high-impact, single-page landing layout. It demonstrates how to leverage Standard’s mathematical typographic hierarchy, the 12-column Swiss layout grid, and vertical-slice architecture to create a landing page that renders instantaneously without runtime client overhead.

Instant Scaffolding

To bootstrap this project immediately with @stnd/cli, execute:

npx @stnd/cli new my-landing --template landing
cd my-landing
pnpm install
pnpm dev

File Structure

All application code is contained within the modules/landing/ vertical slice. No application code lives in src/.

my-landing/
  astro.config.mjs               # Astro configuration with @stnd/core
  package.json                   # Project dependencies and dev scripts
  tsconfig.json                  # TypeScript path mappings (@modules/*)
  modules/
    landing/
      index.module.js            # Module manifest mapping route "/"
      routes/
        index.astro              # Main landing page view
      components/
        Hero.astro               # Title, lead paragraph, call-to-action
        Features.astro           # 3-column grid highlighting key benefits
        Specimen.astro           # Typographic specimen section

Architectural Breakdown

1. Astro Configuration (astro.config.mjs)

The project is configured with @stnd/core and the Cloudflare adapter in server/edge mode:

import { defineConfig } from "astro/config";
import cloudflare from "@astrojs/cloudflare";
import standard from "@stnd/core";

export default defineConfig({
  site: "https://example.com",
  output: "server",
  adapter: cloudflare(),
  integrations: [
    standard({
      title: "Product Showcase",
    }),
  ],
});

2. Module Manifest (modules/landing/index.module.js)

The slice declares itself and connects the root route / directly to its internal view:

export default {
  id: "landing",
  name: "Landing",
  description: "Landing page showcase slice.",
  routes: [
    { path: "/", entrypoint: "./routes/index.astro" },
  ],
};

3. Main Landing Route (modules/landing/routes/index.astro)

The route delegates presentation to slice components and wraps them inside Standard’s semantic container classes (rhythm, box, grid-12):

---
export const prerender = true;
import Hero from "../components/Hero.astro";
import Features from "../components/Features.astro";
import Specimen from "../components/Specimen.astro";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <title>Product — Built with Standard</title>
  </head>
  <body class="rhythm inky">
    <header class="box border-bottom">
      <nav class="grid-12 items-center">
        <div class="col-6">
          <span class="spec font-bold">STANDARD / SHOWCASE</span>
        </div>
        <div class="col-6 text-right">
          <a href="#features" class="spec mr-4">Features</a>
          <a href="#cta" class="spec">Get Started &rarr;</a>
        </div>
      </nav>
    </header>

    <main>
      <Hero />
      <Features />
      <Specimen />
    </main>

    <footer class="box border-top mt-16 text-sm opacity-70">
      <div class="grid-12">
        <div class="col-12 text-center">
          <p class="spec">&copy; {new Date().getFullYear()} Standard Systems. Engineered for the edge.</p>
        </div>
      </div>
    </footer>
  </body>
</html>

4. Hero Component (modules/landing/components/Hero.astro)

The hero section uses asymmetric columns (col-8 / col-4) to balance the headline and action prompt:

---
---
<section class="box py-16">
  <div class="grid-12">
    <div class="col-8 sm:col-full">
      <p class="spec text-accent mb-2">SYSTEM 01 &mdash; RELEASE READY</p>
      <h1 class="text-4xl font-bold tracking-tight mb-6">
        Typographic precision.<br />Zero runtime friction.
      </h1>
      <p class="prose text-lg opacity-80 mb-8 max-w-line">
        Standard provides mathematically proportioned scales, baseline grids, and edge-native performance. Deliver beauty without configuration debt.
      </p>
      <div class="flex gap-4">
        <a href="#cta" class="button button-primary">Get Started</a>
        <a href="#features" class="button button-outline">View Specs</a>
      </div>
    </div>
  </div>
</section>

5. Features Grid (modules/landing/components/Features.astro)

Features are laid out using a clean 3-card structure (col-4 across grid-12):

---
const features = [
  {
    code: "01",
    title: "Baseline Rhythm",
    description: "Every element snaps into mathematical vertical intervals derived from the golden ratio.",
  },
  {
    code: "02",
    title: "Edge Delivery",
    description: "Prerendered to static HTML and served from globally distributed edge nodes in milliseconds.",
  },
  {
    code: "03",
    title: "Zero Logic in Views",
    description: "Vertical slices cleanly separate routes, data sources, and visual presentation components.",
  },
];
---

<section id="features" class="box py-12 border-top">
  <div class="grid-12">
    <div class="col-12 mb-8">
      <h2 class="spec text-sm uppercase tracking-wider">System Specifications</h2>
    </div>
    {features.map((feat) => (
      <div class="col-4 sm:col-full border p-6">
        <span class="spec text-accent block mb-2">{feat.code}</span>
        <h3 class="text-xl font-semibold mb-2">{feat.title}</h3>
        <p class="text-sm opacity-80">{feat.description}</p>
      </div>
    ))}
  </div>
</section>

Styling & Layout Classes Used

  • grid-12: The 12-column Swiss CSS grid container.
  • col-X / sm:col-full: Responsive column span sizing.
  • box: Applies standard horizontal padding matched to the viewport measure.
  • rhythm: Enforces baseline typographic rhythm on descendant heading and paragraph elements.
  • spec: Monospace metadata label style using Berkeley Mono.
  • prose: Optimal line measure (45-75 characters per line) for editorial reading comfort.