Duna — Compliance platform homepage

# Painterly pastel compliance homepage — build prompt

A light-mode B2B/fintech marketing homepage built on one unusual decision: a **full-bleed painterly landscape illustration** at the very top and the very bottom, with a **narrow 860px content column** floating on near-white in between. Everything is quiet, hairline-bordered and restrained — except a single glowing amber lozenge at the centre of the page's one diagram. That contrast is the whole design.

---

## 1. Structure

**Container**
- Page is full-bleed white; no outer mat, no rounded page corners.
- **Content container: 860px, centred** (left/right margin ≈ 290px at 1440). This is deliberately narrow — resist widening it.
- **Nav is the exception:** a wider 1360px bar with 40px gutters, so the logo and CTA sit near the window edges while all body content is inset.
- Illustration sections (hero art, footer art) are 100vw, ignoring the container.
- Column systems used inside the 860 container:
  - 3-col: three 244px columns, 64px gaps (value props, news cards).
  - 2-col: two 398px columns, 64px gap (all four feature sections).
  - 4-col mosaic: four ~203px cells, 16px gaps, cells may span 2 (testimonials).

**Sections, top to bottom**

1. **Nav** — fixed overlay on the illustration, 76px tall.
2. **Hero** — full-bleed painterly landscape occupying the top ~460px, fading to white; centred eyebrow-free headline, subhead, one pill CTA on the white below.
3. **Logo wall** — one small centred caption line + six greyscale partner wordmarks in a row.
4. **Stats band** — three stats, left-aligned, spread across the container.
5. **Value trio** — one left-aligned H2 spanning the container, then three icon + title + paragraph columns.
6. **Testimonials** — centred H2 + one-line sub, then a 4×2 tile mosaic mixing portraits, logo tiles and quote tiles.
7. **Platform diagram** (warm grey band) — left header block + right "Explore" button, then a centred hub diagram: one glowing amber lozenge with four white pills orbiting it.
8. **Feature A** — header row, then mock panel LEFT / checklist RIGHT.
9. **Feature B** — header row, then checklist LEFT / mock panel RIGHT.
10. **Feature C** — header row, then mock panel LEFT / checklist RIGHT.
11. **Feature D** — header row, then checklist LEFT / logo-chip panel RIGHT.
12. **Trust band** (warm grey) — heading + paragraph + button left, three certification seals right.
13. **News** — "News" H2 left, "See more" link right, three article cards.
14. **Footer** — full-bleed painterly dusk landscape; 5 link columns over its top third, legal row at the very bottom.

---

## 2. Scroll map

Viewport assumed 1440 × 900. Nothing pins; nothing stacks. Total scroll = total height.

| § | Section | Height | Viewports | Scroll consumed | Kind |
|---|---|---|---|---|---|
| 1 | Nav | 76 (overlay, 0 flow) | — | 0 | static (state change at 120px scroll) |
| 2 | Hero | 820 | 0.91 | 820 | entrance + scroll-linked parallax |
| 3 | Logo wall | 180 | 0.20 | 180 | entrance |
| 4 | Stats band | 250 | 0.28 | 250 | entrance |
| 5 | Value trio | 440 | 0.49 | 440 | entrance |
| 6 | Testimonials | 820 | 0.91 | 820 | entrance |
| 7 | Platform diagram | 820 | 0.91 | 820 | entrance + scroll-linked |
| 8 | Feature A | 780 | 0.87 | 780 | entrance |
| 9 | Feature B | 780 | 0.87 | 780 | entrance |
| 10 | Feature C | 780 | 0.87 | 780 | entrance |
| 11 | Feature D | 780 | 0.87 | 780 | entrance |
| 12 | Trust band | 420 | 0.47 | 420 | entrance |
| 13 | News | 600 | 0.67 | 600 | entrance |
| 14 | Footer | 520 | 0.58 | 520 | scroll-linked parallax |

**Total page height: ~7,990px ≈ 8.9 viewports.** (All heights inferred from the page composite; no motion report accompanied this capture.)

---

## 3. Spacing

