# MailList

The thread list — the working surface where the product earns its keep. Group labels in the muted kicker face, then rows: pebble, sender + account word, subject, snippet, time. Unread is the P2 `unread-dot`: a 7px accent dot before the sender and weight 700 — never colour alone.

```html
<nav class="postie-mail" aria-label="Unified inbox">
  <div class="postie-mail__group">Today</div>
  <a class="postie-thread postie-thread--unread" href="/t/1">
    <span class="postie-pebble postie-pebble--1">PN</span>
    <span class="postie-thread__text">
      <span class="postie-thread__from"><span class="postie-thread__dot"></span>Priya Nair<span class="postie-thread__account">Studio</span></span>
      <span class="postie-thread__subject">Proofs for the autumn catalogue</span>
      <span class="postie-thread__snippet">Page 12 needs your call.</span>
    </span>
    <span class="postie-thread__time">08:14</span>
  </a>
</nav>
```

**When.** Every list of threads: the desktop pane (`default`), the mobile screen (`mobile` — the first row is one raised step up, a tonal lead-in for the newest thread; a selected row still takes the selected tint), and the one-line digest inside the landing paper-preview or an email (`dense`, where the rule token is legal as a separator).

**Never.**
- Never mark unread with a coloured background, a bold blue, or a filled circle in the pebble — the dot and the weight are the whole signal.
- Never an oxblood row; the selected row is the selected tint, and hover is one raised step.
- Never drop the account word to save space — it is how four accounts read inside one charcoal ramp.
- Never a checkbox column, a star column, a label-colour column (brief `never`: faceless-giant clutter, multi-hue marks).
- Never rule lines between rows at `default` density — separation is the tonal step; rules are for `dense` only.
- Never truncate the sender; truncate subject and snippet.