Work / Plate 03 of 06

Draughtwell

A runtime that makes AI coding agents accountable should look like an engineering drawing set: numbered sheets, labelled parts, nothing drawn that does not exist.

Year: 2026
Status: Concept
Brief: Launch page for a fictional agent runtime
Medium: Static HTML, CSS, vanilla JS
Mobile speed: Lighthouse 100, 145 KB
Shown at: hc-tracer.pages.dev
Palette: #0B2C75#EAF4FF#9FE3F5

Open the live preview Preview, noindex. A concept for a fictional product; Draughtwell is a placeholder name, not a registered brand. Nothing to buy, nothing stored. Sample data is labelled as sample data.

Draughtwell, first screen at 1440 pixels wide

Plate 03. Draughtwell, first screen at 1440 pixelsWall painted in the work's own #0B2C75

What was built

Art direction and sign-off: Angel. Concept, copy, build and QA: AI-agent pipeline, reviewed page by page.

A blueprint direction: a cobalt drawing sheet, condensed stencil numerals and one signal orange reserved for stamps, gates and removed lines. Its signature is a pinned scene where an exploded pipeline is built up as you scroll and a ticket travels through it.

Single-page launch concept, static HTML/CSS/JS, no framework
Pinned scroll scene: an isometric exploded pipeline in which a ticket travels through five stages
Every figure drawn in code (SVG generated by a build script); no stock or generated imagery
Flight-recorder panel: scrub a sample run and inspect its spans, all labelled as sample data
Budget and approval-gate demo, and an interest form that is deliberately non-submitting

Stack Static HTML, CSS, vanilla JS, SVG generated by a build script, self-hosted fonts, Cloudflare Pages

Decisions, with the reasons.

Type

A condensed display face, as on a title block

Big Shoulders Display carries headlines and the numerals, Azeret Mono labels and data, and Archivo sets body copy. Mono appears only where the page shows data or drawing annotations, the way a drawing sheet does. All three are self-hosted woff2 subsets.

RejectedInstrument Sans with Sometype Mono. Those are Halcyon's faces; each concept should own its type.

Agents that show their work.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &?!

Big Shoulders Display 800 / Azeret Mono / Archivo. Rendered live with the project's own self-hosted font files.

Colour

One orange, kept for what is wrong or gated

Ink, cobalt and a pale drawing-line blue make the sheet. Cyan highlights live data. The signal orange is used only for stamps, approval gates and removed lines, so when it appears it means a decision or a defect.

ink#061538
cobalt#0B2C75
line#EAF4FF
cyan#9FE3F5
signal#FF7A3D

Interaction

Signature interaction: a pipeline that builds as you scroll

A pinned scene shows an isometric exploded pipeline. Scrolling steps through ticket, router, runner, approval gate and pull request, and the ticket travels the stack while a flight-recorder trace builds beside it. Below it, the recorder, a budget meter and an approval gate can all be operated; every figure on them is sample data.

How it was started Six reference sites were measured first (Linear, Axiom, Langfuse, Honeycomb, OpenTelemetry, teenage engineering). Takeaways: tight display line-height around 1.0, dense 14-15px body, mono only for data, and spec-sheet density, which led to the drawing-sheet direction rather than another dark SaaS look.

Figures, captured live.

Screenshots I took from the running preview at 1440 and 390 pixels wide. They are not mock-ups.

Draughtwell: Hero: the exploded pipeline — Hero: the exploded pipeline

Draughtwell: Pinned scene, stage 3 — Pinned scene, stage 3

Draughtwell: Three defects in agent platforms — Three defects in agent platforms

Draughtwell: Flight recorder — Flight recorder

Draughtwell: Budget and approval gate — Budget and approval gate

Draughtwell: Parts list: what exists, what is only drawn — Parts list: what exists, what is only drawn

Measured, not claimed.

100Performance

100Accessibility

100Best practices

63SEO

Largest contentful paint: 1.8 s
Layout shift: 0
Blocking time: 0 ms
Page weight: 145 KB
Fonts: big-shoulders-display-latin-wght-normal.woff2 35 KB
archivo-latin-wght-normal.woff2 35 KB
azeret-mono-latin-wght-normal.woff2 26 KB
big-shoulders-stencil-display-latin-800-normal.woff2 15 KB

Lighthouse 12.8.2, simulated mobile, one run against hc-tracer.pages.dev/ on 2026-10-02. Lab data, not field data. SEO 63: the failing audit is is-crawlable, because this preview is deliberately served noindex. Re-run before quoting these elsewhere.

Honest limits.

A concept: Draughtwell does not exist. The name is a placeholder; a trademark search was not possible.
Mobile is the weaker side: the large drawings become a stepper on narrow screens, and the independent critic scored the mobile layout below the desktop one.
Lighthouse SEO is 63 because the preview is deliberately noindex, not because of a page fault.
Two of the parts on the parts list are real open-source projects of mine; the rest are drawn and labelled as design goals.

Next plate

Agent observability siteFront page of this site, rebuilt from its first lead-gen version (v1) to v4

Want a redesign demo of your own site?

Free and private. You only pay if you want the full build.

Try the Redesign Lab

RequestYour site and consent
AuditBy email, straight away
Private demoAbout five days
Optional buildOnly on payment
Case studyOnly with your yes