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 | V1.3: a rule, not a lean (D-051). About 60% Vermilion / Moss / Carbon / Cream treatments, 30% the source's own colour, 10% the animated colour shifts — and the page around the images follows the same 60 / 30 / 10 as a colour rule: ground, structure, signal (02.6). Was: "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.
Loosened in V1.3. Several don'ts on this page were really permissible, so four are now marked ✓ Permitted, each with the condition it needs and why it is now allowed. The placement rule is stated plainly in 24.5: the head sits naturally, 50 / 50 is the preferred start, and a too-low or too-high crop is named as such. Everything else stays a don't, and the list below says why.
+What changed in V1.3 — four now permitted, seven kept
- ✓ PERMITTED · MORE THAN ONE ANIMATED IMAGE IN VIEWWhen they run on one clock (engine/fx.js since V1.3): entrances start 450 ms apart and glitch bursts never overlap, so the plates take turns instead of competing. A Pause motion control is on every page that moves.
- ✓ PERMITTED · NATIONAL PARK ON A DARK GROUNDIn galleries and viewers in dark mode, and on campaign surfaces as a lit print on a dark wall. A gallery shows the work as it is; the theme does not get to choose the recipe.
- ✓ PERMITTED · A HEADLINE ACROSS THE WHOLE PLATEOn campaign surfaces only (poster, launch, social), where type and image are one object — 33 Expression Levels already gives campaign 70% expression. It must land on a quiet region and reach 3:1 as large text, or take a field.
- ✓ PERMITTED · A LABEL ON THE SUBJECTAs a Field Study annotation of a measured feature: a mono label with a leader to the thing it names, at 4.5:1, never across a face. Natural-history plates have always labelled the specimen.
- ✕ KEPT · CROP THROUGH A FACEThis is the placement rule, not taste: the head is whole and naturally placed or the ratio is wrong.
- ✕ KEPT · AN UNCAPTIONED IMAGEProvenance is the reason the collection exists; an image without its artist is wallpaper.
- ✕ KEPT · A PLATE BEHIND AN OPERATIONAL STATEMENTToday, Tasks and Costs are for deciding. Hierarchy wins there.
- ✕ KEPT · SERIF DIRECTLY ON DITHER · BODY COPY ON AN IMAGE · CREAM TYPE UNDER 4.5:1Three legibility rules. WCAG AA is the floor at every expression level.
- ✕ KEPT · MOSS OR CREAM TYPE ON NOUSMoss means Offline (D-011); on a Nous plate it claims the image for infrastructure.
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.
Animated images take turns.
Was: one animated image in view. Two moving plates on independent clocks compete; the eye stops reading and starts watching. Since V1.3 every animated image runs on one clock, so more than one may share a view — they take turns.
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.
WHY IT IS NOW ALLOWEDThe two plates here no longer run on independent clocks: the engine staggers their entrances by 450 ms and never lets two glitch bursts overlap, so they alternate. Condition: never beside a column of body text, and the page carries the Pause motion control.
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.
WHY IT IS NOW ALLOWEDIn a gallery or viewer in dark mode the work is shown as it is — the theme does not get to choose the recipe — and on a campaign surface a lit print on a dark wall is the point. Still the wrong choice for an editorial plate you are composing on carbon: reach for Nous there.
+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 and starts when the whole image is on screen.
+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 | V1.3: every entrance starts on full reveal (the whole image in view, or 85% of the viewport for a taller image, held 240 ms). Reveal 3.6 s once (--dur-dither-reveal); pixels 2.8 s once (--dur-image-resolve); drift 5.2 s per breath, continuous; glitch bursts 0.9 s, 3–4.5 s apart while fully in view (--dur-glitch-burst, --dur-glitch-gap, or data-fx-interval); scan 9 s; band 16 s; swap 3.6 s then holds 5.2 s. Was: bursts ≤ 420 ms ≥ 4 s apart, drift 1.8 s, reveal 1.5 s, pixels 1.1 s, all starting 80 px before the image was on screen. |
| New modes | scan (conservation scan: a vermilion scan head writes the recipe down the image and back), band (one plate drifting over the untouched source), swap (the signature transition between images, with data-fx-set and data-fx-caption), data-fx-handoff (page to page). |
| Pause | Every page that moves shows a Pause motion control while an animated image is on screen (WCAG 2.2.2). The choice is remembered. |
| 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 head sits naturally: eyes on or near the top third, a little air above the crown, nothing cut. Start at 50 / 50 — it is the preferred look — and move only if the head sits too low or too high.
object-position: 50% 0%object-position: 50% 50%object-position: 50% 100%V1.2 labelled the left frame "ship" and the middle "cuts the head". Looked at again, the middle is the natural placement and the left sits too low; corrected in V1.3 (D-049).
+Rules
| Placement | The head is naturally placed. Eyes on or near the top third of the frame; a little air above the crown; nothing of the head cut. Too much air above it and the figure sinks (too low); the crown at or past the top edge (too high). |
|---|---|
| Default | Start at object-position: 50% 50% — the preferred look — and check the head against the placement rule. Move it only if the head sits too low or too high, and write the value you chose on the element. (V1.2 said "never rely on 50% 50%"; amended V1.3.) |
| Then the ratio | If no position places the head naturally at the layout's ratio, the ratio is wrong for the work: change the ratio, not the head. |
| 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.
WHY IT IS NOW ALLOWEDA label on the subject is the oldest device of the natural-history plate, and Field Study is built from it. Allowed when it names a measured feature (a crater, a limb, a coastline) with a short leader, in mono at 4.5:1, never across a face. A caption line crossing the picture, as here, is still a margin note in the wrong place.
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.
WHY IT IS NOW ALLOWEDOn a poster, launch screen or social card, type and image are one object; 33 Expression Levels gives campaign 70% expression, and this is what that looks like. Condition: campaign only, the words land on a quiet region (sky, paper), and every glyph reaches 3:1 as large text or the words take a field. Editorial pages still cross once, on the hero.
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 | Full reveal, always: the whole image on screen (or 85% of the screen for a taller image) for 240 ms. A hero that is fully in view on arrival starts on arrival. Nothing starts below the fold. Was: scroll-in. |
| One in view | Was a hard rule: the second animated image on a page had to be more than one viewport from the first. Since V1.3 (D-050) several may share a view because they run on one clock: entrances 450 ms apart, glitch bursts never overlapping. |
| 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). V1.3: these are starting points for these two works; the test is always the placement rule in 24.5 — eyes near the top third, the head whole — and 50% 50% is tried first. |
|---|---|
| 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. |