design(receipt-card): x402 micropayment receipt card design package - #21
Open
jdjioe5-cpu wants to merge 1 commit into
Open
design(receipt-card): x402 micropayment receipt card design package#21jdjioe5-cpu wants to merge 1 commit into
jdjioe5-cpu wants to merge 1 commit into
Conversation
Closes nirium-protocol#13 Deliverable for the $50 USDC GrantFox UX Bounty — Figma UI/UX redesign for the x402 Micropayment Receipt Card. Contents: - SPEC.md: full design specification (tokens, typography, motion, accessibility, components) - tokens/tokens.{json,css}: design tokens, Figma Variables-compatible - components/figma-component-map.json: Figma-ready component tree - mockups/{settled,pending,failed}.svg: exportable SVG mockups for all three states (editable vectors, drop-in for Figma) - mockups/rendered/*.png: rasterized previews for quick review - prototype/: runnable HTML/CSS/JS interactive prototype with state toggle, copy-to-clipboard, keyboard nav, and prefers-reduced-motion Acceptance criteria mapping (issue nirium-protocol#13): - Sleek modern dark mode + glassmorphism -> tokens.css + prototype.css - Amount (USDC), Tx Hash, Stellar Expert link, IPFS CID, Status -> metadata panel in prototype/index.html + mockups/*.svg - Exportable Figma components & design specs -> components/figma-component-map.json + tokens/tokens.json Reservation: #issuecomment-5055782193
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #13 — GrantFox UX Bounty ($50 USDC) for the Figma UI/UX redesign of the x402 Micropayment Receipt Card.
A complete, designer-ready design package plus a runnable HTML/CSS/JS interactive prototype and exportable SVG mockups.
What's delivered
Design specification
design/receipt-card/SPEC.md— Full design spec: tokens, typography, motion, accessibility (WCAG AA), components, responsive behavior, empty/loading/error statesdesign/receipt-card/README.md— Package overview + acceptance criteria mappingDesign tokens (Figma Variables-compatible)
design/receipt-card/tokens/tokens.json— Tokens Studio format, drop-in for Tokens Studio plugindesign/receipt-card/tokens/tokens.css— CSS custom properties for direct HTML useFigma component tree
design/receipt-card/components/figma-component-map.json— Component hierarchy, variants (status: settled/pending/failed), and style definitions. Ready for direct import or for manual recreation in Figma.SVG mockups (exportable, editable vectors)
design/receipt-card/mockups/settled.svgdesign/receipt-card/mockups/pending.svgdesign/receipt-card/mockups/failed.svgdesign/receipt-card/mockups/rendered/*.png— rasterized previewsInteractive prototype
design/receipt-card/prototype/index.html— Open in any browser. Click the state pills (Settled / Pending / Failed) to see live transitions. Tab through every focusable element. Copy buttons work. Full keyboard navigation.design/receipt-card/prototype/prototype.css— Stylesdesign/receipt-card/prototype/prototype.js— State controller (vanilla, no framework)To run locally:
Acceptance criteria mapping (issue #13)
Reservation
Comment left on #13 at 2026-07-23T07:42:25Z (#issuecomment-5055782193).
Payout
Stellar Foundation / GrantFox Campaign — Organization ID
b6550049-a239-4dc1-b95e-2fb28ded7ea6.For reward disbursement, please share the eligible USDC receive address (network + asset code) on the issue thread. Standard public receive addresses work; nothing sensitive needed.
Checklist