All screen guides Star on GitHub
Screen guide
Dashboard design
The job: Answer “how are things?” in 3 seconds, then let the user drill down.
Structure
Information pyramid — one hero metric → a small KPI set → a supporting list or chart. Vary section types; never four identical cards in a row.
Hierarchy
Density increases as you scroll. Top = a 48px hero number; bottom = 13–14px detailed rows.
Mobile
Single column, hero first, horizontal-scroll carousels for KPI sets.
Signature patterns
- Hero metric card
- KPI grid (mixed: trend / progress / comparison)
- Chart card with period toggle
- Ranked list
- Briefing carousel for alerts
Avoid
- a wall of identical KPIs
- no clear primary metric
- charts with 6 legend colors
- everything the same visual weight
Build it with StyleSeed
This is the screen-typehalf of design judgment — cross it with your app’s domain and you get the actual decisions. StyleSeed bakes both into 74 rules your AI reads automatically; for a dashboard / overview, reach for the snap motion seed.
Make your AI design a dashboard / overview right
Open-source design engine for Claude Code, Codex & Cursor. MIT.