- **Section padding:** white sections 120px top / 120px bottom. Warm-grey bands (§7, §12) 100px / 100px. §3 logo wall is the tight one: 56px / 56px.
- **Hero:** illustration band 460px from the top edge; 100px from the bottom of the art's fade to the H1; H1 → subhead 24px; subhead → CTA 40px; CTA → section end 120px.
- **Section header block** (§7–§13): eyebrow → H2 **12px**; H2 → paragraph **20px**; header block → content grid **64px**. The "Explore" button sits on the H2's first-line baseline row, flush right of the container.
- **Grid gaps:** 3-col 64px; 2-col 64px; testimonial mosaic 16px; feature checklist rows separated by hairlines with 18px padding above and below; news cards 64px.
- **Inside cards:** mock panels 40px padding; white callout cards 20px padding; news card image → title 20px, title → meta 14px.
- **Stats:** number → label 10px; the three stat blocks are spaced by `justify-content: space-between` inside the 860, not by an even grid.
- **Rhythm:** the page alternates white → white → grey → white ×4 → grey → white → illustration. Keep the 120px section rhythm absolutely constant; the only breathing changes come from the grey bands, not from varying padding.

---

## 4. Type

**Class:** a neutral **neo-grotesk** with slightly narrow, low-contrast letterforms and a tall x-height. Headings are *medium*, never bold. Free stand-ins: **Inter Tight**, **Geist Sans**, or **Instrument Sans**. One family for the whole page; no serif, no mono, no display face.

Body anchor: **17px** at 1440. All other levels given as a multiple of it.

| Level | Multiple | Size | Line-height | Tracking | Weight |
|---|---|---|---|---|---|
| Hero H1 (§2) | 3.3× | 56px | 1.12 (63px) | −0.02em | 500 |
| Section H2 (§5, §7–§13) | 2.35× | 40px | 1.20 (48px) | −0.015em | 500 |
| Centred H2 (§6) | 2.1× | 36px | 1.20 | −0.015em | 500 |
| Stat number (§4) | 2.1× | 36px | 1.10 | −0.02em | 500 |
| Diagram lozenge label (§7) | 1.65× | 28px | 1.0 | −0.01em | 500 |
| Hero subhead / lead | 1.06× | 18px | 1.55 | 0 | 400 |
| Body / running text | 1× | **17px** | 1.60 | 0 | 400 |
| Card & feature title | 1.2× | 20px | 1.35 | −0.01em | 500 |
| Small body (feature, card, band) | 0.88× | 15px | 1.55 | 0 | 400 |
| Nav links, buttons | 0.88× | 15px | 1.0 | 0 | 450–500 |
| Eyebrow label (§8–§11) | 0.76× | 13px | 1.2 | +0.06em, uppercase | 500 |
| Stat label, logo-wall caption, news meta, footer links | 0.76× | 13px | 1.4 | 0 | 400 |

Nothing below 13px anywhere; nav and buttons stay at 15px.

**Max line length:** hero subhead 44ch (hard-wrap to 2 lines); section paragraphs 62ch; feature small body 46ch; card body 38ch; footer links single-word to 3-word.

**Placeholder copy by role**
- Hero H1: 5–6 words, forced onto **two lines** of similar length.
- Hero subhead: 2 lines, ~18 words total.
- Hero CTA: 2 words.
- Logo-wall caption: 1 line, 6–9 words, 13px grey.
- Stats: value like `10.6x` / `37%` / `4.8x`, label 2–3 words under each.
- §5 H2: one line, 6–7 words, two sentences of 3 words each reads well here.
- §5 columns: title 2–3 words, body 3 lines / ~24 words.
- §6 H2: 3 words centred; sub 1 line, ~14 words.
- §7–§11 H2: 5–7 words on **two lines**; eyebrow 1 word; paragraph 2 lines.
- Feature checklist rows: 2–4 words each; the expanded one adds a 2-line body.
- §12: heading 3 words, paragraph 2 lines.
- §13: heading 1 word; card titles 6–9 words over 2 lines; meta = category + date.

