# Masthead

The brand band for small surfaces — the P2 `masthead-band`. On a phone or in an email there is no room for a brand ground and a working ground side by side, so the charcoal becomes one band at the top and the whole body below is working ground.

```html
<header class="postie-masthead postie-masthead--mobile postie-brand">
  <div class="postie-masthead__row"><a class="postie-masthead__mark" href="/">Postie</a><div class="postie-masthead__actions">…search · avatar…</div></div>
  <div class="postie-masthead__chips">…SegmentedControl lg scroll…</div>
</header>
<header class="postie-masthead postie-masthead--email postie-brand"><span class="postie-masthead__mark">Postie</span><span class="postie-masthead__meta">Account · Studio</span></header>
```

**When.** The top of every mobile screen and every email (transactional, template, marketing). It replaces ChromeBar below ~700px. Inside an email it is a table row with the same values inlined.

**Never.**
- Never a second charcoal block lower on the small surface — the band is the ONLY brand ground there; a second one is a desktop pattern squeezed into a phone.
- Never a hero image, a motif, or a tagline inside the band on transactional/account surfaces (formal set: no motif).
- Never lighten it on the light theme or in email "for deliverability" — it is `#1F1D1E`; the email body is paper.
- Never an icon-only wordmark; the word "Postie" in Nunito 800 is the mark.
