The dashboard standard
Three elements, one power-user door, and two routes to the detail — the shell every domain in the product reuses.
Private offers, inventory, contracts and spend all answer the same three questions: how are we doing, what should I do, and can I just ask. So they get one shell. Only the domain copy changes.
Drawn in Figma on the Pattern · dashboard standard page — FPO in both routes,
Inventory applied to the same shell to prove nothing but the words move.
Three elements, in this order
The order is the argument: the answer before the action, the action before the conversation.
1 · Summary
Four figures that say where the domain stands right now. Never more than four, never a chart.
If a figure has a consequence, the consequence goes on the figure. Home used
to carry an amber banner reading "3 moves close before a renewal window —
anything still open is locked into next year's baseline" directly above a
Time-boxed · 3 moves stat. That is the same fact twice. The banner went; its
consequence became the stat's sub-line.
<MetricTile label="Expiring" value="3 offers" note="windows shut within 21 days" />2 · Recommended actions
Three to five things worth doing, ranked by value and urgency. Each states the finding, the evidence and exactly one action.
This is the screen's centre of gravity, so it gets the most vertical space and the only filled buttons on the page.
3 · Chat
Ask across the domain. Answers reshape the list in place — they do not navigate away.
Give it a heading. This is the pattern's most easily-lost detail. The ask bar originally sat between the summary and the list as a thin outlined field with suggestion chips beneath it, and reviewers did not see it at all — structurally it was a search box for the list below. Everything else on the page announced itself with a heading; the one element that was supposed to be the product's differentiator did not.
It needs all four of these to read as a conversation:
- a heading with the same weight as
Recommended actions - an assistant mark, not a magnifier
- enough height to not look like a filter row
- a filled submit button — a search field has none
Chips under it are prompts, not filters, so they are labelled Try.
Plus one door for power users
The full table is never the default. It is requested, two ways:
- By typing — "show me everything", which lands on the filtered state
- By switching view — a
▦ All 7 in a tablecontrol beside the recommended actions heading
Keeping it off the dashboard is what lets the three elements hold their weight. When the table was inline, the page was a table with some cards above it.
Two routes to the detail
Route A — with chat
Dashboard → Chat → ArtifactClicking a recommended action opens it as a conversation, with the artifact live beside the thread. The user can interrogate the finding before acting on it.
Route B — no chat yet
Dashboard → ArtifactClicking a recommended action goes straight to the detail. The dashboard is identical minus the chat block; the artifact is byte-identical.
The artifact
The detail view is a conversation on the left and an artifact panel on the right. The panel is a recessed rail holding cards, not content floating on grey — and each card answers a different question:
| Card | Answers |
|---|---|
| Situation | What is true, as one number plus the figures behind it |
| Evidence | When it happens, as one chart |
| Detail | Where it comes from, as a table that decomposes the headline |
Those three must not overlap. An earlier version put the rates in the hero, a rate comparison in the chart and a rate table underneath — three views of one fact, and no view of the other two.
Actions live in the conversation, never in the panel. The panel updates as you talk; it is a readout, not a control surface. When actions were in both, one screen offered the same primary button three times.
Charts earn their encoding
The FPO artifact first plotted cumulative list cost against cumulative offer cost, shading the gap. It was unreadable: a 14% saving on a $10M axis is a 15px wedge tapering to nothing, so the two lines merged into one thick stripe.
It was re-encoded to plot the saving itself — one curve from $0 to $1.4M across the term. Same data, and now it uses the full plot height and ties directly to the number above it.
Pick the encoding from the question the headline poses, not from the fields you happen to have.
Where it applies
| Area | Status |
|---|---|
| Private offers (FPO) | drawn, both routes |
| Inventory | drawn |
| Contracts | next |
| Spend insights | next |
| Purchase requests | next |