Each dashboard opens with a KPI strip: a horizontal row of 3 to 5 metrics shown as large numbers with trend indicators. Total clients: 847, +12% this month. Open deals: 23. Revenue MTD: R$45,200. The strip answers 'how are things going?' in under two seconds. CSS Grid with auto-fit and a 200px minimum column collapses it gracefully on mobile.
A fixed left sidebar replaces the hamburger menu. Collapsed it is 64px; expanded 240px. One toggle at the bottom switches the label. The full scope of the application stays visible at all times, like Linear, Vercel and Notion.
Tables carry sortable columns, row selection, inline status pills and a row-level action menu. Pagination uses cursor, never offset, because added or deleted rows between loads break offset pages.
An empty state needs an illustration, a one-sentence explanation and a primary button: 'No clients yet. Import your first list to get started.' Designed empty states reduce onboarding support tickets.
Skeletons show gray placeholder shapes that match the incoming layout. When the data arrives the skeleton fades out in 200 ms and the real content fades in. The page feels faster even when the API time has not changed.
Semantic tokens only: --color-success for positive, --color-warning for attention, --color-danger for critical, --color-info for neutral. Never raw color values. Theme swaps become four to six custom properties.
For color systems, I define dashboard palettes with semantic tokens: --color-success (green for positive metrics), --color-warning (amber for attention items), --color-danger (red for critical issues), --color-info (blue for neutral information). Every status pill, chart segment, and notification uses these tokens - never raw color values. This makes theming (dark mode, client white-labeling) a matter of swapping 4-6 CSS custom properties.
The Finance Planner SaaS and CETRO HUB dashboards both use these patterns. When a new client says 'I want a dashboard like that,' I don't start from scratch - I fork the component library, swap the data source, adjust the color tokens, and focus engineering time on the business logic that's actually unique to their domain.
One anti-pattern I see constantly: dashboards that show too much data on the first screen. A dashboard with 15 charts and 8 tables is not a dashboard - it's a report. A good dashboard surfaces the 3-5 metrics that drive daily decisions and pushes detailed analysis to drill-down views.
Reference: Markus Winand, pagination without OFFSET.