Cash App
A consumer money-transfer app with the boldest visual identity in fintech — true black (#000000) canvas, white text, and Cash App's signature bright green (#00D64F) used exclusively on the send/pay CTA. The app is deliberately stripped of financial anxiety: large dollar amounts, a single input screen, and a pay flow that takes three taps. The $Cashtag identity system (personalized @handle for payments) and Cash Card (customizable debit card) make money feel personal. Typography is heavy and direct — no serifs, no uncertainty. The aesthetic communicates: sending money should feel as casual as texting.
Color Tokens
1. Visual Theme & Atmosphere
Cash App is the best-designed money transfer product ever built. The decision to use black as the primary surface is counterintuitive for finance (where trust traditionally means blue and white) but completely on-brand for a product that targets younger, style-conscious users. Green means pay. The amount input is the entire screen. The pay button is the entire bottom. There are no explanations, no disclaimers dominating the UI, no anxiety. Sending $20 to a friend should feel like sending a meme.
2. Color System
Maximum simplicity:
- Canvas: #000000 — true black, confident and bold
- Green: #00D64F — the pay button, and only the pay button; it means "send money now"
- Surfaces: #1A1A1A / #242424 — barely lighter than canvas for card differentiation
- Ink: #FFFFFF — bright white on black, maximum contrast
- Muted: #8A8A8A — balance labels, secondary info
- Cash Card green: #1ED760 — slightly different green (Spotify-adjacent) for the physical card design
3. Typography
Cash Market (custom typeface) — bold, geometric, no-nonsense. Used at large weights across the app. The amount input field is the typographic hero: 52px weight-700, center-aligned, it makes the dollar value feel real and significant. Body uses 500 weight even at reading sizes — this system doesn't whisper.
4. Components & Patterns
- Pay screen: Full-screen dollar amount input (numpad), $Cashtag or contact search, green Pay button bottom
- Activity feed: Transaction rows with $Cashtag avatar, name, amount (green +, red -), timestamp
- Cash Card: Customizable card design selector, dark card render with embossed $Cashtag
- Boost offers: Merchant discount cards in horizontal scroll strip
- Bitcoin/Stocks: Sparkline charts, green/red delta, tap to buy/sell single-stock
5. Spacing & Layout
Mobile only. Full-viewport pay screen. Bottom navigation: 4 tabs. Content 100% width, 16–24px horizontal padding. Large tap targets (minimum 56px). Everything optimized for thumb reach.
6. Motion & Interaction
Pay confirmation: green fill animation from button up. Amount input: haptic feedback on each digit. Request sent: brief success overlay. Bitcoin price: real-time tick with color flash. All spring-eased.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for