Borderless profile pill with a 16px chevron matching the glyph weight, 28px between the three marks, and the flame search circle kept as the field's endpoint. Messages carry a count, notifications a plain dot. Click the pill to open the menu.
Live on My Projects Desktop Minimal and Proposals Desktop C. Everything below is the exploration that led here.
On mobile the avatar opens a bottom sheet rather than a dropdown: thumb-reachable, 46px rows, and a grab handle. My Projects, Explore, Add Project and Messages are dropped from the list — they already live in the bottom tab bar — so the sheet carries only what the tabs cannot: account, language, support, role switch and log out. The avatar takes an ink ring while the sheet is open.
Header strips only, at real width. The icons are drawn at 1.5px stroke, so a 1px hairline pill sits lighter than the glyphs beside it. 6a matches the weight; 6b and 6c then ask whether the flame search circle still belongs.
The pill now reads at the same optical weight as the glyphs — one visual family across the whole right cluster. Downside: two flame marks compete up top (count badge and search circle), and the search button is the louder of the two even though it is the less urgent.
Same 1.5px thickness as 6a, but in the system's field-border grey instead of ink-600 — so the pill still holds its own beside the 1.5px glyph strokes while sitting a step back from them. Best of the set: the shape reads as a control, the corner stays quiet, and the avatar remains the only tinted mark in the cluster.
My pick. Search becomes an ink circle, so the border weight, the glyph stroke and the two filled marks are all ink — and the only flame left in the header is the message count. It also frees flame for what the system reserves it for: AI and primary actions further down the page.
Most consistent on paper — the search field and the profile pill are the same outlined shape at the same weight, no filled circles at all. But the search bar loses its filled endpoint, so the whole header reads as outlines and nothing states "press here"; the field also stops looking like an input.
The 4a cluster at real width, with the search field, + Project and the page below it. Click the pill to open the menu over the content.
Header holds only account and status: the two glyphs drop to the lighter --ink-400 weight, the message count becomes an outlined bone badge instead of a flame one, the pill's border softens to a hairline, and the notification dot is the single accent up there. + Project moves down beside the page title as a solid ink action, where it belongs on a dashboard.
Header carries only status and account: 28px between the three marks so nothing crowds, and the profile pill borrows the hairline weight used everywhere else on the page (cards, dividers, the New Project button) instead of the heavier field border. + Project moves down beside the title as an outlined action, so the flame count is the single accent up top.
The profile control is 1a unchanged in all three. What varies is how the two utility icons sit next to it — messages carry a count, notifications only a dot. Click the pill to open the menu.
Bare glyphs beside the pill, so the profile control stays the only framed thing in the corner. The count sits outside the message icon as a flame pill; the bell carries an 8px dot. Lightest, and closest to what the live pages already do.
The two utilities share one tinted plate, which reads as a group and separates them from the account control. Bigger 30px targets, and the plate gives the badges a ground to sit on instead of floating on white.
One bordered pill holds all three, split by hairlines, with the avatar as the right cap. Fewest edges on the page — but the count and the avatar sit inside the same frame, so the whole thing can read as a single button.
My pick: 4b — the plate groups the two utilities without framing them individually, keeps comfortable targets, and gives the flame badges a tinted ground so they do not float on white.
Answering the note on 1a: in each of these the avatar fills the control's full height, so it becomes the shape instead of sitting inside a separate frame. One mark plus one small chevron.
The avatar is the full 38px height and overlaps the border, so the left end of the pill IS the avatar — no gap, no double outline. Keeps the clarity of 1a with one less shape.
The border is gone entirely — the tinted avatar already reads as a filled shape, and a bare chevron beside it does the rest. Two marks, no container. The lightest thing you can put in that corner and still call a menu.
The absolute floor: one 40px avatar, no chevron, no notch — the ring appears only while the menu is open. Cleanest header of all six, but nothing signals the menu before the first click.
My pick overall now: 3b — full-size avatar with a single bare chevron. It answers the note (no frame around a frame) without giving up the affordance the way 3c does.
These push on what the trigger says about the account, not just how it looks. Click any avatar to open.
The account is named in the header, so the menu confirms rather than reveals. Widest option — fine on desktop, and it degrades to 1b on narrow screens.
The menu glyph leads, so the control reads as navigation with an account attached. Familiar from booking and marketplace apps; the plate on hover keeps the two marks as one target.
States which side of the marketplace you are on, which matters when the same person is also a PRO — and it makes the For designers / For suppliers rows in the menu obviously a switch.
Across both turns: 1b if the header should stay quiet, 2c if the role matters more than the pixels — it is the only option that earns its width.
Each option is shown at rest and open, in the real header. Menu contents are identical — only the trigger changes.
Reads as a control at a glance, and the chevron names the interaction. Heaviest of the three — the border competes with the search field and the + Project pill.
Lightest, and the hamburger says "menu" more plainly than a chevron. Two glyphs side by side, so it needs the 10px gap to avoid reading as one blob.
Keeps the avatar the largest thing in the corner and adds one small notch as the affordance. Most compact; the notch is the only new mark on the page.
{{ notchNote }}
My pick: 1b — the lightest header, and a hamburger is unambiguous next to the avatar. Say the word and I'll apply it across the desktop pages.