---

## 5. Colour

| Hex | Role |
|---|---|
| **#FDFDFD** | Page surface — the dominant colour, ~65% of all pixels. Every non-band section, every card fill. |
| **#F4F3F0** | Warm grey band (§7, §12) and the fill of every mock panel. The only "second surface". (inferred) |
| **#D9D8D6** | Hairlines: all 1px borders, dividers, mock-UI chrome, pill outlines. Never used as a text colour. |
| **#16160F** | Ink — headings, stat numbers, primary button fill, footer legal text. (inferred warm near-black) |
| **#6B6B64** | Secondary ink — all body paragraphs, labels, meta, nav links at rest. (inferred) |
| **#E7A549** | **The single accent.** Allowed in exactly three places: the diagram lozenge's gradient end (§7), its outer glow, and nowhere else in UI chrome. |
| **#F9C9A7** | Accent's pastel half — the lozenge gradient start, the hero sky's apricot band, and the fill of one testimonial quote tile. |
| **#89D4ED** | Illustration only: hero upper sky and water. Forbidden in buttons, links, icons or focus rings. |
| **#8CA86A / #4F7A5E** | Illustration greens — hero hills (lighter) and footer dusk foliage (deeper). (inferred) |

Rules: buttons are **ink on white / white on ink**, never amber. Links do not get a colour — they get an underline. There is no success-green, no error-red, no brand blue anywhere in the interface layer. Check-marks in feature lists are ink at 60%, not green.

---

## 6. Surface

- **Borders:** 1px solid #D9D8D6 on every card, pill, mock panel and input. Hairlines between checklist rows are the same colour at 60% opacity. No 2px borders anywhere.
- **Radii:** buttons and orbit pills `999px`; news cards, testimonial tiles and mock panels **16px**; white callout cards inside panels **12px**; mock-UI rows **8px**; certification seals are circles.
- **The lozenge is the one organic shape:** a superellipse / blob, roughly `border-radius: 50% / 46%` on a 380×150 box, slightly asymmetric — not a plain pill.
- **Shadows:** essentially none. Cards are defined by borders alone. Two exceptions: the four orbit pills carry `0 1px 2px rgba(0,0,0,0.06)` so they read as floating above the grey band, and the lozenge carries a glow, not a shadow: `0 0 90px rgba(231,165,73,0.38), 0 0 30px rgba(249,201,167,0.55)`.
- Mock panels: #F4F3F0 fill, 1px border, 16px radius, containing one white sub-card with its own 12px radius and border — a card inside a card, never an image of a screenshot.

---

## 7. Imagery

1. **Hero landscape** — full-bleed, 1440 × 460 (≈3.1:1 crop of a wider scene). A flat, painterly gouache illustration: layered rolling hills in sage and olive, a pale river curving from mid-frame to the lower left, soft blue ridges behind, a long banded sunset sky going apricot near the horizon to pale cyan at the top. Slight paper grain, no outlines, no vector gradients-as-art. Its bottom 140px fades to #FDFDFD so the headline sits on clean white.
2. **Testimonial mosaic, six tiles**, all 16px-radius, filling a 4×2 grid:
   - Row 1: [1 col] flat pale tile carrying a greyscale customer wordmark · [1 col] square portrait, one person, neutral clothing, daylight, slightly desaturated, looking at camera · [2 col] apricot-gradient quote tile with a small top-left label and a 3-line quote in ink.
   - Row 2: [2 col] photographic tile — a green landscape with a white quote overlaid and a small wordmark bottom-left · [1 col] deep navy tile with a reversed wordmark · [1 col] second square portrait, different background tone.
