Where the image goes. At what size. Credited.
05 Imagery says what the engine can do and 06 and 19 show the collections. This page is placement: which surface gets an image, in which position and ratio, with which treatment and caption, and whether it is allowed to move. The mix is 60 stylized, 30 natural, 10 animated, and the rules below make it hold on every screen.
Sixty stylized. Thirty natural. Ten alive.
Counted across a surface, not a page, and never enforced by a script. One animated image in view at a time is the only hard rule.
+What counts, and what the colour rule means
| Stylized | Any of the five recipes (National Park, Nous, Archive, Paint, Field Study) shipped as a static derivative. Counts once per placement. |
|---|---|
| Natural | The credited source uncropped, or the 1200px web derivative. Thumbnails in galleries count as natural. |
| Animated | An image carrying data-fx. It counts as animated whatever its source; it does not also count as stylized. |
| Colour | Follows the same weighting loosely: about 60% Vermilion / Moss / Carbon / Cream treatments, 30% the source's own colour, 10% the animated colour shifts. A lean, not a ratio to hit. |
| Scope | A surface is a screen or a design-system page. Today with one natural figure is 0 / 100 / 0 and correct; the mix is met across the product, not inside every view. |
Operational surfaces carry almost none. Editorial ones carry one that matters.
Six surfaces, one row each: position, ratio, treatment, caption, and whether animation is allowed there.
| Surface | Position | Ratio | Treatment | Caption | Animation |
|---|---|---|---|---|---|
| Today | Below the statement and the tucked list. Never above. Never behind text. | 16:10, ≤ 7 columns | Natural, or .ambient natural | Compact | Ambient only (CSS), no data-fx |
| Milo conversation | Inline in a turn, as an artifact thumbnail | 1:1 or 4:3, ≤ 4 columns | Natural | Stamp (source-kind) | None |
| Project detail | Header plate, right or left, above the task list | 4:5 tall or 21:9 wide | Stylized, the project's chosen recipe | Full | reveal once, on first open |
| Galleries | Catalogue grid; viewer at 8 / 4 | 4:3 grid, native in viewer | Natural by default; stylized on request | Full in viewer, compact in grid | reveal in the viewer, on request |
| Editorial pages | One plate per section at most, alternating side; one full-bleed band per page at most | 4:5 plate, 21:9 band | Stylized plates; one natural plate per page where the work must be seen | Full | One animated image per page: glitch on the hero or drift on a dark plate |
| Applications | Poster, social, launch — image is the field | Format-native | Stylized | Full on print, stamp on social | Launch screen only: reveal |
+Ratios drawn at size, and the operational exception
Tasks, Activity, Costs, Fleet, Connections and Settings carry no imagery at all. A machine row shows a glyph, not a photograph of the machine. The exception is Work / Artifact when the artifact is itself an image: then it is shown natural, in the viewer composition, with a full caption.
Five pairs, rendered live.
Each pair is the same image placed twice. The left holds the rule; the right breaks it, and the caption says which principle it breaks.
Crop respects the work.
A crop may tighten; it may not cut through a face, a signature, or the subject the title names. Use object-position to keep the subject; if no position works, change the ratio.
4:3 with object-position: 50% 30%. The head sits whole; the empty sheet below is what was cut.
21:9 forces a band through the face. The ratio was chosen for the layout, not the work. Aesthetic-usability does not excuse it.
The artist is named every time.
An image without a caption is wallpaper. The caption variant may be compact or a stamp, but the artist or agency is never absent from the frame.
Full caption: artist, title, date, object, institution, rights, and the interpretation stamp because it is stylized.
Same image, no caption. It now reads as a Milo texture. The transformation is presented as the work. Provenance is lost at the point of use.
One animated image in view.
The animated layer is 10% by count and one at a time by rule. Two moving plates compete; the eye stops reading and starts watching.
One drifts, one holds. The still image gives the moving one something to be measured against.
Two bursts on independent clocks. This is the only place on the site where it happens, and it is here so the difference can be felt. Signal-to-noise fails.
Operational screens stay operational.
Today, Tasks and Costs are for deciding. A stylized plate there competes with the one thing that matters. A small natural figure below the fold is the most an operational surface carries.
Cut the Daily Bread Day 4 opener.
- □Reply to the FAM print proof◌Queued
The statement is first. The figure is natural, 16:10, five columns, and sits beside the tucked list, not above it.
Cut the Daily Bread Day 4 opener.
National Park full-bleed behind the statement. Type on a photograph, a stylized image on an operational screen, and the decision now has to be read through vermilion. Hierarchy and signal-to-noise both fail.
Nous on dark. National Park on light.
Recipes have a ground. Nous is built for carbon; its stone highlights and vermilion signal read on black. National Park is built for cream. Swap them and the plate fights the surface.
Carbon ground, Nous plate: the black of the image and the black of the surface are the same black. The vermilion is the only event.
Cream highlights on a carbon surface: the plate becomes a lit rectangle and the page around it goes dead. Wrong ground for the recipe.
+The principle each pair defends
| Crop | Aesthetic-Usability is not a licence; the work's integrity is the constraint (Constraints, Forgiveness). |
|---|---|
| Caption | Provenance at the point of use (Recognition Over Recall; the Art / Nature review's first question). |
| One animated | Signal-to-Noise Ratio; Performance Load. |
| Operational | Hierarchy; 80/20 — the decision is the 20. |
| Ground | Consistency; Mapping between recipe and surface. |
Full, compact, stamp.
Three sizes of the same duty. The smaller the frame, the less it says, but it never says nothing.
Full. Plates, viewers, applications in print. Artist, title, date, object, institution, rights, source-kind, actions.
Compact. Catalogue grids, the Today figure. Artist and title only; the full record is one click away in the viewer.
Stamp. Conversation thumbnails, social. The source-kind marker plus a mono line of artist and institution. Never used where there is room for compact.
+Which variant where
| Full | Any image wider than six columns; every plate; every viewer; every print application. Includes .source-kind. |
|---|---|
| Compact | Grid items; the Today figure; project header on phone. Artist line + title in the serif. |
| Stamp | Images under four columns; artifact thumbnails; social formats. .source-kind + one mono line. |
| Source-kind | .human for natural, .transformed for stylized and animated, .generated for Codex output. Required on full and stamp; implied by context in a compact grid whose toolbar names the treatment. |
Four modes, each with one home.
Reveal belongs to plates, drift to dark ambient, glitch to one hero per section of the site, pixels to natural images that arrive. Each runs live here; scroll and they start.
+Rules and attributes
| Where allowed | Editorial pages (one per page), project header (reveal on first open), gallery viewer (reveal on request), launch screen (reveal). Nowhere else. |
|---|---|
| Where forbidden | Today, Tasks, Activity, Costs, Fleet, Connections, Settings, the conversation. Any image behind text. Any image under four columns. |
| Cadence | Bursts ≤ 420ms, ≥ 4s apart (data-fx-interval); drift 1.8s per breath; reveal 1.5s once; pixels 1.1s once. |
| Attributes | data-fx · data-recipe (default national-park) · data-fx-width (working width, default 900) · data-fx-interval (ms). |
| Accessibility | The img becomes a canvas role="img" with the same alt, class and style. prefers-reduced-motion draws the final frame only. Off-screen images pause. |
| Provenance | An animated image is .source-kind.transformed. The caption names the source exactly as for a static plate. |
Position the subject, then choose the ratio.
The same painting at three positions. The value that keeps the subject whole is the one to ship; if none does, the ratio is wrong.
+Rules
| Default | Never rely on 50% 50%. Every placed image carries an explicit object-position chosen by looking. |
|---|---|
| Faces and signatures | Whole or absent. A crop that shows part of a face is a detail and must be captioned "detail". |
| Landscapes | Keep the horizon out of the vertical centre. Prefer the top third for skies that carry Vermilion, the bottom third for land that carries Moss. |
| Prints and drawings | Never crop the margin off a print or the sheet edge off a drawing at full or compact size; the margin is part of the object. |
| Photographs | Ratios are free; the source's own aspect is preferred for natural placement, 4:5 or 21:9 for plates. |
| Space | NASA imagery may be cropped to the subject; the field is not the work. |
Type sits on paper, not on paint.
Six rules for the only two kinds of type that may touch an image: a serif statement inside a cream field, and mono metadata at the edge. Everything else stays off the picture.
a · Serif in a field, or on the paper area.
A display statement over a National Park plate lives inside a cream field, or on a region the recipe already left as paper. The field is the block; the statement is what it holds.
What shall we make today?
Cream field, carbon serif, one vermilion word; the metadata takes its own small cream field because the trees are dither. Contrast is the field's, not the plate's.
What shall we make today?
Cream serif on vermilion dither: the counters fill with dots, the contrast changes word by word. Legibility depends on the image.
b · Mono metadata at the edge.
A mono line may sit directly on the image, inside the padding, top-left or bottom-right. Carbon on a light area, mineral on a dark one. Never mid-image.
Two corners, mineral on carbon, the image untouched between them.
The line crosses the Earth. Metadata is a margin note; it does not annotate the subject.
c · Never body copy on an image.
Reading length text has one ground: the surface. If a paragraph needs to be near an image, it sits beside it or below it in the caption composition.
Church painted Heart of the Andes from sketches made on two journeys to Ecuador and Colombia. When it was shown in New York in 1859 people paid to see it and brought opera glasses.
Text left at five columns, image right at seven. The paragraph reads at full contrast.
Church painted Heart of the Andes from sketches made on two journeys to Ecuador and Colombia. When it was shown in New York in 1859 people paid to see it.
A paragraph on a painting: the painting is defaced and the paragraph is unreadable. Both lose.
d · The headline may cross the edge. Once.
The one editorial move: a display statement that starts on the surface and overlaps the plate by one or two columns. It is allowed once per page, on the hero, and the overlap lands on a quiet part of the image.
Art. Nature. Intelligence.
Columns 1–6 for the statement, 5–12 for the plate: a two-column overlap onto the plate's cream sky.
Art. Nature. Intelligence.
The statement runs the width of the plate: no longer a crossing, now type on an image, and rule (a) applies.
e · On Nous, only mineral or vermilion.
Nous plates are carbon. Type on them is mineral white for metadata or the vermilion word for a statement inside a carbon field. Cream and moss type never touch a Nous plate.
Mineral metadata, one vermilion signal. The plate's own palette.
Moss on Nous reads as infrastructure claiming an image. Two semantic colours on one plate.
f · 4.5:1 or a field.
Any type on an image must reach 4.5:1 against the pixels behind every glyph. If the image cannot guarantee it — and a dithered plate cannot — the type goes into a field. The field is the fallback; it is also the default.
The field guarantees the ratio regardless of what is behind it.
Cream on lily-pad green measures about 2.2:1. A caption that cannot be read has not credited anyone.
+Spec — type on image
| Allowed | Display serif inside a cream field (light) or carbon field (dark); mono metadata at the edge inside the padding; the headline crossing the edge once per page. |
|---|---|
| Forbidden | Body copy; labels; controls; any type mid-image; cream or moss type on Nous; serif directly on dither. |
| Contrast | 4.5:1 measured against the pixels behind every glyph, else a field. Fields: --milo-cream-500 on light, --milo-carbon-1000 on dark, padding --space-4 --space-5, max 22ch. |
| Corners | Metadata top-left or bottom-right, offset --space-3; mono-micro, 0.06em tracking; carbon on light areas, mineral on dark. |
| Crossing | Statement columns 1–6, plate 5–12 (a two-column overlap); the overlap lands on paper or sky; once per page; hero only. |
| Classes | .toi (this page), .field, .meta.tl/.br, .cross. Production: .plate + a positioned .block-paper / .block-ink field (30 Color Blocking). |
Nine relationships between an image and its words.
Each is a named arrangement with its columns. The caption is part of the composition, not an afterthought under it.
The artist matters.
Mil
Cut the Daily Bread Day 4 opener.
HIGHSMITH · HALF DOME · LOC
- 01
- 02
- 03
+Spec — columns, ratios, captions per relationship
| 01 Caption below | Image 12 cols, any ratio; .artwork-caption full. The default everywhere a full caption fits. |
|---|---|
| 02 Dropped low | Plate 7 cols at 4:5; caption 5 cols aligned to the plate's foot (align-items: end). Editorial plates. |
| 03 Corner field | Image 12 cols at 16:10; cream field bottom-right, ≤ 60% wide; counts as the page's one block. |
| 04 Headline / image | 5 / 7; statement in display-m, foot-aligned; caption below the image only. |
| 05 Image as the O | Circle mask at 0.78em of the display size; campaign and launch only; once. |
| 06 Today figure | Below the statement and the tucked list, ≤ 7 cols, 16:10, natural, compact caption. |
| 07 Pair | 6 / 6, 8px gutter; ORIGINAL / ◉ MILO INTERPRETATION stamps above; one caption for both. |
| 08 Triptych | 4 / 4 / 4 at 4:5; same source, three treatments; one caption. |
| 09 Index list | 4 / 4 / 4 or 3 × 4; hairline above each figure; index number in the first 2rem. |
Where a moving image may be, and where it may not.
Four modes, four homes, one in view at a time. Three of the compositions above carry one here, live, so the distances are real.
Glitch is not on this page: it belongs to one hero per section of the site, and this section's hero is 24's. See the manifesto wave.
+Spec — placement table
| reveal | Plates (02, 04), project headers, the gallery viewer, the launch screen. Scroll-in, once. Never on a natural image (use pixels). |
|---|---|
| drift | Dark surfaces only; a Nous plate in composition 02 or a full-bleed band. Scroll-in, then on its interval. Never on light. |
| glitch | One hero per section of the site (manifesto, one editorial hero, launch). Load, then on its interval. Never twice on a page. |
| pixels | Natural images that arrive: gallery items on first view, the artifact viewer, index lists (09). Scroll-in, once. |
| Trigger | Scroll-in for everything below the fold; load only for a hero that is in view on arrival. |
| One in view | Hard rule. The second animated image on a page must be more than one viewport from the first. |
| Distance from copy | ≥ --space-8 from any paragraph; never beside a column of body text (the eye reads the motion, not the words). |
| Never | Inside a row or list item; on a caption image or thumbnail under four columns; behind type; on Today, Tasks, Costs, Fleet, Settings, the conversation. |
| Reduced motion | Final frame drawn once; nothing moves; placement rules still apply because the image is still the treatment. |
The subject decides the crop.
Per ratio, an object-position that keeps the face; a line no crop crosses; and the strip at the foot that captions may occupy.
FACE · NO CROP, NO TYPE+Spec — positions per ratio, the line, the safe area
| Portraits and heads | 4:5 → 50% 20%; 4:3 → 50% 25–30%; 16:10 → 50% 28%; 1:1 → 50% 25%; 21:9 refused (the face cannot survive it). |
|---|---|
| Landscapes | Horizon out of the vertical centre: 50% 35% for sky-led (Vermilion) plates, 50% 65% for land-led (Moss) plates. |
| The line | No crop crosses a face, a hand that is the subject, or a signature. A crop that does is a detail and is captioned as one. |
| Safe area | The bottom 22% of any plate may carry a cream/carbon field (30 Color Blocking); nothing else may. The top-left and bottom-right corners inside the padding may carry mono metadata. |
| Prints | Margins stay at full and compact size; a crop into the margin only at stamp size. |
| Space | NASA fields may be cropped to the subject; keep the limb whole on planetary images. |