Standard

Introduction & QuickStart

Standard applies 500 years of typographic refinement to your HTML, automatically. Baseline grids. Golden-ratio proportions. Optimal measures. An OKLCH color engine. Dark mode. Print styles. One Astro integration; no configuration.

This page is set entirely by the framework. Every specification printed below — every size, every color value, every ratio — is measured from the live stylesheet as you read it. The manual cannot drift from the system, because the manual is the system, rendering itself.

Zero decisions by default. Knowledge as you need it.

Modern development drowns writers and creators in endless micro-decisions: font pairings, margin scales, color palettes, dark mode edge cases, and layout CSS. Standard takes all of them off your shoulders before you start. You do not need to configure or understand the underlying math to publish dignified work immediately.

Instant Scaffolding via CLI (@stnd/cli)

Bootstrap a complete, production-ready project in seconds with the official scaffolding tool. Pre-configured with the typographic scale, vertical rhythm, and Astro 5 SSR:

npx @stnd/cli new my-project

Select an architectural template directly with the -t flag:

Vertical Slice Generator

Scaffold a hermetic, zero-coupling vertical slice inside any existing project:

stnd module my-feature

The Architectural Cookbook

Rather than isolated code snippets, the Standard Cookbook documents full production topologies, routing manifests, and layout rules for real-world projects:

Browse all architecture blueprints in the Cookbook →

The four invariants

The module system

Every feature is a vertical slice: routes, styles, components, and middleware in one folder, declared by one manifest. Modules register themselves; the core compiles everything in memory.

// modules/my-feature/index.module.js
export default {
  id: "my-feature",
  routes: [{ path: "/feature", entrypoint: "./routes/index.astro" }],
  styles: ["./styles/feature.scss"],
  hooks: { "header:top": "./components/Banner.astro" },
};

Delete the folder and the feature disappears. The app keeps running. That is the litmus test of modularity — and the whole specification.

The hook system

Modules don't import each other. They publish to named hook zones, and whatever's listening mounts there — neither side has to know the other exists.

hooks: {
  "header:top": "./components/Banner.astro", // UI zone — mounts into a page slot
  "content:validate": "./hooks/validate.js",  // logic hook — reachable via virtual:stnd/hooks
}

A hook name resolves to exactly one kind — UI/action zone or logic hook — never both. The loader checks it at build time and fails loudly the moment a module tries to mix them.

Typography

One base size, one ratio. The whole scale follows. Standard uses the silver ratio (1.414) for type and the golden ratio (1.618) for layout blocks. Measured now, on your screen:

Color

You choose an ink, a paper, and one accent. The OKLCH engine derives the rest: surfaces and borders from your paper, semantic states by rotating your ink's hue at equal perceived lightness — so the palette agrees with itself no matter what you seed it with. This page seeds the warm red of a federal standards manual, and every value below is measured from the running stylesheet:

6 Classical Temperaments & 34 Themes

Rooted in European typographic history, Standard defines six classical temperaments (Garamond, Baskerville, Didot, Caslon, Bodoni, Elzévir) and two modern companions (Modernist, Brutalist).

A single multi-target Sass compiler generates the entire 34-theme suite across five development environments: Astro, Obsidian, Zed, Yazi, and Fish Shell. The chromatic DNA of your published writing matches your local authoring tools without manual synchronization.

Explore the 34 themes and multi-target compiler →

Spacing

One baseline, plain multiples and divisions — no arbitrary magic numbers. Every gap on this page is --space scaled, measured now, on your screen:

Table

A bare <table> — no class, no wrapper:

Prose

Every other section on this page breaks out to the full sheet. This one doesn't — it sits at --prose-width, the framework's own optimal reading measure (60–75 characters):

Interface Primitives (@stnd/ui)

Standard provides an unstyled, fully accessible component collection built directly on native browser primitives and framework design tokens. Zero client-side framework runtime, complete keyboard focus trapping, and native backdrop filtration:

Inspect the complete UI component library →

Manual Adoption

While @stnd/cli is the fastest way to start, Standard can also be integrated into an existing Astro project manually:

npm create astro@latest my-site -- --template minimal
cd my-site
npm install @stnd/core @astrojs/svelte sass-embedded

// astro.config.mjs
import { defineConfig } from "astro/config";
import standard from "@stnd/core";

export default defineConfig({
  integrations: [standard()],
});

That is the entire procedure. The manual documents every package, token, and fatal error. The source is open.

Applications in the field

Standard Garden — a quiet place to think in public. Paste your prose; get a beautiful URL in ten seconds.

Reveal — a sovereign photo workflow and physical darkroom engine for photographers (in active development, discover at reveal.photos).

L'art d'enseigner — an educational platform for homeschooling families in Quebec.

Three applications with radically different domains, one technical foundation. That is the proof the specification asks for.