# Homepage photography and composition ## Design read Russian-language marketing landing for enterprise executives and IT leaders. Light, green-led editorial composition. DESIGN_VARIANCE: 6, MOTION_INTENSITY: 1, VISUAL_DENSITY: 3. Brand-led CSS modules and existing shared UI, not an imitation of an official design system. Active design rules: `.agents/skills/taste-skill/SKILL.md`. Brand assets, Manrope, green palette and preserved functions: `public/brand/README.md`. Content facts and section order: `studio18_site_structure_and_content_v1.md`, through `src/content/site/`. No new service routes, pricing, backend integration, typography dependency or branding. Brand exceptions permitted by the skill: light-only regardless of system settings; no animation; original rounded logo tile; no photography in compact final invitation. All content panels and controls use sharp corners. Former employers remain plain text with previous-experience disclaimer, not a customer logo wall. ## Image provenance No image-generation tool is exposed in this environment. Existing real, local assets take priority over random stock placeholders. No Unsplash or Picsum URLs, fabricated screenshots or hand-drawn illustrations. NASA photographs illustrate computing infrastructure. They do not depict studio-owned equipment or completed studio projects. Original metadata credits NASA / Pat Izzo. Source record: . Usage guidance: . Informational use with acknowledgement must not imply endorsement. This is not a Creative Commons license or studio affiliation with NASA. Existing source records retained; no new licensing approval claimed. | Local file | Original | Author | Processing | | --- | --- | --- | --- | | `hero.webp` | [Discover Supercomputer 5](https://images.nasa.gov/details/GSFC_20171208_Archive_e002027), [JPEG](https://images-assets.nasa.gov/image/GSFC_20171208_Archive_e002027/GSFC_20171208_Archive_e002027~large.jpg) | NASA / Pat Izzo | Existing grayscale crop, 840 x 1040 | | `infrastructure.webp` | [Discover Supercomputer 3](https://images.nasa.gov/details/GSFC_20171208_Archive_e002030), [JPEG](https://images-assets.nasa.gov/image/GSFC_20171208_Archive_e002030/GSFC_20171208_Archive_e002030~large.jpg) | NASA / Pat Izzo | Existing grayscale crop, 1600 x 780 | | `detail.webp` | [Discover Supercomputer 4](https://images.nasa.gov/details/GSFC_20171208_Archive_e002032) | NASA / Pat Izzo | Existing 760 x 640 crop, unused | | Five `src/assets/{baryshnikov,boikov,lucenko,juravlev,komar}.webp` portraits | Existing repository portraits, identities from specification ยง14 | Existing owner-provided assets | Existing WebP derivatives, unchanged | | `src/assets/nrbaryshnikov.jpg` | Original founder portrait in shared footer | Existing owner-provided asset | Unchanged | `hero-mobile.webp` is a same-placement responsive derivative, not a second section image. `hero.avif` and `hero-mobile.avif` preserve corresponding WebP crops and dimensions. Reproduction: `node scripts/optimize-landing-images.mjs`. Media-matched high-priority AVIF preloads select one hero download; WebP is fallback. Images reserve dimensions; infrastructure and portraits load below fold. No asset bytes changed in this redesign. Cross-section crop reuse: zero. ## Per-section image and layout plan All twelve main sections retain existing IDs and order. Shared footer remains outside main. | Section ID | Layout family | Image strategy | Below 768px | | --- | --- | --- | --- | | `hero` | Asymmetric hero | Discover 5, hero-only | Text and actions before reserved 170px photograph | | `expertise` | Full-width editorial statement | None: employer attribution must not imply studio clients | Single statement and wrapping capability labels | | `expert-support` | Indented expert report | None: actual deliverables lead, not decorative image | Indentation removed, deliverables stack | | `production-launch` | Pale-green diagnosis panel | None: qualification and result are primary | Result and disclosure stack | | `corporate-training` | Staggered learning sequence | None: three real outcomes form reading sequence | Indentation removed, outcomes stack | | `ai-infrastructure` | Infrastructure panorama | Discover 3, separate original; non-studio caption below image | Photograph retains intrinsic aspect ratio; results and details stack | | `experience` | Two-column project newspaper | None: anonymous prior experience cannot imply photographed studio projects | One column, intact articles | | `team` | Portrait directory | Five original specialist portraits, real identities | 80px portrait beside identity; biography full-width below | | `process` | Grouped journey | None: seven preserved activities grouped 2/3/2 | Three groups become one column | | `technical-control` | Capability matrix | None: eight preserved competencies grouped 5/3 | Two groups stack | | `faq` | Native question disclosures | None: functional text disclosure | Heading above questions | | `cta` | Compact adjacent invitation | No image, explicit brand requirement | Actions below complete text | | Shared footer | Preserved two-tier composition | Original founder portrait and approved logo | Existing responsive rules, unchanged | One eyebrow in hero. No bento, recurring feature-card grid, animation, client logos or invented metrics. Real photos appear in hero, infrastructure and team, without cross-section reuse. Full service facts remain in keyboard-accessible disclosures; diagnosis qualification stays visible beside its result, before CTA. Long technical/FAQ descriptions are preserved factual detail, not newly invented marketing paragraphs. Punctuation adaptation applies only to homepage marketing data, never legal or consent text. ## Repeatable checks Generated logs, measurements and screenshots belong in ignored output directories or `/tmp`, not tracked task reports. Existing unrelated working-tree edits must be preserved. ```sh npm run type-check npm test npm --ignore-scripts run build TEST_URL=http://localhost:3000 node tests/homepage/taste-audit.browser.mjs TEST_URL=http://localhost:3000 node tests/homepage/editorial-layout.browser.mjs TEST_URL=http://localhost:3000 node tests/homepage/stage3.browser.mjs TEST_URL=http://localhost:3000 node tests/homepage/newsletter.browser.mjs TEST_URL=http://localhost:3000 node tests/homepage/consent.browser.mjs TEST_URL=http://localhost:3000 node tests/homepage/chat-style.browser.mjs TEST_URL=http://localhost:3000 node tests/homepage/expert-focus.browser.mjs TEST_URL=http://localhost:3000 node tests/homepage/widgets.browser.mjs ``` Run Lighthouse against a fresh production server, not development. Test system light/dark settings, reduced motion, five viewport widths, small-laptop hero, keyboard disclosures and form/widget states. Intercept all API mutations; do not send real subscriptions or chat messages. Test results are not a substitute for visual review, real-device acceptance or field INP measurement.