We set only the cookie that remembers this choice. Analytics and marketing cookies stay off unless you allow them. Cookies policy

Start a brief

Room 08 · Applied AI for business documents · Concept

Penmark Labs

Reads it. Marks it. Shows its work.

Penmark Labs, a fictional applied-AI lab. A demo marks sample documents in the margin and states plainly that it is a simulation.

Concept project — fictional brand. This project was created by ARTLOGIC to demonstrate a possible brand and digital experience. The organization, name, people, prices, and data shown are fictional. This is not client work and does not represent measured business results.

Explore the concept site

Opening screen of the Penmark Labs site on a wide display: Reads it. Marks it. Shows its work.
Opening screen, desktop

01 The brief

The brand
Penmark Labs is a fictional applied-AI lab for business documents. Its line is "Reads it. Marks it. Shows its work."
The problem
AI sites tend to promise a lot and show little. This one had to let an operations director see what document review looks like, without implying a model is connected or collecting anything from the visitor.

02 The idea

The page is the document

What you see
There is no demo widget on the home page: the page itself is the document. A dashed reader line sits across the screen, and every paragraph that passes it is read. A cobalt pen draws an underline, a hatched band, a bracket, a loop or a tick on the page's own words and numbers the mark in the gutter. Each marked phrase opens a note with its rule, evidence and next step, and the visitor can tick it as checked by a person. A permanent stamp says "Simulation: no model connected", and the marks can be hidden.
How it works
Marks are inline buttons whose text rectangles are measured and drawn as SVG strokes, so the words underneath are never covered. The analysis is prepared in advance and there is no text input, upload or network call. Reduced motion shows the marks at once. The demo page keeps a paper sheet for the three sample documents.

03 Design system

  • Ground#E2E7EC groundCool grey-blue page, like a photocopy of a photocopy.
  • Ink#0D1320 inkAll text, control outlines and the person's tick.
  • Machine Cobalt#1633C0 accentThe machine's pen: marks, the reader line and the note rule.
  • Muted#4A5360 mutedSection signs, hints and definition terms.
  • Tint #C3CFF4. A fill behind ink text only: hover, pressed, the open mark.
Type
  • Schibsted Grotesk
    Heavy and tight for headings, buttons and labels.
  • Spectral
    Everything read, set like a contract. Caveat is used for the one-line note on an open mark only.
Edges
Square corners, 2px ink outlines on controls and 1px ink hairlines for the header, footer, tally and gutter boxes. Nothing is lifted off the page except the demo sheet.
Motion
Marks draw in as the reader line passes them and the gutter numbers rise slightly. With reduced motion the marks appear at once.

04 Process

  1. Pre-production

    Pre-production fixed the thesis, the "annotated scan" direction (later reworked so the page itself is the document), the seven routes, the content and the rule that no model is ever implied. Copy and mark anchors were checked before any code was written.

  2. Build

    The build followed a written plan: static pages, with the demo as the single interactive part. Logo, fonts and colours come from the shared brand registry.

  3. Finish review

    Impeccable finish-review rounds compared the built pages with the direction contract and returned an ordered list of fixes.

  4. Fixes

    A later uniqueness pass removed the framed sheet from the home page, changed the cream, yellow and monospace look for a cool ground with one cobalt pen, and was checked with two critique rounds and screenshots at 1440 and 390.

05 Technology and accessibility

Stack
Next.js 16, Tailwind CSS 4 and TypeScript, inside the studio's single application.
Particular to this site
  • Marks measured from the text's own line rects and drawn as SVG strokes
  • A scroll-driven reader line (no model)
  • Two client islands: the reading page and the demo
Access
  • Every mark is a keyboard-reachable button; its note takes focus so it is announced
  • A Hide marks control turns every mark and the reader line off
  • The checked count is a polite live region
  • Escape closes a note and returns focus to its mark
  • Marks differ by shape and word, not colour alone
  • Prefers-reduced-motion shows the result without animation
  • Skip link and visible focus ring on every page
Tests
Covered by its own Playwright end-to-end spec and a unit test file for its logic.

06 Honest notes

Penmark Labs is a fictional brand and this site is a concept by Artlogic. The company names in the sample documents are invented.

The contact form is a demo. It offers choices only, stores nothing and says so on the page.

There are no photographs. The sample documents are live text styled to look scanned, and the marks and the stamp are drawn in SVG. Stock images of robots or glowing circuits would have said nothing about reading a document.

07 See it

Explore the concept site

Fictional prototype. A concept by ARTLOGIC for a fictional brand. English only.