# Switch Pay, Round 1 Design Notes Date: 2026-09-22 Tool: Google Stitch (MCP) + hand-written fallback HTML Stitch project: `projects/950010724092163433` ("Switch Pay - Round 1 Mockups") ## 1. Palette (settled) Kept the provisional palette. It holds up: indigo reads as "serious fintech", mint gives the warmth and doubles as the success/settled color, and the paper tint keeps white cards from disappearing. | Token | Hex | Use | |---|---|---| | `--indigo` | #4F46E5 | Primary buttons, links, selected rings, big fee numbers, partner band | | `--indigo-hover` | #4338CA | Primary hover | | `--indigo-tint` | #EEF0FF | Calculator result panel, selected-tile wash, eyebrow pill bg | | `--mint` | #22D3A6 | "Paid instantly" lines, success chips, toggle glyph dot, checklist ticks | | `--mint-ink` | #0D7A5E | Text on mint-tinted chips (readable contrast) | | `--ink` | #1F1F2E | Headings, body | | `--ink-2` | #525266 | Secondary body | | `--ink-3` | #8D8DA0 | Muted labels, helper text, placeholders | | `--paper` | #F7F8FC | Page background | | `--surface` | #FFFFFF | Cards, inputs | | `--line` | #E6E8F0 | 1px borders and dividers | | `--line-2` | #F1F3F9 | Row dividers inside cards | | `--go` | #16A34A | The single "I have sent the funds" button only. Deliberately not mint, so it reads as a distinct terminal action | | `--warn-bg` / `--warn` | #FFF7E6 / #B45309 | Network warning banner | App brand colors (icon squares only, never used for UI chrome): Cash App #00D632, Venmo #008CFF, PayPal #003087, Coinbase #0052FF, Robinhood #00C805, Bitcoin #F7931A, Wallet = indigo. Ambient shadows (no colored glows): - Level 1 card: `0 1px 3px rgba(31,31,46,.04), 0 4px 12px rgba(31,31,46,.03)` - Level 2 hover/popover: `0 4px 6px -1px rgba(31,31,46,.05), 0 10px 24px -3px rgba(31,31,46,.06)` - Level 3 payment sheet: `0 12px 32px -4px rgba(31,31,46,.08), 0 20px 48px -8px rgba(31,31,46,.08)` ## 2. Type - Display / headings: **Manrope** 700 (display) and 600 (section). Tight tracking: -0.03em at 48px, -0.02em at 32px. - Body / UI / numbers: **Inter** 400/500. Use `font-feature-settings: "tnum", "cv01"` on every money figure so decimals line up. - Scale: display 48/56 (mobile 36/44), h2 32/40, h3 24/32, h4 20/28, body-lg 18/28, body 15/24, small 13/20, label 12/16 600 with 0.02em tracking and uppercase for section labels ("SEND AMOUNT", "SUMMARY"). - Money in the checkout: 16.43 at 44 to 48px Manrope 700; totals in summary card 20px Inter 600. ## 3. Wordmark "Switch" in ink + toggle glyph + "Pay" in indigo. Glyph = 28x16 pill, indigo fill, 12px white/mint knob on the right (the "on" position). At small sizes (footer, "Powered by") the glyph shrinks to 20x12 and the knob is mint. Never animate it on autoplay; an on-hover slide of the knob is fine later. ## 4. Component recipes ### App tile (checkout + hero mockup) ``` .tile white; 1px var(--line); radius 12px; padding 14px 16px; min-height 64px; display flex; gap 12px; align-items center .tile-icon 36x36; radius 9px; brand color bg; white glyph letter, Manrope 700 16px .tile-name Inter 600 15px ink .tile-hint Inter 400 12px ink-3 ("USDC or PYUSD", "USDC on Solana", "On-chain direct") .tile-chev chevron-right 16px ink-3, pushed to the far right :hover border var(--indigo) at 40%; shadow Level 2 .selected border 2px indigo; box-shadow 0 0 0 3px rgba(79,70,229,.12); check badge 18px indigo circle with white tick, top-right mobile 2-column grid, 12px gap; the Wallet tile spans both columns ``` ### Fee card (the 27blockchain element we keep) ``` .fee-card white; 1px var(--line); radius 16px; shadow Level 1; padding 0 .fee-grid 4 equal columns (2x2 on mobile); columns separated by 1px var(--line) .fee-tile padding 32px 24px; text-align center .fee-num Manrope 700 40px indigo, tnum ($127 / 8.27% / $1.27 / $127/mo) .fee-label Inter 600 14px ink (Setup, per payment option / Transfer fee / Event fee / Per payment option) .fee-note Inter 400 13px ink-3 (one-line explanation, pricing page only) heading "Simple. Transparent. Built for Trust." Manrope 600 32px, centered, above card foot mint chip under the card: "Shoppers cover the transfer fee. You keep 100% of your order amount." ``` ### Transaction summary card ``` .sum white; 1px var(--line); radius 16px; padding 20px .sum-label label-sm uppercase ink-3 "SUMMARY" .sum-row flex space-between; Inter 15px; ink-2 label / ink value; 12px vertical rhythm .sum-row.fee label has an (i) 14px icon; tooltip = "8.27% transfer fee + $1.27 event fee" .sum-divider 1px var(--line-2); margin 12px 0 .sum-total Inter 600 18px label / Manrope 700 22px value, tnum .sum-foot mint-ink 13px with a small bolt icon: "Paid instantly to the merchant in USDC" ``` ### Send-amount card (payment page) ``` label "SEND AMOUNT" label-sm uppercase ink-3 amount Manrope 700 44px ink, tnum "16.43" asset pill PYUSD chip: indigo-tint bg, indigo text, 12px 600; caption "on Solana" ink-3 11px copy secondary button 32px "Copy amount", copy icon note 13px ink-3 "Send exactly this amount. Includes $2.43 transfer fees." ``` ### Buttons ``` .btn height 44px (56px for the checkout Continue and "I have sent the funds"); radius 10px; Inter 600 15px; padding 0 20px; transition 120ms .btn-primary indigo bg, white text; hover indigo-hover + translateY(-0.5px); focus ring 2px indigo, 2px white offset .btn-outline white bg, 1px var(--line), ink text; hover paper bg + border #D5D8E2 .btn-ghost transparent, ink-2 text; hover line-2 bg .btn-go #16A34A bg, white 600 text, 56px, full width, check icon after label. Only one per screen. .btn-brand brand-colored deep link ("Open Venmo" = #008CFF) .link indigo 500, underline on hover ("Pay a different way") ``` ### Chips / status ``` .chip height 24px; radius 9999px; padding 2px 10px; 12px 600 .chip-mint rgba(34,211,166,.12) bg; #0D7A5E text; 1px rgba(34,211,166,.3) .chip-neutral #F1F3F9 bg; ink-2 text; 1px var(--line) ``` ### Inputs (application form, calculator) ``` height 44px; white; 1px var(--line); radius 8px; Inter 15px; placeholder ink-3 focus: border indigo + 0 0 0 3px rgba(79,70,229,.12) prefix addon (https://, $) in paper bg with right border segmented chips (volume bands): outline chip, selected = indigo border + indigo-tint bg + indigo text ``` ### Numbered steps `28px indigo circle, white Manrope 700 13px number; 12px gap; body 14px ink-2 with bold key terms ("Crypto tab", "PYUSD", "Solana")`. ### Warning banner `#FFF7E6 bg; 1px #FDE6B8; radius 12px; warning-triangle icon #B45309; 13px ink-2 text`. ## 5. Layout notes - Desktop container 1200 to 1280px, 24px gutters. Mobile 16 to 20px side margins, no horizontal scroll. - Checkout and pay pages: single column, max-width 480px centered on desktop (the mobile layout IS the desktop layout, framed on paper). - Sticky bottom bar on checkout: white, top border, 16px padding, safe-area aware. - Tap targets: tiles >= 64px, buttons >= 44px. ## 6. Copy rules - Never name any specific vertical or product category (the brief lists the one word that must not appear anywhere; it does not appear in any file in this folder). Use "businesses mainstream processors drop", "high-risk merchant solutions". - Never "crypto-native" language on merchant pages. "USDC" and "PYUSD" are named because they are the settlement unit; "blockchain" is never used in headlines. - Shopper pages: verbs first, plain English. "Open Venmo and tap the Crypto tab." - Fees: always show who pays. "Shoppers cover the transfer fee." ## 7. Hero headline options 1. **Pay with the apps you already have.** (brief tagline; sub: "Shoppers pay from Cash App, Venmo, PayPal or any wallet. You get paid instantly in USDC.") 2. **Get paid instantly. No chargebacks. No reserves.** (sub: "Your shoppers pay from the apps already on their phone.") 3. **Checkout that works when card processors won't.** (sub: "Accept payments from Cash App, Venmo, PayPal, Coinbase and any wallet, settled instantly in USDC.") 4. **Your customers have the apps. Now they have a way to pay you.** (sub: "One checkout, seven ways to pay, instant USDC settlement.") 5. **Payments for businesses mainstream processors drop.** (sub: "No chargebacks, no reserves, no holds. Paid in USDC the moment the shopper sends.") Recommendation: ship 1 as the H1 with the eyebrow pill carrying line 5's positioning. Line 3 is the strongest paid-ad headline. ## 8. What to fix in round 2 - Real app logos need licensing review; round 1 uses brand-colored letter tiles on purpose. - Hero checkout mockup should show the Venmo selected state and a subtle "live" pulse on the "Paid instantly" line (no autoplay video). - Pricing calculator should be real (order amount -> 8.27% + $1.27 -> shopper total; merchant keeps 100% of order amount). - Add a "Payment detected, confirming" state and a success screen after "I have sent the funds". - Dark mode is optional for marketing, but the checkout should honor `prefers-color-scheme` eventually. ## 9. Delivery status (round 1) Stitch project: `projects/950010724092163433` (title "Switch Pay - Round 1 Mockups"). Stitch auto-derived a DESIGN.md design system for the project from the first prompts (Manrope/Inter, indigo primary, mint secondary, 8px roundness); it is stored on the project and reusable for round 2 via `apply_design_system`. | # | Screen | Source | Stitch screen id | Files in this folder | |---|---|---|---|---| | 1 | Marketing home (desktop + mobile) | Hand-written fallback (Stitch timed out 3x on this long page) | none | `01-home-desktop.html`, `01-home-desktop.png`, `01-home-mobile.png` | | 2 | Pricing (desktop + mobile) | Hand-written fallback (Stitch timed out 2x, then "service unavailable"); calculator is live JS | none | `02-pricing-desktop.html`, `02-pricing-desktop.png`, `02-pricing-mobile.png` | | 3 | Hosted checkout (mobile) | Stitch | `70e3ba3ac73e43cbb69c66395faced75` | `03-checkout-mobile.html`, `03-checkout-mobile.png` | | 4 | Venmo hosted payment page (mobile) | Stitch | `561de90e078841778b4f61c4952ee064` | `04-venmo-pay-mobile.html`, `04-venmo-pay-mobile.png` | | 5 | Merchant application (desktop) | Stitch | `4f3b6ae3e5c54abb931caf5ee4be1e38` | `05-merchant-application-desktop.html`, `05-merchant-application-desktop.png` | Notes on the Stitch runs: - The MCP client has a fixed timeout that the long marketing pages exceed; the three shorter screens finished in under the limit. The project `updateTime` advanced after the timed-out calls, so orphan screens may exist server-side, but `list_screens` returns `{}` for this project so their ids could not be recovered. Check the Stitch web UI for the project before regenerating. - Stitch screenshots are 512px thumbnails; open the HTML files for full fidelity. Stitch reported `deviceType: DESKTOP` on the mobile screens even though they were requested as MOBILE, but the rendered layouts are mobile (max-width 480 centered on paper). - The hand-written pages use the same tokens as section 1 and are responsive (1440 and 390 screenshots included). They are mockups, not production code, but are close enough to lift components from. ## Change after round 1 (Chad, 2026-09-22) No "I have sent the funds" button. The payment page is an always-on live tracker: amber pulsing "Watching the Solana network for your transfer" with "Checked the chain Ns ago", flipping to green "Funds received. You are all set." when the engine sees the transfer (the page triggers an on-chain check every 4s). Screen 04 needs this swap in round 2; steps no longer mention a button.