Dashboards

Name the question first

A dashboard answers one question, for one person, on one visit: is anything wrong, how are we doing, what needs me today. Everything on the screen either serves that question or is decoration. A page that answers three answers none of them well — that is what a second dashboard is for.

The five layers

A dashboard is not a grid of cards, it is a page read from the top down, and each band answers the same question at a different depth: what, then why, then what now. In the survey a figure came first on 40 of 51 pages, and the strongest adjacency of all was a figure followed by a list — 36 occurrences. That order is not a convention, it is how people read.

Four or five layers is a page. Six is two pages pretending to be one.

Rhythm is what makes it feel designed

The layers must not be the same shape. Narrow, then wide, then medium — the width changing down the page is what stops a dashboard reading as a spreadsheet with rounded corners. Four quarters, then an eight and a four, then two halves: no two consecutive bands share a split.

Space groups; borders separate

The gap between layers is larger than the gap within one — .b-gap-6 between bands, .b-gap-3 or .b-gap-4 inside them. That difference alone does the grouping, which is why a well-spaced dashboard needs almost no rules and no boxes around things.

What the first screen owes you

Context and verdict, plus the top of the evidence. Someone who reads nothing else must still leave knowing whether anything is wrong. If the verdict needs scrolling, the layers above it are too tall — that is usually a hero, a greeting or a banner earning space it has not justified.

Six archetypes

Variety comes from choosing a different archetype, not from decorating the same one. Most dashboards are an Overview because it is the shape that gets built by reflex.

Composition

Widths are full, half, third or quarter, and spans in a row total twelve. Those four are the entire vocabulary the surveyed templates use; anything else reads as a mistake.

Four quarters, then an eight and a four. One dominant element — the chart — and the rest in service of it. If every card is the same size the page reads as a spreadsheet with rounded corners, whatever is in it.

White space

Space is the only thing on a dashboard doing structural work that nobody notices. Four rules cover almost every case.

One padding for the whole page. Every card takes the same inner padding — .b-card__body already does this. Cards padded differently read as pieces of different systems bolted together, which is the commonest reason a competent dashboard still looks cheap.

Space between layers exceeds space within them. .b-gap-6 between bands, .b-gap-3 inside one. Equal gaps everywhere leave the eye no grouping to find, and the page becomes a wall.

Air scales with the element. A figure tile is tight — the number is the content and space around it is wasted. A chart needs room to breathe or its axis labels collide with whatever is beside it. Do not give them the same treatment because they are both cards.

Empty space is a question, not a feature. A region with nothing in it means either the layer should not exist or something failed to load. Say which — with .b-empty — rather than leaving a gap the reader has to interpret.

A row of cards should not stretch to match its tallest. Grid stretches by default, so a short card grows a band of dead space at its foot — exactly the empty region the rule above says must mean something. Set align-items: start and let the cards differ, or give the short one more to say. This one was found by building a page from these rules and looking at it, which is the only way rules get tested.

Text on a dashboard

Nothing here is prose. A dashboard is read in glances, so every string is a label, a figure or a caption — and if something genuinely needs a sentence to explain it, it belongs on a detail page.

Three roles to a card, at most. A label (.b-caption or .b-stat__label), the thing itself (.b-stat__value or .b-title3), and one line of context (.b-footnote). A fourth size in the same card is decoration.

Weight goes to one of them. A bold label above a bold value makes the reader choose where to look, which is the one job the designer was supposed to do. The figure carries the weight; the label stays quiet.

Labels are two or three words, sentence case, no colon. "Messages sent", not "Total Messages Sent:". The colon is a form habit — a dashboard is not a form.

Figures take .b-tabular-nums, always, and the unit is quieter than the number: TZS and % belong in secondary text so the digit is what the eye lands on. A delta states direction and period together — "↑ 8.2% this week" — because an arrow with no timeframe is a shape, not a fact.

How many pages a dashboard product has

Counted across the same six products — 163 genuine product pages, once component demos are set aside. It is a useful check on whether a product is finished.

Two things stand out. Lists outnumber dashboards in use even though dashboards get the design attention — a product whose table is an afterthought is neglecting the screen people actually live on. And settings is 3% of the pages and a daily destination, which is the widest gap between effort and use in the genre.

Choosing a chart

Time is a line or an area. Comparison across categories is a bar. Those three were 84% of every chart in the survey — 97 of 115.

The shape people reach for first is the one professionals use least: four pie or donut charts in 457 pages. And a number that matters more than its trend is a .b-stat, not a chart at all.

Four states, not one

Every widget has a loading state, an empty state, an error state and a loaded state. Design all four or the page only works on a good day. In 457 pages, three had a message for having no data.

Loading is .b-skeleton in the shape of what is coming. Empty is .b-empty with the action that ends it. An error says what failed and what happens next, rather than leaving a card blank and hoping.

Density

A table on a dashboard shows five to ten rows and links to the full list — it is a sample, not the archive. Columns of figures take .b-tabular-nums or the digits jitter as they update. A delta states direction and period together: "↑ 8.2% this week", never a bare arrow.