{ "code": "S67", "name": "Prompt hero", "shape": "hero", "family": "Openers and endings", "fits": "A two-part opener: serif headline, blurb and one button on the left; on the right a column of suggested questions fading out at top and bottom, with a pill-shaped ask box floating across its middle, over a soft gradient field.", "use_when": "Opening a page that invites the reader to ask or search, where sample questions show the range of what they can ask. With the signup option, the standard newsletter hero for the publication.", "slots": [ { "name": "headline", "holds": "the promise, left", "budget": "under 9 words" }, { "name": "blurb", "holds": "one plain sentence", "budget": "under 20 words" }, { "name": "button", "holds": "one call to action with a chevron", "budget": "2-3 words" }, { "name": "suggestions", "holds": "sample questions, one line each, faded top and bottom", "budget": "10-12 lines, under 8 words each" }, { "name": "prompt", "holds": "pill-shaped ask box over the middle of the list: add icon, placeholder, mic and voice button", "budget": "1-3 words" }, { "name": "signup", "holds": "option signup only: card with label, one line, email field, subscribe button and one line of reassurance", "budget": "label 2-4 words; line under 15 words; reassurance under 10 words" } ], "columns": 2, "density": "airy", "surface": "paper", "works_on": [ "deck", "page" ], "library": "Tailark", "dir": "S67-prompt-hero", "semantic": { "audience_question": "What kinds of questions can I bring to this experience?", "intent": "Understand an offer through representative prompts and a clear starting action.", "reasoning_relation": "promise and question-led entry", "message_pattern": "Ask about [defined subject]. For example, [representative questions].", "required_content": [ "A bounded subject and audience.", "Twelve representative questions grounded in actual coverage.", "A real destination and explicit distinction between mock-up and working interaction." ], "narrative_positions": [ "context", "explanation", "evidence: choose only when the page supports the surrounding argument" ], "requires_before": [ "On a landing page, establish the audience and scope in the hero itself; in a pitch, first explain the unmet information need." ], "enables_after": [ "Show one actual answer or guide and explain its evidence and limits." ], "slot_roles": { "headline": "Name the subject and promised help without claiming unlimited capability.", "blurb": "Specify the coverage boundary and what the reader will get.", "button": "Name the available first step; wire its destination in the destination project.", "suggestions": "Twelve short parallel questions across the promised scope, not twelve benefits.", "prompt": "A short illustrative invitation matching those questions; this template is a static visual, not an input." }, "avoid_when": [ "Results or proof of answer quality.", "An unrestricted Ask anything promise for a narrowly documented service." ], "layout_specific_contract": "A two-part opener: serif headline, blurb and one button on the left; on the right a column of suggested questions fading out at top and bottom, with a pill-shaped ask box floating across its middle, over a soft gradient field.", "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" }, "variations": { "signup": { "audience_question": "What newsletter or update am I joining, and what will I receive?", "intent": "Understand a topic-led email invitation and its handling promise.", "reasoning_relation": "topic promise and email invitation", "message_pattern": "Receive [specific benefit] by [actual subscription action].", "required_content": [ "A genuine publication offer, delivery cadence and handling policy.", "A implemented subscription flow in the destination project, or a clear concept label." ], "narrative_positions": [ "call to action" ], "reader_outcome": "Understand a topic-led email invitation and its handling promise.", "slot_roles": { "headline": "The recurring editorial benefit to the intended reader.", "blurb": "Which questions the publication covers and why they matter to that reader.", "button": "The alternative reading action, distinct from subscribing.", "signup": "Publication name, specific delivery benefit, email field, submit action and accurate reassurance in that order." }, "matching": { "audience_question": "What newsletter or update am I joining, and what will I receive?", "reader_outcome": "Understand a topic-led email invitation and its handling promise.", "reasoning_relation": "topic promise and email invitation", "content_shape": { "composition": "A two-part opener: serif headline, blurb and one button on the left; on the right a column of suggested questions fading out at top and bottom, with a pill-shaped ask box floating across its middle, over a soft gradient field.", "selected_state": "Email signup card in place of the ask box (newsletter hero)", "density": "airy", "columns": 2, "column_note": "Base metadata only; selected option can replace the base geometry." }, "required_slots": [ { "name": "headline", "reader_question": "What newsletter or update am I joining, and what will I receive?", "semantic_role": "The recurring editorial benefit to the intended reader.", "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 · the promise, left]", "layout_budget": { "authored": "under 9 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": "blurb", "reader_question": "What does the blurb contribute to this page’s reader outcome?", "semantic_role": "Which questions the publication covers and why they matter to that reader.", "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 · blurb · one plain sentence]", "layout_budget": { "authored": "under 20 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "blurb", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 16 ] } }, { "name": "button", "reader_question": "What action is actually available, and what does taking it change?", "semantic_role": "The alternative reading action, distinct from subscribing.", "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 · button · one call to action with a chevron]", "layout_budget": { "authored": "2-3 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "button", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 2 ] } }, { "name": "signup", "reader_question": "What action is actually available, and what does taking it change?", "semantic_role": "Publication name, specific delivery benefit, email field, submit action and accurate reassurance in that order.", "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 · signup · option signup only: card with label, one line, email field, subscribe button and one line of reassurance]", "layout_budget": { "authored": "label 2-4 words; line under 15 words; reassurance under 10 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "signup", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 24 ] } } ], "rejection_constraints": [ "A reassurance unsupported by the actual subscription implementation.", "Unsupported benefit claims or a decorative hero whose action has no destination." ], "option_guidance": { "option": "signup", "composition_delta": "Email signup card in place of the ask box (newsletter hero)", "semantic_change": "changes content relationship", "matching_instruction": "Select S67 signup when the supplied material answers “What newsletter or update am I joining, and what will I receive?” through topic promise and email invitation. Respect this state: Email signup card in place of the ask box (newsletter hero)" }, "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": [ "52cb55313687dfef913c57a72ef0e9f5e0448d45a840425a52ce1b9e4e8a60c9" ], "source_export": "private source images remain outside this draft site", "markup_sha256": "42d1ed10fc45ba88ddf4c624a55295f42ef289d63d9432e870a146f265ddbaf3", "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 defined recurring publication is worth opting into when the reader understands its topic and delivery expectations.", "communication_job": "Invite an informed subscription, rather than demonstrate possible questions.", "audience_value": "Clarifies what arrives, how often, and what commitment is involved. Reassurance must describe actual handling; the card itself does not establish trust or consent.", "reading_path": [ "Read the editorial promise on the left.", "Read the subscription name and delivery benefit on the right.", "Check email handling and frequency before taking the subscription action." ], "adaptation": { "required_inputs": [ "A genuine publication offer, delivery cadence and handling policy.", "A implemented subscription flow in the destination project, or a clear concept label." ], "slot_guidance": { "headline": "The recurring editorial benefit to the intended reader.", "blurb": "Which questions the publication covers and why they matter to that reader.", "button": "The alternative reading action, distinct from subscribing.", "signup": "Publication name, specific delivery benefit, email field, submit action and accurate reassurance in that order." }, "can_change": [ "Topic, publication name, delivery cadence and honest benefit." ], "must_survive": [ "Subscribing and browsing remain distinct choices.", "Frequency, price and unsubscribe language match the real service.", "Replace illustrative spans/links with a genuine accessible form before claiming data submission." ] }, "worked_example": { "fictional": true, "scenario": "The same fictional repair organisation proposes a monthly note for volunteer coordinators.", "slot_fills": { "headline": "Help your repair volunteers prepare each month.", "blurb": "A monthly note covers workshop planning, tool checks and questions to bring to a qualified mechanic.", "button": "Read sample", "signup": "Workshop notes\n\nMonthly planning prompts for volunteer coordinators.\n\nEmail address\n\nJoin the list\n\nMonthly. Free. Unsubscribe in every email." }, "reasoning": "The signup card supplies the offer and commitment details that an ask-box cannot. The adjacent sample lets the reader assess the content before opting in.", "qualification": "Fictional offer and policy; must be validated and implemented before use. The supplied signup card does not send email or store addresses." }, "narrative_fit": { "before": "Establish a recurring information need or offer an example issue.", "after": "Provide a truthful confirmation and explain the next expected delivery.", "good_uses": [ "Newsletter invitation after a relevant article.", "Concept pitch for a recurring briefing with explicitly proposed terms." ], "poor_fits": [ "Search or question answering.", "Claiming a successful subscription from this static preview." ] }, "evidence": { "not_verified": [ "The source author's intended persuasion and user outcomes are not independently established.", "No proposal-archive corpus or user testing was used." ], "references": [ "02_product/spreads/S67-prompt-hero/source.webp", "S67-prompt-hero/spread.html", "S67-prompt-hero/spread.json", "https://oss.tailark.com/view/veil-hero-section-3?theme=light" ], "observations": [ "The opt-signup CSS hides the prompt illustration and shows a signup card.", "The card uses an email-looking span and Subscribe anchor with href=#, not a working form.", "The retained source capture documents the default ask hero, not the signup option." ], "interpretations": [ "This option changes the communication job from question-led exploration to informed subscription." ] }, "review": { "status": "reviewed", "basis": "Loom inspected selected option markup and slot contract; source signup intent remains unverified." }, "variation_relationship": "different-job" }, "requires_before": [ "Establish a recurring information need or offer an example issue." ], "enables_after": [ "Provide a truthful confirmation and explain the next expected delivery." ], "avoid_when": [ "Search or question answering.", "Claiming a successful subscription from this static preview." ] } }, "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": "Understand an offer through representative prompts and a clear starting action.", "matching": { "audience_question": "What kinds of questions can I bring to this experience?", "reader_outcome": "Understand an offer through representative prompts and a clear starting action.", "reasoning_relation": "promise and question-led entry", "content_shape": { "composition": "A two-part opener: serif headline, blurb and one button on the left; on the right a column of suggested questions fading out at top and bottom, with a pill-shaped ask box floating across its middle, over a soft gradient field.", "selected_state": "A two-part opener: serif headline, blurb and one button on the left; on the right a column of suggested questions fading out at top and bottom, with a pill-shaped ask box floating across its middle, over a soft gradient field.", "density": "airy", "columns": 2, "column_note": "Base metadata only; selected option can replace the base geometry." }, "required_slots": [ { "name": "headline", "reader_question": "What kinds of questions can I bring to this experience?", "semantic_role": "Name the subject and promised help without claiming unlimited capability.", "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 · the promise, left]", "layout_budget": { "authored": "under 9 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": "blurb", "reader_question": "What does the blurb contribute to this page’s reader outcome?", "semantic_role": "Specify the coverage boundary and what the reader will get.", "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 · blurb · one plain sentence]", "layout_budget": { "authored": "under 20 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "blurb", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 16 ] } }, { "name": "button", "reader_question": "What action is actually available, and what does taking it change?", "semantic_role": "Name the available first step; wire its destination in the destination 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 · button · one call to action with a chevron]", "layout_budget": { "authored": "2-3 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "button", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 2 ] } }, { "name": "suggestions", "reader_question": "What does the suggestions contribute to this page’s reader outcome?", "semantic_role": "Twelve short parallel questions across the promised scope, not twelve benefits.", "content_unit_count": { "min": 10, "max": 12, "basis": "authored composition members where a repeated group is specified; otherwise one named slot; not a required amount of evidence" }, "placeholder": "[REAL CONTENT · suggestions · sample questions, one line each, faded top and bottom]", "layout_budget": { "authored": "10-12 lines, under 8 words each", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "suggestions", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 87 ] } }, { "name": "prompt", "reader_question": "What action is actually available, and what does taking it change?", "semantic_role": "A short illustrative invitation matching those questions; this template is a static visual, not an input.", "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 · prompt · pill-shaped ask box over the middle of the list: add icon, placeholder, mic and voice button]", "layout_budget": { "authored": "1-3 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "prompt", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 2 ] } } ], "rejection_constraints": [ "Suggested questions implying verified answers or an unwired ask box implying working search.", "Unsupported benefit claims or a decorative hero whose action has no destination." ], "option_guidance": { "option": "default", "composition_delta": "A two-part opener: serif headline, blurb and one button on the left; on the right a column of suggested questions fading out at top and bottom, with a pill-shaped ask box floating across its middle, over a soft gradient field.", "semantic_change": "retains base content relationship; changes presentation or disclosure", "matching_instruction": "Select S67 default when the supplied material answers “What kinds of questions can I bring to this experience?” through promise and question-led entry. Respect this state: A two-part opener: serif headline, blurb and one button on the left; on the right a column of suggested questions fading out at top and bottom, with a pill-shaped ask box floating across its middle, over a soft gradient field." }, "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": [ "52cb55313687dfef913c57a72ef0e9f5e0448d45a840425a52ce1b9e4e8a60c9" ], "source_export": "private source images remain outside this draft site", "markup_sha256": "42d1ed10fc45ba88ddf4c624a55295f42ef289d63d9432e870a146f265ddbaf3", "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": [ "Suggested questions implying verified answers or an unwired ask box implying working search.", "Unsupported benefit claims or a decorative hero whose action has no destination." ], "markup_inventory": { "file": "spread.html", "sha256": "42d1ed10fc45ba88ddf4c624a55295f42ef289d63d9432e870a146f265ddbaf3", "method": "static lxml markup plus authored option description; no rendered-visibility claim", "all_markup_slot_counts": { "headline": 1, "blurb": 1, "button": 1, "suggestions": 1, "prompt": 1, "signup": 1 }, "slot_evidence": { "headline": [ { "tag": "h1", "classes": "title", "sample_word_count": 7, "repeated_children": 0 } ], "blurb": [ { "tag": "p", "classes": "sub", "sample_word_count": 16, "repeated_children": 0 } ], "button": [ { "tag": "div", "classes": "btns", "sample_word_count": 2, "repeated_children": 1 } ], "suggestions": [ { "tag": "ul", "classes": "sugs", "sample_word_count": 87, "repeated_children": 12 } ], "prompt": [ { "tag": "div", "classes": "ask", "sample_word_count": 2, "repeated_children": 2 } ], "signup": [ { "tag": "div", "classes": "signup", "sample_word_count": 24, "repeated_children": 4 } ] }, "option_selectors": [ "signup" ], "linked_implementation": [ { "file": "../spreads.css", "sha256": "32da94472b0c9131e4d5dae7d5bf0498b09202a9e66294b4e4f23e6ddfbf37ba" }, { "file": "../spread.js", "sha256": "3d99948b83f750bd4ae95dac08e3e50a395de7c149c90a6f1a1c0ea36a2634a4" } ] }, "narrative_profile": { "central_point": "This experience has a defined subject; representative questions show the kinds of help available.", "communication_job": "Help a new visitor recognise a relevant question and understand where to begin.", "audience_value": "Orientation reduces uncertainty about scope and the next action. The examples demonstrate breadth of intended coverage; they are not evidence that the service can answer accurately.", "reading_path": [ "Read the promise and boundary on the left first.", "Scan the questions on the right to recognise concrete tasks within that boundary. They are parallel examples, not ranked questions or a process.", "The central ask illustration connects those examples to the idea of a starting interaction; the left button must lead to the actual available destination." ], "adaptation": { "required_inputs": [ "A bounded subject and audience.", "Twelve representative questions grounded in actual coverage.", "A real destination and explicit distinction between mock-up and working interaction." ], "slot_guidance": { "headline": "Name the subject and promised help without claiming unlimited capability.", "blurb": "Specify the coverage boundary and what the reader will get.", "button": "Name the available first step; wire its destination in the destination project.", "suggestions": "Twelve short parallel questions across the promised scope, not twelve benefits.", "prompt": "A short illustrative invitation matching those questions; this template is a static visual, not an input." }, "can_change": [ "Subject, language, question examples and action label.", "Brand tokens while retaining the left promise/right example relationship." ], "must_survive": [ "Questions belong to one honest scope.", "Examples do not imply facts or working backend functionality.", "Essential instructions remain in accessible prose; the current prompt illustration is aria-hidden." ] }, "worked_example": { "fictional": true, "scenario": "A fictional community repair guide helps first-time volunteers diagnose bicycle problems. Its launch includes written guides, not a question-answering engine.", "slot_fills": { "headline": "Understand the bicycle repairs you can tackle.", "blurb": "Short guides help new volunteers inspect common faults and recognise when a mechanic is needed.", "button": "Browse guides", "suggestions": [ "Why does the chain slip?", "How do I check tyre wear?", "What causes squeaking brakes?", "When should a wheel be replaced?", "How tight should a chain be?", "Which tools suit this repair?", "Can I patch this inner tube?", "Why is the handlebar wobbling?", "How do I clean the gears?", "When should I stop riding?", "Which checks come before a repair?", "When do I need a mechanic?" ], "prompt": "Choose a question" }, "reasoning": "The questions translate a broad repair-guide promise into recognisable tasks. Browse guides leads to the documented material; the mock-up never implies an answer engine.", "qualification": "Illustrative fictional copy only. Real safety guidance would require expert review; no repair advice or working interaction is supplied here." }, "narrative_fit": { "before": "On a landing page, establish the audience and scope in the hero itself; in a pitch, first explain the unmet information need.", "after": "Show one actual answer or guide and explain its evidence and limits.", "good_uses": [ "A question-led knowledge service introduction.", "A pitch explaining an intended experience, explicitly labelled concept." ], "poor_fits": [ "Results or proof of answer quality.", "An unrestricted Ask anything promise for a narrowly documented service." ] }, "evidence": { "not_verified": [ "The source author's intended persuasion and user outcomes are not independently established.", "No proposal-archive corpus or user testing was used." ], "references": [ "02_product/spreads/S67-prompt-hero/source.webp", "S67-prompt-hero/spread.html", "S67-prompt-hero/spread.json", "https://oss.tailark.com/view/veil-hero-section-3?theme=light" ], "observations": [ "The retained Tailark screenshot places a promise/action left, sample requests right and a pill over their middle; surrounding samples fade at the edges.", "Current HTML has twelve list items, a decorative aria-hidden prompt and a Start reading link pointing to #. It does not implement search.", "The local repair removes opaque lead/list backplates introduced by contrast CSS. The complete readable in-flow question list remains." ], "interpretations": [ "The composition can orient by examples of user intent. This is a layout-based reuse interpretation, not a verified statement of source author intent." ] }, "review": { "status": "reviewed", "basis": "Loom inspected source capture, actual HTML/CSS, live defect and local rendering; semantic adaptation reviewed as a layout interpretation." }, "variation_relationship": "base" } }, "options": [ { "id": "signup", "what": "Email signup card in place of the ask box (newsletter hero)" } ], "also_seen_in": [], "source": { "ref": "Tailark veil hero 3", "url": "https://oss.tailark.com/view/veil-hero-section-3?theme=light" } }