Centrim Design System — a token-first, accessible React component system.
Dashboard
A complete workspace overview: page context, supporting metrics, one dominant progress story, the work that needs attention, then activity.
What it demonstrates
- User goal first — understand the state of work and spot what needs attention
- Hierarchy without cards: metrics and lists sit on the open page, only the chart and table take a surface
- One dominant data story (LineChart) with a quiet Callout reading the result out loud
- Semantic colour used for meaning only — success for trend, warning and error for due state, brand reserved for actions
- All four lifecycle states from the existing system: populated, loading skeletons, empty and error
- Recomposed responsively — sidebar collapses to a drawer, metrics stack, the table hides its least important columns
How to adapt it
- Composition: PageHeader → Metrics → primary chart → actionable list → projects table → activity.
- Keep the metric row quieter than the chart; if a figure has no decision attached, it belongs lower on the page.
- Every chart keeps its accessible summary, legend and data-table alternative — colour is never the only channel.
- Use it for an overview a person opens daily. Do not use it for a single-record view (see Details) or for bulk work (see List).
Composed from
Nothing on this screen is new. Every part is an existing component, layout or pattern.