A typography framework for Astro.
One integration. No configuration. Just write.

Standard applies 500 years of typographic refinement to your HTML automatically. Baseline grids. Golden ratio proportions. Optimal line lengths. Responsive scales. Dark mode. Print styles. Everything.

You are reading the proof. This page has no custom layout, no design tokens, no spacing overrides. The text you see — its size, its measure, its rhythm, its color — is Standard doing what it does by default.

Get started

npm install @stnd/core

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

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

That's it. Your site now has classical typography, a design system built on the golden ratio, an OKLCH color engine, and a vertical slice architecture called the Folio system.

What you get

Standard is a modular ecosystem. Each package does one thing well. Use them together or apart.

@stnd/styles

The CSS framework. Golden ratio, Swiss grid, OKLCH color, typographic scale, baseline rhythm, prose layout, dark mode, print styles, e-ink support.

@stnd/core

The Astro integration. Bootstraps the module system, registers aliases, injects styles, orchestrates middleware, and provides the Hook portal system.

@stnd/server

Server infrastructure. StandardRoot, StandardModel, JWT authentication, sessions, CORS, error handling, i18n.

@stnd/press

Content engine. Markdown rendering with typography transforms. Document conversion from DOCX, PDF, HTML, and RTF.

@stnd/fonts

Self-hosted typefaces as Folio manifests. Inter, Instrument, IBM Plex Mono, Kalice, and fifty more.

@stnd/themes

Temperaments. Humanist, Technical, Editorial, Academic, International, Gallery — each a complete design system.

@stnd/client

Browser utilities. Keyboard shortcuts, touch gestures, clipboard, deep links, stores, e-ink detection.

@stnd/launcher

A universal command palette engine built with Svelte 5 runes.

@stnd/ui

Shared components for Astro and Svelte. Logo, Menu, Toast, Dropdown, and the building blocks of interfaces.

@stnd/layout

Base layouts. Meta tags, Open Graph, Schema.org, favicons — the invisible infrastructure of a well-made page.

@stnd/cloudflare

Edge-first deployment. Image optimization, Pages Functions, D1, R2, KV — Cloudflare as infrastructure.

// folio/my-feature/index.folio.js
export default {
  id: "my-feature",
  name: "My Feature",
  routes: [
    { path: "/feature", entrypoint: "./routes/index.astro" },
  ],
  styles: ["./styles/feature.scss"],
  middleware: [
    { entrypoint: "./middleware.ts", order: -100 },
  ],
};

import { Note } from '@modules/root/models/Note';
import Author from '@modules/root/models/Author';
import Base from '@modules/root/layouts/Base.astro';

npm install @stnd/core