Skip to content

System

Art Direction

Art direction is the difference between a system that is correct and a system that is good. It is judgement rather than specification, which is exactly why it still has to be written down.

Published

What this section covers
How the brand looks beyond type and colour: five visual principles, the three classes an image may belong to and the one it may never, motion, and the restraint that keeps them honest.
Why it matters
Art direction is the difference between a system that is correct and a system that is good. It is judgement, and judgement still has to be written down.
How it connects
It builds on Colour and the Grid, and it decides what Imagery is allowed to hold.

The goal

Premium, minimal, calm and serious, without becoming cold

That last clause is the hard part. Restraint is easy to over-apply, and a page with nothing on it is not calm. It is empty. What the work should communicate is strategic clarity, high standards, technical confidence and sustainable thinking, and none of those is achieved by removing things until nothing is left.

Five principles

Each one is a decision about what to leave out

1 · Clarity before decoration

Nothing is added because a space looks empty. Every visual element has to be doing work: carrying information, establishing a relationship, or marking a boundary. Whitespace is not a gap waiting to be filled. It is the thing that makes the rest legible.

2 · Editorial over promotional

The work should read like a considered publication rather than a sales page. That means real hierarchy, real reading measures, and headlines that state something rather than tease it. If a page could be a slide, it is probably not saying enough.

3 · Proof over polish

A measured figure beats a beautiful abstraction. Where there is evidence, show the evidence. This is the principle that keeps the visual work honest, and it is why the strongest pages in this system are the ones that demonstrate a rule rather than illustrate it.

4 · Quiet confidence

No shouting. No stacked superlatives, no aggressive contrast, no motion demanding attention. Confidence in this brand looks like precision and calm rather than volume, which is also how it should feel to work with someone.

5 · Sustainable by design

The visual direction is constrained by what it costs to deliver. A practice built on lighter, faster websites cannot art-direct itself into six megabytes of hero imagery. Every visual decision carries a weight, and the weight is part of the decision rather than something the developer discovers afterwards.

The applied direction

An image is one of three things, and there is a fourth it may never be

This is principle three turned into something a person can apply on a Tuesday without re-deriving it. Every image in this system is a portrait, a ground or an artefact, and a file that is none of them does not enter the repository.

Portrait

A real photograph of a real person, owned or released. It may claim exactly one thing: that this person exists and looks like this. It appears once on a surface or not at all, because a face is the strongest thing on any page it is on and the second one is decoration.

Ground

A non-representational surface: a fold, a facet, a curve, a gradient. It claims nothing. It is scenery, and scenery is all it is ever allowed to be. It may set a mood or mark a threshold; it may not stand in for evidence, illustrate a concept, or fill a space that has nothing to say.

Artefact

A photograph of real work: a rendered report, a device showing a real audit, a printed proposal. It is the only class that discharges principle three directly, and it is the one class that cannot be solved by choosing well, because it has to be made. It does not exist yet, and Imagery says so plainly rather than filling the gap.

And the one that is forbidden

No stock photography of people, offices, meetings, handshakes or teams at whiteboards. Not as a hero, not as filler, not temporarily.

The objection is not that it is bought. It is that it makes a claim it cannot support. A photograph of five people around a laptop asserts a team, a client, a meeting, a project; this practice is one person, so the assertion is false, and principle three is what makes it inadmissible.

A photograph of a folded sheet of paper asserts nothing, so it cannot assert anything false. That is the entire difference, and it is why a licensed abstract is admissible under exactly the principle that excludes a licensed office scene. The test is one sentence: could a reasonable reader mistake this image for evidence? If yes, it had better be evidence. If no, it may be scenery.

Where the rule lives in the code

A ground is a background, and that is not a technical detail

The image behind the title of this page is a CSS background-image. It is not an <img>, and it never will be. Four things follow from the element type, and none of them has to be remembered by anybody.

A background is not in the accessibility tree, so a ground cannot be given a description it should not have and cannot be quietly promoted into carrying information. The misuse is structurally impossible rather than merely forbidden, which is the only kind of rule that survives contact with a deadline.

The browser fetches one file rather than two: only the winning declaration is requested, so a light and dark pair costs what a single image costs. It follows the theme control on this page, which a <picture> element cannot, because that follows the operating system and would hand a reader a white photograph on a black page. And it cannot be saved or shared as content, which is correct, because it is not content.

Motion

No image moves on its own. No auto-playing video, no carousel, no parallax, no slow drift across a hero. Motion that starts without being asked for is motion demanding attention, and principle four already decided that question. A ground never animates at all: scenery that moves is a screensaver.

Treatment

There is no colour grade, no duotone, no brand-tinted overlay and no shared filter. We do not grade. We select. A grade is a treatment applied to an image that does not belong in order to make it look as though it does, and every frame in the library is already near-monochrome because that was the selection rule rather than a post-process. Principle five again: a grade is a pipeline, and a pipeline is weight.

In practice

What that looks like on this page

One image. Not as a gesture towards restraint, but because a text page here has a fixed floor of 168.6 KB and a budget of 210, so its own writing and its pictures share about 41 KB. One ground costs at most 17.3. Two would cost 34, and there is not 34.

Principle one and principle five arrive at the same answer from opposite directions, which is usually a sign the answer is right. The restraint is not a taste being imposed on the arithmetic; it is the arithmetic.

The rest of the visual interest comes from the system itself: type at real scale, the palette shown as it is used, the accent hue as a mark rather than a fill, and space used as structure. The one accent is a good example of restraint as a functional choice rather than a preference. Green measures 2.65 to 1 against the paper, which is legal for a rule or a mark and illegal for a sentence. So it marks things and never says them, on every surface, without exception.

What changed on 2026-08-31

This page used to say there was no photography in this system, and that abstract compositions would be generated from the system rather than licensed. Both were true when written and one of them is now superseded.

There is a portrait, and there are ten grounds in five theme-paired forms. They are licensed rather than generated, and the reason is principle five rather than a change of heart: a generator is a build step, a set of parameters, a body of code to maintain, and a family of outputs that all look like each other. What did not change is the rule the old sentence existed to serve. The set still claims nothing, still carries one accent, still pairs to the theme. The rule held; the implementation of it did not have to be code.

The chapter is where the judgement gets its numbers

This page is the argument. foundations/imagery.md is the rule: every class, every ceiling, every measured byte, and the ten rejections with the clause that excluded each one. Colour states every approved pair with its computed contrast ratio, which is what keeps the judgement above legible.

Read the Imagery chapter Colour Language The library