Topogeny
An atlas of how web pages are put together
286 parts, from one button to a whole page, drawn as wireframes that reflow at every width. Each one says what it is good for, which industries it suits and how sure the atlas is, from estimate to sourced.
- Works no.
- 015 of 31
- Status
- Live
- Work began
- 30 Oct 2026
- Where
- topo.ogeny.app
- Made by
- Laurens van Riel, 42workspace, Rotterdam
In numbers
- 286parts
- 15layout styles
- 18weighted points
What is inside
- Compare page types side by side, each section labelled by its job
- Rank sections and page types on 18 weighted points under a goal, or your own weights
- Standards for buttons, fields, focus and contrast, per control and per device, with their sources
How it is built
A React app and a Node server, in one read-only container on Bunny. Every part reflows through container queries, is checked at 20 widths in Chromium, Firefox and WebKit, and is served to agents through an MCP server.
Structure only: Stylogeny gives the look and Glossogeny the words. Its layout styles share Stylogeny’s design choices, and Tectogeny dresses its parts.