Repository navigation
UI foundation: design system, header/footer, home and campaign page (give + back) #95
Description
Goal
The app works end to end but looks like a functional prototype. The owner (JOY) chose a design pass after the Kickstarter core. Make Give feel trustworthy and better than GoFundMe and Kickstarter, starting with the surfaces every visitor sees.
Requirements
- Follow
docs/Design-Principles.md(the owner's rules): minimal, low corner radius (rounded/rounded-mdonly), green primary (GoFundMe feel) with a light orange accent, generous white space, 8px grid, mobile first, 44px touch targets, 16px minimum text. Today's rose brand color inglobals.csscontradicts it and is replaced. Any deviation (for example keeping Be Vietnam Pro instead of Roboto for Vietnamese diacritics) is proposed to the PO, not taken silently. - Design tokens and a small component kit in
apps/web(buttons, inputs, cards, badges, progress, tabs, empty states, money figures), replacing ad-hoc utilities. Dark mode not required. - Header (search-centric; Discover / Start a campaign / My campaigns; sign-in), mobile menu, footer.
- Home: hero with one primary CTA, featured and trending campaigns, both campaign types explained (Từ thiện / Dự án sáng tạo), trust section (money goes straight to the campaign's own account; public statements).
- Campaign page for give and back: hero media, title, organizer with verification badge, progress and figures (give: gross / refunded / remaining; back: pledged / paid / goal / refund owed), primary action, tabs (story, statement, backers), reward tier cards for back, share, report.
- Campaign card used in lists.
- Vietnamese copy reviewed for tone.
Acceptance
- Screenshots of home and both campaign types, desktop and mobile (375 px), attached to the PR, taken from a seeded local stack.
- No behaviour change: all existing tests pass; Lighthouse accessibility >= 90 on home and the campaign page.
Next
Flows (donate, pledge, payment, status), /me and admin follow in a second issue using this kit.
Activity
JOY commentedon Nov 3, 2026
claim: executor="Claude Code" session=d5b0523b-7fe9-418b-b564-4652ff380e3e scope="apps/web (globals.css, components/ui, layout header/footer, home, campaign page)" branch=claude/95-ui-foundation target=2026-11-07
JOY commentedon Nov 3, 2026
checkpoint: PR #97 opened (step 1: tokens, header, home hero, campaign card; screenshots sent to the PO). Next: component kit, campaign page give + back, Lighthouse.
Campaign page, discovery and statement header on the design kit (#95)
Header: solid background so the phone menu panel shows; search placeh…
Address design and accessibility review (#95)
Campaign page: DOM order matches the phone order (review round 2, #95)
JOY commentedon Nov 3, 2026
checkpoint: PR #97 ready for review at 4d42141.
Done: tokens and kit, header/footer/phone menu, home, campaign page give + back, discovery and statement headers; screenshots in the PR body.
Evidence: format, lint, typecheck, 918 tests, build pass; required CI (Lint, Build all apps) green; Lighthouse accessibility 100 on home, give, back, discovery, statement (mobile + desktop); independent design/a11y review, 2 rounds, findings fixed.
Next: PO/owner acceptance (font Be Vietnam Pro vs Roboto, primary #047857 for contrast), then merge into dev. #96 can start on this kit.
UI foundation: design kit, header/footer, home and campaign page (giv…
JOY commentedon Nov 3, 2026
done: session=d5b0523b-7fe9-418b-b564-4652ff380e3e
Merged into dev as 31f0313 (PR #97, merged by the PO under the owner's standing approval).
Acceptance evidence: desktop and 375px screenshots of home, give and back campaign pages (plus discovery, statement, signed-in header) from a seeded local stack, in the PR body; required CI Lint and Build all apps green; 918 tests pass; Lighthouse accessibility 100 on home, give, back, discovery and statement (mobile and desktop presets); independent design and accessibility review, 2 rounds, fixed.
Font stays Be Vietnam Pro unless the owner picks Roboto (then #96 changes the token). Kit notes for #96 are in the PO's hand-over notes.
UI pass part A: donate and pledge flows and payment pages on the desi…
Admin screens on the design kit (#96 part C) (#101)
UI pass part B: /me on the design kit (#96) (#100)