# Testimonials wall grid > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A testimonials section for **Pebble**, a notes app. Seven short quotes sit in a 4-column × 8-row CSS grid that reads as masonry: two cards span two columns, the rest occupy single cells of uneven height. Every card has a 28px initials disc, a name, a role, and a tenure (`14 months`, `9 months`, …) that is invisible until hover or focus. One family only — Plus Jakarta Sans at 400 and 600. No serif, no second face. The feeling is a soft noticeboard, not a carousel and not a logo wall. ## Reference behaviour 1. Initial state: cool mist page `#EEF1F3`, 56px nav (irregular 14px pebble mark + Pebble + Notes / Share / Pricing + pill “Start a notebook”). Lead line: kicker “FROM THE NOTEBOOKS”, 28px heading “People who keep notes in Pebble”, right meta “**7 notes** · 4 columns · 2 wide cards”. The wall fills the remaining height. Card 1 (Mina, eucalyptus wash) spans columns 1–2, rows 1–4. Card 5 (Eva, sand wash) spans columns 2–4, rows 5–8. Quote 01 is already the largest type (20px). 2. Hover a card: it lifts `translateY(-4px)` over 240ms, border becomes `--ink`, a 10px/24px shadow at 8% ink appears. The tenure on the right of the footer fades in and rises 4px over 160ms. 3. Keyboard-focus a card (`tabindex="0"`): the same lift, border, shadow, and tenure. Outline is none because the ink border is the focus cue; a 2px eucalyptus ring still appears on nav chrome via `:focus-visible`. 4. Leave the card: lift, border, shadow, and tenure reverse on the same clocks. 5. Hover “Start a notebook”: fill changes from `--ink` to `--euc` over 0ms (colour only). 6. No click handler. Cards do not expand, flip, or navigate. 7. `prefers-reduced-motion: reduce` sets all transition durations to 1ms and cancels the 4px lift; tenure still appears. ## Structure ``` 1280 × 800 ┌──────────────────────────────────────────────────────────────────────┐ │ (pebble) Pebble Notes Share Pricing Start a notebook │ 56 │ │ │ FROM THE NOTEBOOKS 7 notes · 4 columns · │ │ People who keep notes in Pebble 2 wide cards │ │ │ │ ┌───────────────────┬──────────┬──────────┐ │ │ │ Mina (wide, euc) │ Rafi │ Asha │ rows 1–4 / Asha 1–3 │ │ │ │ ├──────────┤ │ │ │ │ │ Theo │ rows 4–6 │ │ ├────────┬──────────┴──────────┼──────────┤ │ │ │ Jun │ Eva (wide, sand) │ │ rows 5–8 / Theo 4–6 │ │ │ │ ├──────────┤ │ │ │ │ │ Noor │ rows 7–8 │ │ └────────┴─────────────────────┴──────────┘ │ └──────────────────────────────────────────────────────────────────────┘ pad 48 gap 12 radius 14 ``` - `