Finance / iOS / Android / Web

Venmo

Venmo keeps the words black and white and lets flat bands of sky, indigo and cream carry the mood, with heavy tight headlines and pills for every action.

Download
  • #000000
  • #4BB4FF
  • #3F34EE
  • #F1EFEA
  • #F5F5F7
  • #FFFFFF

Color

Every color token in the file, grouped by role.

Brand

  • primary#000000
  • on primary#FFFFFF
  • secondary#F5F5F7
  • on secondary#000000

Surfaces

  • canvas#FFFFFF

Text

  • ink#000000
  • on indigo#FFFFFF

More

  • sky#4BB4FF
  • indigo#3F34EE
  • cream#F1EFEA

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Venmo SansVenmo Sans is private and not available in open fonts. Shown in Outfit, the closest open match.
  • display70px / 700 / 67px

    Venmo

  • headline57.5px / 700 / 54.6px

    Venmo

  • title38.7px / 700 / 36.8px

    Venmo

  • body17.9px / 400 / 24.1px

    The quick brown fox jumps over the lazy dog

  • button16.9px / 500 / 19.7px

    Continue to checkout

  • small14px / 500 / 18.9px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • sm8px
  • md12px
  • lg24px
  • xl32px
  • pill1000px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md16px
  • base20px
  • lg24px
  • xl32px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button secondary
    button-secondary
  • sky panel
    sky-panel
  • indigo band
    indigo-band
  • cream band
    cream-band
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 104 lines
version: alpha
name: Venmo-design-analysis
description: "A peer payments brand set in black and white with big flat color bands (sky #4bb4ff, indigo #3f34ee, cream #f1efea), bold Venmo Sans headlines with tight tracking, black and pale gray pill buttons and 32px rounded panels."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#000000"
  on-primary: "#ffffff"
  secondary: "#f5f5f7"
  on-secondary: "#000000"
  sky: "#4bb4ff"
  indigo: "#3f34ee"
  cream: "#f1efea"
  ink: "#000000"
  canvas: "#ffffff"
  on-indigo: "#ffffff"

typography:
  # Font note: "Venmo Sans" is a private font and is not available in open fonts. Closest open alternative: "Outfit".
  display:
    fontFamily: "'Venmo Sans', Helvetica, Arial, sans-serif"
    fontSize: 70px
    fontWeight: 700
    lineHeight: 67px
    letterSpacing: -2.11px
  headline:
    fontFamily: "'Venmo Sans', Helvetica, Arial, sans-serif"
    fontSize: 57.5px
    fontWeight: 700
    lineHeight: 54.6px
    letterSpacing: -1.73px
  title:
    fontFamily: "'Venmo Sans', Helvetica, Arial, sans-serif"
    fontSize: 38.7px
    fontWeight: 700
    lineHeight: 36.8px
    letterSpacing: -1.16px
  body:
    fontFamily: "'Venmo Sans', Helvetica, Arial, sans-serif"
    fontSize: 17.9px
    fontWeight: 400
    lineHeight: 24.1px
    letterSpacing: -0.18px
  button:
    fontFamily: "'Venmo Sans', Helvetica, Arial, sans-serif"
    fontSize: 16.9px
    fontWeight: 500
    lineHeight: 19.7px
  small:
    fontFamily: "'Venmo Sans', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 18.9px
    letterSpacing: -0.14px

rounded:
  sm: 8px
  md: 12px
  lg: 24px
  xl: 32px
  pill: 1000px

spacing:
  sm: 8px
  md: 16px
  base: 20px
  lg: 24px
  xl: 32px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 52px
    padding: 16px 20px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 52px
    padding: 16px 20px
  sky-panel:
    backgroundColor: "{colors.sky}"
    textColor: "{colors.ink}"
    typography: "{typography.headline}"
    rounded: "{rounded.xl}"
    padding: 32px
  indigo-band:
    backgroundColor: "{colors.indigo}"
    textColor: "{colors.on-indigo}"
    typography: "{typography.title}"
    padding: 32px
  cream-band:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.ink}"
    typography: "{typography.title}"
    padding: 32px

Overview

Venmo is a payments app for sending money to friends, splitting bills and paying at checkout. Its public site is black type on white, broken up by large flat bands of sky blue, indigo and cream, with heavy, tightly tracked headlines and fully round buttons. [Observed]

