THE ON-RAMP
USE HAUSE
Install, import the tokens, render a form. The exhibition stays next door — this page is the plumbing, in evidence voice.
INSTALL — REACT 19 · NEXT 16
npm install github:chrishayuk/hause
TOKENS — ONCE, IN YOUR GLOBAL CSS
@import "tailwindcss"; @import "@chrishayuk/hause/tokens.css"; /* Tailwind v4 skips node_modules when scanning for class names — point it at the library so the forms' utilities are generated. */ @source "../../node_modules/@chrishayuk/hause";
A MINIMAL CHAPTER
import { Hero } from "@chrishayuk/hause/components/forms/Hero";
import { Observation } from "@chrishayuk/hause/components/forms/Observation";
import { Connection } from "@chrishayuk/hause/components/forms/Connection";
import { Snippet } from "@chrishayuk/hause/components/forms/Snippet";
import { formCount } from "@chrishayuk/hause/manifest";
export default function Chapter() {
return (
<main>
<Hero kicker="THE ROOM" title="THE CLAIM" dek="The explanation walks beside the reader." />
<Observation text="What is actually there, before what it means." />
<Connection text="Where this leads." links={[{ href: "/next", label: "THE NEXT ROOM" }]} />
</main>
);
}THE LEGIBILITY LAYER — SEO & AEO FROM THE SAME RECORDS
import { Answer } from "@chrishayuk/hause/components/forms/Answer";
import { JsonLd } from "@chrishayuk/hause/components/JsonLd";
import { techArticleLd, definedTermLd } from "@chrishayuk/hause/seo";
// The question, asked the way people ask it — a real heading, a
// lift-able answer, a citable anchor. The designed heading above it
// stays exactly as designed.
<Answer
id="what-is-the-claim"
question="What is the claim, plainly?"
answer="Forty to a hundred words a reader — or a machine — can lift whole."
/>
// Structured data projected from records the page already holds,
// so the crawlable answer can never drift from the rendered one.
<JsonLd data={techArticleLd({ headline, description, url, siteUrl, siteName })} />THE CITABLE SURFACE — ONE RECORD, FOUR SURFACES
import { Provenance } from "@chrishayuk/hause/components/forms/Provenance";
import { Citation } from "@chrishayuk/hause/components/forms/Citation";
import { citationMeta, type CitationRecord } from "@chrishayuk/hause/cite";
import { citationLd } from "@chrishayuk/hause/seo";
// The site holds the record. The library holds the forms, the
// formatters and the machine surfaces.
const NOTE: CitationRecord = {
title: "Precision maps",
authors: ["Chris Hay"],
published: "2026-08-31", // FIRST published. A revision sets revised.
version: "1.0",
url: "https://example.org/research/precision-maps",
publisher: "Example",
kind: "research-note",
// doi: absent until one is actually registered.
};
export const metadata = { other: citationMeta(NOTE) }; // the head
<JsonLd data={citationLd(NOTE)} /> {/* the graph */}
<Provenance record={NOTE} citeHref="#cite" history={[ /* the page */
{ date: "2026-08-31", text: "Published." },
]} />
<Citation record={NOTE} /> {/* the export */}Provenance rests as one line and expands to the record; Citation renders the reference plain-first, then BibTeX, APA and CSL-JSON.
PUBLISHING IS A DESIGN-SYSTEM CONCERN
Everything substantive is citable by default — stable URL, title, author, first-publication date, version, and an export. A work worth defending can additionally become a registered publication: an immutable version plus a registered identifier. The rules are one rule. Published means first published; a revision sets revised and never quietly moves the date. A substantive change is a new version, not a silent edit. And an identifier that has not been registered is absent — no placeholder DOI, no registration pending.
MACHINE LEGIBILITY IS PART OF THE GRAMMAR
Query-shaped titles with designed headings, answer-first blocks with stable anchors, JSON-LD from the same records the forms render, ARIA state on every instrument, and nothing that lives only in an animation. The test travels with the install: strip the page to text, and it should still answer the question it was designed to answer.
THE ENVIRONMENTS
This specimen book defaults to dark. A publication chooses its own light or dark starting environment. ModeToggle persists the viewer’s choice as hause-mode; modeScript applies it before paint. The choice changes reading surfaces while authored film compositions can keep their cinematic black.
A film-led publication, with the source still attached.
THE AUTHORED ENVIRONMENT — BEFORE PAINT
import { modeScript } from "@chrishayuk/hause/mode";
import { ModeToggle } from "@chrishayuk/hause/components/ModeToggle";
// The HTML default, script and control must agree.
<html data-mode="light" suppressHydrationWarning>
<head><script dangerouslySetInnerHTML={{ __html: modeScript("light") }} /></head>
<body><ModeToggle defaultMode="light" />{children}</body>
</html>HAUSE's specimen book defaults to dark; your publication can default to light. Stored choice wins. In a no-emit TypeScript consumer, enable allowImportingTsExtensions for HAUSE's source modules.
The standing rule travels with the install: nothing enters the library without a real page that needed it first.
What you just installed, exhibited.