Proof shouldn't look like a card

When a system finishes a run and prints a proof, the web's default answer is a card. A light rectangle, a border, a few rows of text and a green badge in the corner.

I built that version first. Every number on it was real, and none of it felt real. It looked like an invoice template, or an accordion from a pricing page. You could have edited a number in the inspector and the object would have accepted the lie without looking any different.

Paper solved this centuries ago. A banknote, a bond or a calibration certificate does not ask you to trust a green pill. It uses a physical grammar of guilloché, iris printing, microtext, optically variable ink, lenticular ridges and ultraviolet fluorescence, where the surface itself carries the weight of the claim.

So I threw out the card and built the certificate out of those mechanics instead.

If an artifact carries a proof, it shouldn't share a component with a settings page.

Guilloché and iris lines, not background fills

Flat colour blocks are cheap to copy and heavy on the eye. Security printing avoids them. Instead it uses guilloché, continuous intersecting curves that sit behind the main figures.

Colour lives inside the stroke of those curves, not in the container behind them. In print that technique is called iris printing, or rainbow printing. A single continuous line shifts gradually from slate blue through muted rose to gold along its path, with no hard seam where one ink stops and the next begins.

On a dark surface, a fine guilloché mesh gives the eye something to focus through without competing with the numbers in front of it. Behind the main figure, the curves tighten into a multi-ring rosette.

Put the colour in the geometry, not the box.

Microtext as a structural rule

A standard table divides sections with a 1px solid border. A security document divides them with microtext, a continuous edge-to-edge line of tiny uppercase characters that reads as a rule from arm's length and as words when you lean in.

Above the summary, the divider is not a CSS border. It is a repeating line of verification text set at the edge of legibility. Behind the rows, a blind-embossed circular seal sits at low contrast, placed so its outer ring passes beneath the labels without breaking their contrast floor.

A line that only separates is wasted space. Make the border carry meaning.

Optically variable ink and a lenticular lens

A static image can be screenshotted. Physical proofs defend against flat copies with optically variable devices, surfaces whose appearance depends on the angle you look from.

I built two into the certificate, both driven by one value, the pointer's position over the plate, centred on the middle.

1. Optically variable ink. The headline figure has no fixed colour. Looked at straight on, it reads as teal. As the pointer moves toward the edge of the plate, the gradient shifts across the spectrum into violet and warm copper.
2. A changeable image. In the bottom-right corner sits a small window covered in fine vertical ribs, modelled on a lenticular lens. From the left half of the viewing arc the ribs show a monogram. Cross the centre and the parallax hides the monogram and shows a second value underneath.

The maths is a few lines.

jsconst tx = (e.clientX - rect.left) / rect.width - 0.5;
const ty = (e.clientY - rect.top) / rect.height - 0.5;
const glance = Math.min(1, Math.hypot(tx * 2, ty * 2));
plate.style.setProperty('--glance', glance.toFixed(3));
plate.style.setProperty('--flip', tx > 0.02 ? '1' : '0');

Nothing animates on a timer while the plate sits still. If you do not move, the plate does not move.

Timer loops look like screensavers. Tie optical shifts to the viewer's angle, or leave them still.

The ultraviolet layer

Every security document has two faces. A calm one under ordinary light, and a second one that only appears under an ultraviolet lamp.

I gave the certificate a second layer in the same space. Under normal light it is barely there. When the viewer switches on the UV control, or passes the pointer across the dark surface, a radial mask opens over a fluorescent mesh in cyan and phosphor green, a double-stroked watermark, and hidden registration text between the rows.

Two bugs bit me when the UV layer first lit up.

The first was a collision. A bright double-stroked watermark looks great on an empty artboard and terrible when its lower leg slices through a row of monospace numbers. A watermark that makes the proof harder to read defeats the proof. I moved the mark into the empty space on the right and dropped its opacity wherever it crossed a reading column.

The second was state blindness. In the first build, clicking the UV toggle lit up the whole plate while the toggle itself stayed dark. You could see the glow but not which switch was holding it on. A physical instrument always lights its own switch.

A security layer may sit behind the data or beside it, never through the middle of a number.

Why limits look like warning labels

The most important row on the certificate is not the headline figure. It is the row that says what the output must not be used for.

In the early light-mode draft, those limits were a line of brick-red text separated by dots, right below a line of green text. Green over red on cream paper did not look like a boundary. It looked like a holiday card.

On the dark plate, normal rows stay bone-white, even the ones that pass every check. Colour is kept for exceptions. Each limit sits inside its own bordered chip with a muted crimson fill, like a hazard stamp. Your eye goes to the boundary before it goes to the boast.

When everything is coloured, nothing is a warning. Keep passing rows neutral so the limits stand out.

What I'd keep

• Borrow from mediums where forgery has a cost, like security print, banknotes and calibration plates.
• Put colour inside fine-line geometry, not in flat background fills.
• Tie optical shifts to the viewer's angle, never to an idle timer.
• Give the artifact a second inspection state, and keep its watermarks out of the reading column.
• Keep passing rows neutral so the limits carry the colour.