arlabs.tech

arlabs.tech is the public website of AR Labs, the AI engineering lab founded by Richard M. Thompson. We treat the site as a project in its own right: it is where the work done inside VOX, the lab's working system, is made visible and understandable to people outside it, whether they are business owners, engineers or AI agents reading on someone's behalf. It has three layers: a front page drawn as a map of the lab, a calm reading layer for writing and project pages, and instruments that visitors can operate, such as the live voice agent.

How it is organised

The site is organised in three registers, each with its own feel.

• The overworld is the front door: a map of the lab rather than a scrolling pitch. It is meant to feel like a slightly strange corner of the internet where research happens, while staying readable and usable first.
• The codex is the reading layer: the blog, the CV, project and concept pages like this one, and the client delivery framework. It is deliberately calm; the contrast with the front page is part of the design.
• The instruments are things a visitor uses, such as Salesbot, our browser voice agent.

flowchart TD
  M["Front-page map"] --> C["Concepts"]
  M --> W["Writing"]
  M --> P["Projects"]
  M --> A["About"]
  C --> V["VOX"]
  C --> E["Cognitive Ecology"]
  P --> S["Salesbot (instrument)"]
  W --> B["Blog (reading layer)"]
  A --> CV["CV and delivery framework"]

The front-page map

The front page is a mind map of the lab. Four numbered cards, Concepts, Writing, Projects and About, lead the map; selecting a card unfolds its children in place, and a quick index lists every destination for anyone who prefers a list. Each card carries a sourced still photograph rather than generated art, among them NASA's portrait of the Mercury Seven astronauts on the About card and a 1922 telephone switchboard operator on the voice agent's card.

The map has two skins. Daylight is the light look, cream paper and warm ink. Phosphor is the dark mode, a retro terminal look with its own type and texture as well as its own colours. The page picks the skin before it first paints, from the visitor's saved choice or else the system setting, so a returning visitor never sees a flash of the wrong one.

The map is a single static HTML page that the site's build places at the root of the domain. The rest of the site is a Next.js application with React and Tailwind CSS, exported as static files and hosted on Vercel.

The design system

The site shares a design system with our internal tools. It began as a neo-brutalist look (stark white and black, a mint accent, square corners, heavy borders and hard shadows) and in August 2026 was evolved into a warmer one: cream paper with a dot-grid texture, warm ink, a single violet accent with mint kept as a secondary highlight, heavy display capitals, monospace labels in JetBrains Mono, soft corners and hard offset shadows. What survived from the first version is the discipline: zero-blur shadows, heavy ink borders, one accent, and components that read colours only from named tokens.

Every colour pairing was measured against the WCAG 2.1 contrast standard. Where the reference violet fell short of the 4.5:1 ratio needed for body text on cream, a deeper violet of the same hue was defined for text. The design system was then applied to a real application, TaskGlowTimer, to test it outside the website.

The client-portal pattern

When we propose work to a client, the proposal is published as an unlisted page on the site rather than sent as a PDF. Each engagement gets its own page or set of pages, built from the site's own components and styled through a wrapper class scoped to the portal, so the main site is untouched.

The pages follow a fixed narrative, because they are meant to open a conversation with the client before any specification is settled:

1. Show understanding. Lead with the client's context and their stated goals, in their words.
2. Interpret. Translate those goals into design implications, kept visibly separate from what the client said.
3. Propose a direction. Framed as one viable approach, naming components by their responsibility rather than by a product or framework.
4. Show the hardest part. Detail the most complex workflow, then ask the questions that would validate it.
5. Open the conversation. Cross-cutting concerns as discussion topics, then what we bring.

Architecture diagrams on these pages are interactive C4 diagrams, a standard notation that shows a system at increasing levels of detail. Each section puts its explanation first and its diagram after it.

What exists today

The site is live. The map front page, About page, CV, blog and client delivery framework are published, and the project, concept and engineering pages in this lab section are being added to it. Client portal pages exist for our engagements; they are unlisted and not linked from the public site.