3. **Four product-UI mocks** (§8, §9, §10) — rendered interface fragments, not photographs: a verification step list with one row selected; a case-review queue with collapsible rows; a vertical timeline of compliance events. Grey chrome, one ink-coloured active state each.
4. **Data-provider chip grid** (§11) — 6–7 greyscale logo chips scattered around a small ink star/asterisk glyph at the centre of a grey panel; chips are white pills with hairline borders.
5. **Three news thumbnails** — 4:3, 12px radius: one abstract illustrated card in the same painterly language, one editorial portrait, one geometric pattern in warm tones.
6. **Certification seals** (§12) — three ~72px greyscale marks in a row, one of them a dotted-ring circular seal.
7. **Footer landscape** — full-bleed, 1440 × 520 (≈2.8:1), same painterly hand as the hero but at dusk: a foreground tree at left, still water, distant peaks, deeper greens, a muted violet-to-peach sky. Darker in its lower half so white legal text stays legible.

---

## 8. Motion

> No motion report accompanied this capture. **Every value below is (inferred)** from the stills and the page composite; durations and easings are build targets, not measurements. Where timing genuinely cannot be inferred, it is marked "not measured" with a range.

**§1 Nav**
- kind — static (with one non-scroll-choreographed state change)
- what moves — the bar background and its bottom hairline
- from → to — background `transparent` → `rgba(253,253,253,0.88)` + `backdrop-filter: blur(12px)`; bottom border `transparent` → 1px #D9D8D6; link colour unchanged
- range — threshold state, not scroll-linked: crosses at 120px of scroll, reverses above it; transition 200–260ms (not measured)
- reduced motion — the state still swaps, instantly, with no blur transition

**§2 Hero**
- kind — entrance + scroll-linked parallax (inferred)
- what moves — (a) illustration layers: sky, far ridges, near hills; (b) H1 lines, subhead, CTA
- from → to — entrance: H1 lines `opacity 0, translateY 20px` → `opacity 1, translateY 0`; subhead and CTA same, smaller travel (12px). Scroll-linked: far ridges `translateY 0 → −40px`, near hills `translateY 0 → +24px`, sky `scale 1 → 1.04`; the white fade band holds still.
- range — entrance fires **once on load**, 600–750ms (not measured), easing `cubic-bezier(0.22, 1, 0.36, 1)`, stagger 90ms in the order H1 line 1 → H1 line 2 → subhead → CTA. Parallax is **scroll-linked and reverses**: from page scroll 0 until the hero's bottom reaches the viewport top (820px of scroll).
- reduced motion — no parallax at all, illustration is fixed; text appears at final position with a 150ms opacity fade only

**§3 Logo wall**
- kind — entrance, plays once
- what moves — caption line, then the six wordmarks
- from → to — `opacity 0 → 0.55` for the marks (they rest greyscale at 55%), `translateY 10px → 0`
- range — trigger: section top reaches 85% of viewport height; 450–550ms (not measured); easing `ease-out`; stagger 50ms left to right
- reduced motion — opacity only, no stagger, 150ms

**§4 Stats band**
- kind — entrance, plays once
- what moves — each stat block (number + label together)
- from → to — `opacity 0, translateY 16px` → `opacity 1, translateY 0`
- range — trigger: element top reaches 80% of viewport; 500–600ms (not measured); easing `cubic-bezier(0.22, 1, 0.36, 1)`; stagger 80ms across the three
- reduced motion — opacity fade, 150ms, no translate

**§5 Value trio**
- kind — entrance, plays once
- what moves — H2 first, then the three columns
- from → to — `opacity 0, translateY 18px` → `opacity 1, translateY 0`
- range — trigger: element top reaches 80% of viewport; 500–600ms (not measured); `ease-out`; H2 leads, columns follow with 80ms stagger
- reduced motion — opacity only

**§6 Testimonials**
- kind — entrance, plays once
- what moves — centred header, then the six mosaic tiles
- from → to — tiles `opacity 0, translateY 24px, scale 0.985` → `opacity 1, translateY 0, scale 1`
- range — trigger: each tile's top reaches 85% of viewport; 550–650ms (not measured); easing `cubic-bezier(0.22, 1, 0.36, 1)`; stagger 70ms in reading order (row 1 left→right, then row 2)
- reduced motion — tiles fade in together, no scale, no travel

