Skip to content

[UI/UX Design] Design a branded empty-state illustration set for governance and voting views #503

Description

@thlpkee20-wq

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

Metadata

Metadata

Labels

Stellar WaveStellar Wave issue batch

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions