HAUSE

Anatomy

An annotated cutaway — one artifact drawn as its layers, fully disclosed.

OPERATE THE FORM ↓
01 / THE ENCOUNTERAN INSTRUMENT — THE READER OPERATES

A STUDY IN ANATOMY

Open the object. Hide nothing.

An explanation has layers. Walk down this cutaway; each part carries its role beside it.

01 / KICKERWhere are we?

The smallest voice names the room.

02 / HEADLINEWhat matters?

The editorial voice carries the principal idea.

03 / BODYWhat does it mean?

The system voice walks through the explanation.

04 / FIGUREHow does it work?

A mechanism gives the explanation a visible structure.

05 / FALLBACKWhat survives?

A plain reading remains when interaction is removed.

All layers are disclosed at once. Anatomy explains structure without asking the reader to operate a reveal.

INSPECT THE REUSABLE LIBRARY COMPONENT

A CHAPTER — THE ANATOMY

Five parts. One rule each.

kickerevidence voice

Small caps, accent or mist. Names the section the way a museum names a room — before the visitor reads a word of it.

headlineeditorial voice

Fraunces at weight 480, leading under one. The claim, carrying the room. Numbers never appear here.

bodysystem voice

Inter, one idea per sentence. The explanation walks beside the reader.

figurean instrument or performance

The mechanism, shown. Etched hatch on the page ground, the single accent doing the pointing.

fallbackevidence voice

The plain sentence that survives everything — reduced motion, no JavaScript, a crawler, a hurry.

Structure is fixed. Atmosphere is variable.

Five parts. One rule each. — kicker · headline · body · figure · fallback.

02 / THE DECISION

An act.
Not a container.

YOU ARE SHOWING WHAT SOMETHING IS MADE OF

Cutting one object open and labelling its layers.

Is everything disclosed at once, with nothing behind a click?

EXPLORE THE SELECTION GRAMMAR ↗
WHEN THE ACT CHANGES

Decomposition

Use Decomposition instead when the reader should take it apart step by step rather than see it opened.

What is the Anatomy form in HAUSE, and when do you use it?

The Anatomy form is a HAUSE instrument — an annotated cutaway — one artifact drawn as its layers, fully disclosed. Deliberately static and fully disclosed — the reader walks down the object the way they would walk down an engineering drawing, and nothing is behind a click. The emphasis layer (a root, a header) is ruled in accent; muted layers are dashed. Server-renderable; the only motion is the shared Reveal.

THE LIBRARY’S OWN ACCOUNT

Behind the form.

components/forms/Anatomy.tsx

Deliberately static and fully disclosed — the reader walks down the object the way they would walk down an engineering drawing, and nothing is behind a click. The emphasis layer (a root, a header) is ruled in accent; muted layers are dashed. Server-renderable; the only motion is the shared Reveal.

THE INSTRUMENT’S DISCIPLINE

Every instrument carries an always-present text fallback, so the point survives with the interaction removed — for reduced motion, for no-JS, for a crawler, and for anyone in a hurry. ARIA state is part of the form, because an agent browser reads aria-pressed and aria-expanded to understand what it is looking at.

03 / MAKE SOMETHINGINSTALL HAUSE ↗

Give it your subject.

The opening study is an authored demonstration, not an additional component API. Expand the library specimen above to inspect the reusable form. Its props below come directly from the source.

REACT · Anatomy

import { Anatomy } from "@chrishayuk/hause/components/forms/Anatomy";

export type AnatomyLayer = {
	label: string;
	/** Short mono note, right-aligned in the layer's header — a role, a class number. */
	note?: string;
	/** The explanation — always visible. An anatomy that hides its annotations is a teaser, not a drawing. */
	detail: string;
	/** Named contents of this layer, listed beneath the explanation. */
	children?: AnatomyChild[];
	emphasis?: boolean;
	muted?: boolean;
};

export type AnatomyProps = {
	kicker: string;
	objectLabel: string;
	layers: AnatomyLayer[];
	caption?: string;
};

export function Anatomy({ kicker, objectLabel, layers, caption }: AnatomyProps)

The import and the complete props contract. For installation and composition, follow the Build guide.

NOT INVENTED IN ISOLATION

A page needed this.

Used in vindex3.org and hause.design. These exhibitions share an author; this is evidence of reuse, not independent adoption.

06 / THE PROBLEMTUTORIAL OR REFERENCE, NEVER BOTH ↗The explanation lives on one page and the clause that governs it on another, and every reader has to guess which half holds the answer they came for.

PUBLISHED 31 AUG 2026 · REVISED 9 SEP 2026 · VERSION 0.1.0

CITE

source components/forms/Anatomy.tsx · site build 3ee5339 · built 2026-09-09

CITE THIS

Web page · 0.1.0

Hay, C. (2026). Anatomy — a HAUSE instrument. In HAUSE — a design system for AI (Version 0.1.0). hause.design. https://hause.design/forms/anatomy

The specimen, the source account and the props share one form record. Cite this page or follow its source identifier to inspect the implementation.