| 1 | --- |
| 2 | layout_id: story_vertical |
| 3 | kind: layout |
| 4 | category: scenario |
| 5 | summary: A structure-only 9:16 system with 9 authored PowerPoint Layouts whose text geometry respects the top and bottom story safe zones. |
| 6 | keywords: [story, vertical, social, 9-16, safe-zone] |
| 7 | canvas_format: story |
| 8 | canvas_width: 1080 |
| 9 | canvas_height: 1920 |
| 10 | canvas_viewbox: "0 0 1080 1920" |
| 11 | replication_mode: standard |
| 12 | native_structure_mode: structured |
| 13 | page_count: 9 |
| 14 | page_types: |
| 15 | - cover |
| 16 | - statement |
| 17 | - title_content |
| 18 | - numbered_list |
| 19 | - image_full |
| 20 | - image_top_text |
| 21 | - two_block |
| 22 | - step_flow |
| 23 | - ending |
| 24 | placeholders: |
| 25 | 01_cover: ["{{TITLE}}", "{{SUBTITLE}}", "{{BRAND_LINE}}"] |
| 26 | 02_statement: ["{{KEY_MESSAGE}}", "{{SUPPORT_TEXT}}"] |
| 27 | 03_title_content: ["{{PAGE_TITLE}}", "{{CONTENT_AREA}}", "{{FOOTER_NOTE}}"] |
| 28 | 04_numbered_list: ["{{PAGE_TITLE}}", "{{ITEM_1}}", "{{ITEM_2}}", "{{ITEM_3}}", "{{FOOTER_NOTE}}"] |
| 29 | 05_image_full: ["{{PAGE_TITLE}}", "{{CAPTION}}"] |
| 30 | 06_image_top_text: ["{{PAGE_TITLE}}", "{{CONTENT_AREA}}", "{{FOOTER_NOTE}}"] |
| 31 | 07_two_block: ["{{PAGE_TITLE}}", "{{BLOCK_1}}", "{{BLOCK_2}}", "{{FOOTER_NOTE}}"] |
| 32 | 08_step_flow: ["{{PAGE_TITLE}}", "{{STEP_1}}", "{{STEP_2}}", "{{STEP_3}}", "{{FOOTER_NOTE}}"] |
| 33 | 09_ending: ["{{CLOSING_MESSAGE}}", "{{CTA_TEXT}}", "{{BRAND_LINE}}"] |
| 34 | --- |
| 35 | |
| 36 | # Story Vertical — Design Specification |
| 37 | |
| 38 | ## IV. Signature Design Elements |
| 39 | |
| 40 | Story Vertical provides a structural vocabulary for 9:16 canvases viewed |
| 41 | full-screen on a phone, where surrounding interface chrome overlays the top and |
| 42 | bottom of the frame. The neutral prototype paint exists only to expose hierarchy |
| 43 | and slot geometry; it is not an identity segment, and no platform palette, mark, |
| 44 | or typeface is claimed. Color, typography, logo, voice, and icon treatment |
| 45 | remain downstream decisions. |
| 46 | |
| 47 | | Element | Template-specific behavior | |
| 48 | |---|---| |
| 49 | | Safe zones govern text, not pictures | Every text slot stays inside y 120–1740. Picture geometry deliberately does not: `image_full` runs its typed `picture` slot from `0 0` to y 1440 so a full-bleed image sits under the interface chrome rather than being inset into a visible letterbox. This asymmetry is the defining rule of the canvas and must survive any reskin. | |
| 50 | | Band structure | Titled pages use a title band at `80 200 920 180`, a content field from y 440 to y 1620, and a `80 1660 920 56` footer note. `cover` and `ending` replace the footer with a full-bleed band from y 1560 to y 1740, which ends exactly where the bottom safe zone begins. | |
| 51 | | Narrow single column | The content field is 920 px wide — 15% narrower than a 3:4 canvas of the same family — so no page splits it into columns and body copy runs at 32 px. Multi-part pages stack: rows in `numbered_list`, blocks in `two_block`. | |
| 52 | | Row and block rhythm | List rows are 360 px with a 50 px gap; blocks are 560 px with a 60 px gap. Both sit at the upper end of the portrait card range because a 9:16 field has vertical room to spend and few units per page. | |
| 53 | | Fixed list markers | `numbered_list` owns its 1–3 markers as Layout atoms: the circle and its digit are static structure, so only the item copy stays Slide-local. | |
| 54 | | Vertical flow | `step_flow` runs its axis and nodes down the left gutter at x 168. Progression reads downward, matching how the canvas is consumed. | |
| 55 | | Focal pages | `statement` and `ending` center one dominant text block with a wide empty field above and below. Centered alignment is confined to those focal roles plus the closing brand line; list, block, step, and body slots begin at the upper-left. | |
| 56 | | Type scale | Prototype sizes step from cover title 76 through focal 64, page title 56, body 32, and note 24 — one step below the same roles on a 3:4 canvas because the column is narrower. They are provisional preview values, not a locked project type scale. | |
| 57 | |
| 58 | ## V. Page Roster |
| 59 | |
| 60 | | SVG | Layout key | PowerPoint picker name | Purpose | |
| 61 | |---|---|---|---| |
| 62 | | `01_cover.svg` | `cover` | Cover | Accent-anchored title and subtitle over a full-bleed brand band | |
| 63 | | `02_statement.svg` | `statement` | Statement | Centered dominant claim with a short supporting line | |
| 64 | | `03_title_content.svg` | `title_content` | Title and Content | Page title over one single-column content field | |
| 65 | | `04_numbered_list.svg` | `numbered_list` | Numbered List | Three stacked rows with fixed Layout-owned numeric markers | |
| 66 | | `05_image_full.svg` | `image_full` | Full-Bleed Image | Edge-to-edge picture slot crossing the top safe zone, over a caption band | |
| 67 | | `06_image_top_text.svg` | `image_top_text` | Image over Text | Typed picture slot above a text band | |
| 68 | | `07_two_block.svg` | `two_block` | Two Block | Two stacked blocks of equal height | |
| 69 | | `08_step_flow.svg` | `step_flow` | Vertical Step Flow | Three ordered steps on a vertical gutter axis | |
| 70 | | `09_ending.svg` | `ending` | Ending | Centered closing message and action line over a full-bleed brand band | |
| 71 |