Runcycle — AI sales agent hero

# Full-bleed tapestry hero landing page

An editorial, light-mode landing page for a software product. Its whole idea is a collision: one enormous, machine-rendered picture band running edge to edge, a classical serif headline set underneath it on plain white, and a completely plain grotesk UI around both. Nothing glows, nothing is a card, nothing is centred.

**What the capture covers.** The reference still is a single 1440×900 viewport — sections 1–4 only. Sections 5–12 extend the same system downward and every number in them is marked **(inferred)**. No motion report accompanies this reference, so *all* motion values below are inferred from the stills plus the "restrained motion" read; durations are given as ranges rather than invented exact values. Nothing here uses a measured library parameter.

---

## 1. Structure

**Grid.** 12 columns, 64px side gutters, 32px column gap at 1440 → 80px columns, 1312px content width. Three container types:
- `full` — breaks the gutters, edge to edge (sections 2, 4, 8, 11's image strip).
- `wide` — 1312px, the default.
- `measure` — 720px, centred, for running editorial text (sections 9, 10).

**Sections, top to bottom:**

1. **Nav bar** — sticky, 74px tall, transparent over page white.
2. **Artwork band** — full-bleed picture, 514px tall, square corners, touching left, right and the nav's underside.
3. **Hero copy band** — headline left (cols 1–5), support column right (cols 10–12), on page white.
4. **Logo wall** — full-bleed tinted band, hairline rules top and bottom, 8 wordmarks in one row.
5. **Value triptych** — three columns, cols 1–4 / 5–8 / 9–12. **(inferred)**
6. **Product surface** — sticky copy column (cols 1–4) beside a stack of three framed interface stills (cols 6–12). **(inferred)**
7. **Process** — a pinned section heading with three full-height cards that stack over each other. **(inferred)**
8. **Metrics band** — full-bleed, accent blue, four figures in a row. **(inferred)**
9. **Quote** — `measure` container, one long pull-quote, attribution beneath. **(inferred)**
10. **Objections** — four-item accordion, `measure` container, all closed at rest. **(inferred)**
11. **CTA band** — a second full-bleed artwork strip (280px) directly above a copy row, repeating the section 2 + 3 rhythm. **(inferred)**
12. **Footer** — four link columns plus the wordmark, hairline rule on top. **(inferred)**

---

## 2. Scroll map

Viewport assumed 1440×900.

| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---------|--------|-----------|-----------------|------|
| 1 | Nav bar | 74px | 0.08 | 74px | static (sticky after 48px) |
| 2 | Artwork band | 514px | 0.57 | 514px | scroll-linked |
| 3 | Hero copy band | 233px | 0.26 | 233px | entrance |
| 4 | Logo wall | 120px **(inferred — cut off in capture)** | 0.13 | 120px | entrance |
| 5 | Value triptych | 620px | 0.69 | 620px | entrance **(inferred)** |
| 6 | Product surface | 1560px | 1.73 | 1560px | pinned (copy column) **(inferred)** |
| 7 | Process | 2700px | 3.00 | 2700px | stacked **(inferred)** |
| 8 | Metrics band | 420px | 0.47 | 420px | entrance **(inferred)** |
| 9 | Quote | 560px | 0.62 | 560px | scroll-linked **(inferred)** |
| 10 | Objections | 720px | 0.80 | 720px | static **(inferred)** |
| 11 | CTA band | 640px | 0.71 | 640px | entrance **(inferred)** |
| 12 | Footer | 400px | 0.44 | 400px | static **(inferred)** |

Sections 1+2+3 = 821px, so the logo wall's top rule lands just above the fold — that alignment is load-bearing, keep it. **Total page height: 8,569px ≈ 9.5 viewports.**

---

## 3. Spacing

- **Nav:** 74px tall, 64px side padding, links centred in the bar, 26px gap between links, 20px between logo glyph and wordmark.
- **Section 2 → 3:** 48px only. The hero copy sits deliberately tight under the picture — this is the page's most distinctive spacing decision.
- **Hero copy band:** 48px top, 64px bottom. Headline block max-width 528px. Support column 304px wide, its cap-line aligned with the headline's first cap-line. Deck → buttons gap 28px. Button-to-button gap 14px.
- **Logo wall:** 1px rule, 36px vertical padding **(inferred)**, logos distributed `space-between` across the full 1312px.
- **Standard section padding (5, 8, 9, 10, 12):** 128px top and bottom. **(inferred)**
- **Large sections (6, 7, 11):** 160px top and bottom. **(inferred)**
- **Triptych column gap:** 32px; within a column, eyebrow → title 16px, title → body 12px. **(inferred)**
- **Rhythm:** section headings sit 64px above their content; every block inside a section uses 12 / 16 / 28 / 48 as its internal steps, and 128 is the only gap between sections. Do not introduce a 96 or a 112.

---

## 4. Type

Two families, no third.

- **Display serif** — transitional/old-style, moderate stroke contrast, sharp bracketed serifs, classical proportions. Free stand-in: **Newsreader** (400/500). Alternates: Instrument Serif, EB Garamond.
- **UI grotesk** — neutral, tight apertures, no personality. Free stand-in: **Inter** (400/500).

Body anchor: **17px** at 1440.

| Level | Family | Ratio | Size | Line-height | Letter-spacing | Weight |
|---|---|---|---|---|---|---|
| Hero headline (H1) | serif | 3.75× | 64px | 1.04 (67px) | −0.015em | 400 |
| Section heading (H2) | serif | 2.6× | 44px | 1.10 | −0.01em | 400 |
| Metric figure | serif | 4.2× | 72px | 0.95 | −0.02em | 400 |
| Card / step title (H3) | grotesk | 1.35× | 23px | 1.25 | −0.005em | 500 |
| Body & hero deck | grotesk | 1× | 17px | 1.50 (25.5px) | 0 | 400 |
| Small body, meta | grotesk | 0.88× | 15px | 1.50 | 0 | 400 |
| Nav link | grotesk | 0.88× | 15px | 1.0 | 0 | 450 |
| Button label | grotesk | 0.88× | 15px | 1.0 | −0.005em | 500 |
| Eyebrow / label | grotesk | 0.76× | 13px | 1.20 | 0.12em, uppercase | 500 |
| Footnote / legal | grotesk | 0.76× | 13px | 1.45 | 0 | 400 |

**Max line length:** body 62–68 characters; hero deck 40 characters (it must break onto exactly 2 lines); H1 ≈ 19 characters per line, 2 lines; H2 ≤ 24 characters per line.

The wordmark is lowercase grotesk at 20px, 500, set two-tone — first half ink, second half muted — preceded by a 16px eight-point asterisk glyph.

---

## 5. Colour

| Hex | Role |
|---|---|
| `#FEFEFE` | **Dominant surface.** Page background everywhere outside the artwork bands — roughly 70% of the page. |
| `#241D14` | Ink (derived by darkening the sampled brown). Headline, body, nav links, primary button fill. Never pure black. |
| `#695536` | Muted text: deck secondary lines, captions, footer links at rest, accordion body. |
| `#483925` | The artwork's dominant brown. Outside the pictures it appears only as the dark ground of section 11's copy row **(inferred)**. |
| `#E8D7B7` | Warm sand. Lives inside the artwork; outside it, permitted only as the section 4 band tint stepped to `#FAF8F4` and as a 20%-opacity fill behind eyebrows. |
| `#294965` | **The single accent.** Deep blue. |
| `#E6E0D6` | Hairline rules and secondary button borders (derived, warm). |
| `#8C8577` | Logo-wall wordmarks, flat monochrome (derived). |

**Where the accent is allowed:** the sea and sky inside the artwork; the full-bleed metrics band (section 8) as its background; the underline that grows under a hovered nav or footer link; the focus ring. That is the complete list. It is never a button fill, never a body text colour, never a gradient stop.

---

## 6. Surface

- **Borders:** 1px, `#E6E0D6`. Used on the logo-wall band (top and bottom), the product-still frames, accordion dividers and the footer rule. Nothing else has a border.
- **Radii:** buttons and pills `999px`; product-still frames `16px`; small artwork chips `12px`; the full-bleed artwork bands `0` — square corners, flush to the viewport edges on all sides.
- **Shadows:** none. Zero drop shadows, zero glass, zero glow. Separation comes from hairlines and the `#FAF8F4` band tint. The one exception: once the nav is stuck, a single hairline `#E6E0D6` appears along its bottom — a rule, not a shadow.

---

## 7. Imagery

1. **Hero artwork (section 2)** — 1440×514, **2.8:1 panorama, full-bleed.** A classical scene rebuilt by a machine out of tiny units: a shaded stone loggia with three arches and slender columns, opening onto a sunlit bay with a mountain across the water and a small weathered statue on the balustrade; flowering vines with gold blossoms fill the dark foreground on both sides. The whole image is quantised into a dense grid of ~2px cells — a cross-stitch or dot-matrix reconstruction, visibly woven rather than photographed, soft at every edge, dark warm brown at the frame and bright `#294965` water at the centre. The technique *is* the message; the subject is antique on purpose.
2. **Product stills (section 6)** — three, 16:10, interface on white, inside a 16px-radius 1px-ruled frame, no shadow, no browser chrome, no perspective tilt. **(inferred)**
3. **Process chips (section 7)** — three 1:1 crops pulled from the hero artwork (a column, the water, the blossoms), 96px, 12px radius, one per card. **(inferred)**
4. **Quote (section 9)** — no photograph. Typography only; the attribution is text. **(inferred)**
5. **CTA strip (section 11)** — 1440×280, **5.1:1**, a different crop of the *same* artwork (the vine and gold blossoms against dark brown, no architecture), full-bleed. **(inferred)**

If the woven rendering cannot be produced, use a public-domain painting and apply the quantisation yourself. Do not substitute a photograph.

---

## 8. Motion

> No motion report exists for this reference. Everything below is inferred from the stills and the restrained-motion read; durations are ranges.

**1 — Nav bar**
- kind: static (scroll-triggered state change, not choreography)
- what moves: the bar's own background and bottom rule
- from → to: background `transparent` → `rgba(254,254,254,0.9)` + 12px backdrop blur; bottom rule opacity 0 → 1
- range: crosses once at 48px of scroll, reverses above it; crossfade 160–220ms, ease-out
- reduced motion: same state change, no blur, instant

**2 — Artwork band**
- kind: scroll-linked (reverses on the way back up) + a one-time load entrance
- what moves: the picture inside its fixed 514px window
- from → to: scroll-linked — image scale held at 1.06, translateY `−18px → +18px`. Load entrance — opacity `0 → 1`, scale `1.04 → 1.06`
- range: scroll-linked from page top until the band's bottom edge leaves the viewport; entrance fires once on load, 800–1000ms, ease-out
- reduced motion: no parallax, no scale; static crop, opacity fade only

**3 — Hero copy band**
- kind: entrance, once
- what moves: the two headline lines, the deck, the button row
- from → to: opacity `0 → 1`, translateY `16px → 0`
- range: on load, 120ms after section 2 begins; 500–700ms, ease-out; stagger 80ms between headline lines, deck at +100ms, buttons at +180ms
- reduced motion: opacity only, no translate

**4 — Logo wall**
- kind: entrance, once
- what moves: the eight wordmarks
- from → to: opacity `0 → 1`, translateY `12px → 0`
- range: when the band's top reaches 90% of the viewport; 400–500ms, ease-out, 40ms stagger left to right
- reduced motion: opacity only

**5 — Value triptych (inferred)**
- kind: entrance, once
- what moves: the three columns as units
- from → to: opacity `0 → 1`, translateY `20px → 0`
- range: when the section's top reaches 80% of the viewport; 500–700ms, ease-out, 90ms stagger
- reduced motion: opacity only

**6 — Product surface (inferred)**
- kind: pinned (the copy column only)
- what moves: the left copy column sticks; the three stills scroll past it; the active eyebrow/title pair crossfades
- from → to: copy column `position: sticky` at 200px from the top; outgoing title opacity `1 → 0` translateY `0 → −10px`, incoming `0 → 1`, `10px → 0`
- range: the copy column is pinned for ~1.3 viewports — from the section's top reaching 200px until the last still's bottom reaches the column's bottom; the crossfade is scroll-linked to each still crossing the viewport midpoint and reverses upward
- reduced motion: sticky released, copy repeats above each still, no crossfade

**7 — Process (inferred)**
- kind: stacked
- what moves: three cards, each 100vh, stacking over one another under a heading pinned for the section's full length
- from → to: incoming card translateY `100vh → 0`; the card beneath scales `1 → 0.96` and drops opacity `1 → 0.7` as it is covered
- range: pinned for 3.0 viewports total, one viewport of scroll per card, scroll-linked and fully reversible
- reduced motion: no pin, no stack — the three cards become a plain vertical list at auto height

**8 — Metrics band (inferred)**
- kind: entrance, once
- what moves: the four serif figures
- from → to: clip-path `inset(0 0 100% 0)` → `inset(0 0 0 0)`, i.e. wiped upward from the baseline; opacity stays 1
- range: when the band's top reaches 85% of the viewport; 600–800ms, ease-out, 70ms stagger. No count-up
- reduced motion: no wipe, figures simply present

**9 — Quote (inferred)**
- kind: scroll-linked
- what moves: the pull-quote's colour, line by line
- from → to: each line's colour `#695536 → #241D14` as it crosses the viewport's upper third; reverses downward
- range: from the quote's top entering the viewport until its last line reaches 35% of the viewport height
- reduced motion: all lines rendered at `#241D14` from the start

**10 — Objections (inferred)**
- kind: static. Nothing animates on scroll. Its only movement is the open/close interaction listed below.
- what moves: nothing
- from → to: n/a
- range: n/a
- reduced motion: unchanged

**11 — CTA band (inferred)**
- kind: entrance, once
- what moves: the artwork strip and the copy row beneath it
- from → to: strip clip-path `inset(0 0 100% 0)` → `inset(0 0 0 0)`; copy opacity `0 → 1`, translateY `16px → 0`
- range: when the band's top reaches 80% of the viewport; strip 700–900ms ease-out, copy at +150ms, 500ms
- reduced motion: strip fades in, copy opacity only

**12 — Footer (inferred)**
- kind: static. No entrance, no parallax, no reveal.

### Interaction transitions (not part of the scroll choreography)

- **Nav link hover** — a 1px `#294965` underline grows from the left edge, 160ms ease-out; label colour unchanged.
- **Primary button hover** — fill `#241D14 → #3A2F22`, translateY `0 → −1px`, 140ms.
- **Secondary button hover** — fill `#FEFEFE → #F1EFEA`, border unchanged, 140ms.
- **Any button press** — scale `0.98`, 80ms, then release.
- **Focus (keyboard)** — 2px `#294965` ring, 2px offset, no transition.
- **Accordion open/close** — `grid-template-rows: 0fr → 1fr`, 240–280ms ease-out; the chevron rotates 180°; one item open at a time.
- **Logo wall and artwork** — no hover state at all. No zoom-on-hover on any image.

---

## 9. Responsive (below 640px)

- Gutters drop 64 → 20px. Section padding 128 → 72px; large sections 160 → 88px.
- Nav keeps logo + pill only; the five links move into a full-screen white sheet with 28px serif entries.
- **Section 2** re-crops to 4:3 (centre on the arches and water), height 380px, still full-bleed and square-cornered.
- **Section 3** stacks: headline 34px / 1.08 (2× the unchanged 17px body), then deck at full width, then the two buttons stacked full-width with a 12px gap. Gap from the artwork stays tight at 32px.
- **Section 4** becomes a two-row 4-up grid, 180px tall; keep the rules.
- **Section 5** stacks to one column, 48px between items.
- **Section 6** drops the sticky column entirely — copy block, then its still, three times.
- **Section 7** drops the pin and the stack; three plain cards in a column, entrance fade only.
- **Section 8** becomes 2×2; figures 48px.
- **Section 11** drops its artwork strip; copy row only.
- **Dropped below 640:** all parallax, the pin, the stack, and the second artwork crop.

---

## 10. Don'ts

- **Don't inset the artwork in a rounded card.** If the source appeared to sit on a coloured mat with rounded corners, that was the photograph's framing. The band is square-cornered, edge to edge, flush against the nav.
- **Don't put the headline over the image.** Picture and type never overlap. The picture is a band; the words live underneath it on white. No overlay scrim, no text-on-image hero.
- **Don't centre the hero.** Headline hard left at the gutter, support column hard right in cols 10–12, a 500px empty gap between them. That emptiness is the composition.
- **Don't give the hero copy generous breathing room.** 48px under the picture, not 96. The tightness is the point.
- **Don't set the headline at 1.2 line-height.** 1.02–1.06, so the descenders of line one nearly touch the caps of line two.
- **Don't use a geometric sans (or any sans) for the headline.** The entire tension is a classical serif against a characterless grotesk UI. Equally: don't let the serif leak into buttons, nav, or body.
- **Don't reach for the AI palette.** No indigo/violet, no gradient, no mesh, no glow, no aurora blur, no "shimmer" on the CTA. The only signal that this is an AI product is the artwork's reconstruction technique and one 16px sparkle glyph on the primary button.
- **Don't add shadows or glassmorphism.** Not on buttons, not on cards, not on the product stills.
- **Don't use pure black or cool grey.** Every neutral is warm-shifted; `#000`, `#111827` and `#6B7280` are all wrong here.
- **Don't let the accent blue spread.** It is the sea, one band, a hover underline, a focus ring. It is not a button, not a link colour at rest, not a heading.
- **Don't make the logo wall colourful or high-contrast.** One flat `#8C8577`, optically sized, evenly distributed — it should read as texture, not as a feature.
- **Don't use 8px rounded rectangles for buttons.** Full pills, 999px, 44px tall in the hero, 38px in the nav.
- **Don't right-align the nav links against the button.** They are centred on the viewport's midpoint with the button far right.
- **Don't animate the headline per character or per word,** and don't blur-in. Whole lines, 16px, once, ease-out.
- **Don't overdo the parallax.** ≤20px of translate, ≤1.06 scale. If the movement is noticeable as movement, it's wrong.
- **Don't replace the woven artwork with a stock photograph, a 3D render, an abstract gradient or a dashboard screenshot.** A generic image collapses the whole design.
- **Don't count up the metrics numbers.** They wipe in once and hold.