How we rebuilt the Foresight website

Our old pages explained the product in the abstract. The new ones open on the product at work, such as a PPWR programme filling in its table of packaging formats.

Drag across a page to compare the two at the same window size.

A screenshot blurs when it’s scaled, and if something changes, it means updating it again, so you typically have to choose evergreen content that won’t go out of date. We chose to create every picture of the product on the site in code instead, as a copy of the product’s screen in its own fonts and colours.

We use Reckless for headings and Inter for everything else.

From 1024 px wide, any text a reader needs is at least 15 px. That rule was hardest to keep inside the product pictures. When a table didn’t fit at 15 px, we cut rows or columns and left the text size alone.

Most of the site sits on paper, sand and sage. They’re close enough in tone to separate areas without pulling the eye. Deep teal appears only where a page opens and where it closes.

Where a page has a photograph, it opens on something its readers would know from work: turbine blades for aerospace, seeds for crop protection, a jerrycan for a PPWR programme.

We used an image model to generate all fifty-two. They’re close up, nearly black and white and lit softly from the upper left, with a quiet space on the left for a headline. Each one shows something people make.

We made them in a studio of our own. It writes every prompt from one art direction, measures each picture against the rest and shows it in its slot before we decide whether to keep it.

We set out to tweak the logo. First we measured the mark in the site’s header, scaled to a 60-unit square.

Up close, its bars’ ends weren’t round. Each end was half an ellipse. The long bar’s reached 5% further than a round end, and the short bar’s stopped 12% short. The two gaps both measured 6.43 units. A round shape looks further away than a flat one, so the gap above the dot looked wider.

We rounded the ends and made the bars and dot 6 units tall, a tenth of the mark. We lifted the dot one unit towards the short bar. The gap above the dot is now 6 units, and the gap between the bars 7. The container’s curve stayed as it was.

Then we built the mark in code from five numbers. Its bars and dot sit on a lattice of three columns and three rows, 13 units apart. The long bar runs two steps, the short bar one and the dot none, so a dot is a bar with no run. Every edge lands on a whole unit, and the logo files and icons come from the same code.

The same three parts, a dot, a short line and a long line, make the Signals field and the platform heroes’ ground, which come next.

The Signals field is built from the logo’s three parts. Thousands of points rest as dots on a lattice. A few lift into the mark’s shapes and settle again, and real regulatory events strike the field and disturb it.

Each event is real, checked against its official source, such as the EU’s PFHxA restriction or the Packaging and Packaging Waste Regulation. It lands roughly where its regulator is located, so EU events fall to the right of North American ones. The accent colour is kept for events and what they disturb, so a viewer can read cause and effect.

Each frame is worked out from a seed, the preset, the time, the events and the pointer, and nothing else. So the 16-second loop joins up with no seam, a still comes out the same every time, and a reader who asks for less motion gets the composed still.

The studio holds all eight presets. Arrival is the one in use, on the demo page, where Foresight’s live alerts strike a field on paper. The platform heroes stand on a still ground drawn from the same grammar, shown in the next part.

The five platform pages, for the Assistant, Documents, Lists, Workflows and Monitoring, are about software. There’s no material to photograph. Their heroes stand instead on a grid of faint teal dots 16 px apart, which we call resting points. Some of them lift into the logo’s dot, short line and long line, and draw the page’s idea, such as a lens for the Assistant or a table for Lists.

Every page uses the same dots and the same inks. Only the shape changes, so the five pages, their index and the newsletter look like a set. Before this, we tried a colour per page, then a material per page, then ink on sand.

Pick a page below to see its shape. Move your pointer over the ground and the points near it lift too.

Each sector page walks through a typical company in five line drawings. They run from its suppliers and sites to its products and markets, and end with its spares, shelves or fields. Each step carries one rule. The suppliers, the factory and the export quay are the same on every page. The rest are drawn for each sector.

They’re plain ink on the page’s paper. Each one draws itself in once, as it scrolls into view.

Those parts made forty-five pages: twenty-five projects, five platform pages, four regulatory areas and eleven sectors. The top of each page changes to suit its subject. Below it, every page uses the same feature rows, so a reader who has learned one page can find their way round the rest.

The coverage page shows every country and region Foresight watches on one flat map.

The footer ends every page on the carbon weave the homepage opens with, rising out of a mist that fades into the paper.

The blog came last. Each post had its own illustration, made one at a time. We first asked the agents for a dither studio, a page of sliders that turns a picture into a pattern of dots. We liked what it made, but it didn’t fit with the rest of our brand direction.

We wanted covers that look like a set, following the same rules. A Foresight cover now picks from a few fixed parts: five flat grounds, one accent colour, graded photographs of made things and a set of line figures. Four templates decide where each part goes.

The post’s argument picks the figure. The buyer’s guide asks ten questions, so its feeler gauge fans out into ten lines. Each post’s share image is drawn from the same choices, so the link preview matches the cover.

A covers studio builds each one. We pick the parts and place the signal, the studio checks the cover in every slot it will appear in, and we copy its spec into the post’s entry.

Most parts of the site went through more than one direction. These five got furthest before we dropped them. The three Signals presets we set aside are in part 07.

Every page after the first was built from the first page’s parts. This is the order it happened in.

We directed the work. AI coding agents wrote the code.