<!-- source: openspec/current/home/spec.md -->

---
title: Home — Spec
status: stable
owner: pavel
audience: [pavel, ai, engineer]
tldr: Block template structure and cross-reference map for the homepage — the eleven-section anchor template and spec-governance conventions.
---
# Home — spec

## Block template

Every block in this spec follows the same eleven-section template. Implementers and reviewers can scan the same eleven anchors per block (the ten numbered contracts below plus the trailing **References** subsection):

1. **Purpose** — single-sentence elevator pitch and the user job it serves.
2. **Position in page narrative** — where in the funnel this block sits and what blocks bracket it.
3. **Content contract** — required and optional fields, source (i18n catalog / hardcoded / MDX / JSON), defaults.
4. **Component composition** — top-level component path, sub-components, reuse across other pages.
5. **Visual contract** — tokens used, typography stack, spacing, container width, forbidden patterns.
6. **Motion contract** — entry animation, hover, scroll behavior, reduced-motion fallback.
7. **Responsive contract** — breakpoint behavior, minimum supported width, touch targets.
8. **Accessibility contract** — ARIA, heading hierarchy slot, keyboard navigation, focus order.
9. **Localization** — locales shipped, fallback rule, translation-key namespace.
10. **Out of scope** — what this block deliberately doesn't do.

A trailing **References** subsection cross-links to design-system / ui / web specs.

---

## Cross-reference map

| Block | Primary spec dependencies | Component path |
|---|---|---|
| Nav | design-system § Surfaces, Typography, Hover & press; ui § Layout & utility | `components/nav.tsx` |
| Hero | design-system § Animation, Tactical frame, Typography | `components/home/hero.tsx` |
| What we build | design-system § Animation, Typography, Tactical components › MonoLabel | `components/home/what-we-build.tsx` (composes `OrchestraDiagram`, `PullQuote`) |
| Now building | design-system § Animation, Tactical frame, Tactical components › StatusPill; web § Content storage › MDX | `components/home/now-building.tsx` (uses `WorkCard`) |
| How we work | design-system § Animation, Typography, Tactical components › MonoLabel | `components/home/how-we-work.tsx` (uses `StepRow`) |
| The network & community | design-system § Animation, Typography, Imagery; web § Content storage › network roster | `components/home/the-network-and-community.tsx` (uses `PersonCard`) |
| Services | design-system § Animation, Tactical components › StatusPill, Layout rules | `components/home/services-section.tsx` (uses `ServiceList`) |
| Lab preview | design-system § Animation, Typography, Tactical components › MetaBar; web § Content storage › MDX | `components/home/lab-preview.tsx` (uses `PostCard`) |
| Closing CTA | design-system § Typography; mirror of Hero | `components/shared/closing-cta.tsx` |
| Sticky CTA | design-system § Animation, Hover & press, Surfaces; ui § Conventions › overlay mounting | `components/shared/sticky-cta.tsx` |
| Footer | design-system § Surfaces, Typography, Hover & press | `components/footer.tsx` |

---

## Conventions for editing this spec

- **One block per change (with foundational-sweep exception).** A change proposal that touches more than one block is a sign that the change is bigger than this spec is sized for; split it. **Exception:** the foundational sweep `mvp-v1-home-blocks-completion` batched all nine pending blocks into a single change because the page-narrative coupling made per-block PRs less reviewable than one cohesive pass. Once the spec is fully populated, the one-block-per-change rule applies to all subsequent edits.
- **Keep content separate from structure.** This spec describes structure. Literal copy (the words a visitor reads) belongs in `messages/{en,ru,ro}/web.json`, not in this file.
- **Token references, not values.** Spec says "ink color", "blueprint line", "0.5px grid divider". It does not say `#1C1C1E` or `2px`. Values belong in `design-system.md`.
- **Match the existing block template exactly.** Eleven sub-sections per block in the same order. Don't introduce a twelfth without updating the template above and back-filling existing blocks.
- **No emoji, no cockpit language.** Same rule as everywhere else in the brand.

---

## May 2026 home audit batch (RAP-744) — block contract amendments

Consolidated capability amendments from five archived sub-changes. See per-change archive folders for full design rationale and decision IDs.

### Hero block (HAF, archive `2026-05-14-tighten-home-above-fold-mobile`)

- **Typography contract.** h1 uses fluid display type clamped 34–64 px (`--text-display-xl: clamp(34px, 8vw, 64px)`). Leading `1.1` mobile / `1.05` desktop.
- **Responsive contract.** Section padding mobile `py-8`; TacticalFrame interior mobile `px-6 py-10`. Chrome-before-eyebrow ≤ 110 CSS px at 320 px viewport.
- **Motion contract.** h1 LCP element does not animate from opacity 0. Decorative chrome (eyebrow, blueprint line, frame corners) may reveal on delay.
- **Content contract.** Hero ships one primary headline + one supporting line + one primary CTA above the fold. Secondary CTA, when present, is a visible peer at 44 × 44 CSS px min, not inline body text.

### Closing CTA block (HAF + HMR, archives `2026-05-14-tighten-home-above-fold-mobile` + `2026-05-14-home-mobile-rhythm-and-density`)

- Mirrors Hero typography + responsive + motion contracts (per existing cross-reference).
- **Visual contract.** Primary and secondary CTAs are visible peer buttons at 44 × 44 CSS px floor; secondary is not inline text. Telegram peer-button styling via `border border-ink hover:bg-ink hover:text-white`.

### Sticky CTA block (HMA + HMR, archives `2026-05-14-fix-home-mobile-a11y` + `2026-05-14-home-mobile-rhythm-and-density`)

- **Accessibility contract.** Bar hides on `IntersectionObserver` with `threshold: 0` and `rootMargin: "-40% 0px 0px 0px"` targeting the closing section. Controls meet 44 × 44 CSS px floor.
- **Content contract.** Sticky-CTA copy differentiates from hero and closing CTAs; carries response-time promise or alternative differentiator (current: `common.cta.stickyCtaShort` = `"48h reply →"` EN).

### Nav block (HMA, archive `2026-05-14-fix-home-mobile-a11y`)

- **Accessibility contract.** Hamburger and drawer-close affordances meet 44 × 44 CSS px floor. Close affordance has a distinct accessible name from the hamburger trigger. Drawer close on link-click is implemented via content-area event delegation (post-archive follow-up: RAP-756, PR #1061).

### Operating Model block (HMA + HMR, archives `2026-05-14-fix-home-mobile-a11y` + `2026-05-14-home-mobile-rhythm-and-density`)

- **Visual contract.** Non-text UI borders use solid color, never `<token>/<alpha>` syntax. Subtle borders use a brand token that already meets WCAG 1.4.11 contrast.
- **Responsive contract.** Diagram on mobile renders three hero nodes (Linear → Maestro → GitHub or equivalent) expanded by default; remaining pipeline nodes inside a native `<details>` disclosure.

### ConnectedStack block (HMR, archive `2026-05-14-home-mobile-rhythm-and-density`)

- **Responsive contract.** Mobile renders three currently-connected tiles expanded by default; remaining six in-development / planned tiles inside a `<details>` disclosure with localized summary key `home.connectedStack.disclosureSummary`.

### Section padding and dividers (HMR, archive `2026-05-14-home-mobile-rhythm-and-density`)

- **Responsive contract template addition.** Section root padding on mobile is `py-16`. Per-section top borders apply only at `md:` and above. Decorative dividers (blueprint lines, accent rules) are mobile-hidden by default.
