Standard

Introduction

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.

npx @stnd/cli new my-project

Or add it to an Astro project you already have:

npm install @stnd/core @astrojs/svelte sass-embedded

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:

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 --line-width-md, the framework's own optimal reading measure (60–75 characters):

Adoption

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.

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

Two domains with nothing in common, one technical foundation. That is the proof the specification asks for.