--- version: alpha name: Venmo description: A clean white social-payments canvas where the Athletics display face sets bold rounded headlines, signature Venmo blue energizes every CTA, and a friendly split-screen aesthetic turns money movement into a community feed. colors: # Surface / canvas background: "#ffffff" # primary white page canvas surface: "#f5f7fa" # /* estimated */ off-white section bands, light card fills surface-blue: "#deeeff" # /* estimated */ light blue tint for feature highlight panels surface-dark: "#2f3033" # near-black panels, inverted hero sections (rgb(47,48,51)) # Ink / text ink: "#2f3033" # primary text — near-black (rgb(47,48,51)) ink-secondary: "#5a5f66" # /* estimated */ secondary body copy on white surfaces ink-muted: "#767b83" # /* estimated */ captions, metadata, footnotes on-dark: "#ffffff" # text on dark panels and inverted sections # Brand accent — the signature Venmo blue primary: "#008cff" # signature Venmo blue — CTAs, interactive accents (rgb(0,140,255)) primary-strong: "#0074de" # deeper PayPal-blue links and hover state (rgb(0,116,222)) primary-container: "#deeeff" # /* estimated */ light blue tint for badges and chips on-primary: "#ffffff" # white text/icons on the blue accent # Link / interaction link: "#005ba4" # footer link blue (rgb(0,91,164)) link-hover: "#0074de" # link hover shift (rgb(0,116,222)) focus-ring: "#0074de" # keyboard focus indicator, matches link-hover # Semantic success: "#007a3d" # /* estimated */ confirmation and positive-state green error: "#c0392b" # /* estimated */ error / decline state # Borders border: "#000000" # 1px solid black on ghost/outline buttons border-soft: "#e2e6ea" # /* estimated */ hairline card and input edges on white border-blue: "#0074de" # blue border on focused inputs or outlined badge chips # Shadow tints (opaque stand-ins for the elevation table) shadow-soft: "#000000" # was rgba(0,0,0,0.14) — card lift tint typography: display-hero: fontFamily: "Athletics, 'Century Gothic', Helvetica, Arial, sans-serif" fontSize: 80px fontWeight: 500 lineHeight: 1.0 letterSpacing: -2.4px display: fontFamily: "Athletics, 'Century Gothic', Helvetica, Arial, sans-serif" fontSize: 64px fontWeight: 500 lineHeight: 1.05 letterSpacing: -1.27px heading-section: fontFamily: "Athletics, 'Century Gothic', Helvetica, Arial, sans-serif" fontSize: 40px fontWeight: 500 lineHeight: 1.05 letterSpacing: -0.8px heading-sub: fontFamily: "Scto Grotesk A, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0px body-large: fontFamily: "Scto Grotesk A, Helvetica, Arial, sans-serif" fontSize: 25px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px body: fontFamily: "Scto Grotesk A, Helvetica, Arial, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px body-small: fontFamily: "Scto Grotesk A, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px button-ui: fontFamily: "Scto Grotesk A, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0px nav-link: fontFamily: "Scto Grotesk A, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px label: fontFamily: "PayPalOpen-Regular, Scto Grotesk A, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1.71 letterSpacing: 0px caption: fontFamily: "Scto Grotesk A, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 80px 4xl: 120px rounded: none: 0px sm: 8px md: 24px lg: 32px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 38px button-primary-hover: backgroundColor: "{colors.primary-strong}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 38px button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" border: "1px solid {colors.border}" padding: 14px 38px button-secondary-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" border: "1px solid {colors.border}" padding: 14px 38px button-ghost-blue: backgroundColor: "{colors.background}" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" border: "1px solid {colors.primary}" padding: 14px 38px button-ghost-blue-hover: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary-strong}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" border: "1px solid {colors.primary-strong}" padding: 14px 38px card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 32px card-tinted: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 32px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" border: "1px solid {colors.border-soft}" padding: 12px 16px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" border: "1px solid {colors.border-blue}" padding: 12px 16px badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary-strong}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 12px nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 0px 24px --- # Venmo Design System ## Overview Venmo arrives at a premise unique in fintech: money is social. The design system reflects this from its first pixel — a crisp `{colors.background}` white canvas, animated phone mockups showing friend activity feeds, and split-section layouts that juxtapose the blue of `{colors.primary}` against white, literally splitting the page between sender and receiver. This is not a bank's design language. It is the aesthetic of a social app that happens to move dollars. Athletics, Venmo's display typeface (a custom grotesque from Commercial Type), carries all major headlines at 80px with tight -2.4px letter-spacing and a 1.0 line-height — weight without mass, confident without cold. Body copy transitions to Scto Grotesk A (Schick Toikka's humanist grotesque), which brings warmth and legibility at paragraph scale. The brand's third typeface, PayPalOpen-Regular, appears in footer and legal contexts — a reminder of Venmo's corporate parentage without breaking the independent voice up top. The signature `{colors.primary}` Venmo blue (#008cff) is the system's single chromatic statement: it fills primary CTAs, accents feature blocks, and appears in the split-screen gradient that bisects the hero — white above, blue below — visualizing a payment in flight. Buttons are exclusively pill-shaped, card corners use a generous 32px radius, and the motion system keeps transitions fast (0.25s ease-out) to match the breezy, tap-and-go personality of the product. The result is a fintech product that feels like a consumer app: approachable, colorful, and social by default. **Key Characteristics:** - `{colors.background}` white canvas — clean and social-app-bright, not bank-austere - Athletics at 80px with -2.4px tracking as the signature display voice — a custom grotesque with confident proportions - `{colors.primary}` (#008cff) is the sole brand chromatic: it appears in CTAs, the hero split gradient, and feature accents - Pill buttons (`{rounded.pill}`) across all CTA variants — no intermediate radii on interactive controls - `{rounded.lg}` at 32px on feature cards and phone mockup containers — generous, mobile-native rounding - Hero split-gradient (`{colors.background}` to `{colors.primary}`) visualizes the peer-to-peer transfer concept structurally - Two typefaces do all the work: Athletics for display, Scto Grotesk A for body — the body font's warmth softens the brand - `{typography.button-ui}` at 18px/700 — heavier button labels than typical fintech, matches the app's approachable register - Shadows are subtle: 4px × 28px soft ambient lift on cards; the system reads clean and flat in primary contexts - Breakpoints cluster at mobile scale (98–768px), reflecting Venmo's mobile-first payment reality - Friend-activity feed illustrations and phone mockups ground every feature section in a social context - PayPalOpen-Regular in footer/legal contexts only — parentage acknowledged, not foregrounded ## Colors ### Primary - **White** (`{colors.background}`): The full page canvas, nav bar, card surfaces, and most section backgrounds. The dominant field. - **Near-black** (`{colors.surface-dark}`): Inverted sections, footer, phone-mockup chrome, and dark-panel callouts. Provides strong contrast inversion. - **Off-white** (`{colors.surface}`): Section-band tints, feature panel backgrounds in lighter contexts. ### Brand Accent - **Venmo Blue** (`{colors.primary}`): The signature signal color. Fills all primary CTA buttons, the hero split-gradient lower half, feature section accents, and interactive UI states. Everything that says "do the thing" is this blue. - **Deep Blue** (`{colors.primary-strong}`): The deeper `#0074de` PayPal-lineage blue. Used for links, hover states, and outlined button variants — slightly more restrained than the pure Venmo blue. - **Blue Tint** (`{colors.primary-container}`): A soft blue wash for badge backgrounds and highlighted feature chips. Keeps blue language present at non-interactive density. ### Text States - **Primary ink** (`{colors.ink}`): `#2f3033` near-black for all headlines, body, and nav on white surfaces. Warm-neutral rather than pure black. - **Muted ink** (`{colors.ink-muted}`): Captions, metadata, secondary labels — estimated at mid-gray to maintain legibility with low visual weight. - **On-dark** (`{colors.on-dark}`): White text for all inverted panel contexts. ### Semantic & Links - `{colors.link}` (#005ba4) — footer and legal link blue. - `{colors.link-hover}` (#0074de) — hover shift for links, matching the deep blue accent ramp. - `{colors.focus-ring}` — keyboard focus ring, matches link hover for consistency. ### Borders & Shadows - `{colors.border}` — black 1px solid on ghost/outline buttons. - `{colors.border-soft}` — hairline card and input edges; estimated light gray. - `{colors.shadow-soft}` — used in `rgba(0,0,0,0.14) 4px 4px 28px 6px` card lift; flattened to opaque for token storage. ## Typography ### Font Family - **Display**: `Athletics` — Commercial Type grotesque, fallback `'Century Gothic', Helvetica, Arial, sans-serif`. Used for all hero and section headlines. - **Body**: `Scto Grotesk A` — Schick Toikka humanist grotesque, fallback `Helvetica, Arial, sans-serif`. All body copy, nav, labels, UI text. - **Legal/Footer**: `PayPalOpen-Regular` — PayPal's corporate wordmark font, appears in footer credits and regulatory fine print only. - **Closest Google Font**: Sora or DM Sans (both geometric grotesque with similar weight range); Athletics has no exact Google equivalent. ### Hierarchy The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference rather than restating values. | Token | Use | |---|---| | `display-hero` | 80px hero headlines, above-the-fold statements | | `display` | 64px section headers, major feature labels | | `heading-section` | 40px mid-page section titles | | `heading-sub` | 24px bold card headlines and feature-block sub-headers | | `body-large` | 25px lead copy under section titles, first paragraphs | | `body` | 20px standard body copy, feature descriptions | | `body-small` | 16px secondary copy, nav links, form instructions | | `button-ui` | 18px/700 CTA button labels — heavier than most fintech | | `nav-link` | 16px nav bar text links | | `label` | 14px/600 form labels, inline tags, legal UI | | `caption` | 14px footnotes, metadata, disclaimers | ### Principles - Athletics is the brand's voice at scale — its slightly extended proportions feel confident without aggression, matching Venmo's social-payments persona - Body font transitions to Scto Grotesk A at paragraph scale, bringing humanist warmth to what would otherwise be an overly clinical interface - No lowercase tracking at body scale — Venmo avoids the "tightly-tracked UI" fintech trope in favor of neutral, readable spacing - Display weights cluster around 500 (Medium) rather than Bold or Black — strength comes from scale and spacing, not weight - `{typography.button-ui}` at 18px/700 is intentionally heavy — buttons must read as social calls-to-action, not form submissions ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. Venmo's spacing is social-app generous at section level — 80–120px section padding creates breathing room between narrative blocks — and tight at component level, where 8–24px governs internal density. The 48px gap marks the transition between section-level rhythm and feature-grid rhythm. Spacing feels designed for thumb navigation: generous touch targets, comfortable row heights, app-native padding values. ### Grid & Container - Max content width: approximately 1000–1200px centered (typical PayPal/Venmo marketing column) - Dominant layout: full-bleed white sections stacked vertically, hero with split gradient, alternating feature blocks - Feature cards: 2-column grid on tablet, 1-column on mobile, expanding to 3-column for capability tiles on desktop - Split-section hero: left half white with content, right half `{colors.primary}` blue with phone mockup or app screenshot ### Whitespace Philosophy - Large vertical section gaps (80–120px) create editorial breathing room between the social-feed product story - Generous button padding (14px × 38px) reflects the consumer-app register — these feel like app buttons, not web form controls - Internal component spacing is consistent at 24px, matching the `{spacing.lg}` base grid increment ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Nav, footer, primary section backgrounds | | Card (Level 1) | `rgba(0,0,0,0.14) 4px 4px 28px 6px` | Feature cards, app mockup containers | | Elevated (Level 2) | `rgba(0,0,0,0.16) 0px 12px 28px 0px` | Modal overlays, tooltips, drawer surfaces | | Inset (decorative) | `rgba(0,0,0,0) 0px 0px 0px 1px inset` | Button and input visual boundary hint | | Focus Ring | `1px solid {colors.focus-ring}` | All keyboard-navigable interactive elements | **Shadow Philosophy**: Venmo uses targeted card-lift shadows rather than a pervasive material hierarchy. The dominant shadow is a 4px-offset ambient lift (`rgba(0,0,0,0.14)` at 28px spread) — enough to float phone mockups and feature cards off the white canvas without creating depth drama. The system is fundamentally flat; shadows appear on featured elements, not on every surface. ## Shapes The complete radius scale is in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | Full-bleed hero dividers, structural section bands | | `sm` | 8px | Images, SVG asset containers, small media embeds | | `md` | 24px | Secondary buttons, decline chips, smaller interactive elements | | `lg` | 32px | Feature cards, phone mockup containers, image panels — the signature card radius | | `pill` | 9999px | All primary and ghost CTA buttons — without exception | The radius philosophy pairs two extremes: pill for every button, 32px for every card. The `{rounded.lg}` 32px radius is Venmo's signature shape — generously rounded cards that echo mobile UI conventions and signal the app's consumer DNA. The gap between `{rounded.md}` and `{rounded.lg}` is intentional: 24px appears only on small chips and secondary elements, creating visual hierarchy through shape scale. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them. ### Button Variants - **`button-primary`** — `{colors.primary}` blue fill, white text, pill radius, 18px/700 Scto. The main conversion CTA: "Download Venmo," "Send & Receive." - **`button-secondary`** — white fill, black text, 1px black border, same pill shape. Secondary page action or alternative CTA track. - **`button-ghost-blue`** — white fill, `{colors.primary}` blue text and border. Featured on split panels where a secondary action sits against the blue field or immediately beside a primary. - All button variants share `{typography.button-ui}` at 18px/700 — heavier labels distinguish Venmo CTAs from nav links unambiguously. ### Cards - **`card`** — white background, `{rounded.lg}` 32px corners, 32px padding. Standard feature block floating on white canvas. - **`card-tinted`** — off-white `{colors.surface}` background for subtle section differentiation without hard borders. ### Inputs - **`input`** — white fill, `{colors.border-soft}` hairline edge, `{rounded.sm}` 8px corners, 12px/16px padding. Standard form field. - **`input-focus`** — border lifts to `{colors.border-blue}` on focus; matches the `{colors.primary-strong}` blue ramp. ### Badges / Tags - Pill-shaped, `{colors.primary-container}` light-blue fill, `{colors.primary-strong}` text in `{typography.caption}`. Used for feature status chips ("New," "Beta") and category filters in the app store surfaces. ### Navigation - Sticky white nav bar, same `{colors.background}` as page canvas — seamless scroll. - Logo left, nav text links center, blue primary CTA right. - Mobile: hamburger collapse with 0.25s ease-out slide-down reveal. ## Do's and Don'ts ### Do - Use `{colors.primary}` exclusively for primary CTAs and the hero split gradient — every other element should stay white or near-black to preserve the blue's attention value. - Set all display headlines in `{typography.display-hero}` with Athletics at -2.4px tracking — the negative tracking is what gives the display voice authority at 80px. - Use `{rounded.pill}` on every button without exception — the system's shape grammar reserves pill for interactive controls and `{rounded.lg}` for content containers. - Apply `{rounded.lg}` (32px) to all card and phone-mockup containers — this radius is Venmo's most identifiable surface signature. - Maintain 80–120px vertical section padding on desktop — the social-feed narrative needs that editorial breathing room between beats. - Use split-section layouts (white left / `{colors.primary}` blue right) to reference the peer-to-peer transaction pattern — it is architectural brand language, not just a color choice. - Switch to `{colors.on-dark}` white text whenever placing copy on `{colors.surface-dark}` or `{colors.primary}` blue surfaces. ### Don't - Don't reduce `{typography.button-ui}` weight below 700 — light-weight button labels erode the CTA's social-app read. - Don't use `{colors.primary}` as a background for full-width sections or large content cards — it is a signal color, not a canvas color. Only the hero split uses it as a true background. - Don't mix rounded corner values mid-component — pick either `{rounded.lg}` (cards) or `{rounded.pill}` (buttons); intermediate radii in between break the binary shape grammar. - Don't render Athletics at weights above 500 for display — the typeface's authority comes from size and tracking, not from Bold or Black weights. - Don't use Scto Grotesk A in a tracking-heavy display context — its warmth is calibrated for paragraph scale; forcing it into a 0-tracking display headline looks bland next to Athletics. - Don't flatten the split-section hero to a single color — the white-to-blue bisection is integral to the peer-to-peer visual metaphor. - Don't introduce additional accent colors — the system is deliberately monochromatic outside of the one blue; any orange, green, or teal will read as a bug. - Don't use PayPalOpen-Regular outside of footer and legal text — it signals corporate parentage and breaks the independent Venmo voice when used in product UI contexts. --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile XS | <336px | Single column, minimum typography scale, full-bleed hero | | Mobile | 336–600px | Full-width CTA buttons, stacked feature blocks | | Mobile Large | 600–752px | 2-column feature grid begins, phone mockups shrink | | Tablet | 752–768px | Nav transitions, split-section begins | | Desktop | >768px | Full split-section hero, 3-column feature grid, max-width container | ### Touch Targets - Pill buttons have minimum 48px height (14px top/bottom padding + 18px type = ~46–48px rendered) - Feature cards span full width on mobile — always tappable without precision - Nav collapses to hamburger at mobile breakpoint with 0.25s ease-out slide reveal ### Collapsing Strategy - Hero split-section stacks vertically on mobile: blue lower section drops below the white content section rather than running side by side - Feature card grids collapse from 3-column → 2-column → 1-column through the breakpoint range - Athletics headline scales from 80px (desktop) to approximately 40–48px (mobile) via responsive classes - Section vertical padding reduces from 120px (desktop) to ~48px (mobile) ### Image Behavior - Phone mockups and app screenshots maintain aspect ratio and scale within their card containers - `{rounded.lg}` 32px radius persists at all viewport sizes — the rounded card shape is preserved even when cards go full-width - Hero imagery fills the blue split-section half; scales proportionally without cropping on mobile stacks --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` - Text: `{colors.ink}` - Brand accent (Venmo blue): `{colors.primary}` - Deep accent / links: `{colors.primary-strong}` - Blue tint / badge bg: `{colors.primary-container}` - Dark panel: `{colors.surface-dark}` - On dark: `{colors.on-dark}` - Border: `{colors.border}` ### Example Component Prompts - "Build a Venmo hero section: full-viewport split layout — left half `{colors.background}` white with centered Athletics headline at `{typography.display-hero}` (80px, weight 500, -2.4px tracking), `{colors.ink}` body copy in `{typography.body-large}`, and a `{colors.primary}` blue pill button (`{rounded.pill}`, 14px 38px padding, `{typography.button-ui}` 18px/700, `{colors.on-primary}` white label) — right half solid `{colors.primary}` blue with a phone mockup in a `{rounded.lg}` card container." - "Create a Venmo feature card: `{colors.background}` white background, `{rounded.lg}` 32px corners, 32px padding, `{colors.ink}` headline in `{typography.heading-section}`, `{colors.ink-secondary}` body in `{typography.body}`, optional `{colors.primary}` accent icon or illustration above the text." - "Design a Venmo navigation bar: sticky white `{colors.background}` fill flush with page canvas, Venmo logo SVG left, Scto Grotesk A 16px nav links centered (color `{colors.ink}`), `{colors.primary}` blue pill button 'Download Venmo' right-aligned with `{typography.button-ui}` 18px/700 and `{colors.on-primary}` white label." - "Build a payment activity badge: `{colors.primary-container}` light-blue background, `{colors.primary-strong}` text in `{typography.caption}` 14px, `{rounded.pill}` radius, 4px 12px padding. Use for 'New' or feature-status labels — never as a user-generated category tag." - "Create a ghost blue CTA button: `{colors.background}` white fill, `{colors.primary}` blue text and 1px border in `{typography.button-ui}` 18px/700, `{rounded.pill}` radius, 14px 38px padding. Used as secondary option beside a filled `{colors.primary}` primary CTA on white panels." - "Design a Venmo split-section feature block: two columns with a 32px gap — left column shows feature headline in `{typography.heading-section}` Athletics 40px, `{colors.ink}` body in `{typography.body}`, and one pill CTA; right column shows app screenshot or illustration inside a `{rounded.lg}` container with `rgba(0,0,0,0.14) 4px 4px 28px 6px` card shadow." ### Iteration Guide 1. Start with `{colors.background}` pure white — the page is built on this field. Every section is either white or the dark inversion `{colors.surface-dark}`. 2. Introduce `{colors.primary}` (#008cff) for every interactive element: fill buttons, hero split, and feature accents. Nothing else gets this blue. 3. Set all major headlines in `{typography.display-hero}` Athletics at 80px, weight 500, -2.4px tracking — scale down through the `display` and `heading-section` tokens for lower levels. 4. Use `{rounded.pill}` on every button; `{rounded.lg}` (32px) on every card or media container. Nothing between these two values on primary elements. 5. Body and UI copy uses Scto Grotesk A — swap to PayPalOpen-Regular only for footer legal text. 6. Section padding: `{spacing.4xl}` (120px) top/bottom at desktop; `{spacing.2xl}` (48px) at mobile. 7. Card shadows: `rgba(0,0,0,0.14) 4px 4px 28px 6px` for floating feature cards. Keep all other surfaces shadow-free for a social-app-clean aesthetic. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Venmo. Brand names and trademarks belong to their respective owners.