{ "code": "S48", "name": "Picture bento", "shape": "collage", "family": "Evidence and pictures", "fits": "Four pictures laid out as one object: one tall hero on the left, one wide picture top right, two squares below it.", "use_when": "A set of moments, places or people that reads better as one collage than as four separate pictures.", "slots": [ { "name": "eyebrow", "holds": "small label above the title", "budget": "2-4 words" }, { "name": "title", "holds": "what the set is, top left, one italic word", "budget": "under 8 words" }, { "name": "cells", "holds": "4 illustrations: hero 3:4 left (fill first), wide 2:1 top right, two 1:1 below it; tight gaps", "budget": "1 scene each" } ], "columns": 3, "density": "airy", "surface": "paper", "works_on": [ "deck", "page" ], "library": "Hoffman", "reference_libraries": [ "useLayouts" ], "dir": "S48-bento-collage-4", "semantic": { "audience_question": "What do these four differently sized views show together?", "intent": "Read one dominant image with three complementary details as a visual whole.", "reasoning_relation": "hero image and visual supporting set", "message_pattern": "These examples show [shared pattern or range].", "required_content": [ "Four distinct views of one subject, each with a role and provenance.", "A concise title connecting them." ], "narrative_positions": [ "context", "explanation", "evidence: choose only when the page supports the surrounding argument" ], "requires_before": [ "Introduce the service and label the illustrations as illustrative." ], "enables_after": [ "Explain a specific stage, boundary or evidence claim in text." ], "slot_roles": { "eyebrow": "Name the image set or project.", "title": "State what ties the views together.", "cells": "Four scene descriptions with roles: hero subject, wider context, process detail and human detail. Keep captions or alt text with the assets." }, "avoid_when": [ "Evidence of actual attendance or outcomes using generated scenes.", "Four images with no shared subject." ], "layout_specific_contract": "Four pictures laid out as one object: one tall hero on the left, one wide picture top right, two squares below it.", "provenance": { "basis": "interpretation of the existing layout and slot contracts", "review": "Tessel model-authored guidance; implementation approved by Nic, 2026-10-10", "corpus_evidence_status": "not yet established", "guide": "../SEMANTICS.md" }, "variation_rule": "Read the selected option’s actual markup, slot count and source record. Preserve this reasoning relationship only if the option still expresses it; flag a mismatch before adapting.", "reader_outcome": "Read one dominant image with three complementary details as a visual whole.", "matching": { "audience_question": "What do these four differently sized views show together?", "reader_outcome": "Read one dominant image with three complementary details as a visual whole.", "reasoning_relation": "hero image and visual supporting set", "content_shape": { "composition": "Four pictures laid out as one object: one tall hero on the left, one wide picture top right, two squares below it.", "selected_state": "Four pictures laid out as one object: one tall hero on the left, one wide picture top right, two squares below it.", "density": "airy", "columns": 3, "column_note": "Base metadata only; selected option can replace the base geometry." }, "required_slots": [ { "name": "eyebrow", "reader_question": "What kind of content or argument section am I reading?", "semantic_role": "Name the image set or project.", "content_unit_count": { "min": 1, "max": 1, "basis": "authored composition members where a repeated group is specified; otherwise one named slot; not a required amount of evidence" }, "placeholder": "[REAL CONTENT · eyebrow · small label above the title]", "layout_budget": { "authored": "2-4 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "eyebrow", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 2 ] } }, { "name": "title", "reader_question": "What do these four differently sized views show together?", "semantic_role": "State what ties the views together.", "content_unit_count": { "min": 1, "max": 1, "basis": "authored composition members where a repeated group is specified; otherwise one named slot; not a required amount of evidence" }, "placeholder": "[REAL CONTENT · title · what the set is, top left, one italic word]", "layout_budget": { "authored": "under 8 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "title", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 4 ] } }, { "name": "cells", "reader_question": "What subject, example or view must I inspect, and is it evidence or illustration?", "semantic_role": "Four scene descriptions with roles: hero subject, wider context, process detail and human detail. Keep captions or alt text with the assets.", "content_unit_count": { "min": 4, "max": 4, "basis": "authored composition members where a repeated group is specified; otherwise one named slot; not a required amount of evidence" }, "placeholder": "[REAL CONTENT · cells · 4 illustrations: hero 3:4 left (fill first), wide 2:1 top right, two 1:1 below it; tight gaps]", "layout_budget": { "authored": "1 scene each", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "cells", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 0 ] } } ], "rejection_constraints": [ "Tile area mistaken for quantitative weight, or unrelated stock scenes labelled as case evidence.", "Treating visual abundance as proof of performance or introducing unapproved client imagery." ], "option_guidance": { "option": "default", "composition_delta": "Four pictures laid out as one object: one tall hero on the left, one wide picture top right, two squares below it.", "semantic_change": "retains base content relationship; changes presentation or disclosure", "matching_instruction": "Select S48 default when the supplied material answers “What do these four differently sized views show together?” through hero image and visual supporting set. Respect this state: Four pictures laid out as one object: one tall hero on the left, one wide picture top right, two squares below it." }, "provenance": { "status": "inferred composition evidence", "author_intent": "not independently confirmed", "basis": [ "retained source composition where available", "authored layout and slot contracts", "static implementation inspection" ], "source_visual_count": 3, "source_visual_sha256": [ "a0de1026a2936fb34d099228734de1f36e94cd4b3634f552879246cda1b9c37d", "3535dad0862ca1001a963f7bcf508fdf33aec79401de358997f7b71f5cdebc71", "d1e6268805088ce9d4e16d70043f9e6b73ea6a69d9675649027d9ca1c42305e4" ], "source_export": "private source images remain outside this draft site", "markup_sha256": "f04e7a1462be34f7a2efdabaee647f96e528e3b5bb6b014d3a79ce4137834518", "limits": [ "Static parsing inventories authored nodes; it does not certify rendered visibility, responsive fit or interactive state.", "Budgets are authored layout guidance, not a content-writing limit or proof of fit.", "Matching guidance is a draft inference; it does not establish facts, endorsement, causation or source author intent." ] }, "adaptation_rules": [ "Choose by audience question, reasoning relation and required content before aesthetic preference.", "Supply every required semantic role; retain visible unknowns as labelled real-content placeholders.", "A number needs source, scope and units; a quotation needs faithful wording and attribution.", "Do not infer importance from area, colour, depth or movement unless the content explicitly defines that encoding.", "Keep colour token roles, structural objects, licences and source records; changing content does not authorize changing them." ] }, "rejection_constraints": [ "Tile area mistaken for quantitative weight, or unrelated stock scenes labelled as case evidence.", "Treating visual abundance as proof of performance or introducing unapproved client imagery." ], "markup_inventory": { "file": "spread.html", "sha256": "f04e7a1462be34f7a2efdabaee647f96e528e3b5bb6b014d3a79ce4137834518", "method": "static lxml markup plus authored option description; no rendered-visibility claim", "all_markup_slot_counts": { "eyebrow": 1, "title": 1, "cells": 1, "illustration": 7, "pictures": 3 }, "slot_evidence": { "eyebrow": [ { "tag": "span", "classes": "eyebrow", "sample_word_count": 2, "repeated_children": 0 } ], "title": [ { "tag": "h2", "classes": "head", "sample_word_count": 4, "repeated_children": 1 } ], "cells": [ { "tag": "div", "classes": "bento", "sample_word_count": 0, "repeated_children": 7 } ], "illustration": [ { "tag": "figure", "classes": "ph f1", "sample_word_count": 0, "repeated_children": 1 }, { "tag": "figure", "classes": "ph f2", "sample_word_count": 0, "repeated_children": 1 }, { "tag": "figure", "classes": "ph f3", "sample_word_count": 0, "repeated_children": 1 }, { "tag": "figure", "classes": "ph f4", "sample_word_count": 0, "repeated_children": 1 }, { "tag": "figure", "classes": "ph f5", "sample_word_count": 0, "repeated_children": 1 }, { "tag": "figure", "classes": "ph f6", "sample_word_count": 0, "repeated_children": 1 }, { "tag": "figure", "classes": "ph f7", "sample_word_count": 0, "repeated_children": 1 } ], "pictures": [ { "tag": "span", "classes": "cat-photo", "sample_word_count": 3, "repeated_children": 2 }, { "tag": "span", "classes": "cat-photo", "sample_word_count": 3, "repeated_children": 2 }, { "tag": "span", "classes": "cat-photo", "sample_word_count": 3, "repeated_children": 2 } ] }, "option_selectors": [ "five", "seven", "spotlight" ], "linked_implementation": [ { "file": "../spreads.css", "sha256": "32da94472b0c9131e4d5dae7d5bf0498b09202a9e66294b4e4f23e6ddfbf37ba" }, { "file": "../catalogue-options.css", "sha256": "d4ac2c72a1ba61f50fc52dbacff24130de014f42f1dc2df5fd841bea7a34e2db" }, { "file": "../spread.js", "sha256": "3d99948b83f750bd4ae95dac08e3e50a395de7c149c90a6f1a1c0ea36a2634a4" }, { "file": "../deck-motion.js", "sha256": "6869989cd926fded3afc494e350791f2517cd0d859822072b95f3dd97e693781" }, { "file": "../catalogue-options.js", "sha256": "ca693515383ba7cdf6d9937beada03614150786a4ca850ca800282ed4732d991" } ] }, "variations": { "five": { "audience_question": "What do these four differently sized views show together?", "intent": "Read one dominant image with three complementary details as a visual whole.", "reader_outcome": "Read one dominant image with three complementary details as a visual whole.", "reasoning_relation": "hero image and visual supporting set", "slot_roles": { "eyebrow": "Name the image set or project.", "title": "State what ties the views together.", "cells": "5 complementary scene descriptions with one shared subject and a distinct role for each." }, "matching": { "audience_question": "What do these four differently sized views show together?", "reader_outcome": "Read one dominant image with three complementary details as a visual whole.", "reasoning_relation": "hero image and visual supporting set", "content_shape": { "composition": "Four pictures laid out as one object: one tall hero on the left, one wide picture top right, two squares below it.", "selected_state": "Five pictures", "density": "airy", "columns": 3, "column_note": "Base metadata only; selected option can replace the base geometry." }, "required_slots": [ { "name": "eyebrow", "reader_question": "What kind of content or argument section am I reading?", "semantic_role": "Name the image set or project.", "content_unit_count": { "min": 1, "max": 1, "basis": "authored composition members where a repeated group is specified; otherwise one named slot; not a required amount of evidence" }, "placeholder": "[REAL CONTENT · eyebrow · small label above the title]", "layout_budget": { "authored": "2-4 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "eyebrow", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 2 ] } }, { "name": "title", "reader_question": "What do these four differently sized views show together?", "semantic_role": "State what ties the views together.", "content_unit_count": { "min": 1, "max": 1, "basis": "authored composition members where a repeated group is specified; otherwise one named slot; not a required amount of evidence" }, "placeholder": "[REAL CONTENT · title · what the set is, top left, one italic word]", "layout_budget": { "authored": "under 8 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "title", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 4 ] } }, { "name": "cells", "reader_question": "What subject, example or view must I inspect, and is it evidence or illustration?", "semantic_role": "5 complementary scene descriptions with one shared subject and a distinct role for each.", "content_unit_count": { "min": 5, "max": 5, "basis": "authored composition members where a repeated group is specified; otherwise one named slot; not a required amount of evidence" }, "placeholder": "[REAL CONTENT · cells · 4 illustrations: hero 3:4 left (fill first), wide 2:1 top right, two 1:1 below it; tight gaps]", "layout_budget": { "authored": "1 scene each", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "cells", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 0 ] } } ], "rejection_constraints": [ "Tile area mistaken for quantitative weight, or unrelated stock scenes labelled as case evidence.", "Treating visual abundance as proof of performance or introducing unapproved client imagery." ], "option_guidance": { "option": "five", "composition_delta": "Five pictures", "semantic_change": "retains base content relationship; changes presentation or disclosure", "matching_instruction": "Select S48 five when the supplied material answers “What do these four differently sized views show together?” through hero image and visual supporting set. Respect this state: Five pictures" }, "provenance": { "status": "inferred composition evidence", "author_intent": "not independently confirmed", "basis": [ "retained source composition where available", "authored layout and slot contracts", "static implementation inspection" ], "source_visual_count": 3, "source_visual_sha256": [ "a0de1026a2936fb34d099228734de1f36e94cd4b3634f552879246cda1b9c37d", "3535dad0862ca1001a963f7bcf508fdf33aec79401de358997f7b71f5cdebc71", "d1e6268805088ce9d4e16d70043f9e6b73ea6a69d9675649027d9ca1c42305e4" ], "source_export": "private source images remain outside this draft site", "markup_sha256": "f04e7a1462be34f7a2efdabaee647f96e528e3b5bb6b014d3a79ce4137834518", "limits": [ "Static parsing inventories authored nodes; it does not certify rendered visibility, responsive fit or interactive state.", "Budgets are authored layout guidance, not a content-writing limit or proof of fit.", "Matching guidance is a draft inference; it does not establish facts, endorsement, causation or source author intent." ] }, "adaptation_rules": [ "Choose by audience question, reasoning relation and required content before aesthetic preference.", "Supply every required semantic role; retain visible unknowns as labelled real-content placeholders.", "A number needs source, scope and units; a quotation needs faithful wording and attribution.", "Do not infer importance from area, colour, depth or movement unless the content explicitly defines that encoding.", "Keep colour token roles, structural objects, licences and source records; changing content does not authorize changing them." ] }, "narrative_profile": { "central_point": "Several complementary views make one subject legible through context, activity and detail.", "communication_job": "Same communication job as default. Same job with five views: tall hero plus four smaller panels.", "audience_value": "Explanation and perspective: offers different scales of view without implying that image area measures importance or evidence strength.", "reading_path": [ "Same job with five views: tall hero plus four smaller panels.", "Read the subject label and title.", "Start with the large portrait view, then the wide setting and two closer details.", "Connect the views by their captions or alt text; a collage alone does not prove a result." ], "adaptation": { "required_inputs": [ "5 distinct views of one subject, each with caption, role and provenance.", "A concise title connecting them." ], "slot_guidance": { "eyebrow": "Name the image set or project.", "title": "State what ties the views together.", "cells": "5 complementary scene descriptions with one shared subject and a distinct role for each." }, "can_change": [ "Subject, names and wording within the active slot roles.", "Illustrations or supporting values where present, with their provenance and limits." ], "must_survive": [ "Each image has a distinct role and provenance.", "The hero anchors attention without becoming stronger evidence." ] }, "worked_example": { "fictional": true, "scenario": "A fictional repair service introduces the experience through complementary scenes.", "slot_fills": { "eyebrow": "A repair visit", "title": "One service, four views.", "cells": [ "Hero: a fictional volunteer examining a lamp at a workbench.", "Context: the neighborhood hall with separate intake and repair areas.", "Detail: hands labeling a disconnected power cord for inspection.", "Human view: a member recording the repair advice in a notebook.", "Extension: volunteers review unresolved devices after the session." ] }, "reasoning": "The four views explain who participates, where work happens, how it proceeds and what the visitor takes away; they are not four unrelated mood images.", "qualification": "Every organization, value and assertion in this example is fictional. Replace it with approved, sourced content before use." }, "narrative_fit": { "before": "Introduce the service and label the illustrations as illustrative.", "after": "Explain a specific stage, boundary or evidence claim in text.", "good_uses": [ "Visual orientation to a place, product or process." ], "poor_fits": [ "Evidence of actual attendance or outcomes using generated scenes.", "Four images with no shared subject." ] }, "evidence": { "observations": [ "Retained reference shows one tall region, one wide region and two smaller regions.", "Current default shows four .f1–.f4 illustrations; further figures are variant-controlled." ], "interpretations": [ "The communication job and reuse advice are inferred from the current arrangement and slot contract, not independently confirmed source intent." ], "not_verified": [ "Original author intent, factual accuracy of sample copy and persuasion effects are not verified.", "No confidential archive or proposal corpus was used.", "Variant-specific source playback was not independently tested; the variation reading uses its current implementation and metadata." ], "references": [ "dist/S48-bento-collage-4/spread.json", "dist/S48-bento-collage-4/spread.html", "02_product/spreads/S48-bento-collage-4/source.webp (viewed for arrangement)" ] }, "review": { "status": "reviewed", "basis": "Motif inspected current metadata, active markup and the retained source arrangement, then checked the fictional example against the content roles. This is a layout-contract adaptation review." }, "variation_relationship": "same-job" }, "required_content": [ "5 distinct views of one subject, each with caption, role and provenance.", "A concise title connecting them." ], "requires_before": [ "Introduce the service and label the illustrations as illustrative." ], "enables_after": [ "Explain a specific stage, boundary or evidence claim in text." ], "avoid_when": [ "Evidence of actual attendance or outcomes using generated scenes.", "Four images with no shared subject." ] }, "seven": { "audience_question": "What do these four differently sized views show together?", "intent": "Read one dominant image with three complementary details as a visual whole.", "reader_outcome": "Read one dominant image with three complementary details as a visual whole.", "reasoning_relation": "hero image and visual supporting set", "slot_roles": { "eyebrow": "Name the image set or project.", "title": "State what ties the views together.", "cells": "7 complementary scene descriptions with one shared subject and a distinct role for each." }, "matching": { "audience_question": "What do these four differently sized views show together?", "reader_outcome": "Read one dominant image with three complementary details as a visual whole.", "reasoning_relation": "hero image and visual supporting set", "content_shape": { "composition": "Four pictures laid out as one object: one tall hero on the left, one wide picture top right, two squares below it.", "selected_state": "Seven pictures", "density": "airy", "columns": 3, "column_note": "Base metadata only; selected option can replace the base geometry." }, "required_slots": [ { "name": "eyebrow", "reader_question": "What kind of content or argument section am I reading?", "semantic_role": "Name the image set or project.", "content_unit_count": { "min": 1, "max": 1, "basis": "authored composition members where a repeated group is specified; otherwise one named slot; not a required amount of evidence" }, "placeholder": "[REAL CONTENT · eyebrow · small label above the title]", "layout_budget": { "authored": "2-4 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "eyebrow", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 2 ] } }, { "name": "title", "reader_question": "What do these four differently sized views show together?", "semantic_role": "State what ties the views together.", "content_unit_count": { "min": 1, "max": 1, "basis": "authored composition members where a repeated group is specified; otherwise one named slot; not a required amount of evidence" }, "placeholder": "[REAL CONTENT · title · what the set is, top left, one italic word]", "layout_budget": { "authored": "under 8 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "title", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 4 ] } }, { "name": "cells", "reader_question": "What subject, example or view must I inspect, and is it evidence or illustration?", "semantic_role": "7 complementary scene descriptions with one shared subject and a distinct role for each.", "content_unit_count": { "min": 7, "max": 7, "basis": "authored composition members where a repeated group is specified; otherwise one named slot; not a required amount of evidence" }, "placeholder": "[REAL CONTENT · cells · 4 illustrations: hero 3:4 left (fill first), wide 2:1 top right, two 1:1 below it; tight gaps]", "layout_budget": { "authored": "1 scene each", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "cells", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 0 ] } } ], "rejection_constraints": [ "Tile area mistaken for quantitative weight, or unrelated stock scenes labelled as case evidence.", "Treating visual abundance as proof of performance or introducing unapproved client imagery." ], "option_guidance": { "option": "seven", "composition_delta": "Seven pictures", "semantic_change": "retains base content relationship; changes presentation or disclosure", "matching_instruction": "Select S48 seven when the supplied material answers “What do these four differently sized views show together?” through hero image and visual supporting set. Respect this state: Seven pictures" }, "provenance": { "status": "inferred composition evidence", "author_intent": "not independently confirmed", "basis": [ "retained source composition where available", "authored layout and slot contracts", "static implementation inspection" ], "source_visual_count": 3, "source_visual_sha256": [ "a0de1026a2936fb34d099228734de1f36e94cd4b3634f552879246cda1b9c37d", "3535dad0862ca1001a963f7bcf508fdf33aec79401de358997f7b71f5cdebc71", "d1e6268805088ce9d4e16d70043f9e6b73ea6a69d9675649027d9ca1c42305e4" ], "source_export": "private source images remain outside this draft site", "markup_sha256": "f04e7a1462be34f7a2efdabaee647f96e528e3b5bb6b014d3a79ce4137834518", "limits": [ "Static parsing inventories authored nodes; it does not certify rendered visibility, responsive fit or interactive state.", "Budgets are authored layout guidance, not a content-writing limit or proof of fit.", "Matching guidance is a draft inference; it does not establish facts, endorsement, causation or source author intent." ] }, "adaptation_rules": [ "Choose by audience question, reasoning relation and required content before aesthetic preference.", "Supply every required semantic role; retain visible unknowns as labelled real-content placeholders.", "A number needs source, scope and units; a quotation needs faithful wording and attribution.", "Do not infer importance from area, colour, depth or movement unless the content explicitly defines that encoding.", "Keep colour token roles, structural objects, licences and source records; changing content does not authorize changing them." ] }, "narrative_profile": { "central_point": "Several complementary views make one subject legible through context, activity and detail.", "communication_job": "Same communication job as default. Same job with seven views: tall anchor, two wide views, four details.", "audience_value": "Explanation and perspective: offers different scales of view without implying that image area measures importance or evidence strength.", "reading_path": [ "Same job with seven views: tall anchor, two wide views, four details.", "Read the subject label and title.", "Start with the large portrait view, then the wide setting and two closer details.", "Connect the views by their captions or alt text; a collage alone does not prove a result." ], "adaptation": { "required_inputs": [ "7 distinct views of one subject, each with caption, role and provenance.", "A concise title connecting them." ], "slot_guidance": { "eyebrow": "Name the image set or project.", "title": "State what ties the views together.", "cells": "7 complementary scene descriptions with one shared subject and a distinct role for each." }, "can_change": [ "Subject, names and wording within the active slot roles.", "Illustrations or supporting values where present, with their provenance and limits." ], "must_survive": [ "Each image has a distinct role and provenance.", "The hero anchors attention without becoming stronger evidence." ] }, "worked_example": { "fictional": true, "scenario": "A fictional repair service introduces the experience through complementary scenes.", "slot_fills": { "eyebrow": "A repair visit", "title": "One service, four views.", "cells": [ "Hero: a fictional volunteer examining a lamp at a workbench.", "Context: the neighborhood hall with separate intake and repair areas.", "Detail: hands labeling a disconnected power cord for inspection.", "Human view: a member recording the repair advice in a notebook.", "Extension: volunteers review unresolved devices after the session.", "Place: members arrive by bicycle outside the hall.", "Continuation: a member returns a repaired lamp to its owner." ] }, "reasoning": "The four views explain who participates, where work happens, how it proceeds and what the visitor takes away; they are not four unrelated mood images.", "qualification": "Every organization, value and assertion in this example is fictional. Replace it with approved, sourced content before use." }, "narrative_fit": { "before": "Introduce the service and label the illustrations as illustrative.", "after": "Explain a specific stage, boundary or evidence claim in text.", "good_uses": [ "Visual orientation to a place, product or process." ], "poor_fits": [ "Evidence of actual attendance or outcomes using generated scenes.", "Four images with no shared subject." ] }, "evidence": { "observations": [ "Retained reference shows one tall region, one wide region and two smaller regions.", "Current default shows four .f1–.f4 illustrations; further figures are variant-controlled." ], "interpretations": [ "The communication job and reuse advice are inferred from the current arrangement and slot contract, not independently confirmed source intent." ], "not_verified": [ "Original author intent, factual accuracy of sample copy and persuasion effects are not verified.", "No confidential archive or proposal corpus was used.", "Variant-specific source playback was not independently tested; the variation reading uses its current implementation and metadata." ], "references": [ "dist/S48-bento-collage-4/spread.json", "dist/S48-bento-collage-4/spread.html", "02_product/spreads/S48-bento-collage-4/source.webp (viewed for arrangement)" ] }, "review": { "status": "reviewed", "basis": "Motif inspected current metadata, active markup and the retained source arrangement, then checked the fictional example against the content roles. This is a layout-contract adaptation review." }, "variation_relationship": "same-job" }, "required_content": [ "7 distinct views of one subject, each with caption, role and provenance.", "A concise title connecting them." ], "requires_before": [ "Introduce the service and label the illustrations as illustrative." ], "enables_after": [ "Explain a specific stage, boundary or evidence claim in text." ], "avoid_when": [ "Evidence of actual attendance or outcomes using generated scenes.", "Four images with no shared subject." ] }, "spotlight": { "audience_question": "How does the dominant picture relate to these four supporting views?", "intent": "Recognize a hero plus four complementary image panels.", "reader_outcome": "Recognize a hero plus four complementary image panels.", "reasoning_relation": "hero and four visual details", "slot_roles": { "cells": "Five complementary images: one dominant subject and four contextual views; captions/alt text preserve meaning." }, "matching": { "audience_question": "How does the dominant picture relate to these four supporting views?", "reader_outcome": "Recognize a hero plus four complementary image panels.", "reasoning_relation": "hero and four visual details", "content_shape": { "composition": "Four pictures laid out as one object: one tall hero on the left, one wide picture top right, two squares below it.", "selected_state": "A full-height hero and four smaller panels fly in together from their original directions.", "density": "airy", "columns": 3, "column_note": "Base metadata only; selected option can replace the base geometry." }, "required_slots": [ { "name": "cells", "reader_question": "What subject, example or view must I inspect, and is it evidence or illustration?", "semantic_role": "Five complementary images: one dominant subject and four contextual views; captions/alt text preserve meaning.", "content_unit_count": { "min": 5, "max": 5, "basis": "Authored visible members in the selected arrangement; annotation occurrences can differ." }, "placeholder": "[REAL CONTENT · cells · 4 illustrations: hero 3:4 left (fill first), wide 2:1 top right, two 1:1 below it; tight gaps]", "layout_budget": { "authored": "1 scene each", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "cells", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 0 ] } } ], "rejection_constraints": [ "Picture entrance directions mistaken for a causal sequence.", "Treating visual abundance as proof of performance or introducing unapproved client imagery." ], "option_guidance": { "option": "spotlight", "composition_delta": "A full-height hero and four smaller panels fly in together from their original directions.", "semantic_change": "changes content relationship", "matching_instruction": "Select S48 spotlight when the supplied material answers “How does the dominant picture relate to these four supporting views?” through hero and four visual details. Respect this state: A full-height hero and four smaller panels fly in together from their original directions." }, "provenance": { "status": "inferred composition evidence", "author_intent": "not independently confirmed", "basis": [ "retained source composition where available", "authored layout and slot contracts", "static implementation inspection" ], "source_visual_count": 3, "source_visual_sha256": [ "a0de1026a2936fb34d099228734de1f36e94cd4b3634f552879246cda1b9c37d", "3535dad0862ca1001a963f7bcf508fdf33aec79401de358997f7b71f5cdebc71", "d1e6268805088ce9d4e16d70043f9e6b73ea6a69d9675649027d9ca1c42305e4" ], "source_export": "private source images remain outside this draft site", "markup_sha256": "f04e7a1462be34f7a2efdabaee647f96e528e3b5bb6b014d3a79ce4137834518", "limits": [ "Static parsing inventories authored nodes; it does not certify rendered visibility, responsive fit or interactive state.", "Budgets are authored layout guidance, not a content-writing limit or proof of fit.", "Matching guidance is a draft inference; it does not establish facts, endorsement, causation or source author intent." ] }, "adaptation_rules": [ "Choose by audience question, reasoning relation and required content before aesthetic preference.", "Supply every required semantic role; retain visible unknowns as labelled real-content placeholders.", "A number needs source, scope and units; a quotation needs faithful wording and attribution.", "Do not infer importance from area, colour, depth or movement unless the content explicitly defines that encoding.", "Keep colour token roles, structural objects, licences and source records; changing content does not authorize changing them." ], "previous_required_slots": [ { "name": "pictures", "reader_question": "What subject, example or view must I inspect, and is it evidence or illustration?", "semantic_role": "One dominant image plus four complementary views; caption and provenance per image.", "content_unit_count": { "min": 5, "max": 5, "basis": "authored composition members where a repeated group is specified; otherwise one named slot; not a required amount of evidence" }, "placeholder": "[CLEARED IMAGE OR LABELLED ILLUSTRATION · pictures · One dominant image plus four complementary views; caption and provenance per image.]", "layout_budget": { "authored": "5 images", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "pictures", "occurrences": 3, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 3, 3, 3 ] }, "integrity": "Clear rights and provenance, retain meaningful alt text; generated scenes illustrate and cannot prove a historical event." } ], "contract_correction": { "date": "2026-10-13", "basis": "Actual selected HTML/CSS inspection; previous required slots retained for review.", "records": [ { "code": "S48", "option": "spotlight", "slots": [ "cells" ], "counts": { "cells": 5 } } ] } }, "narrative_profile": { "central_point": "Several complementary views make one subject legible through context, activity and detail.", "communication_job": "Same communication job as default. One full-height anchor and four smaller views arrive together from their authored directions; the title is hidden.", "audience_value": "Explanation and perspective: offers different scales of view without implying that image area measures importance or evidence strength.", "reading_path": [ "One full-height anchor and four smaller views arrive together from their authored directions; the title is hidden.", "Read the subject label and title.", "Start with the large portrait view, then the wide setting and two closer details.", "Connect the views by their captions or alt text; a collage alone does not prove a result." ], "adaptation": { "required_inputs": [ "Five related images with captions and source disclosures.", "A preceding title or explanation, because this option hides its own title." ], "slot_guidance": { "cells": "Five complementary images: one dominant subject and four contextual views; captions/alt text preserve meaning." }, "can_change": [ "Subject, names and wording within the active slot roles.", "Illustrations or supporting values where present, with their provenance and limits." ], "must_survive": [ "Each image has a distinct role and provenance.", "The hero anchors attention without becoming stronger evidence.", "The complete static state conveys the same set; simultaneous arrival does not create chronology." ] }, "worked_example": { "fictional": true, "scenario": "A fictional repair service introduces the experience through complementary scenes.", "slot_fills": { "cells": [ "Hero: a fictional volunteer examining a lamp at a workbench.", "Context: the neighborhood hall with separate intake and repair areas.", "Detail: hands labeling a disconnected power cord for inspection.", "Human view: a member recording the repair advice in a notebook.", "Continuation: volunteers review the unresolved devices after the session." ] }, "reasoning": "The four views explain who participates, where work happens, how it proceeds and what the visitor takes away; they are not four unrelated mood images.", "qualification": "Every organization, value and assertion in this example is fictional. Replace it with approved, sourced content before use." }, "narrative_fit": { "before": "Introduce the service and label the illustrations as illustrative.", "after": "Explain a specific stage, boundary or evidence claim in text.", "good_uses": [ "Visual orientation to a place, product or process." ], "poor_fits": [ "Evidence of actual attendance or outcomes using generated scenes.", "Four images with no shared subject." ] }, "evidence": { "observations": [ "The spotlight option shows five base bento cells and hides the eyebrow/title.", "The active group is cells with five members; selected matching now names those cells.", "The motion description records simultaneous directional arrival; native playback is not reverified." ], "interpretations": [ "The communication job and reuse advice are inferred from the current arrangement and slot contract, not independently confirmed source intent." ], "not_verified": [ "Original author intent, factual accuracy of sample copy and persuasion effects are not verified.", "No confidential archive or proposal corpus was used.", "Variant-specific source playback was not independently tested; the variation reading uses its current implementation and metadata." ], "references": [ "dist/S48-bento-collage-4/spread.json", "dist/S48-bento-collage-4/spread.html", "02_product/spreads/S48-bento-collage-4/source.webp (viewed for arrangement)" ] }, "review": { "status": "reviewed", "basis": "Motif rechecked the corrected selected matching contract against active markup and example roles/cardinality. This confirms layout-contract adaptation, not source author intent, factual proof or rendered usability." }, "variation_relationship": "same-job" }, "required_content": [ "Five related images with captions and source disclosures.", "A preceding title or explanation, because this option hides its own title." ], "requires_before": [ "Introduce the service and label the illustrations as illustrative." ], "enables_after": [ "Explain a specific stage, boundary or evidence claim in text." ], "avoid_when": [ "Evidence of actual attendance or outcomes using generated scenes.", "Four images with no shared subject." ] }, "fluid-grid": { "audience_question": "What are these three views, and which one do I want to inspect closely?", "intent": "Inspect a finite image set while the selected view receives more space.", "reader_outcome": "Inspect a finite image set while the selected view receives more space.", "reasoning_relation": "three-image selection and focus", "slot_roles": { "pictures": "Three captioned views of a shared subject; each caption identifies its own contribution." }, "matching": { "audience_question": "What are these three views, and which one do I want to inspect closely?", "reader_outcome": "Inspect a finite image set while the selected view receives more space.", "reasoning_relation": "three-image selection and focus", "content_shape": { "composition": "Four pictures laid out as one object: one tall hero on the left, one wide picture top right, two squares below it.", "selected_state": "Two pictures above a wide third; selecting one moves it into the spanning position. All three captions stay visible.", "density": "airy", "columns": 3, "column_note": "Base metadata only; selected option can replace the base geometry." }, "required_slots": [ { "name": "pictures", "reader_question": "What subject, example or view must I inspect, and is it evidence or illustration?", "semantic_role": "Three captioned views of a shared subject; each caption identifies its own contribution.", "content_unit_count": { "min": 3, "max": 3, "basis": "authored composition members where a repeated group is specified; otherwise one named slot; not a required amount of evidence" }, "placeholder": "[CLEARED IMAGE OR LABELLED ILLUSTRATION · pictures · Three captioned views; selected view gains space without gaining evidential weight.]", "layout_budget": { "authored": "3 images", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "pictures", "occurrences": 3, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 3, 3, 3 ] }, "integrity": "Clear rights and provenance, retain meaningful alt text; generated scenes illustrate and cannot prove a historical event." } ], "rejection_constraints": [ "Spanning size implying evidence quality or importance unsupported by captions.", "Treating visual abundance as proof of performance or introducing unapproved client imagery." ], "option_guidance": { "option": "fluid-grid", "composition_delta": "Two pictures above a wide third; selecting one moves it into the spanning position. All three captions stay visible.", "semantic_change": "changes content relationship", "matching_instruction": "Select S48 fluid-grid when the supplied material answers “What are these three views, and which one do I want to inspect closely?” through three-image selection and focus. Respect this state: Two pictures above a wide third; selecting one moves it into the spanning position. All three captions stay visible." }, "provenance": { "status": "inferred composition evidence", "author_intent": "not independently confirmed", "basis": [ "retained source composition where available", "authored layout and slot contracts", "static implementation inspection" ], "source_visual_count": 3, "source_visual_sha256": [ "a0de1026a2936fb34d099228734de1f36e94cd4b3634f552879246cda1b9c37d", "3535dad0862ca1001a963f7bcf508fdf33aec79401de358997f7b71f5cdebc71", "d1e6268805088ce9d4e16d70043f9e6b73ea6a69d9675649027d9ca1c42305e4" ], "source_export": "private source images remain outside this draft site", "markup_sha256": "f04e7a1462be34f7a2efdabaee647f96e528e3b5bb6b014d3a79ce4137834518", "limits": [ "Static parsing inventories authored nodes; it does not certify rendered visibility, responsive fit or interactive state.", "Budgets are authored layout guidance, not a content-writing limit or proof of fit.", "Matching guidance is a draft inference; it does not establish facts, endorsement, causation or source author intent." ] }, "adaptation_rules": [ "Choose by audience question, reasoning relation and required content before aesthetic preference.", "Supply every required semantic role; retain visible unknowns as labelled real-content placeholders.", "A number needs source, scope and units; a quotation needs faithful wording and attribution.", "Do not infer importance from area, colour, depth or movement unless the content explicitly defines that encoding.", "Keep colour token roles, structural objects, licences and source records; changing content does not authorize changing them." ] }, "narrative_profile": { "central_point": "Several complementary views make one subject legible through context, activity and detail.", "communication_job": "Same communication job as default. Two pictures sit above a wide third; selecting a view gives it the spanning position while captions remain visible.", "audience_value": "Explanation and perspective: offers different scales of view without implying that image area measures importance or evidence strength.", "reading_path": [ "Two pictures sit above a wide third; selecting a view gives it the spanning position while captions remain visible.", "Read the subject label and title.", "Start with the large portrait view, then the wide setting and two closer details.", "Connect the views by their captions or alt text; a collage alone does not prove a result." ], "adaptation": { "required_inputs": [ "Three captioned views, with every essential caption available in the complete static view." ], "slot_guidance": { "pictures": "Three captioned views of a shared subject; each caption identifies its own contribution." }, "can_change": [ "Subject, names and wording within the active slot roles.", "Illustrations or supporting values where present, with their provenance and limits." ], "must_survive": [ "Each image has a distinct role and provenance.", "The hero anchors attention without becoming stronger evidence.", "Selection changes viewing space, not evidential weight." ] }, "worked_example": { "fictional": true, "scenario": "A fictional repair service introduces the experience through complementary scenes.", "slot_fills": { "pictures": [ "Intake: a fictional volunteer records a lamp fault.", "Diagnosis: a supervisor checks the disconnected lamp.", "Handover: the owner receives advice and unresolved limits." ] }, "reasoning": "The four views explain who participates, where work happens, how it proceeds and what the visitor takes away; they are not four unrelated mood images.", "qualification": "Every organization, value and assertion in this example is fictional. Replace it with approved, sourced content before use." }, "narrative_fit": { "before": "Introduce the service and label the illustrations as illustrative.", "after": "Explain a specific stage, boundary or evidence claim in text.", "good_uses": [ "Visual orientation to a place, product or process." ], "poor_fits": [ "Evidence of actual attendance or outcomes using generated scenes.", "Four images with no shared subject." ] }, "evidence": { "observations": [ "The fluid-grid branch has three pictures with captions and changes which one spans the grid." ], "interpretations": [ "The communication job and reuse advice are inferred from the current arrangement and slot contract, not independently confirmed source intent." ], "not_verified": [ "Original author intent, factual accuracy of sample copy and persuasion effects are not verified.", "No confidential archive or proposal corpus was used.", "Variant-specific source playback was not independently tested; the variation reading uses its current implementation and metadata." ], "references": [ "dist/S48-bento-collage-4/spread.json", "dist/S48-bento-collage-4/spread.html", "02_product/spreads/S48-bento-collage-4/source.webp (viewed for arrangement)" ] }, "review": { "status": "reviewed", "basis": "Motif inspected current metadata, active markup and the retained source arrangement, then checked the fictional example against the content roles. This is a layout-contract adaptation review." }, "variation_relationship": "same-job" }, "required_content": [ "Three captioned views, with every essential caption available in the complete static view." ], "requires_before": [ "Introduce the service and label the illustrations as illustrative." ], "enables_after": [ "Explain a specific stage, boundary or evidence claim in text." ], "avoid_when": [ "Evidence of actual attendance or outcomes using generated scenes.", "Four images with no shared subject." ] } }, "narrative_profile": { "central_point": "Several complementary views make one subject legible through context, activity and detail.", "communication_job": "Answer what these images show together that one image cannot.", "audience_value": "Explanation and perspective: offers different scales of view without implying that image area measures importance or evidence strength.", "reading_path": [ "Read the subject label and title.", "Start with the large portrait view, then the wide setting and two closer details.", "Connect the views by their captions or alt text; a collage alone does not prove a result." ], "adaptation": { "required_inputs": [ "Four distinct views of one subject, each with a role and provenance.", "A concise title connecting them." ], "slot_guidance": { "eyebrow": "Name the image set or project.", "title": "State what ties the views together.", "cells": "Four scene descriptions with roles: hero subject, wider context, process detail and human detail. Keep captions or alt text with the assets." }, "can_change": [ "Subject, names and wording within the active slot roles.", "Illustrations or supporting values where present, with their provenance and limits." ], "must_survive": [ "Each image has a distinct role and provenance.", "The hero anchors attention without becoming stronger evidence." ] }, "worked_example": { "fictional": true, "scenario": "A fictional repair service introduces the experience through complementary scenes.", "slot_fills": { "eyebrow": "A repair visit", "title": "One service, four views.", "cells": [ "Hero: a fictional volunteer examining a lamp at a workbench.", "Context: the neighborhood hall with separate intake and repair areas.", "Detail: hands labeling a disconnected power cord for inspection.", "Human view: a member recording the repair advice in a notebook." ] }, "reasoning": "The four views explain who participates, where work happens, how it proceeds and what the visitor takes away; they are not four unrelated mood images.", "qualification": "Every organization, value and assertion in this example is fictional. Replace it with approved, sourced content before use." }, "narrative_fit": { "before": "Introduce the service and label the illustrations as illustrative.", "after": "Explain a specific stage, boundary or evidence claim in text.", "good_uses": [ "Visual orientation to a place, product or process." ], "poor_fits": [ "Evidence of actual attendance or outcomes using generated scenes.", "Four images with no shared subject." ] }, "evidence": { "observations": [ "Retained reference shows one tall region, one wide region and two smaller regions.", "Current default shows four .f1–.f4 illustrations; further figures are variant-controlled." ], "interpretations": [ "The communication job and reuse advice are inferred from the current arrangement and slot contract, not independently confirmed source intent." ], "not_verified": [ "Original author intent, factual accuracy of sample copy and persuasion effects are not verified.", "No confidential archive or proposal corpus was used." ], "references": [ "dist/S48-bento-collage-4/spread.json", "dist/S48-bento-collage-4/spread.html", "02_product/spreads/S48-bento-collage-4/source.webp (viewed for arrangement)" ] }, "review": { "status": "reviewed", "basis": "Motif inspected current metadata, active markup and the retained source arrangement, then checked the fictional example against the content roles. This is a layout-contract adaptation review." }, "variation_relationship": "base" } }, "options": [ { "id": "five", "what": "Five pictures" }, { "id": "seven", "what": "Seven pictures" }, { "id": "spotlight", "what": "A full-height hero and four smaller panels fly in together from their original directions." }, { "id": "fluid-grid", "what": "Two pictures above a wide third; selecting one moves it into the spanning position. All three captions stay visible.", "sources": [ { "ref": "useLayouts Fluid Expanding Grid", "url": "https://uselayouts.com/docs/components/fluid-expanding-grid" } ] } ], "also_seen_in": [], "source": { "ref": "Hoffman L42 Bento collage (4)", "url": "https://github.com/neekchan/hoffman-agency-design-system/blob/main/templates/deck/Deck.dc.html" }, "motion": { "file": "motion.json", "description": "A full-height hero and four smaller panels fly in together from their original directions." } }