Description
Tune dashboard card density (padding, gutters, type hierarchy) to improve scannability and reduce visual clutter without changing data behavior.
Requirements and context
- Must remain consistent with dark surface/border tokens.
- Numeric values should use a consistent emphasis pattern.
- Empty states must be clear and actionable.
Suggested execution
Fork and branch
Fork the repo and create a branch:
git checkout -b design/dashboard-cards
Implement changes
- Review
src/pages/Dashboard.tsx and src/pages/Dashboard.css.
- Standardize spacing between sections and within cards.
- Improve empty state visuals and microcopy if needed.
Test and commit
Validate at multiple viewport widths and include before/after screenshots.
Run tests
Example commit message
chore(design): tune dashboard card density and hierarchy
Guidelines
Description
Tune dashboard card density (padding, gutters, type hierarchy) to improve scannability and reduce visual clutter without changing data behavior.
Requirements and context
Suggested execution
Fork and branch
Fork the repo and create a branch:
Implement changes
src/pages/Dashboard.tsxandsrc/pages/Dashboard.css.Test and commit
Validate at multiple viewport widths and include before/after screenshots.
Run tests
npm testExample commit message
Guidelines