Modernbanc — Accounting landing page

**Source note:** one full-width capture of the top of the page was available and no motion report accompanies it. Everything in sections 1–3 is measured off that still at 1200px wide and scaled to a 1440px viewport; sections 4–11 and all timings are marked **(inferred)**. Where a value could not be derived, it says "not measured" and gives a range.

# 1. Structure

Design viewport 1440 × 900. Page is full-bleed: the background layers run edge to edge, content sits in a centred container.

- **Text container:** 1100px max-width, 12 columns, 24px gutters, 40px page padding at ≤1180.
- **Product canvas container:** viewport width − 53px each side, capped at 1340px. It is *wider* than the text container — that difference is the whole composition.
- Hero content is centre-aligned. Everything below the hero is left-aligned except sections 7 and 10.

Sections, top to bottom:

1. **Floating nav pill** — fixed overlay, out of flow.
2. **Hero** — full-bleed landscape photograph, backer line, headline, subhead, one solid CTA, then a segmented tab row.
3. **Product canvas (pinned)** — the app window that begins cropped by the fold in section 2, pinned while its three tabs advance. **(inferred)**
4. **Trust row** — one line of label text plus a row of monochrome marks. **(inferred)**
5. **Feature triptych** — three alternating rows, text one side, product crop the other. **(inferred)**
6. **Table deep-dive** — a single wide table card whose columns reveal on scroll. **(inferred)**
7. **Metric strip** — lime band, four numerals. **(inferred)**
8. **Quote** — one testimonial, avatar, no card. **(inferred)**
9. **Integrations grid** — 4 × 3 cells of marks + names. **(inferred)**
10. **Closing CTA** — second landscape band, headline, same solid pill. **(inferred)**
11. **Footer** — four columns on #F7F8F8. **(inferred)**

# 2. Scroll map

Viewport height 900px. All figures **(inferred)** — no measured scroll map exists for this reference.

| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---|---|---|---|---|
| 1 | Floating nav | 48px pill, 0 flow | 0 | 0 | static (fixed) |
| 2 | Hero | 940px | 1.04 | 940px | entrance + scroll-linked |
| 3 | Product canvas | 900px | 1.00 | 3600px | pinned (3.0 vp of pin) |
| 4 | Trust row | 180px | 0.20 | 180px | entrance |
| 5 | Feature triptych | 1860px (3 × 620) | 2.07 | 1860px | entrance |
| 6 | Table deep-dive | 1040px | 1.16 | 1040px | scroll-linked |
| 7 | Metric strip | 420px | 0.47 | 420px | entrance |
| 8 | Quote | 560px | 0.62 | 560px | entrance |
| 9 | Integrations grid | 820px | 0.91 | 820px | entrance |
| 10 | Closing CTA | 760px | 0.84 | 760px | scroll-linked |
| 11 | Footer | 420px | 0.47 | 420px | static |

**Total page height: 10,600px ≈ 11.8 viewports.** Exactly one section pins.

# 3. Spacing

Section 2 (measured):
- Nav pill top offset 40px. Pill 500 × 48px, inner padding 8px left / 8px right, 20px between wordmark and nav link, 28px between nav link and CTA button.
- Pill bottom (88px) → backer line baseline area at 200px from page top.
- Backer line → H1 first line top: **62px**.
- H1 block → subhead: **36px**.
- Subhead → CTA button: **46px**.
- CTA button (200 × 52) → tab row: **80px**.
- Tab row → app window top edge: **28px**. Window top is at y = 752, i.e. the fold crops it — 148px of the window is visible above 900px.
- Tab chip padding 14px × 9px; 32px between tab labels.

Below the hero **(inferred)**:
- Section vertical padding: 120px top / 120px bottom, with three exceptions — section 4 uses 48/48, section 7 uses 72/72, section 11 uses 80/64.
- Rhythm inside a section: eyebrow → H2 = 20px; H2 → body = 24px; body → link/CTA = 32px.
- Feature row (5): 72px between text column and product crop, 620px row height, 0 gap between rows (the alternation carries the rhythm, not a divider).
- Grid (9): 24px column gap, 24px row gap.
- Footer (11): 4 columns, 24px gap, 12px between footer links.

# 4. Type

Two families only.

