Page header
The top of every product page: title, sub, meta pills, and one or two actions. The first thing the operator reads on a new surface.
Default
Title + lede + meta-pill row, with up to three buttons on the right (one primary).
Park Centre · today
Tuesday 3 June · 14:38. Three tills open, one cashier on lunch. Yesterday closed clean.
With tabs
A header followed by a segmented tab strip on the same surface.
Operations overview
Mazowe plant. Two pours completed. One settlement pending.
Compact
Detail-page variant: smaller title, breadcrumb, and a back arrow.
Receipt R-19281 · $ 17.21
Anatomy
| Property | Value | Notes |
|---|---|---|
| title | --type-page-title (26 px) | Or 18 px compact |
| lede | 14.5 / 1.55 | Max 60 ch |
| gap | 24 px between title and actions | — |
| actions | Up to 3 | One primary; rest secondary or quiet |
Do & don't
Lead with the noun. "Park Centre · today" tells the operator what surface they’re on and why now.
Use long marketing-style headings like "Welcome to your branch dashboard". Operators hate that.
Pin meta pills to the title row so the user sees status at a glance.
Stack 5+ buttons. Move secondary actions to a "More" menu.