**§7 Platform diagram**
- kind — entrance + scroll-linked (inferred)
- what moves — header block; the four orbit pills; the amber lozenge and its glow
- from → to — entrance: lozenge `opacity 0, scale 0.92` → `opacity 1, scale 1`; pills `opacity 0, translate 14px *outward-to-home*` (top pill from +14px Y, left pill from −14px X, etc.) → `0`. Scroll-linked: the lozenge's glow radius/opacity ramps `0.5 → 1` and the whole diagram `translateY +30px → −30px` as the section crosses the viewport.
- range — entrance once, when the diagram's top reaches 80% of viewport; 650–800ms (not measured); lozenge leads, pills stagger 90ms clockwise from the top pill. The glow and drift are **scroll-linked and reverse**: from the section top entering the viewport until the section bottom leaves the viewport top.
- reduced motion — no drift, glow held at its mid value, lozenge and pills fade in together over 150ms

**§8 Feature A / §9 Feature B / §10 Feature C / §11 Feature D** *(identical treatment, four times)*
- kind — entrance, plays once, per section
- what moves — eyebrow + H2 + paragraph + "Explore" button as one header group; then the mock panel; then the checklist rows individually
- from → to — header group `opacity 0, translateY 18px` → `0`; panel `opacity 0, translateY 28px` → `0`; checklist rows `opacity 0, translateY 12px` → `0`; the expanded callout card also goes `scale 0.98 → 1`
- range — trigger: element top reaches 80% of viewport; 500–650ms (not measured); easing `cubic-bezier(0.22, 1, 0.36, 1)`; order header → panel → rows, rows stagger 60ms top to bottom. The panel and the list start together, not sequentially, so the two columns arrive as a pair.
- reduced motion — opacity only, all elements at once, 150ms

**§12 Trust band**
- kind — entrance, plays once
- what moves — left copy group, then the three seals
- from → to — `opacity 0, translateY 16px` → `opacity 1, translateY 0`; seals additionally `opacity 0 → 0.7` (they rest greyscale)
- range — trigger: section top reaches 80% of viewport; 500ms (not measured); `ease-out`; seals stagger 70ms
- reduced motion — opacity only

**§13 News**
- kind — entrance, plays once
- what moves — header row, then the three cards
- from → to — cards `opacity 0, translateY 24px` → `opacity 1, translateY 0`; card images `scale 1.04 → 1` inside their clipped frames
- range — trigger: card top reaches 85% of viewport; 550–650ms (not measured); easing `cubic-bezier(0.22, 1, 0.36, 1)`; stagger 80ms left to right
- reduced motion — opacity only, images at scale 1 throughout

**§14 Footer**
- kind — scroll-linked (inferred)
- what moves — the dusk illustration behind the static link grid
- from → to — illustration `translateY −50px → 0` and `scale 1.03 → 1`; link columns and legal row do not move
- range — scroll-linked and reversing: from the footer's top entering the viewport until the page bottom is reached (520px of scroll)
- reduced motion — illustration fixed at its final position

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

- **Nav link hover:** colour #6B6B64 → #16160F, 150ms; a 1px underline wipes in from left, 180ms `ease-out`.
- **Primary pill button hover:** background #16160F → #2C2C26, 160ms; **press:** `scale 0.98`, 90ms.
- **Secondary / "Explore" pill hover:** border #D9D8D6 → #16160F, background stays white, the trailing arrow glyph nudges +3px x, 160ms.
- **Testimonial tile hover:** border darkens to #C9C8C5 and the inner photo scales 1 → 1.03 within its clip, 300ms `ease-out`. No lift, no shadow.
- **News card hover:** image `scale 1 → 1.04`, 350ms; title gains a 1px underline.
- **Orbit pill hover (§7):** background white → #FDFDFD with border → #16160F, 160ms; the lozenge glow brightens ~10%.
- **Checklist row open/close (§8–§11):** height auto-transition 260–320ms `cubic-bezier(0.4, 0, 0.2, 1)`, body content fades 0 → 1 over the last 160ms; the chevron rotates 0 → 180°.
- **Focus:** 2px ink outline at 2px offset. Never amber, never blue.