- **Grotesk** (neo-grotesk, double-storey g, tight apertures). Free stand-in: **Inter**, weights 400/450/500/600.
- **Serif display italic**, high stroke contrast, used for exactly one phrase in the H1 and one phrase in the quote. Free stand-in: **Instrument Serif Italic** (fallback: EB Garamond Italic).

| Level | Size / line-height / tracking / weight |
|---|---|
| Nav wordmark | 19px / 1.2 / −0.01em / 600 |
| Nav link | 16px / 1.2 / 0 / 450 |
| Button label | 16px / 1.0 / −0.005em / 500 |
| Backer eyebrow (2) | 16px / 1.4 / 0 / 450 |
| H1 (2) | 68px / 1.25 (85px) / −0.025em / 500 |
| H1 italic span | 70px / same 85px leading / −0.01em / 400, serif italic |
| Subhead (2) | 18px / 1.55 (28px) / −0.005em / 400 |
| Tab label (2) | 20px / 1.2 / −0.01em / 500 |
| App column header | 13px / 1.2 / +0.01em / 500 |
| App cell text | 14px / 1.35 / 0 / 450 |
| App numerals | 14px / 1.35 / 0 / 500, **tabular figures**, right-aligned |
| Section eyebrow | 13px / 1.2 / +0.08em / 600, uppercase |
| H2 | 44px / 1.15 / −0.02em / 500 |
| H3 | 24px / 1.3 / −0.01em / 500 |
| Body | 17px / 1.6 / 0 / 400 |
| Metric numeral (7) | 64px / 1.0 / −0.03em / 500, tabular |
| Quote (8) | 32px / 1.35 / −0.015em / 400 |
| Caption / footer link | 14px / 1.5 / 0 / 400 |

Max line length: H1 wraps at **≤30 characters per line, two lines**, block max-width 1040px. Subhead max-width **480px**, breaking to two roughly equal lines. Body copy max-width 560px (≈62–66 characters). Nothing is set in italic except the two serif spans. No uppercase anywhere except the section eyebrow.

Placeholder copy by role: backer eyebrow 3 words + a small square mark + 1 word; H1 9–10 words on two lines with words 4–6 in serif italic; subhead 18–22 words on two lines; CTA 2 words; three tab labels of 1 word each; H2 5–8 words; body paragraphs 22–30 words.

# 5. Colour

- **#F7F8F8** — the dominant surface everywhere below the hero, and the app window's tab strip. Roughly 55% of total page area.
- **#FFFFFF** — app window body, table rows, feature cards. Second largest area.
- **#0F1211** — ink: all headings, body at full strength, and the fill of both solid pill buttons. This is the only near-black.
- **#5E6664** — muted text: subhead, column headers, footer links, secondary cells.
- **#E6E9E8** — hairlines.

Landscape pastels, used *only inside the photographic bands* (sections 2 and 10):
- **#98D5F5** — sky at the top edge.
- **#C7E9F8** — sky near the horizon, cloud shadow.
- **#58ABE3** — the lake and the mid-distance ridges.
- **#CAF277** — sunlit meadow across the bottom third.

**#CAF277 is the single accent** and the only saturated colour permitted as UI. It appears in exactly four places: the active tab chip in section 2 (fill `#CAF277` at 55% over the landscape, label in #2E4A10), the 3px active indicator on the feature row in section 5, the full background of section 7, and the 6px live-status dot in the app toolbar. It is never a button fill, never a text colour on white, never a gradient, never a glow.

Inside the app window only, three functional label dots are allowed at 6px: #58ABE3 (blue), #B084E8 (violet), #6B7070 (grey). They are data colours, not brand colours.

# 6. Surface

- **Borders:** 1px. App window outer border `rgba(15,18,17,0.08)`; internal hairlines `#E6E9E8`; card borders `#E6E9E8`. Table has **horizontal hairlines only** between rows, plus one vertical hairline separating the row-number gutter from the first column. No other vertical rules.
- **Radii:** nav pill 999px; solid buttons 12px; nav's inline button 10px; app window 14px (all four corners — the bottom two are simply below the fold in section 2); cards 16px; tab chip 10px; app tab 8px; label pills 6px; avatar 999px.
- **Shadows:** two elements only. The nav pill gets `0 2px 8px rgba(16,24,32,0.08)`. The app window gets `0 24px 60px -20px rgba(16,24,32,0.28), 0 2px 6px rgba(16,24,32,0.06)`. Everything else is flat — feature cards, metric strip, footer all rely on the 1px border and the #F7F8F8 / #FFFFFF step.
- The nav pill is the only translucent surface: `rgba(255,255,255,0.72)` with `backdrop-filter: blur(20px)` and a 1px `rgba(255,255,255,0.6)` inner edge. No frosted glass anywhere else.

