Standard — Graphic & Typographic Standards

Standard

Publication

STND-M1

Subject

Framework for Astro

Supersedes

Manual configuration

1.0

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.

npm install @stnd/core

2.0

Typographic system

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:

Aa--scale-5
Aa--scale-4
Aa--scale-3
Aa--scale-2
Aa — body text, the measure everything serves--scale
Aa — captions and asides--scale-d2
Aa — metadata--scale-d4

3.0

Color system

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:

accent — the seed

surface

border

success

warning

error

4.0

Proportion

Two constants govern every block on this page. The bars are drawn at true ratio:

1.618 — golden, for layout blocks

1.414 — silver, for the type scale

1.000 — the measure

5.0

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.

6.0

The four invariants

6.1

Beauty is default

No one should configure margins to deserve good typography. Your mother's recipe should look like it belongs in a prestige cookbook — without her doing anything.

6.2

Friction is the enemy

Ten seconds from thought to URL. Speed is a form of respect — for the writer, and for the reader.

6.3

The file is yours

Everything is plain text files. Applications are interchangeable readers. If the servers go dark tomorrow, your writing remains intact, legible, and yours.

6.4

Sustainable by architecture

Static first, edge logic, minimal JavaScript, boring technology. Efficient code is an ecological position, not a benchmark.

7.0

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.

8.0

Adoption

npm create astro@latest my-site -- --template minimal
cd my-site
npm install @stnd/core
// 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.