Analytics dashboard

The interface of a SaaS analytics product: making dense numbers legible at a glance, without drowning the decision in graphics.

Role: Design & build, end to end
Stack: Astro · React · TypeScript · Tailwind CSS

02

The problem: Most dashboards stack widgets until nothing stands out. The data is there, but the hierarchy is missing — you can’t say in three seconds what’s healthy, what’s drifting, and what needs looking at right now.
The craft: The approach is editorial. A strict grid, a single display voice for the key figures, the rest in mono for labels and units. Colour is used only to signal — a rare warm accent for what needs attention, never to decorate. Loading, empty and error states are treated as screens in their own right, not as edge cases. Motion kept to the strictly useful: transform and opacity, no movement for its own sake.

03

On its real screens

04

In detail

The intent

Take the classic analytics-dashboard problem and hold it to the same editorial standard as the rest of the brand. The point isn’t to show more charts — it’s to make a decision faster.

Hierarchy first

The first question isn’t “which charts” but “what should the eye read first”. The headline metrics take the display voice and the space; detail sits below, in mono, available but quiet. Typographic hierarchy does the sorting so the user doesn’t have to.

Colour as signal

On a neutral stone background, the warm accent is rare by choice: it marks what’s drifting or what calls for action. When everything is calm, the screen stays calm. That’s a discipline, not a technical limit.

States aren’t edge cases

Loading, empty, error: three screens designed at the same level as the nominal state, because that’s where a serious product separates itself from a mockup.

Scope

In development. The figures shown are fictional — a ground to show a way of handling density.

Start a similar project All work