# 7. Imagery

**A. Hero landscape (section 2)** — full-bleed cover, source 16:9, displayed 1440 × 940. A wide pastoral valley from a low rise: banded sky running saturated pastel blue at the top to near-white at the horizon, tall soft-edged cumulus in the upper third, a chain of hazy blue-grey ridges, a still turquoise lake dead centre at 52% height, a dark conifer treeline, and a foreground of sunlit lime meadow filling the bottom third with faint mowing bands. Treatment: high-key, no grain, no lens flare, no vignette, slightly synthetic/rendered rather than photographic. The upper-middle band where the headline sits is lifted toward white (a white radial at 30% opacity, 900px wide, centred on the headline) so black type holds — **lifted, never dimmed with a dark scrim**.

**B. Product window (section 2 + 3)** — built in DOM, not an image. A ledger application: a 49px toolbar (small app glyph, a workspace chip with a `G` keyboard badge, three text menus, three right-aligned icon buttons), a 40px tab strip on #F2F3F3 with four document tabs and a `+` (the third tab active, white, radius 8px), a 43px filter bar (Filter with a count badge, Sort with a count badge, an inline search field, an Export button pinned right), then a 38px column header row and rows of 37px. Columns at 1334px width: gutter 53px, Account 210px, Balance (USD) 192px right-aligned, Labels 156px, Description 258px, Provider 160px, Created 156px right-aligned, add-column 145px. Account cells carry a 16px provider glyph; Labels cells carry one or two dot-pills; Created is a plain date.

**C. Feature crops (section 5, ×3)** — 4:3, 560 × 420, each a tight crop of the same application: a reconciliation split view, a chart of accounts tree, a report with a single line chart. Rendered on white with a 1px border and 14px radius, sitting on a #F7F8F8 panel — not floated, not tilted, not in a browser frame.

**D. Closing landscape (section 10)** — 21:9 crop of the same valley from further back and later in the day, 1440 × 760, cover. Same treatment, headline sits over the sky.

**E. Quote avatar (section 8)** — 1:1, 56px, circular, a plain portrait, greyscale-free, no ring.

**F. Integration marks (section 9)** — 24px monochrome glyphs at #5E6664, all optically matched to the same weight.

# 8. Motion

Restrained. One pin on the page, nothing bounces, nothing rotates, nothing blurs on scroll. No durations, easings or stiffnesses were measured — every value below is **(inferred)** and stated as a range where the still can't settle it.

**1 — Floating nav**
- kind: static (fixed overlay) with one state change
- what moves: the pill itself
- from → to: page top — `background rgba(255,255,255,0.72)`, width 500px; past 120px of scroll — `background rgba(255,255,255,0.92)`, border `rgba(15,18,17,0.06)`, width unchanged
- range: a threshold at 120px, not a scrub. Transition 160–220ms (not measured), ease-out
- reduced motion: the opaque state is applied immediately with no transition

**2 — Hero**
- kind: entrance on load, plus scroll-linked parallax
- what moves: entrance — backer line, H1 line 1, H1 line 2, subhead, CTA, tab row, app window, in that order. Scroll-linked — the landscape layer and the app window.
- from → to: entrance — `opacity 0 → 1`, `translateY 12px → 0`. The app window enters separately at `opacity 0 → 1`, `translateY 28px → 0`, `scale 0.985 → 1`. Scroll-linked — landscape `translateY 0 → −110px` (rate 0.12); app window `translateY 0 → +24px`, giving it a slight counter-drift so it appears to rise past the horizon.
- range: entrance fires once on load, not on scroll; 480–620ms per element (not measured), ease-out, **90ms stagger**, app window delayed 200ms after the tab row. Parallax is scroll-linked from page top to 940px of scroll and reverses on the way back up.
- reduced motion: no entrance translate, no parallax; elements render at final position with a 120ms opacity fade only

