Description
Governance surfaces (No proposals, No votes cast, No delegates) need warm empty-state illustrations aligned with the brand. Design a small illustration set for these views with matching copy and next-step CTAs.
Requirements and context
- Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
- Should be consistent with existing patterns and easy to review
- Relevant code:
src/pages/DistributionDashboard.tsx
- Illustrations must include a monochrome variant for print
Suggested execution
- Fork the repo and create a branch
git checkout -b uiux/governance-empty-illustrations
- Implement changes
- Design three governance-specific illustrations
- Draft matching copy and CTA labels
- Document exports as SVG and PNG fallbacks
- Validate accessibility and responsive assumptions
Test and commit
- Run checks
npm run lint and component/visual tests
- Cover edge cases
- Dark mode contrast, RTL flip if applicable, monochrome print
- Include screenshots/before-after and accessibility (axe) notes
Example commit message
design: governance empty-state illustrations
Guidelines
- Minimum 95 percent test coverage
- Clear documentation
- Timeframe: 96 hours
Description
Governance surfaces (No proposals, No votes cast, No delegates) need warm empty-state illustrations aligned with the brand. Design a small illustration set for these views with matching copy and next-step CTAs.
Requirements and context
src/pages/DistributionDashboard.tsxSuggested execution
git checkout -b uiux/governance-empty-illustrationsTest and commit
npm run lintand component/visual testsExample commit message
design: governance empty-state illustrationsGuidelines