Page type · 7 assets
Dashboard shell
A dashboard is the layout people stare at for hours, so restraint beats personality. The shell has to stay quiet while the data changes: fixed navigation, a predictable content grid, and colour reserved for meaning rather than decoration.
What to get right
- Colour carries state, not branding. Red should mean something is wrong, which means the brand cannot also be red.
- A single content grid the panels snap to, so nothing drifts as the data changes underneath it.
- Muted text and borders doing the separating, not heavy rules or shadows. Weight is a limited budget and the data should spend it.
- Dense type that still clears 4.5:1. This is where most dashboards quietly fail, because small grey text on white tests badly and looks fine.
- Empty states designed before the full ones. A new account sees the empty dashboard first, and it is usually the screen nobody drew.
- Numbers aligned on the decimal and set in a tabular figure, so columns stay scannable when the values change width.
The archetype taken apart section by section, down to the tokens you rebuild it with.
Rendered layouts
Our own renders of the archetype, each wired to the palette, breakdown and template behind it.
Each is an installable shadcn/ui theme and a DESIGN.md for your agent.
npx shadcn@latest add https://csscreme.com/r/mono-slate.json Seen one in the wild?
Point the decoder at any live dashboard and pull its real type scale, spacing rhythm, radii and shadows, plus an accessibility read — then copy the whole thing as a DESIGN.md. Or drop a screenshot into the extractor if you only need the colours.