Venmo Design System

Venmo's marketing canvas is what happens when a peer-to-peer payments brand decides photography of friends does the warmth typography would otherwise carry. The page opens on the header gradient `#008cff` — the brand's signature electric blue — fading down to the white hero where "Pay friends." renders in Athletics at 63px / weight 500 with `letterSpacing: -1.89px`. Below the fold the page alternates two structural surfaces: white `#ffffff` for photography catalogue rows ("Venmo everything online and in-store", "Venmo your friends", "Grow a business") and warm sand `#f1efea` for the rotating Stash-card hero band. The primary button is a pill at radius `1000px` — the literal value Venmo ships — filled `#0074de` with white text. The signature blue `#008cff` is reserved for the page-top gradient and the rotating hero card mockup rather than the button itself. Body text runs Scto Grotesk A at 16/22.4 or 17.86/25 at weight 400, with weight 700 reserved for inline link emphasis on a small set of anchor rows.

This page packages the Venmo marketing canvas into a single DESIGN.md file built on the Google Labs DESIGN.md specification. Inside the spec: 20 color tokens grouped into brand, link, ink, surface, and hairline roles; 12 typography tokens spanning a 63px Athletics hero down to a 14px PayPal Open footer caption; six radius tokens including the load-bearing `1000px` pill and the 32px product-tile corner that appears 12 times across the page; nine spacing tokens climbing from 4px through a 53px section band; and 18 component tokens covering the gradient header, both pill button variants, the rotating hero card, the four photography-led product rows, the Venmo Debit / Check Out / Credit Card tile triad, the FAQ-style link rows, and the regulatory footer. Every hex is quoted; every Athletics weight (500) and Scto Grotesk A weight (400 / 500 / 700) is reproducible.

A working React or Next.js developer drops the file into Claude, Cursor, or GitHub Copilot and the agent reproduces Venmo's social-payments rhythm rather than a generic neobank or wallet template. Tokens map onto Tailwind config or CSS variables, and components reference each other by name so `card-product-tile` resolves through `{colors.surface-sand}` and `{rounded.lg}` to the actual `#f1efea` and `32px`. The system is worth studying for one disciplined choice that mirrors Airbnb's restraint with Rausch and Monzo's restraint with Hot Coral: a famous brand colour treated as the page's atmospheric voltage — the colour of the header sky, the colour of the rotating card — rather than the colour of the click. Where most payments brands paint the CTA in their brand blue, Venmo paints the weather.