**3 — Product canvas (pinned)**
- kind: pinned
- what moves: the app window (held), the tab row above it (active chip), the table body (swapped), the tab chip's lime fill
- from → to: on entering the pin the window goes `translateY +24px → 0` and `scale 0.985 → 1`; across the pin the active chip slides between the three tab positions (`translateX` to each label's centre, chip width animating to the label width), and the table body cross-fades `opacity 1 → 0 → 1` with the outgoing body at `translateY 0 → −8px` and the incoming at `+8px → 0`. Window chrome, toolbar and column headers never move.
- range: **pinned for 3.0 viewports (2700px)**. Tab 1 holds 0→0.30 of the pin, transitions 0.30→0.36; tab 2 holds to 0.66, transitions to 0.72; tab 3 holds to 1.0. Scroll-linked and fully reversible — scrolling back up walks the tabs backwards.
- reduced motion: no pin. The section becomes 900px of normal flow showing tab 1 only, with the three tabs as clickable controls and an instant swap.

**4 — Trust row**
- kind: entrance
- what moves: the label, then the marks
- from → to: `opacity 0 → 1`, `translateY 8px → 0`
- range: once, when the element's top reaches 85% of the viewport; 400–500ms (not measured), ease-out, 40ms stagger across the marks
- reduced motion: opacity only, 120ms

**5 — Feature triptych**
- kind: entrance, per row
- what moves: each row's eyebrow/H2/body group, its product crop, and the 3px lime indicator
- from → to: text group `opacity 0 → 1`, `translateY 16px → 0`; crop `opacity 0 → 1`, `translateY 24px → 0`; indicator `scaleX 0 → 1` from its left edge
- range: once per row, when that row's top reaches 80% of the viewport; 520–640ms (not measured), ease-out; text leads the crop by 120ms; indicator last. Rows do not stagger against each other — each fires on its own trigger.
- reduced motion: opacity only; indicator appears at full width

**6 — Table deep-dive**
- kind: scroll-linked
- what moves: the wide table card's horizontal offset and a right-edge fade mask
- from → to: card `translateX 0 → −180px` (revealing the three right-hand columns), mask opacity `1 → 0` as the last column arrives
- range: from the section top reaching the viewport bottom until the section top reaches the viewport top. Reverses on the way back up. Never auto-scrolls on its own.
- reduced motion: card sits at `translateX −90px` (mid position), no scroll link, horizontal overflow scrollable by hand

**7 — Metric strip**
- kind: entrance
- what moves: four numerals and their labels
- from → to: numerals count from 0 to final value; labels `opacity 0 → 1`, `translateY 6px → 0`. The lime background does not animate.
- range: once, when the strip's top reaches 75% of the viewport; count 800–1000ms (not measured), ease-out, 80ms stagger
- reduced motion: final values printed immediately, no count, no translate

**8 — Quote**
- kind: entrance
- what moves: the quote block and the avatar/attribution line
- from → to: `opacity 0 → 1`, `translateY 14px → 0`
- range: once, when the block's top reaches 80% of the viewport; 520–640ms (not measured), ease-out, attribution delayed 140ms
- reduced motion: opacity only

**9 — Integrations grid**
- kind: entrance
- what moves: the twelve cells
- from → to: `opacity 0 → 1`, `translateY 12px → 0`
- range: once, when the grid's top reaches 80% of the viewport; 420–520ms (not measured), ease-out, 35ms stagger in row-major order
- reduced motion: all cells fade together, 120ms

**10 — Closing CTA**
- kind: scroll-linked
- what moves: the landscape band
- from → to: `translateY −60px → +60px` across the band's travel through the viewport (rate 0.12, same as the hero). Headline and button are static within the band.
- range: from the band's top entering the viewport until its bottom leaves. Reverses.
- reduced motion: band is fixed at centre, no parallax

**11 — Footer**
- kind: static. Nothing enters, nothing scrubs, nothing pins.

**Interaction transitions** (not part of the scroll choreography):
- Solid pill button hover: background #0F1211 → #222726, 140ms. Press: `scale 0.985`, 90ms.
- Nav link hover: colour #5E6664 → #0F1211, 120ms.
- Tab (section 2/3) click hover: label colour lifts to #0F1211, 120ms; clicking moves the lime chip with the same 280ms slide used in the pin and jumps the pin's scroll position to that tab's hold range.
- Table row hover: background #FFFFFF → #F7F8F8, 100ms, no border change, no lift.
- App toolbar icon button hover: background transparent → #F0F2F2, radius 8px, 100ms.
- Filter/Sort chip open: dropdown `opacity 0 → 1`, `translateY −6px → 0`, 140ms; close 100ms, no scale.
- Integration cell hover: border #E6E9E8 → #D5DAD9, glyph #5E6664 → #0F1211, 120ms. No lift, no shadow.
- Focus-visible everywhere: 2px #0F1211 outline, 2px offset. Never lime.

# 9. Responsive (below 640px)

- Nav pill becomes a 100%−32px bar at 16px from the top, 48px tall, holding the wordmark and the solid CTA only; the text link drops out. Still radius 999px, still frosted.
- H1 → 36px / 1.15 / −0.02em, wrapping to four lines; the serif italic span stays inline at 37px. H2 → 30px. Subhead → 16px / 1.5, max-width 300px. Body → 16px.
- Hero height → 720px. The landscape re-crops to a portrait-safe focal point: keep the lake and the meadow band, lose the outer ridges.
- Tab row scrolls horizontally, no wrap, 20px side padding, chip behaviour unchanged.
- App window: side gutters shrink to 16px, radius 12px. The table becomes horizontally scrollable with the row-number gutter and Account column frozen; Labels, Description and Provider are reachable by drag. The window's shadow reduces to `0 12px 30px -14px rgba(16,24,32,0.24)`.
- Section 3 unpins entirely — the three tabs become three stacked 100%-width cards, 400px each, in flow. Section height 1240px.
- Section 5 rows stack, crop above text, alternation abandoned, row height 560px.
- Section 6 drops the scroll-link; the table is a plain horizontal-scroll card.
- Section 7 becomes a 2 × 2 grid, numerals 40px.
- Section 9 becomes 2 columns × 6 rows.
- Footer stacks to 2 columns, then links in a single column below 400px.
- Section padding drops from 120px to 72px throughout.

# 10. Don'ts

- **Don't darken the hero image.** The reflex is a black gradient scrim under the headline. This design does the opposite — it lifts the sky toward white behind the text. A scrim kills the pastel entirely.
- **Don't put the lime on a button.** #CAF277 on a CTA is the single fastest way to wreck this. Buttons are near-black pills. The lime is a highlight fill behind one active tab label and one section background, nothing else.
- **Don't make the lime glow.** No gradient, no drop-shadow in the accent colour, no neon bloom. It is a flat swatch.
- **Don't bold the headline.** 500 weight, tight tracking, large size. 700 makes it a SaaS template.
- **Don't set the serif italic span at a different colour or a visibly different size.** It shares the ink colour and sits on the same baseline; only the family and the slant change. No highlight behind it, no underline, no gradient text.
- **Don't add a second accent or a second serif.** Two families, one accent.
- **Don't build the table as a bordered grid.** No zebra striping, no vertical column rules (except the one after the row-number gutter), no heavy header fill, no rounded cells. Hairlines between rows, tabular numerals, right-aligned money.
- **Don't fake the product with a screenshot image.** The window is DOM: real column widths, real 37px rows, real hover states. It's the largest object on the page and a flat PNG will read as one.
- **Don't wrap the app window in a browser chrome mockup**, and don't tilt it, perspective it, or float it on a gradient card.
- **Don't round the app window's bottom corners away** or shrink it to fit above the fold. It is deliberately cropped by the viewport bottom — that crop is what makes the page feel like it continues.
- **Don't put a shadow on everything.** Exactly two shadowed elements: the nav pill and the app window. Feature cards, the metric strip and the footer are flat with 1px borders.
- **Don't use frosted glass anywhere but the nav pill.**
- **Don't pin a second section.** One pin, section 3. Extra pins turn a restrained page into a scrolljacked one.
- **Don't parallax faster than 0.12.** Anything above that makes the horizon slide and breaks the illusion that the window is rising out of the landscape.
- **Don't fade-up every element on every scroll.** Entrances fire once, at 80% of the viewport, at 12–24px of travel. No 60px slides, no scale-from-0.8, no blur-in, no reveal-on-re-scroll.
- **Don't add a scroll-down chevron, a marquee logo belt, or an animated gradient mesh.**
- **Don't centre-align the sections below the hero.** Only the hero, the metric strip and the closing CTA are centred; features, table and footer are left-aligned to the 1100px container.
- **Don't offer a dark mode** or invert the app window. The page is light mode by design; the only dark surfaces are two buttons.
- **Don't reach for Poppins, Montserrat, or a rounded geometric sans.** It needs a neo-grotesk with tight apertures — Inter is the correct stand-in.