System
Imagery
Images are the heaviest thing most websites carry. A practice built on lighter, faster websites cannot treat them as something to sort out at the end. Eleven files, 138 KB, and one class still deliberately empty.
In active development
- What this section covers
- The picture library itself: one portrait, ten grounds in five theme-paired forms, what each weighs, and the artefact photography that does not exist yet.
- Why it matters
- Images are the heaviest thing most websites carry. A practice built on lighter, faster websites cannot treat them as an afterthought.
- How it connects
- Art Direction decides what may be held here. One of its three classes is still empty.
Where this stands
Two of the three classes are stocked. The third has to be made
Until 2026-08-31 this section held nothing, and that was the correct order
rather than a delay: art direction had to decide what an image is allowed to be
before there was any point acquiring one. It has now decided, in
foundations/imagery.md, and the library was selected against that
decision rather than the other way round.
Eleven files. 137,974 bytes. One portrait and ten grounds in five theme-paired forms. No file is over 17,224 bytes, which is the fact the whole system rests on and the reason there is no resizing pipeline in it.
Portrait
The only photograph of a person in the system
fernando-portrait-studio-01.webp928 × 1120 · 15,902 bytes
It is an <img> with real alternative text, and that is the
exact opposite of how a ground is delivered. A portrait carries information —
who this is — so it belongs in the accessibility tree and it is described. A
ground carries none, so it is a CSS background and there is no
alt attribute to get wrong.
The element type carries the rule in both directions. That is the part worth stealing for your own system: a convention that lives only in a document gets broken by the third person who reads it, and a convention that lives in the choice of element cannot be broken without noticing.
It appears on the surfaces where who is this? is the reader's actual question: an about page, a proposal cover, a speaker card. Not on a foundation chapter or a report, where the answer changes nothing about whether the content is right.
It arrived 34% heavier than it needed to be
The file carried an EXIF chunk of 3,882 bytes and an
XMP chunk of 4,110: a Photoshop document ID, an edit history, three
timestamps, and an embedded thumbnail nobody would ever see. 7,992 bytes of a
23,928-byte file, none of it useful to a reader.
Both were removed and the container rewritten. 23,928 to 15,902 bytes, with the compressed image data byte-identical — no re-encode, no resize, no generational loss, and the pixel dimensions unchanged. A lossless 34% is worth more than a lossy 45%, and it is the cheapest optimisation in web performance that almost nobody runs.
Ground
Five forms, ten frames, and no page may paint more than one
A ground is scenery. It carries no information, names nothing, and proves nothing. That is not a limitation of the set; it is the permission the set operates under.
Each form ships a light frame and a dark one, because the theme inverts the whole surface on a single attribute and an image that does not invert with it is a hole in the page. The pair is the unit. A frame with no counterpart cannot be used, and that rule cost two otherwise good frames.
The ground library, as delivered
| Form | Light | Dark |
|---|---|---|
| Ribbon | 17,224 bytes | 13,016 bytes |
| Curve | 16,822 bytes | 9,574 bytes |
| Arc | 9,484 bytes | 15,376 bytes |
| Facet | 13,592 bytes | 7,412 bytes |
| Gradient | 7,964 bytes | 11,608 bytes |
Why this page does not show them
A gallery of ten frames would cost 122 KB against a page budget of 210 with 168.6 already spent on fonts, stylesheets and script. It would not fit, and a page arguing that images are the heaviest thing a website carries cannot prove it by shipping a contact sheet.
So this page carries the portrait and nothing else, and
Art Direction carries one ground.
One image per page is the rule, and it is arithmetic rather than
taste. The frames are in
assets/images/ground/, each with its photographer, its licence and
its measured size.
What a ground may never do
Sit behind body text: the contrast of type over a photograph is not computable in advance, so it cannot be gated, so it is not permitted. A ground sits behind a heading, a mark, or nothing. It may not introduce a second hue, because the palette has one accent. It may not repeat on consecutive surfaces, because two grounds in a row is wallpaper. And it appears on no chapter, report or specification, because those are documents.
Artefact
Empty, and the honest thing is to say so rather than fill it
Artefact photography is real work photographed as the object it is: a rendered report on a desk, a device showing a real audit, a printed proposal. It is the only imagery that discharges proof over polish directly, and it is the one class no amount of selecting can supply, because it has to be made.
The brief is written — one soft directional source with the shadow allowed to fall, the artefact on paper or on ink rather than a styled desk scene, cropped close enough that it is legible as itself, under the same weight ceiling as everything else, and no identifiable client material without written permission. A brief is not a photograph. This stays empty until a shoot happens.
Until then the substitute is the system itself, which is what every other page here does: type at real scale, the palette shown as it is used, space used as structure. A demonstration is evidence. A photograph of a demonstration is not better evidence.
One thing I will not do
No stock photography of people in meetings, and no invented client work. If there is nothing real to show, showing the system is not a fallback. It is the more honest answer.
Alternative text
The rule is short and the failure is common
An image that carries information gets a description carrying the same information: not the filename, not the caption repeated, not "image of". An image that carries none is not in the accessibility tree at all — and in this system that is enforced by the element rather than by an attribute, so there is nothing to remember and nothing to forget.
Getting it backwards, describing the decoration and silently dropping the content, is among the most common failures in the audits I run. It costs nothing at the moment the image is added, and it is expensive to retrofit across a site that has been adding them for two years.
The chapter states every rule this page applies
foundations/imagery.md is canonical: the three classes and the
forbidden one, the 20 KB ceiling and what it buys, the measured budget
arithmetic, and the ten rejected frames each with the clause that excluded
it. Nothing here originates a rule; it renders one.