What defines the look:

  1. Black and white first. Text is pure black on white. The main button is a black pill with white text, and the second button a pale gray pill #f5f5f7 with black text. [Measured]
  2. Flat color bands. Sky #4bb4ff, indigo #3f34ee and cream #f1efea fill whole sections and rounded panels, with no gradients. [Measured]
  3. Bold, tight headlines. Venmo Sans at 700 with a line height under 1 (0.95) and tracking of -3 percent. [Measured]
  4. Fluid type. Sizes are fractional at 1440 wide (70.46, 57.5, 17.86) and round at 390 (44, 38, 16). [Measured] That points to type that scales with the window between breakpoints, though only two widths were measured. [Inferred]
  5. Round everything. Buttons are full pills, 52 high on desktop and 48 on mobile. Panels use 32px corners on desktop and 24 on mobile. [Measured]

Source for this file: the home page, the Pay with Venmo page and the debit card page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. The sign-in page loaded empty in the automated browser and was not measured. Venmo does not publish a design system. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Primary button#000000 with white textGet the card, Download the app [Measured]
Secondary button#f5f5f7 with black textSee how it works, Pay with Venmo [Measured]
Sky#4bb4ffHero panels and feature bands [Measured]
Indigo#3f34eeCard and feature bands, white text on top [Measured]
Cream#f1efeaCalm feature bands [Measured]
Text#000000All text on light surfaces [Measured]
Canvas#ffffffPage [Measured]

Typography

Venmo Sans is the only face on the pages measured, at 400, 500 and 700. [Measured]

Role1440 wide390 wideWeight and tracking
Display70.46 on 66.9444 on 41.8700, -3 percent [Measured]
Headline57.5 on 54.638 on 36.1700, -3 percent [Measured]
Title38.7 on 36.828.5 on 27.1700, -3 percent [Measured]
Card heading31.7 to 47.224.5700, -3 percent [Measured]
Body17.86 on 24.116 on 21.6400, -1 percent [Measured]
Button16.93 on 19.716 on 16500 [Measured]
Small14 on 18.9not measured500, -1 percent [Measured]

Shape and spacing

Buttons are pills (radius 1000). Panels use 32px corners on desktop and 24 on mobile, with 8, 12 and 16 for smaller tiles. [Measured] Buttons carry 16 by 20 padding. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light only. The dark color scheme pass changed nothing. [Measured]

Platform: iOS

How the Venmo iOS app looks and behaves was not captured. Venmo does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for home, paying and the card is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A prominent Pay or Request action. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the black and white base, the color bands and Venmo Sans with the web. [Inferred]

Platform: Android

How the Venmo Android app looks and behaves was not captured. Venmo does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for home, paying and the card is expected. [Inferred]

Main action

Expected on Android: Floating action button.

A prominent Pay or Request action. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the black and white base, the color bands and Venmo Sans with the web. [Inferred]

Platform: Web

The home page, Pay with Venmo page and debit card page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A white top bar with text menus for the product areas (Debit, Credit, Checkout and more) at 16, 47 high on desktop. On mobile they become 48 high rows in a menu. [Measured]

Main action

Expected on Web: Page-level button.

A black pill with white text, 52 high on desktop and 48 on mobile, with 16 by 20 padding. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Questions on the card page are plain text accordion rows at 18.72, 24 high on desktop and 32 to 43 on mobile. [Measured]

Text sizing

Expected on Web: Browser zoom.

Fractional sizes at 1440 and round sizes at 390. [Measured] This suggests sizes scale with the window, which was not checked at other widths. [Inferred]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 48 to 52 high and menu rows 48 on mobile. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A responsive site whose type and panel corners are smaller at 390 than at 1440, while colors and pill shapes stay the same. [Measured]

Cross-platform consistency

Consistent across platforms: the black and white base, pill buttons and Venmo Sans. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Keep text black on white and let flat color bands do the decoration.
  • Use a black pill for the main action and a pale gray pill for the second.
  • Set headlines heavy, tight and with a line height under 1.
  • Round panels generously (32 on desktop, 24 on mobile).

Don't

  • Don't add gradients or shadows to the color bands.
  • Don't color the main button blue. It is black.
  • Don't use square corners.

Known Gaps

  • The sign-in page loaded empty in the automated browser, and the signed-in feed and payment flow sit behind an account, so neither was measured.
  • The iOS and Android apps were not captured, and Venmo publishes no design system, so every mobile topic is inferred.
  • Icons, motion and modals were not measured.
  • Venmo Sans is private. Outfit was chosen by comparing the same headline side by side: its geometric shapes match closely and it runs about 2 percent wider. Hanken Grotesk matched width more exactly but its letters are less geometric.
  • The cookie banner uses a different blue. It belongs to the parent company's consent tool and was left out.
  • Account deletion and store policy rules were not verified.