design: empty-state illustration system with accessible SVGs for all surfaces (#1405)

[CJay-Cipher]

Summary

Implements a cohesive empty-state illustration system across all empty surfaces in frontend/src/features/ and frontend/src/shared/components/, replacing unstyled text placeholders with branded SVG spot illustrations aligned with the grainlify gold/warm-neutral palette.

Closes #1405

---

Changes

New files

• frontend/src/shared/components/EmptyState/EmptyState.tsx — reusable component with 8 inline SVG illustrations, typed props, dark/light mode support, optional CTA button
• frontend/src/shared/components/EmptyState/index.ts — barrel export
• design/specs/empty-state-illustration-system.md — full spec, token reference, QA checklist, integration map

Updated files

• frontend/src/shared/components/index.ts — exports EmptyState and EmptyStateVariant
• frontend/src/features/dashboard/pages/BrowsePage.tsx — replaces unstyled "No projects found" div
• frontend/src/features/dashboard/pages/EcosystemDetailPage.tsx — replaces inline icon + text block
• frontend/src/features/dashboard/pages/OpenSourceWeekPage.tsx — replaces heading + paragraph block
• frontend/src/features/dashboard/pages/ProfilePage.tsx — replaces contributions empty state, fixes off-brand gray color tokens
• frontend/src/features/leaderboard/pages/LeaderboardPage.tsx — replaces both contributors and projects empty states
• frontend/src/features/notifications/NotificationsPage.tsx — replaces Bell icon + text block, preserves filter-aware copy and CTA
• frontend/src/features/settings/components/billing/InvoicesTab.tsx — replaces FileText icon + text block
• frontend/src/features/settings/components/payout/PayoutTab.tsx — replaces Info icon + text block

---

Screenshots

Illustrations delivered

Variant	Used in
no-results-search	BrowsePage
no-bounties	available for future use
no-contributions	ProfilePage
no-notifications	NotificationsPage
no-leaderboard	LeaderboardPage (contributors)
no-programs	LeaderboardPage (projects), OpenSourceWeekPage
no-payout-history	PayoutTab, InvoicesTab
no-ecosystems	EcosystemDetailPage

---

Accessibility

• Every SVG has role="img" and a descriptive <title> linked via aria-labelledby
• <figcaption class="sr-only"> provides text-only fallback for reduced-data and print contexts
• Root wrapper uses role="status" and aria-label
• CTA button enforces min-h-[44px] touch target
• Focus ring uses brand gold (#f1b400 dark / #a2792c light) per design/dark-mode-spec.md
• No animations — fully compatible with prefers-reduced-motion
• All text contrast ratios meet WCAG 2.1 AA (headline 15.5:1, subtext 9.1:1 on dark surface)

---

QA checklist

• All 8 variants render at 375px viewport without overflow
• Dark and light mode tested via theme toggle
• CTA button height ≥ 44px confirmed in DevTools
• Gold focus ring visible on keyboard Tab in both modes
• No console errors
• prefers-reduced-motion — no animation artefacts
• SVG <title> present in DOM

---

Security

• No user input interpolated into SVG attributes — all strings are static constants
• No dangerouslySetInnerHTML
• No external SVG fetches — all illustrations are inline JSX
• onCta handler is caller-supplied, not executed at mount

[vercel]

@CJay-Cipher is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@CJay-Cipher Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits