{ "code": "S61", "name": "Step illustration", "shape": "option-steps", "family": "Evidence and pictures", "fits": "A title bar, a staircase of rising blocks standing on one dark foundation bar on the left (about 60%), a price label above each step, and a card listing what every option includes on the right; a takeaway band.", "use_when": "Options that build on one shared foundation, where the reader should see that the steps are the only difference.", "slots": [ { "name": "title-bar", "holds": "plum bar across the top: the page title left, a lime italic section marker right", "budget": "title under 9 words; marker 1-2 words" }, { "name": "steps", "holds": "3 blocks on the foundation bar, heights to scale with the added amount: clay, lime (recommended, with chip), outlined; label and amount above each", "budget": "step text under 12 words" }, { "name": "foundation", "holds": "plum bar under the steps: what the base includes, amount right in lime", "budget": "under 10 words" }, { "name": "list", "holds": "card, lime top rule: what every option includes", "budget": "4-6 items, under 10 words each" }, { "name": "takeaway", "holds": "mint band across the foot: an italic Takeaway: label and one sentence", "budget": "one sentence, under 25 words" } ], "columns": 2, "density": "dense", "surface": "paper", "works_on": [ "deck", "page" ], "library": "Hoffman", "dir": "S61-step-illustration", "semantic": { "audience_question": "What does each higher scope add above the shared foundation?", "intent": "Distinguish common content from incremental capability and price.", "reasoning_relation": "shared base and incremental tiers", "message_pattern": "[Level] includes [shared base] plus [increment], for [approved cost].", "required_content": [ "One shared foundation.", "Three additive scopes with explicit incremental and total amounts.", "Four to six common inclusions." ], "narrative_positions": [ "commercials", "decision" ], "requires_before": [ "Establish the common method and reader’s reach requirement." ], "enables_after": [ "Inspect option details or select a scope." ], "slot_roles": { "title-bar": "Name the scope comparison.", "steps": "Three additive options with incremental amount, total and a short explanation; calibrate heights if they encode amount.", "foundation": "The common base and its amount.", "list": "Four to six provisions genuinely present in all options.", "takeaway": "Explain the choice in terms of added reach or capability, not visual height." }, "avoid_when": [ "Mutually exclusive approaches that do not share a foundation.", "Decorative heights presented as precise price differences." ], "layout_specific_contract": "A title bar, a staircase of rising blocks standing on one dark foundation bar on the left (about 60%), a price label above each step, and a card listing what every option includes on the right; a takeaway band.", "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": "Distinguish common content from incremental capability and price.", "matching": { "audience_question": "What does each higher scope add above the shared foundation?", "reader_outcome": "Distinguish common content from incremental capability and price.", "reasoning_relation": "shared base and incremental tiers", "content_shape": { "composition": "A title bar, a staircase of rising blocks standing on one dark foundation bar on the left (about 60%), a price label above each step, and a card listing what every option includes on the right; a takeaway band.", "selected_state": "A title bar, a staircase of rising blocks standing on one dark foundation bar on the left (about 60%), a price label above each step, and a card listing what every option includes on the right; a takeaway band.", "density": "dense", "columns": 2, "column_note": "Base metadata only; selected option can replace the base geometry." }, "required_slots": [ { "name": "title-bar", "reader_question": "What does the title bar contribute to this page’s reader outcome?", "semantic_role": "Name the scope comparison.", "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-bar · plum bar across the top: the page title left, a lime italic section marker right]", "layout_budget": { "authored": "title under 9 words; marker 1-2 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "title-bar", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 9 ] } }, { "name": "steps", "reader_question": "What does this distinct step, state, scenario or observation contribute?", "semantic_role": "Three additive options with incremental amount, total and a short explanation; calibrate heights if they encode amount.", "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": "[REAL CONTENT · steps · 3 blocks on the foundation bar, heights to scale with the added amount: clay, lime (recommended, with chip), outlined; label and amount above each]", "layout_budget": { "authored": "step text under 12 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "steps", "occurrences": 2, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 40, 47 ] } }, { "name": "foundation", "reader_question": "What does the foundation contribute to this page’s reader outcome?", "semantic_role": "The common base and its amount.", "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 · foundation · plum bar under the steps: what the base includes, amount right in lime]", "layout_budget": { "authored": "under 10 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "foundation", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 8 ] } }, { "name": "list", "reader_question": "What does the list contribute to this page’s reader outcome?", "semantic_role": "Four to six provisions genuinely present in all options.", "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 · list · card, lime top rule: what every option includes]", "layout_budget": { "authored": "4-6 items, under 10 words each", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "list", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 35 ] } }, { "name": "takeaway", "reader_question": "What does the takeaway contribute to this page’s reader outcome?", "semantic_role": "Explain the choice in terms of added reach or capability, not visual height.", "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 · takeaway · mint band across the foot: an italic Takeaway: label and one sentence]", "layout_budget": { "authored": "one sentence, under 25 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "takeaway", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 22 ] } } ], "rejection_constraints": [ "Step height passed off as a numeric scale, or tiers lacking explicit added value.", "Independent options falsely drawn as a ladder or rising steps that imply guaranteed results." ], "option_guidance": { "option": "default", "composition_delta": "A title bar, a staircase of rising blocks standing on one dark foundation bar on the left (about 60%), a price label above each step, and a card listing what every option includes on the right; a takeaway band.", "semantic_change": "retains base content relationship; changes presentation or disclosure", "matching_instruction": "Select S61 default when the supplied material answers “What does each higher scope add above the shared foundation?” through shared base and incremental tiers. Respect this state: A title bar, a staircase of rising blocks standing on one dark foundation bar on the left (about 60%), a price label above each step, and a card listing what every option includes on the right; a takeaway band." }, "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": 1, "source_visual_sha256": [ "57702cea43c972fc8ce764cc4b3804ff1cd1150116a4d8a420cb2d10812cda86" ], "source_export": "private source images remain outside this draft site", "markup_sha256": "69f021e4174847713cbc56492b2c19e340f3f5f113772fc6d52850fc074ae19d", "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": [ "Step height passed off as a numeric scale, or tiers lacking explicit added value.", "Independent options falsely drawn as a ladder or rising steps that imply guaranteed results." ], "markup_inventory": { "file": "spread.html", "sha256": "69f021e4174847713cbc56492b2c19e340f3f5f113772fc6d52850fc074ae19d", "method": "static lxml markup plus authored option description; no rendered-visibility claim", "all_markup_slot_counts": { "rising": 1, "steps": 2, "title-bar": 1, "foundation": 1, "list": 1, "takeaway": 1 }, "slot_evidence": { "rising": [ { "tag": "div", "classes": "rise", "sample_word_count": 73, "repeated_children": 2 } ], "steps": [ { "tag": "div", "classes": "rise-steps", "sample_word_count": 40, "repeated_children": 4 }, { "tag": "div", "classes": "steps", "sample_word_count": 47, "repeated_children": 3 } ], "title-bar": [ { "tag": "header", "classes": "rbar", "sample_word_count": 9, "repeated_children": 2 } ], "foundation": [ { "tag": "div", "classes": "base", "sample_word_count": 8, "repeated_children": 2 } ], "list": [ { "tag": "div", "classes": "card r-lime every", "sample_word_count": 35, "repeated_children": 6 } ], "takeaway": [ { "tag": "footer", "classes": "rband take", "sample_word_count": 22, "repeated_children": 2 } ] }, "option_selectors": [ "rising" ], "linked_implementation": [ { "file": "../spreads.css", "sha256": "32da94472b0c9131e4d5dae7d5bf0498b09202a9e66294b4e4f23e6ddfbf37ba" }, { "file": "../spread.js", "sha256": "3d99948b83f750bd4ae95dac08e3e50a395de7c149c90a6f1a1c0ea36a2634a4" } ] }, "variations": { "rising": { "audience_question": "What instruction belongs to each of these four increasing steps?", "intent": "Read an ordered four-step progression without inferring prices.", "reader_outcome": "Read an ordered four-step progression without inferring prices.", "reasoning_relation": "ordered progression", "slot_roles": { "steps": "Four numbered stages, each naming an action and what it makes possible next." }, "matching": { "audience_question": "What instruction belongs to each of these four increasing steps?", "reader_outcome": "Read an ordered four-step progression without inferring prices.", "reasoning_relation": "ordered progression", "content_shape": { "composition": "A title bar, a staircase of rising blocks standing on one dark foundation bar on the left (about 60%), a price label above each step, and a card listing what every option includes on the right; a takeaway band.", "selected_state": "Staircase only: four numbered blocks rising left to right with the text in each step; no title bar, side card or takeaway band", "density": "dense", "columns": 2, "column_note": "Base metadata only; selected option can replace the base geometry." }, "required_slots": [ { "name": "steps", "reader_question": "What does this distinct step, state, scenario or observation contribute?", "semantic_role": "Four numbered stages, each naming an action and what it makes possible next.", "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 · steps · 3 blocks on the foundation bar, heights to scale with the added amount: clay, lime (recommended, with chip), outlined; label and amount above each]", "layout_budget": { "authored": "step text under 12 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "steps", "occurrences": 2, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 40, 47 ] } } ], "rejection_constraints": [ "Increasing block height represented as a measured amount without a scale.", "Independent options falsely drawn as a ladder or rising steps that imply guaranteed results." ], "option_guidance": { "option": "rising", "composition_delta": "Staircase only: four numbered blocks rising left to right with the text in each step; no title bar, side card or takeaway band", "semantic_change": "changes content relationship", "matching_instruction": "Select S61 rising when the supplied material answers “What instruction belongs to each of these four increasing steps?” through ordered progression. Respect this state: Staircase only: four numbered blocks rising left to right with the text in each step; no title bar, side card or takeaway band" }, "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": 1, "source_visual_sha256": [ "57702cea43c972fc8ce764cc4b3804ff1cd1150116a4d8a420cb2d10812cda86" ], "source_export": "private source images remain outside this draft site", "markup_sha256": "69f021e4174847713cbc56492b2c19e340f3f5f113772fc6d52850fc074ae19d", "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 capability develops through an explicit sequence of four stages.", "communication_job": "Explain four ordered stages in which later work depends on earlier learning.", "audience_value": "Explanation: shows how each stage creates the conditions for the next, without claiming that completion guarantees capability.", "reading_path": [ "Four numbered blocks rise from left to right; the common-price foundation and side card are absent.", "Read the scope question.", "Read the foundation first, then compare the three additions above it.", "Check the common-inclusions card and takeaway so a smaller option is not mistaken for missing the basics." ], "adaptation": { "required_inputs": [ "Four genuinely ordered stages and their dependencies." ], "slot_guidance": { "steps": "Four numbered stages, each naming an action and what it makes possible next." }, "can_change": [ "Subject, names and wording within the active slot roles.", "Illustrations or supporting values where present, with their provenance and limits." ], "must_survive": [ "Order reflects a real dependency.", "The staircase is not a calibrated quantitative chart.", "The visible heading explains what the stages collectively build." ] }, "worked_example": { "fictional": true, "scenario": "A fictional two-branch repair study explains additive scope costs.", "slot_fills": { "steps": [ "1 · Learn: document how visitors currently book.", "2 · Test: trial clearer instructions at one branch.", "3 · Compare: check the same questions at the second branch.", "4 · Adopt: retain changes only after reviewing both trials." ] }, "reasoning": "Learning informs the trial, the trial supplies a comparison, and comparison determines adoption; the steps are not a price ladder.", "qualification": "Fictional proposed process; success is conditional on the evaluation, not guaranteed by completing stages." }, "narrative_fit": { "before": "State the capability or outcome to be developed.", "after": "Assign stage owners, evidence gates and timing.", "good_uses": [ "A four-stage learning or capability process." ], "poor_fits": [ "Four independent workstreams.", "Quantitative improvement inferred from block height." ] }, "evidence": { "observations": [ "Retained source contains a shared foundation, three rising scope blocks and a common-inclusion card.", "Current default preserves those regions; rising is a separate four-stage branch." ], "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/S61-step-illustration/spread.json", "dist/S61-step-illustration/spread.html", "02_product/spreads/S61-step-illustration/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": "different-job" }, "required_content": [ "Four genuinely ordered stages and their dependencies." ], "requires_before": [ "State the capability or outcome to be developed." ], "enables_after": [ "Assign stage owners, evidence gates and timing." ], "avoid_when": [ "Four independent workstreams.", "Quantitative improvement inferred from block height." ] } }, "narrative_profile": { "central_point": "Higher scopes add to one common foundation; the buyer should see what the increment buys.", "communication_job": "Answer what changes as the scope grows and what stays included in every option.", "audience_value": "Explanation and decision support: separates fixed provision from incremental work, reducing uncertainty about apparent price jumps.", "reading_path": [ "Read the scope question.", "Read the foundation first, then compare the three additions above it.", "Check the common-inclusions card and takeaway so a smaller option is not mistaken for missing the basics." ], "adaptation": { "required_inputs": [ "One shared foundation.", "Three additive scopes with explicit incremental and total amounts.", "Four to six common inclusions." ], "slot_guidance": { "title-bar": "Name the scope comparison.", "steps": "Three additive options with incremental amount, total and a short explanation; calibrate heights if they encode amount.", "foundation": "The common base and its amount.", "list": "Four to six provisions genuinely present in all options.", "takeaway": "Explain the choice in terms of added reach or capability, not visual height." }, "can_change": [ "Subject, names and wording within the active slot roles.", "Illustrations or supporting values where present, with their provenance and limits." ], "must_survive": [ "Base plus increment equals total.", "Shared inclusions truly remain shared.", "A higher step does not mean better fit for every reader." ] }, "worked_example": { "fictional": true, "scenario": "A fictional two-branch repair study explains additive scope costs.", "slot_fills": { "title-bar": "Every scope keeps the same safeguards | Scope", "steps": [ "A · One branch: +1,000 = 2,000 credits.", "B · Two branches: +2,000 = 3,000 credits.", "C · Add language access: +3,000 = 4,000 credits." ], "foundation": "Shared protocol and report · 1,000 credits", "list": "Consent procedure; Safety protocol; Common analysis method; Written findings; Decision workshop", "takeaway": "Choose added reach for the question you need answered; every option retains the same core safeguards." }, "reasoning": "The example distinguishes base cost from add-on cost and total cost. Height must follow the stated amount or be labeled schematic.", "qualification": "Every organization, value and assertion in this example is fictional. Replace it with approved, sourced content before use." }, "narrative_fit": { "before": "Establish the common method and reader’s reach requirement.", "after": "Inspect option details or select a scope.", "good_uses": [ "Additive service or research scopes." ], "poor_fits": [ "Mutually exclusive approaches that do not share a foundation.", "Decorative heights presented as precise price differences." ] }, "evidence": { "observations": [ "Retained source contains a shared foundation, three rising scope blocks and a common-inclusion card.", "Current default preserves those regions; rising is a separate four-stage branch." ], "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/S61-step-illustration/spread.json", "dist/S61-step-illustration/spread.html", "02_product/spreads/S61-step-illustration/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": "rising", "what": "Staircase only: four numbered blocks rising left to right with the text in each step; no title bar, side card or takeaway band" } ], "also_seen_in": [], "source": { "ref": "Hoffman L57 Step illustration", "url": "https://github.com/neekchan/hoffman-agency-design-system/blob/main/templates/deck/Deck.dc.html" } }