# ChromeBar

The 52px charcoal bar on every desktop app surface — the P2 `chrome-bar`. Wordmark in a 236px column that lines up with the rail below it, then the search well (inbox) or the section pills (dashboard), then sync status, the voice button and the avatar.

```html
<header class="postie-chrome postie-brand">
  <a class="postie-chrome__mark" href="/">Postie</a>
  <label class="postie-search postie-chrome__search" for="q">…</label>
  <div class="postie-chrome__end">
    <span class="postie-chrome__status">4 accounts · synced 2s ago</span>
    <button class="postie-voice postie-voice--chrome" aria-label="Hold to speak">…</button>
    <a class="postie-avatar" href="/settings" aria-label="Account settings">FW</a>
  </div>
</header>
```

**When.** Once per desktop app screen, full width, at the top. It is the brand: it does not change with theme. On small surfaces (mobile, email) use Masthead instead.

**Never.**
- Never a light or paper chrome on the light theme — that was the faded light pass the owner rejected. The chrome is `#1F1D1E` in both.
- Never oxblood text on it; the accent on the chrome is the lifted `#E4606C` (Compose +) or the voice fill.
- Never a toolbar of icons, a notification bell, a badge count in the bar (brief `never`: faceless-giant dense toolbar chrome, badge clutter).
- Never taller than 52px; never a border or shadow under it — the rail's tonal step does the separating.
- Never a logo mark beside the wordmark; type carries the mark until a mark exists.