| 1 | # Vertical 9:16 Layout Catalog |
| 2 | |
| 3 | This catalog describes 900x1600 vertical story structures. It is structural only: style controls color, type mood, decoration, shadows, and texture. |
| 4 | |
| 5 | ## Zone Skeletons |
| 6 | |
| 7 | ### `top-middle-bottom` |
| 8 | |
| 9 | - **Use for**: most explainers, summaries, and data takeaways. |
| 10 | - **Zone sketch**: top hook/title, middle value/proof, bottom takeaway/support. |
| 11 | - **Balance rule**: the middle must carry the page; top and bottom should frame it. |
| 12 | - **Failure sign**: title and small cards sit near the top while the middle/lower screen is passive background. |
| 13 | |
| 14 | ### `hero-center` |
| 15 | |
| 16 | - **Use for**: quote, big claim, hero metric, or single insight. |
| 17 | - **Zone sketch**: compact context at top, large hero object around visual center, small proof/takeaway below. |
| 18 | - **Balance rule**: low density is valid when the hero is large and memorable. |
| 19 | - **Failure sign**: support elements compete with the hero. |
| 20 | |
| 21 | ### `lane-stack` |
| 22 | |
| 23 | - **Use for**: steps, roadmap, ranked list, or phased explanation. |
| 24 | - **Zone sketch**: hook/title, vertical lanes or rows through the middle, short summary at bottom. |
| 25 | - **Balance rule**: rows must have consistent rhythm and readable spacing. |
| 26 | - **Failure sign**: the sequence becomes many uneven paragraph cards. |
| 27 | |
| 28 | ## Patterns |
| 29 | |
| 30 | ### `hook-value-takeaway` |
| 31 | |
| 32 | - **Input shape**: one claim plus 2-4 support facts. |
| 33 | - **Structure recipe**: top hook/title, middle proof/value zone, bottom takeaway band. |
| 34 | - **Budget rule**: hook 15-25%, middle 45-60%, bottom 15-25%. |
| 35 | - **Failure signs**: no bottom memory point; middle is too small to support the hook. |
| 36 | |
| 37 | ### `vertical-step-story` |
| 38 | |
| 39 | - **Input shape**: 3-5 ordered steps, phases, or methods. |
| 40 | - **Structure recipe**: numbered vertical sequence, timeline lane, or staircase; each step has a short label and 1-2 lines. |
| 41 | - **Budget rule**: distribute steps through the middle height instead of clustering them. |
| 42 | - **Failure signs**: step text becomes paragraphs; connectors overlap text; more than six steps crowd the screen. |
| 43 | |
| 44 | ### `stacked-comparison` |
| 45 | |
| 46 | - **Input shape**: before/after, problem/solution, old/new, option A/B. |
| 47 | - **Structure recipe**: two stacked zones or aligned comparison rows with matching fields. |
| 48 | - **Budget rule**: each side gets comparable height and field count. |
| 49 | - **Failure signs**: one side has far more fields; contrast is not visible until reading every sentence. |
| 50 | |
| 51 | ### `data-takeaway` |
| 52 | |
| 53 | - **Input shape**: one chart, trend, rank list, or hero metric with interpretation. |
| 54 | - **Structure recipe**: hook/title, one dominant data object, visible interpretation sentence, optional 1-2 support chips. |
| 55 | - **Budget rule**: reserve chart/list height first; interpretation stays near the data. |
| 56 | - **Failure signs**: chart is a tiny appendix; chart has many labels with no readable interpretation. |
| 57 | |
| 58 | ### `ranked-list` |
| 59 | |
| 60 | - **Input shape**: 4-7 priorities, findings, recommendations, or ordered items. |
| 61 | - **Structure recipe**: full-width rows with number, label, and concise detail. |
| 62 | - **Budget rule**: rows share stable heights and fill the middle zone with rhythm. |
| 63 | - **Failure signs**: rows become separate floating cards; details wrap into long paragraphs. |
| 64 | |
| 65 | ### `hero-claim` |
| 66 | |
| 67 | - **Input shape**: one quote, thesis, lesson, or bold conclusion. |
| 68 | - **Structure recipe**: large claim around visual center, optional context above/below, 1-2 proof chips. |
| 69 | - **Budget rule**: claim owns the page; support stays subordinate. |
| 70 | - **Failure signs**: many equal cards dilute the claim; hero text is too small. |
| 71 |