design: establish web design directory, design system tokens, and screen wireframes #3

Summary

Establish the web version design directory (design/ or docs/design/) to house UI/UX design specifications, design system tokens based on brand.md, screen wireframe specifications, and component inventory targeting Tailwind CSS and shadcn/ui.

Context

With brand.md defining the core brand palette (#168447 brand green, #2563EB brand blue, #0F172A navy), typography (Inter), and status badges, we need structured design documentation and wireframe specs to guide web frontend implementation.

Scope

1. Design Tokens:
   • Tailwind color mapping and CSS variable tokens for brand and status colors.
   • Typography scales and responsive spacing guidelines.
2. Screen Specifications & Wireframes:
   • 01-landing-discovery: Landing page, problem card layout, search, filters, personal-confirmation vs support counters.
   • 02-problem-report: Multi-step report wizard, location picker, category selection, evidence upload.
   • 03-problem-details: Detailed problem view, evidence timeline, voting interaction, solution links.
   • 04-impact-profile: User Community Impact Profile, contribution history, recognition badges.
   • 05-solution-collab: Solution proposal cards, milestone tracking, repo links.
   • 06-moderation: Admin verification queue and duplicate report review.
3. Component Inventory:
   • Map core widgets to shadcn/ui primitives.

Acceptance Criteria

• Create design/ directory with markdown specifications for screens and components.
• Define tokens matching brand.md.
• Include responsive mobile and desktop interaction guidelines.