# Outlex Compositions v3.1: Product-Presentation Patterns Version **v3.1**, dated **14 September 2026**. This file holds composition recipes, how pieces are arranged on a page, as distinct from `GRAMMAR-v3.md` (component CSS) and `tokens/PRINCIPLES-v3.md` (the judgment rules behind these recipes). Fetch this file whenever you are laying out a page section, not just styling one component. Precedence: current founder correction, then live canon (this file included), then project adapter, then surface-specific skill. Full statement: `brand/precedence.md`. A visual specimen page (`brand/compositions-v3.html`, alongside `components-v3.html` and `motion-v3.html`) is not built yet; it is warranted once the design-skill consolidation (plan §14 step 4) gives it a stable home to link from `/agents`. Until then this text file is the canonical recipe; `PLAN.md` in this draft records the follow-up. --- ## 1. Product moments (the website's product-presentation contract) This is the approved reference implementation, founder-approved 14 September 2026 as the website's product-presentation pattern (`tokens/PRINCIPLES-v3.md` P-18 to P-23). Reference build: `outlex-corporate-website` `src/components/shared/ProductScreenshot.tsx` plus `src/styles/product-screenshot.css` plus `public/product-moments//moments.json`. **Contract**: 1. **Source masters.** Every crop traces to one MAR-261-approved master screen, recorded by `sourceSha256` in `moments.json`. A crop is a `sourceBox` rectangle on that master, never a pixel edit, never a fabricated UI state. 2. **Crops only, at 2x.** Each "piece" is one small, legible crop (a clause, a finding, a source citation, a status row), not a full-screen capture. Export at 2x for retina legibility at its real display size. 3. **One shared type scale.** Every piece on every page renders at the same scale, 1.15x the product's own size, computed once across the whole catalog (`MOMENT_SCALE`, `WIDEST`) so no single page's crop looks arbitrarily bigger or smaller than another's. 4. **Composed per page.** A "moment" groups 1 to 4 related pieces (for example, a clause and the finding it produced) into one figure, laid out so the pieces read as cause and consequence: the second piece steps in from the first, not stacked as an unordered pile. 5. **Plain, literal captions.** Each piece carries a short mono label naming exactly what it shows ("The clause", "What Outlex flags"), never a marketing headline standing in for the crop's content. 6. **Provenance line.** Every moment's copy block carries the line "Real Outlex screen · synthetic example data" in English, "Ecrã real da Outlex · dados de exemplo sintéticos" in Portuguese (exact strings, `src/components/shared/ProductScreenshot.tsx` line 93). This is not optional decoration; it is the honesty disclosure that makes real-UI product proof trustworthy without exposing real customer data. 7. **The repetition rule.** No piece may appear on more than one page except a founder-approved repeat, recorded with its date in `tokens/PRINCIPLES-v3.md` P-22 and in `src/test/product-moments.test.tsx`'s `FOUNDER_APPROVED_REPEATS` map. Default assumption for a new page: compose a new moment from a new crop, don't reach for an existing one. `moments.json`'s `placements` array is a useful index but can lag the test file; the test file is the enforced source of truth. 8. **Reproducibility.** The crop build (`npm run verify:product-moments` in the corporate-website repo) reproduces the exact served bytes from the masters and fails on a 2px box change; treat the moments catalog as generated, reviewed output, never hand-edited. **Known gap (recorded follow-up, not a new problem)**: `contractFindings`'s `placements` array lists `/use-cases/fundraising` and `/use-cases/employment`, but no page-specific pieces are composed for either yet in `src/data/productScreenshots.ts`. This matches the plan's own disclosed follow-up (new product captures for the fundraising and employment use cases); it is noted here so the gap is visible from this file too, not only from the plan. **When this pattern does not apply**: dense in-product UI language work, or any surface that is not the marketing website, is out of scope for this recipe. See `Brief` § Out of scope and `confirmed-design-learning.md` § Other surfaces. ## 2. Hero photo pattern One real photograph per page, never reused, never carrying text. - One human moment per hero: a specific person in warm side light, pensive, never a stock smile at the camera, never a staged concept. Photography stays free of text; the headline and CTA sit beside or over the frame, not stamped on the pixels. - Brand marks and third-party logos are removed from every generated or captured photograph before use. See `brand/imagery-v3.md` § AI-photo traps for the exact failure mode this guards against. - Assigned to exactly one page and one theme pairing (light/dark variant produced separately, never faked with a pale layer over a dark image), recorded in a photo registry (`design/photo-registry.json` pattern: id, page, rights, files, checksums) so no PR can silently swap or reuse it. - Product never shares the hero with the photograph. On the homepage, the product moment lives in the section immediately below the hero (P-18), never inside it, never overlapping it. ## 3. Section rhythm The pattern the founder accepted on the simplified inner pages (14 September 2026, plan §15): - **One claim per section.** A section states one idea and proves it; a second unrelated claim belongs in its own section, not appended to save space. - **One primary call to action per screen.** A secondary action, if present, is visually subordinate (glass or white-machined, GRAMMAR-v3 §9b), never a second sage button competing for the same click. - **One newsletter ask per inner page**, placed in the footer only. In-page newsletter cards and sections are removed on sight; this was the single largest simplification of the 14 September pass (P-34). - **No repeated sentences.** The Phase C measurement script treats a sentence repeated verbatim across sections of the same page as a defect; the 19-page rewrite reduced repeats to zero except two founder-approved plan-fact repeats on comparison cards. - **Approved repeats need a name and a date**, the same discipline as product-moment repeats (§1 item 7): a repeated fact, image, or product piece is a deliberate, recorded choice, never an oversight. ## 4. Composition review checklist (before shipping any new section) 1. Does exactly one photograph or one product moment carry this section's proof, not both fighting for attention? 2. Is there exactly one primary CTA, one sage phrase, and no second colour dose (Law 00, GRAMMAR-v3 §5)? 3. Does every product piece trace to a registered source (photo registry or `moments.json`) with an unused/repeat status recorded? 4. Would a first-time reader understand the section's one claim from the headline alone, before reading the body? 5. Compare side by side with the live site (`design.outlex.ai` or the corporate website page it replaces): does this composition beat it on restraint, not just match it on rule compliance? (P-36)