{ "code": "S24", "name": "Full bleed", "shape": "claim", "family": "One big line", "fits": "One short line set over one full-bleed illustration, with an eyebrow.", "use_when": "A single emotional beat carried by one picture. One line of type only; if it needs a paragraph, use another spread.", "slots": [ { "name": "illustration", "holds": "edge-to-edge illustration under a 66% plum veil that guarantees the type", "budget": "16:9" }, { "name": "eyebrow", "holds": "theme tag, top left", "budget": "1-3 words" }, { "name": "headline", "holds": "one line, vertically centred left, one lime italic phrase", "budget": "under 10 words" } ], "columns": 1, "density": "airy", "surface": "plum", "works_on": [ "deck", "page" ], "library": "Hoffman", "reference_libraries": [ "useLayouts" ], "dir": "S24-full-bleed", "semantic": { "audience_question": "What short claim should this scene make memorable?", "intent": "Associate one legible headline with one immersive image.", "reasoning_relation": "single claim over a scene", "message_pattern": "[Conclusion], because [decisive reason].", "required_content": [ "One short central line.", "A scene that makes that line understandable.", "Clear distinction between illustration and factual record." ], "narrative_positions": [ "context", "explanation", "evidence: choose only when the page supports the surrounding argument" ], "requires_before": [ "Explain why the visible appointment is only part of service reliability." ], "enables_after": [ "Show the readiness checks and who owns them." ], "slot_roles": { "illustration": "The full-field visual context; preserve room for the text and label generated scenes.", "eyebrow": "The theme or chapter cue.", "headline": "A short proposition that relates meaningfully to the scene." }, "avoid_when": [ "A complex comparison", "A statistical finding", "A scene used to imply a real event without evidence" ], "layout_specific_contract": "One short line set over one full-bleed illustration, with an eyebrow.", "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": "Associate one legible headline with one immersive image.", "matching": { "audience_question": "What short claim should this scene make memorable?", "reader_outcome": "Associate one legible headline with one immersive image.", "reasoning_relation": "single claim over a scene", "content_shape": { "composition": "One short line set over one full-bleed illustration, with an eyebrow.", "selected_state": "One short line set over one full-bleed illustration, with an eyebrow.", "density": "airy", "columns": 1, "column_note": "Base metadata only; selected option can replace the base geometry." }, "required_slots": [ { "name": "illustration", "reader_question": "What subject, example or view must I inspect, and is it evidence or illustration?", "semantic_role": "The full-field visual context; preserve room for the text and label generated scenes.", "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": "[CLEARED IMAGE OR LABELLED ILLUSTRATION · illustration · edge-to-edge illustration under a 66% plum veil that guarantees the type]", "layout_budget": { "authored": "16:9", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "illustration", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 0 ] }, "integrity": "Clear rights and provenance, retain meaningful alt text; generated scenes illustrate and cannot prove a historical event." }, { "name": "eyebrow", "reader_question": "What kind of content or argument section am I reading?", "semantic_role": "The theme or chapter cue.", "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 · theme tag, top left]", "layout_budget": { "authored": "1-3 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": "headline", "reader_question": "What short claim should this scene make memorable?", "semantic_role": "A short proposition that relates meaningfully to the scene.", "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 · headline · one line, vertically centred left, one lime italic phrase]", "layout_budget": { "authored": "under 10 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "headline", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 7 ] } } ], "rejection_constraints": [ "Evidence that must be inspected unobscured, or paragraphs forced onto the picture.", "Using a picture or large type as a substitute for evidence." ], "option_guidance": { "option": "default", "composition_delta": "One short line set over one full-bleed illustration, with an eyebrow.", "semantic_change": "retains base content relationship; changes presentation or disclosure", "matching_instruction": "Select S24 default when the supplied material answers “What short claim should this scene make memorable?” through single claim over a scene. Respect this state: One short line set over one full-bleed illustration, with an eyebrow." }, "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": 2, "source_visual_sha256": [ "1d69534f8e6b4a7a4489d41e4f249037e4bcc7c9ed748e7b8d2c054610448bd2", "7082742b687697b0d3a4e761a3ee14cced1b7c97ef5e45978d2f2353e4b652fd" ], "source_export": "private source images remain outside this draft site", "markup_sha256": "a41a73f9db9822849a2b906ea37136e6ecd79b477e132e01c6713dd330bfe07b", "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": [ "Evidence that must be inspected unobscured, or paragraphs forced onto the picture.", "Using a picture or large type as a substitute for evidence." ], "markup_inventory": { "file": "spread.html", "sha256": "a41a73f9db9822849a2b906ea37136e6ecd79b477e132e01c6713dd330bfe07b", "method": "static lxml markup plus authored option description; no rendered-visibility claim", "all_markup_slot_counts": { "illustration": 1, "eyebrow": 1, "headline": 1, "text": 1, "buttons": 1, "logos": 1, "story-1": 1, "story-2": 1, "story-3": 1, "story-4": 1 }, "slot_evidence": { "illustration": [ { "tag": "figure", "classes": "ph r-16x9", "sample_word_count": 0, "repeated_children": 1 } ], "eyebrow": [ { "tag": "span", "classes": "eyebrow", "sample_word_count": 2, "repeated_children": 0 } ], "headline": [ { "tag": "p", "classes": "title", "sample_word_count": 7, "repeated_children": 1 } ], "text": [ { "tag": "p", "classes": "sub card-only", "sample_word_count": 28, "repeated_children": 0 } ], "buttons": [ { "tag": "div", "classes": "btns hero-only", "sample_word_count": 5, "repeated_children": 2 } ], "logos": [ { "tag": "div", "classes": "logos hero-only", "sample_word_count": 5, "repeated_children": 5 } ], "story-1": [ { "tag": "article", "classes": "cat-reveal-card", "sample_word_count": 14, "repeated_children": 3 } ], "story-2": [ { "tag": "article", "classes": "cat-reveal-card", "sample_word_count": 14, "repeated_children": 3 } ], "story-3": [ { "tag": "article", "classes": "cat-reveal-card", "sample_word_count": 14, "repeated_children": 3 } ], "story-4": [ { "tag": "article", "classes": "cat-reveal-card", "sample_word_count": 14, "repeated_children": 3 } ] }, "option_selectors": [ "card", "low" ], "linked_implementation": [ { "file": "../spreads.css", "sha256": "32da94472b0c9131e4d5dae7d5bf0498b09202a9e66294b4e4f23e6ddfbf37ba" }, { "file": "../catalogue-options.css", "sha256": "d4ac2c72a1ba61f50fc52dbacff24130de014f42f1dc2df5fd841bea7a34e2db" }, { "file": "../spread.js", "sha256": "3d99948b83f750bd4ae95dac08e3e50a395de7c149c90a6f1a1c0ea36a2634a4" }, { "file": "../catalogue-options.js", "sha256": "ca693515383ba7cdf6d9937beada03614150786a4ca850ca800282ed4732d991" } ] }, "variations": { "low": { "audience_question": "What offer does this image introduce, and where should I go next?", "intent": "Read a low-positioned headline with clear actions and verified relationship signals.", "reader_outcome": "Read a low-positioned headline with clear actions and verified relationship signals.", "reasoning_relation": "image-led offer and action", "slot_roles": { "illustration": "Full scene illustrating the offer, with truthful image status.", "eyebrow": "The offer’s category/context.", "headline": "What the audience can understand or do here.", "buttons": "Two distinct actions and real routes.", "logos": "The authored finite identity row with an explicit truthful relationship; change any surrounding label to match." }, "matching": { "audience_question": "What offer does this image introduce, and where should I go next?", "reader_outcome": "Read a low-positioned headline with clear actions and verified relationship signals.", "reasoning_relation": "image-led offer and action", "content_shape": { "composition": "One short line set over one full-bleed illustration, with an eyebrow.", "selected_state": "Hero: headline low, buttons right, logo row along the bottom", "density": "airy", "columns": 1, "column_note": "Base metadata only; selected option can replace the base geometry." }, "required_slots": [ { "name": "illustration", "reader_question": "What subject, example or view must I inspect, and is it evidence or illustration?", "semantic_role": "Full scene illustrating the offer, with truthful image status.", "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": "[CLEARED IMAGE OR LABELLED ILLUSTRATION · illustration · edge-to-edge illustration under a 66% plum veil that guarantees the type]", "layout_budget": { "authored": "16:9", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "illustration", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 0 ] }, "integrity": "Clear rights and provenance, retain meaningful alt text; generated scenes illustrate and cannot prove a historical event." }, { "name": "eyebrow", "reader_question": "What kind of content or argument section am I reading?", "semantic_role": "The offer’s category/context.", "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 · theme tag, top left]", "layout_budget": { "authored": "1-3 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": "headline", "reader_question": "What offer does this image introduce, and where should I go next?", "semantic_role": "What the audience can understand or do here.", "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 · headline · one line, vertically centred left, one lime italic phrase]", "layout_budget": { "authored": "under 10 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "headline", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 7 ] } }, { "name": "buttons", "reader_question": "What action is actually available, and what does taking it change?", "semantic_role": "Two distinct actions and real routes.", "content_unit_count": { "min": 2, "max": 2, "basis": "authored composition members where a repeated group is specified; otherwise one named slot; not a required amount of evidence" }, "placeholder": "[REAL CONTENT · buttons · Two distinct authored actions with valid destinations.]", "layout_budget": { "authored": "2 actions; 2-4 words each", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "buttons", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 5 ] } }, { "name": "logos", "reader_question": "What does the logos contribute to this page’s reader outcome?", "semantic_role": "The authored finite identity row with an explicit truthful relationship; change any surrounding label to match.", "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 · logos · Permissioned identity marks, with the precise relationship stated.]", "layout_budget": { "authored": "use the finite authored row; verify each mark", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "logos", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 5 ] } } ], "rejection_constraints": [ "A scene or logo row implying customers or proof without permission.", "Using a picture or large type as a substitute for evidence." ], "option_guidance": { "option": "low", "composition_delta": "Hero: headline low, buttons right, logo row along the bottom", "semantic_change": "changes content relationship", "matching_instruction": "Select S24 low when the supplied material answers “What offer does this image introduce, and where should I go next?” through image-led offer and action. Respect this state: Hero: headline low, buttons right, logo row along the bottom" }, "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": 2, "source_visual_sha256": [ "1d69534f8e6b4a7a4489d41e4f249037e4bcc7c9ed748e7b8d2c054610448bd2", "7082742b687697b0d3a4e761a3ee14cced1b7c97ef5e45978d2f2353e4b652fd" ], "source_export": "private source images remain outside this draft site", "markup_sha256": "a41a73f9db9822849a2b906ea37136e6ecd79b477e132e01c6713dd330bfe07b", "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": "A scene-led offer presents two next actions and an explicit identity context.", "communication_job": "Orient visitors to an offer and let them choose where to go next.", "audience_value": "Choice and reassurance: combines a concrete setting with useful routes and a precisely described relationship to any marks shown.", "reading_path": [ "Read the theme and low-positioned headline.", "Choose the relevant action at the right.", "Read the identity row only in the context of its declared relationship." ], "adaptation": { "required_inputs": [ "A bounded offer.", "Two accurate action destinations.", "A relevant cleared scene and permissioned or fictional labelled identities." ], "slot_guidance": { "illustration": "Full scene illustrating the offer, with truthful image status.", "eyebrow": "The offer’s category/context.", "headline": "What the audience can understand or do here.", "buttons": "Two distinct actions and real routes.", "logos": "The authored finite identity row with an explicit truthful relationship; change any surrounding label to match." }, "can_change": [ "Offer, scene and legitimate destinations." ], "must_survive": [ "Action labels match real destinations.", "Mark relationships are stated accurately.", "Scene is illustration, not evidence." ] }, "worked_example": { "fictional": true, "scenario": "Fictional repair cooperative, used only to demonstrate this selected communication job.", "slot_fills": { "illustration": "Generated concept scene of a neighbourhood repair workshop.", "eyebrow": "Proposed repair guide", "headline": "Know what happens before a repair.", "buttons": [ "Read the process → local #process section to implement", "Explore the pilot → local #pilot section to implement" ], "logos": [ "Fictional guide contributor: North Workshop", "Fictional guide contributor: East Library", "Fictional guide contributor: Civic Reuse", "Fictional guide contributor: Tool Circle", "Fictional guide contributor: Neighbour Hub" ] }, "reasoning": "The routes separate understanding the process from evaluating the trial; named fictional contributors are context, not results or endorsements.", "qualification": "All names, stories, statements and numbers are invented teaching material; no real endorsement, research result or implemented service is asserted." }, "narrative_fit": { "before": "State the service or story’s relevance.", "after": "Deliver the promised process or pilot content at the selected route.", "good_uses": [ "A visual story entry point", "A service or programme landing section" ], "poor_fits": [ "A static image with fake buttons", "A factual finding requiring caveats" ] }, "evidence": { "observations": [ "Current selected-option markup, CSS and contract were inspected: Orient visitors to an offer and let them choose where to go next." ], "interpretations": [ "The guidance interprets the layout’s communication affordances; it does not assert source-author intent." ], "not_verified": [ "Original author intent, surrounding source sequence, sample factual claims and persuasion effects are not independently verified.", "Option source pixels and live interaction were not separately verified in this authoring pass." ], "references": [ "dist/S24-full-bleed/spread.html", "dist/S24-full-bleed/spread.json", "https://github.com/neekchan/hoffman-agency-design-system/blob/main/templates/deck/Deck.dc.html" ] }, "review": { "status": "reviewed", "basis": "Reviewed option layout-contract and full fictional mapping from actual implementation; not source-author or empirical validation." }, "variation_relationship": "different-job" }, "required_content": [ "A bounded offer.", "Two accurate action destinations.", "A relevant cleared scene and permissioned or fictional labelled identities." ], "requires_before": [ "State the service or story’s relevance." ], "enables_after": [ "Deliver the promised process or pilot content at the selected route." ], "avoid_when": [ "A static image with fake buttons", "A factual finding requiring caveats" ] }, "card": { "audience_question": "What offer is explained by the card above this scene?", "intent": "Read a bounded offer independently of the background image.", "reader_outcome": "Read a bounded offer independently of the background image.", "reasoning_relation": "offer explanation and one action", "slot_roles": { "illustration": "Context scene; card option removes the veil, so do not rely on the scene for textual facts.", "eyebrow": "Offer category.", "headline": "The specific proposition.", "text": "Explain what the offer includes and its status.", "buttons": "One visible primary action; the secondary base button is hidden." }, "matching": { "audience_question": "What offer is explained by the card above this scene?", "reader_outcome": "Read a bounded offer independently of the background image.", "reasoning_relation": "offer explanation and one action", "content_shape": { "composition": "One short line set over one full-bleed illustration, with an eyebrow.", "selected_state": "Text card: eyebrow, headline, paragraph and one button in a solid card floating right over the scene, no veil", "density": "airy", "columns": 1, "column_note": "Base metadata only; selected option can replace the base geometry." }, "required_slots": [ { "name": "illustration", "reader_question": "What subject, example or view must I inspect, and is it evidence or illustration?", "semantic_role": "Context scene; card option removes the veil, so do not rely on the scene for textual facts.", "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": "[CLEARED IMAGE OR LABELLED ILLUSTRATION · illustration · edge-to-edge illustration under a 66% plum veil that guarantees the type]", "layout_budget": { "authored": "16:9", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "illustration", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 0 ] }, "integrity": "Clear rights and provenance, retain meaningful alt text; generated scenes illustrate and cannot prove a historical event." }, { "name": "eyebrow", "reader_question": "What kind of content or argument section am I reading?", "semantic_role": "Offer category.", "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 · theme tag, top left]", "layout_budget": { "authored": "1-3 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": "headline", "reader_question": "What offer is explained by the card above this scene?", "semantic_role": "The specific proposition.", "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 · headline · one line, vertically centred left, one lime italic phrase]", "layout_budget": { "authored": "under 10 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "headline", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 7 ] } }, { "name": "text", "reader_question": "What does the text contribute to this page’s reader outcome?", "semantic_role": "Explain what the offer includes and its status.", "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 · text · The explanatory paragraph that earns the floating card’s offer.]", "layout_budget": { "authored": "one paragraph, under 35 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "text", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 28 ] } }, { "name": "buttons", "reader_question": "What action is actually available, and what does taking it change?", "semantic_role": "One visible primary action; the secondary base button is hidden.", "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 · buttons · One primary action with an accurate label and real destination.]", "layout_budget": { "authored": "1 action; 2-4 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "buttons", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 5 ] } } ], "rejection_constraints": [ "The scene carrying essential evidence obscured by the floating card.", "Using a picture or large type as a substitute for evidence." ], "option_guidance": { "option": "card", "composition_delta": "Text card: eyebrow, headline, paragraph and one button in a solid card floating right over the scene, no veil", "semantic_change": "changes content relationship", "matching_instruction": "Select S24 card when the supplied material answers “What offer is explained by the card above this scene?” through offer explanation and one action. Respect this state: Text card: eyebrow, headline, paragraph and one button in a solid card floating right over the scene, no veil" }, "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": 2, "source_visual_sha256": [ "1d69534f8e6b4a7a4489d41e4f249037e4bcc7c9ed748e7b8d2c054610448bd2", "7082742b687697b0d3a4e761a3ee14cced1b7c97ef5e45978d2f2353e4b652fd" ], "source_export": "private source images remain outside this draft site", "markup_sha256": "a41a73f9db9822849a2b906ea37136e6ecd79b477e132e01c6713dd330bfe07b", "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": "A compact explanatory card clarifies one offer above its visual setting.", "communication_job": "Explain the value and scope before offering one next action.", "audience_value": "Explanation and choice: answers what the reader gets and what following the action will do.", "reading_path": [ "Read the category and headline inside the card.", "Read the paragraph for scope and limits.", "Follow the single primary action; inspect the scene as context." ], "adaptation": { "required_inputs": [ "One clear offer.", "A concise explanation and limitation.", "One real destination and a cleared scene." ], "slot_guidance": { "illustration": "Context scene; card option removes the veil, so do not rely on the scene for textual facts.", "eyebrow": "Offer category.", "headline": "The specific proposition.", "text": "Explain what the offer includes and its status.", "buttons": "One visible primary action; the secondary base button is hidden." }, "can_change": [ "Offer and scene.", "One action and its accurate destination." ], "must_survive": [ "The paragraph earns and limits the headline.", "One active action only.", "Destination delivers what the label promises." ] }, "worked_example": { "fictional": true, "scenario": "Fictional repair cooperative, used only to demonstrate this selected communication job.", "slot_fills": { "illustration": "Generated illustration of a parts-ready repair bench.", "eyebrow": "Pilot guide", "headline": "Check readiness before you book.", "text": "The proposed guide explains the questions to ask about diagnosis, parts and access. It cannot guarantee that every item is repairable.", "buttons": "Read the checklist → local #readiness-checklist section to implement" }, "reasoning": "The paragraph provides the qualification that a short headline cannot carry; the single action follows naturally from that offer.", "qualification": "All names, stories, statements and numbers are invented teaching material; no real endorsement, research result or implemented service is asserted." }, "narrative_fit": { "before": "Explain why the audience needs the guide.", "after": "Provide the actual checklist or detail promised.", "good_uses": [ "A single explained offer", "A contextual call to read more" ], "poor_fits": [ "Multiple competing choices", "Unexplained image captions", "Unsupported outcome promises" ] }, "evidence": { "observations": [ "Current selected-option markup, CSS and contract were inspected: Explain the value and scope before offering one next action." ], "interpretations": [ "The guidance interprets the layout’s communication affordances; it does not assert source-author intent." ], "not_verified": [ "Original author intent, surrounding source sequence, sample factual claims and persuasion effects are not independently verified.", "Option source pixels and live interaction were not separately verified in this authoring pass." ], "references": [ "dist/S24-full-bleed/spread.html", "dist/S24-full-bleed/spread.json", "https://github.com/neekchan/hoffman-agency-design-system/blob/main/templates/deck/Deck.dc.html" ] }, "review": { "status": "reviewed", "basis": "Reviewed option layout-contract and full fictional mapping from actual implementation; not source-author or empirical validation." }, "variation_relationship": "different-job" }, "required_content": [ "One clear offer.", "A concise explanation and limitation.", "One real destination and a cleared scene." ], "requires_before": [ "Explain why the audience needs the guide." ], "enables_after": [ "Provide the actual checklist or detail promised." ], "avoid_when": [ "Multiple competing choices", "Unexplained image captions", "Unsupported outcome promises" ] }, "stack-reveal": { "audience_question": "What are the four image-led stories in this authored sequence?", "intent": "Read a complete finite story collection as its layers reveal.", "reader_outcome": "Read a complete finite story collection as its layers reveal.", "reasoning_relation": "ordered image-led stories", "slot_roles": { "story-1": "Chapter 1: image, headline and explanation; retain qualification with that story.", "story-2": "Chapter 2: image, headline and explanation; retain qualification with that story.", "story-3": "Chapter 3: image, headline and explanation; retain qualification with that story.", "story-4": "Chapter 4: image, headline and explanation; retain qualification with that story." }, "matching": { "audience_question": "What are the four image-led stories in this authored sequence?", "reader_outcome": "Read a complete finite story collection as its layers reveal.", "reasoning_relation": "ordered image-led stories", "content_shape": { "composition": "One short line set over one full-bleed illustration, with an eyebrow.", "selected_state": "Four full-image stories stacked in depth; front cards lift away with slight X tilt on native scroll. Static/narrow/reduced views show all stories in order.", "density": "airy", "columns": 1, "column_note": "Base metadata only; selected option can replace the base geometry." }, "required_slots": [ { "name": "story-1", "reader_question": "What does the story 1 contribute to this page’s reader outcome?", "semantic_role": "Chapter 1: image, headline and explanation; retain qualification with that story.", "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 · story-1 · The story-1 content explicitly used by this selected composition.]", "layout_budget": { "authored": "one bounded content unit; preserve necessary qualifications", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "story-1", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 14 ] } }, { "name": "story-2", "reader_question": "What does the story 2 contribute to this page’s reader outcome?", "semantic_role": "Chapter 2: image, headline and explanation; retain qualification with that story.", "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 · story-2 · The story-2 content explicitly used by this selected composition.]", "layout_budget": { "authored": "one bounded content unit; preserve necessary qualifications", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "story-2", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 14 ] } }, { "name": "story-3", "reader_question": "What does the story 3 contribute to this page’s reader outcome?", "semantic_role": "Chapter 3: image, headline and explanation; retain qualification with that story.", "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 · story-3 · The story-3 content explicitly used by this selected composition.]", "layout_budget": { "authored": "one bounded content unit; preserve necessary qualifications", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "story-3", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 14 ] } }, { "name": "story-4", "reader_question": "What does the story 4 contribute to this page’s reader outcome?", "semantic_role": "Chapter 4: image, headline and explanation; retain qualification with that story.", "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 · story-4 · The story-4 content explicitly used by this selected composition.]", "layout_budget": { "authored": "one bounded content unit; preserve necessary qualifications", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "story-4", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 14 ] } } ], "rejection_constraints": [ "Only the top story available in static or reduced-motion reading.", "Using a picture or large type as a substitute for evidence." ], "option_guidance": { "option": "stack-reveal", "composition_delta": "Four full-image stories stacked in depth; front cards lift away with slight X tilt on native scroll. Static/narrow/reduced views show all stories in order.", "semantic_change": "changes content relationship", "matching_instruction": "Select S24 stack-reveal when the supplied material answers “What are the four image-led stories in this authored sequence?” through ordered image-led stories. Respect this state: Four full-image stories stacked in depth; front cards lift away with slight X tilt on native scroll. Static/narrow/reduced views show all stories in order." }, "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": 2, "source_visual_sha256": [ "1d69534f8e6b4a7a4489d41e4f249037e4bcc7c9ed748e7b8d2c054610448bd2", "7082742b687697b0d3a4e761a3ee14cced1b7c97ef5e45978d2f2353e4b652fd" ], "source_export": "private source images remain outside this draft site", "markup_sha256": "a41a73f9db9822849a2b906ea37136e6ecd79b477e132e01c6713dd330bfe07b", "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": "Four image-led stories form one authored sequence.", "communication_job": "Carry readers through distinct visual chapters whose order has a reason.", "audience_value": "Perspective and explanation: adds context incrementally while keeping every story’s headline and explanation inspectable.", "reading_path": [ "Read each front story’s headline and explanation.", "Continue in numbered order as cards reveal the next chapter.", "Use the complete state to revisit the whole sequence; depth and tilt do not imply evidence strength." ], "adaptation": { "required_inputs": [ "Four distinct but connected story units.", "A meaningful order.", "A labelled image and bounded explanation for each." ], "slot_guidance": { "story-1": "Chapter 1: image, headline and explanation; retain qualification with that story.", "story-2": "Chapter 2: image, headline and explanation; retain qualification with that story.", "story-3": "Chapter 3: image, headline and explanation; retain qualification with that story.", "story-4": "Chapter 4: image, headline and explanation; retain qualification with that story." }, "can_change": [ "Images and stories while retaining a coherent sequence." ], "must_survive": [ "Four complete image/headline/explanation units.", "Order preserves the chosen reasoning.", "Complete exports include all four stories." ] }, "worked_example": { "fictional": true, "scenario": "Fictional repair cooperative, used only to demonstrate this selected communication job.", "slot_fills": { "story-1": "The promise | Generated scene: resident booking | A proposed service must explain what a confirmed appointment means.", "story-2": "The preparation | Generated scene: parts tray | Diagnosis, parts and staffing checks define readiness.", "story-3": "The exception | Generated scene: inspection bench | Some jobs remain uncertain and should stay provisional.", "story-4": "The learning | Generated scene: follow-up conversation | The pilot should record failures and workload alongside completed repairs." }, "reasoning": "Promise leads to mechanism, exception and evaluation. Reordering arbitrarily would weaken the argument.", "qualification": "All names, stories, statements and numbers are invented teaching material; no real endorsement, research result or implemented service is asserted." }, "narrative_fit": { "before": "Introduce the reliability question and disclose conceptual status.", "after": "Draw a bounded implication or request the pilot decision.", "good_uses": [ "A four-part visual explainer", "A scene-led case narrative" ], "poor_fits": [ "Four unrelated pictures", "Evidence hidden behind unexported cards", "An assumed chronology without dates" ] }, "evidence": { "observations": [ "Current selected-option markup, CSS and contract were inspected: Carry readers through distinct visual chapters whose order has a reason." ], "interpretations": [ "The guidance interprets the layout’s communication affordances; it does not assert source-author intent." ], "not_verified": [ "Original author intent, surrounding source sequence, sample factual claims and persuasion effects are not independently verified.", "Option source pixels and live interaction were not separately verified in this authoring pass." ], "references": [ "dist/S24-full-bleed/spread.html", "dist/S24-full-bleed/spread.json", "https://github.com/neekchan/hoffman-agency-design-system/blob/main/templates/deck/Deck.dc.html", "https://uselayouts.com/docs/components/stack-scroll-reveal", "dist/catalogue-options.css", "dist/catalogue-options.js" ] }, "review": { "status": "reviewed", "basis": "Reviewed option layout-contract and full fictional mapping from actual implementation; not source-author or empirical validation." }, "variation_relationship": "different-job" }, "required_content": [ "Four distinct but connected story units.", "A meaningful order.", "A labelled image and bounded explanation for each." ], "requires_before": [ "Introduce the reliability question and disclose conceptual status." ], "enables_after": [ "Draw a bounded implication or request the pilot decision." ], "avoid_when": [ "Four unrelated pictures", "Evidence hidden behind unexported cards", "An assumed chronology without dates" ] } }, "narrative_profile": { "central_point": "One image-led line establishes a scene or crystallises a point.", "communication_job": "Connect a concise idea with a concrete visual setting.", "audience_value": "Perspective and orientation: gives the audience a memorable context for the next part, without using atmosphere as proof.", "reading_path": [ "Read the theme label for orientation.", "Read the headline against the scene.", "Carry the stated relation into the next explanation; the scene remains illustrative unless documented as evidence." ], "adaptation": { "required_inputs": [ "One short central line.", "A scene that makes that line understandable.", "Clear distinction between illustration and factual record." ], "slot_guidance": { "illustration": "The full-field visual context; preserve room for the text and label generated scenes.", "eyebrow": "The theme or chapter cue.", "headline": "A short proposition that relates meaningfully to the scene." }, "can_change": [ "Scene and thematic line.", "Supported card or sequential-story option when the task changes." ], "must_survive": [ "Text and image refer to the same idea.", "Image status is explicit.", "The next page earns any claim." ] }, "worked_example": { "fictional": true, "scenario": "Fictional repair cooperative proposal; all events, people and evidence are invented teaching material.", "slot_fills": { "illustration": "Labelled generated scene of a repair workshop with a prepared parts tray in the foreground.", "eyebrow": "Before the visit", "headline": "A dependable repair begins before the doorbell." }, "reasoning": "The scene makes preparation concrete while the line sets up the unseen work behind a visit.", "qualification": "Fictional teaching example only. Proposed benefits and results are not verified; replace with authorised material for a real use." }, "narrative_fit": { "before": "Explain why the visible appointment is only part of service reliability.", "after": "Show the readiness checks and who owns them.", "good_uses": [ "A visual chapter opening", "A concise editorial bridge", "An image-led proposition" ], "poor_fits": [ "A complex comparison", "A statistical finding", "A scene used to imply a real event without evidence" ] }, "evidence": { "observations": [ "Viewed source: one short statement over a prescribed full-bleed image with overlay; no detailed proof region.", "Current HTML and active slot contract were inspected." ], "interpretations": [ "The guidance interprets the layout’s communication affordances; it does not assert source-author intent." ], "not_verified": [ "Original author intent, surrounding source sequence, sample factual claims and persuasion effects are not independently verified." ], "references": [ "02_product/spreads/S24-full-bleed/source.webp", "dist/S24-full-bleed/spread.html", "dist/S24-full-bleed/spread.json", "https://github.com/neekchan/hoffman-agency-design-system/blob/main/templates/deck/Deck.dc.html" ] }, "review": { "status": "reviewed", "basis": "Viewed retained source capture and inspected current markup/slot contract; reviewed reasoning and example mapping. This is layout-contract review, not source-intent confirmation." }, "variation_relationship": "base" } }, "options": [ { "id": "low", "what": "Hero: headline low, buttons right, logo row along the bottom" }, { "id": "card", "what": "Text card: eyebrow, headline, paragraph and one button in a solid card floating right over the scene, no veil" }, { "id": "stack-reveal", "what": "Four full-image stories stacked in depth; front cards lift away with slight X tilt on native scroll. Static/narrow/reduced views show all stories in order.", "sources": [ { "ref": "useLayouts Stack Scroll Reveal", "url": "https://uselayouts.com/docs/components/stack-scroll-reveal" } ] } ], "also_seen_in": [], "source": { "ref": "Hoffman L27 Full-bleed", "url": "https://github.com/neekchan/hoffman-agency-design-system/blob/main/templates/deck/Deck.dc.html" } }