Dashboard & data UI
SaaS dashboards, admin panels, BI and analytics interfaces. We start from the decision the screen exists to support, then work backwards to the chart.
Overview
live · this session
Dashboard & data-UI studio
We design the dashboard your users live in.
Most products ship a capable engine behind a screen nobody can read. We design that screen — analytics, admin, BI, internal tools — and hand it over as working front-end code and a token set, not a folder of frames.
The problem
Ten thousand rows is not an answer.
Dashboards rarely fail because the data is wrong. They fail because every number is given the same weight, and the reader is left to do the ranking the software should have done. Here is the list we work through on a first read — sort it, the header works.
| Everything is the same size | KPI row | No answer to "what first?" | critical |
| Colour used for decoration | Charts | Meaningful colour goes unread | critical |
| Numbers set in a proportional face | Tables | Columns cannot be scanned | high |
| Filters that lose their state | Toolbar | The same work, done twice | high |
| Empty states that say "No data" | First run | New users never start | critical |
| A chart per metric, forever | Overview | Scrolling instead of knowing | medium |
| Density that cannot be changed | Grid | Power users leave for a CSV | medium |
What we do
Three things, done properly.
A small studio, so the work is narrow on purpose. If your problem is a marketing site or a mobile app, we are the wrong people and will say so on the first call.
Design systems in code
Tokens, components and themes delivered as a working library your engineers import — light and dark, density modes, and the documentation that keeps it alive.
Instrumentation
What to measure, how to show it, and how to tell a real signal from a flattering one. The part most dashboards skip, and the reason so many go unread.
Theme lab
A design system is not a picture of one.
This page is built from the same kind of token set we hand to clients. Which means you can take it apart from here, live, without a build step — and so can their engineers.
Live tokens
Retheme this page.
Theme
Density
Four properties, one stylesheet, every surface on the site. Drag depth to zero and watch how much of this design was elevation doing the work.
Components
The vocabulary.
Every chart here is drawn by hand — no charting library, no icon package. It keeps the page under a tenth of the weight of a typical agency site, and it means a chart can be made to match a design rather than the other way round.
Trend+408%
Smoothed series with a fading fill. One path, no dependency.
Inverse trend−58%
The same component, reading a metric where down is good.
Feature adoption4 of 4
Value drives width and brightness, so the ranking survives a glance.
Activity density24 × 7
Opacity as magnitude — the channel the eye reads fastest.
Process
One to three months, end to end.
Set the length and the plan rescales — a four-week job and a twelve-week job are the same shape at different sizes. Drag the marker to see what is running in any given week, or pick a phase to read what it involves.
Typical engagement
2 months, start to handover
PhaseWeeks
12345678
wk 4
Built inFlutterRustiOSTypeScript
Principles
The rules this page is built on.
Stated plainly, because a studio should be willing to be held to its own work. Everything you have scrolled through follows all four.
Cards, not strips
Every block of content is a card with the same radius and padding. Alignment comes from one shared gutter, not from rules drawn between full-width bars.
Numbers are monospaced
Counts, codes and durations line up column to column, so the eye scans down a column instead of reading across a row.
One accent, spent once
Colour carries meaning — severity, status, the next action. Spending it on decoration is what makes the meaningful uses invisible.
Depth over ornament
Hierarchy comes from elevation and value. A surface that is raised is available; a surface pressed in is holding something.
New project
Tell us what your users are trying to find out.
Send the screen you are least happy with. You will get a written read on it within two working days — what it is doing to your users, and what we would change first. No deck, no discovery call to book.