---

## 9. Responsive (below 640px)

- Container becomes full width minus **20px** gutters; the 860 cap is irrelevant, but keep the page feeling inset — do not let text touch the edges.
- **Nav:** links collapse to a hamburger; logo left, CTA pill stays visible but shrinks to 14px text and 12px horizontal padding.
- **Hero:** illustration band drops to 320px tall; H1 to 2.0× body (34px), line-height 1.15, still two lines; subhead 17px; CTA becomes full-width within the gutters.
- **§3 Logo wall:** six marks wrap to 3 × 2 with 24px gaps, or become a slow marquee — never shrink below 60% of their desktop size.
- **§4 Stats:** three across → a single column, 28px number, 32px gap, left-aligned, hairline dividers between.
- **§5 Value trio:** stacks to one column, 40px gaps.
- **§6 Mosaic:** collapses to a **1-column stack of square tiles**, 12px gaps; drop the second logo tile if length becomes a problem. Alternatively a horizontal snap carousel — do not try to preserve the 4-col spans.
- **§7 Diagram:** the orbit dies. Vertical stack: top pill, lozenge (full width minus gutters, 120px tall), then the remaining three pills in a row that wraps. Kill the parallax drift, keep the glow.
- **§8–§11:** always stack copy → panel, **ignoring the desktop alternation** — every section reads the same way on mobile. Mock panels go 4:3 and 24px padding. The "Explore" button moves below the paragraph, left-aligned.
- **§12:** copy then seals; seals shrink to 56px, centred row.
- **§13:** three cards → single column, or a horizontal snap row with the third peeking.
- **§14:** 5 link columns → 2 columns; illustration height 380px; parallax dropped; legal row wraps to two lines.

---

## 10. Don'ts

- **Don't widen the container.** The narrow 860px measure against a 1440 window is the composition. A 1200px or full-width grid destroys it instantly.
- **Don't make the hero a photograph, a gradient mesh, or a 3D render.** It's a flat painterly illustration with visible brush-flat colour fields and grain. And don't let it be a card with rounded corners — it is full-bleed and fades to white at its base.
- **Don't spread the amber around.** The instinct will be to colour the buttons, icons, check-marks, links and eyebrow labels with #E7A549. Resist all of it. The amber appears on one shape, once, at §7. Its power is scarcity.
- **Don't reach for a SaaS blue, indigo or violet.** The only blue on the page is inside the illustration's sky.
- **Don't bold the headings.** Max weight 500 anywhere on the page, including the stat numbers. 700 headings make it look like a generic startup template.
- **Don't uppercase headings** — only the 13px eyebrow labels are uppercase.
- **Don't add card shadows.** Borders do all the work. The only soft light on the page is the lozenge glow, and that's a glow, not a drop shadow.
- **Don't centre the body sections.** Only the hero, logo wall, §6 header and the §7 diagram are centred; §5 and §8–§13 are left-aligned within the container.
- **Don't pin anything.** No sticky scenes, no horizontal scroll, no scroll-jacking. Two parallaxes and a set of 500ms entrances is the entire motion budget — the page is 8.9 viewports of deliberate calm.
- **Don't count up the stat numbers.** They fade in already at their final value.
- **Don't convert the §7 diagram into a flowchart** with arrows, connector lines and boxes. There are no lines; the four pills simply orbit the lozenge and the relationship is positional.
- **Don't make the orbit pills the same size as the lozenge** — they're small, white, hairline-bordered, roughly a third of its width.
- **Don't over-round.** 16px on cards, 12px inside, 999px on pills. A 24px+ radius on cards makes it soft in the wrong way.
- **Don't screenshot a real product** for the mock panels. Build them from grey rows, hairlines and one ink-coloured active state — abstract enough to read as "interface", never legible as a specific app.
- **Don't let the footer illustration be a solid dark block.** It's the same painterly hand as the hero, at dusk, with white text sitting over its darker lower half.
- **Don't add a dark mode toggle, a gradient headline, a glassmorphic card, or an "AI" glow border.** None of those belong to this system.