Colophon

How this site is made.

A colophon is the note at the back of a book that tells you what's in it: typeface, paper, printer. This is the web equivalent for Loopwork. Build details, plainly stated.

Typography

  • Aa

    Source Serif 4Display, body, marginalia. The literary anchor.

  • Aa

    InterNavigation, eyebrow labels, helper text. The interface voice.

  • Aa

    JetBrains MonoNumbers, codes, technical material. The fixed-width voice.

Served via Fontsource on jsdelivr. No commercial license fees, no third-party tracking. Variable axes used where the typeface supports them.

Palette

  • Paper#F4EFE6
    Practice cream

  • Paper pub#F5F2EC
    Publication cream

  • Ink#16202C
    Body text

  • Surface#FBF7EE
    Bands and tiles

  • Sepia#B8835A
    Hairlines, dividers

  • Sepia text#8B5A35
    Anchors, eyebrows

  • Signal#A8362B
    Red, sparingly

  • Green#4F6B43
    Met verdicts

Two sepia tokens, deliberately. The decorative sepia at 2.85:1 fails AA on text; sepia text at 5.08:1 passes. Don't use decorative sepia on type.

Engineering

Hand‑coded HTML and CSS. No framework. No SaaS chrome. Content authored in plain text. The site is small enough that the framework would weigh more than the pages.

Serverless functions for the Diagnostic and Explorer's AI‑assisted assessment run on Cloudflare Workers, with rate limiting, an output token cap, and an invisible bot check on the assessment trigger.

Hosting

To be confirmed before launch. The shortlist favours static‑site hosting with edge functions for the AI calls, and a managed CMS if the publication side moves off the static stack in Phase 3.

AI assistant

Claude Haiku via the Anthropic API for per‑question and per‑task suggestions in the Diagnostic and Explorer. Hard monthly cost cap at the API level. Output tokens capped per call. Your context is not retained beyond the call.

The full posture is set out in the AI design guide.

Accessibility

WCAG 2.2 AA across every surface. The practice sells to UK central government. This is the legal floor and a Service Standard test.

Specifically: two‑sepia tokens for text contrast, focus rings on every interactive element, touch targets 24×24 minimum (usually larger), reduced‑motion preference honoured, semantic HTML throughout, skip‑to‑content link on every page, SVG diagrams with titles and descriptions, decorative SVG marked aria-hidden.

Words

Sentence case in every heading, label, and link. Short sentences. Plain English. Confident‑present, not aspirational. No em dashes. The brand is Loopwork, not The Loopwork.

The full rules are in the content style guide.

Building

Designed and written by Chris Leo. The brand foundation was built in Phase 2 across May 2026; the build phase runs through the second half of 2026 for a launch at the end of December.

Notes on the work in progress sit in the design system and the AI design guide.