# ProductPreview

The inbox card inside the landing hero — the P2 `paper-preview`. A working-surface card (near-black on dark, paper on light) sitting on the charcoal, so a visitor sees the split in one frame: brand ground around, working ground where the mail reads.

```html
<div class="postie-brand">…hero copy…
  <div class="postie-preview postie-working">
    <div class="postie-preview__chrome"><span class="postie-preview__mark">Postie</span><span class="postie-preview__meta">Unified · 4 accounts</span></div>
    <div class="postie-triage postie-triage--flush">…</div>
    <div class="postie-mail postie-mail--dense">…4 rows…</div>
    <div class="postie-preview__foot">…voice line…</div>
  </div>
</div>
```

**When.** The landing hero and the marketing site's product section. It is a real composition of the system's components (TriageBand, MailList dense, AccountPebble), not a screenshot — so it inherits every token change for free.

**Never.**
- Never a screenshot or a mock browser frame with traffic-light dots; the card is the product's own chrome strip and list.
- Never fake data that reads as a real customer's mail — the specimen names are the P2 fixtures; production copy is the owner's.
- Never forget `postie-working` on the card: without it the children read brand inks and the list's oxblood dots go illegal on paper.
- Never a tilt, a perspective, a floating shadow (never soft-glow, never pillowy).
- Never a "Try it" CTA inside the card; the hero's buttons are the CTA (one primary per view).