Venmo Design System

Overview

Venmo's marketing canvas is two structural surfaces — white #ffffff and warm sand #f1efea — alternating in full-bleed bands, with the signature blue #008cff reserved for the atmospheric weather above the page rather than the click below it. The page opens on a #008cff header gradient fading into the white hero where "Pay friends." sits in Athletics at 63px / weight 500 with letterSpacing: -1.89px. Below it, photography of friends holding phones — never typography — carries the warmth across rows. The primary CTA on every band is a pill #0074de with white text at radius 1000px — the brand's explicit pill value, not the customary 9999px shortcut.

Atmospheric blue as signature: Venmo treats {colors.brand} (#008cff) the way Airbnb treats Rausch and Monzo treats Hot Coral — as a material, not a CTA. The header gradient is #008cff. The rotating Stash card mockup is #008cff. The button is #0074de (one step darker). Where most payments brands paint the CTA in their brand colour, Venmo paints the weather above it.

Display type is Athletics at the single weight 500 across every tier from a 33px section opener up to a 63px hero with lineHeight: 1.0 and letterSpacing ranging -0.67px to -1.89px. There is no thin display alternative and no weight 700 variant. Body type is Scto Grotesk A at weight 400 for prose, weight 500 for lead paragraphs, and weight 700 for inline link emphasis. PayPal Open Regular is scoped to the regulatory footer at 14px and never appears above the fold — a structural reminder that Venmo is a PayPal subsidiary, but the brand voice on the marketing canvas is its own.

Key Characteristics:

• Two-mode band rhythm — {colors.canvas-light} (white) for photography catalogue rows, {colors.surface-sand} (#f1efea) for the rotating-card band, switched in full-bleed with no soft transitions.
• Signature {colors.brand} (#008cff) is the colour of the header sky and the rotating hero card — never the colour of a CTA button.
• The primary CTA is {components.button-primary} — a {colors.brand-link} (#0074de) pill with white text, {rounded.full} (1000px) radius, {spacing.sm} 34px padding, 48px tall.
• Display is Athletics at weight 500 exclusively — 33px to 63px, with letterSpacing from -0.67px to -1.89px and lineHeight: 1.0 on the hero.
• The pill radius is the literal value 1000px rather than the customary 9999px — a deliberate maximal-pill commitment that survives in production CSS.
• Cards lean on one corner: 32px on every product tile in the "Venmo everything" triad and on the rotating hero card. The 32px radius appears 12 times — by far the dominant value on the page.

Colors

Source pages: home (/).

Brand

• Venmo Blue ({colors.brand} — #008cff): frequency 4. Used as gradient (4). The signature electric blue — a fully-saturated voltage that fills the header gradient at the top of the page and the rotating Stash card mockup. Rare on the marketing canvas (under 5% of total chromatic load); reserved as an atmospheric colour. Where most fintech brands push their primary into CTA fills, Venmo holds it back to the weather above and the object on the page.
• Brand Link ({colors.brand-link} — #0074de): frequency 19. Used as text (11), border (8). One step darker than the signature — fills the primary pill button, anchors text on link-list rows, and renders inside the Venmo Debit Card / Credit Card tile labels. The actual interactive blue on the page.
• Brand Link Hover ({colors.brand-link-hover} — #005ba4): frequency 2. Used as text (1), border (1). Two steps darker than #0074de — used on pressed/hover states for primary CTAs and on a single body-text emphasis row.
• Brand Legacy ({colors.brand-legacy} — #0070ba): frequency 6. Used as text (3), border (3). A slightly older PayPal-leaning blue captured by the extractor — appears on a small number of legacy elements (the "Discover" rail label, one footer link). Reserved for transitional UI.
• Brand Pale ({colors.brand-pale} — #deefff): frequency 2. Used as bg (2). The pale-cyan tint that fills a single info chip set and the soft surface behind tertiary callouts. The brand's tertiary tint.
• Brand Header Deep ({colors.brand-header-deep} — #012169): the themeColor declared in the brand's manifest at <meta name="theme-color"> — a deep navy that drives the browser-chrome colour on iOS Safari and Chrome. It does not paint any pixel on the rendered page, but it is the declared brand voltage at the manifest level. Reserved for browser chrome and PWA install surfaces.

Ink

• Ink ({colors.ink} — #000000): frequency 314. Used as text (156), border (155), shadow (3). The brand's load-bearing dark — pure black on every heading and most body prose on white. Not a navy or near-black; Venmo paints body type with true #000000, which inverts the Monzo / Mercury convention of using a deep navy for warmth.
• Ink Mute ({colors.ink-mute} — #2f3033): frequency 148. Used as text (74), border (74). A very dark gray with a faint blue tint — fills secondary body prose, the bodyText <p> rows under section headings, and footer-light copy in PayPal Open. The brand's "second ink" colour.

Surface

• Canvas Light ({colors.canvas-light} — #ffffff): frequency 18. Used as bg (13), gradient (4), border (1). Default page background; carries the photography catalogue bands, the FAQ-style link-list rows, the Venmo Debit / Check Out / Credit Card tile triad, and the footer.
• Surface Sand ({colors.surface-sand} — #f1efea): frequency 1. Used as bg (1). The warm off-white sand band — fills the rotating Stash card hero strip. The single non-white structural surface on the page; reads as warmth without leaving the neutral spectrum.
• Surface Pale Blue ({colors.surface-pale-blue} — #deefff): the same hex as {colors.brand-pale}, doubling as a tertiary tinted surface for chips and soft callouts. Scoped to chip backgrounds only.

On-color

• On Brand ({colors.on-brand} — #ffffff): white text and iconography on {colors.brand} and {colors.brand-link} surfaces — the only legible-foreground colour over saturated blue.
• On Ink ({colors.on-ink} — #ffffff): the same hex as on-brand, scoped to dark-fill app-download pills.

Hairline & Scrim

• Hairline Light ({colors.hairline-light} — rgba(0,0,0,0.12)): 12%-alpha black — 1px borders between link-list rows and the footer-top divider.
• Hairline Mute ({colors.hairline-mute} — rgba(47,48,51,0.16)): 16%-alpha ink-mute — 1px borders inside FAQ-style accordions.
• Divider Soft ({colors.divider-soft} — rgba(0,0,0,0.06)): 6%-alpha black — micro-dividers on dense legal-footer rows.
• Scrim ({colors.scrim} — rgba(0,0,0,0.5)): 50%-alpha black — image overlay on photography rows where text needs contrast against a busy background.
• Brand Glow ({colors.brand-glow} — rgba(0,140,255,0.16)): 16%-alpha signature blue — used as a faint atmospheric wash on the rotating hero card edge.
• Ink Overlay ({colors.ink-overlay} — rgba(0,0,0,0.04)): 4%-alpha black — the lightest hover wash on outline pill buttons.
• On Dark Mute ({colors.on-dark-mute} — rgba(255,255,255,0.72)): 72%-alpha white — secondary copy on the #008cff header gradient and on rotating card sub-labels.

Semantic

The marketing canvas does not declare a separate semantic palette (success / warning / danger / info). Error states live inside the authenticated app product (transaction failures, splits, the social feed) and are out of scope here.

Typography

Font Family

Three families, with one scoped exception:

• Athletics at the single weight 500 — every heading tier from {typography.display-md} (33px) up to {typography.display-xxl} (63px) renders in this one weight. There is no thin display alternative; there is no weight 700 variant.
• Scto Grotesk A at weights 400 (body prose), 500 (lead paragraphs), and 700 (inline link emphasis and anchor labels). Body sizes are 16px (caption), 18px (default), and 22px (lead).
• PayPal Open Regular at weights 400/500/600 — scoped exclusively to the regulatory footer at 14px. Never appears above the fold.

Athletics is proprietary to Venmo's display licensing; Scto Grotesk A is by Schick Toikka; PayPal Open is the parent company's UI sans. When Athletics cannot be licensed, Söhne Display or Inter Display at weight 500 with letterSpacing: -1.5px to -2px is the closest open-source path. Scto Grotesk A's substitute is Inter or Söhne at weights 400/500/700 — the brand's grotesque silhouette matches both.

Hierarchy

Principles

• Single display weight is the brand. Athletics never appears below weight 500 in the marketing system. Drop to Scto Grotesk A only when the size is below 24px and the role is body or lead.
• Negative tracking scales with size. Athletics tracks -0.67px at 33px, -1.02px at 51px, and -1.89px at 63px — the larger the type, the tighter the letters. Scto Grotesk A keeps letterSpacing: normal at every size.
• Line-height collapses on the hero. display-xxl at 63px uses lineHeight: 1.0. Every other display token uses 1.05; every body token uses 1.4.
• PayPal Open is footer-only. The parent-company UI sans is structurally walled off to legal chrome — never use it above the fold or inside product-tile copy.

Note on Font Substitutes

Athletics and Scto Grotesk A are both proprietary. Söhne Display at weight 500 (display) plus Inter Variable at weights 400/500/700 (body) is the closest open-source pairing. Avoid Helvetica or Roboto — both are too geometric for Athletics's slightly humanist display silhouette.

Layout

Spacing System

• Base unit: 8px (with 4 / 12 / 16 sub-tokens).
• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 53px · {spacing.band} 79px.
• Section padding: 48–79px on marketing surfaces; 24px on mobile.
• Card internal padding: 32px on product tiles and the rotating hero card, 24px on photography rows, 24px on pale-blue feature cards.
• Button padding: 12px 34px on every pill variant — the same value across primary, hover, and outline.

Grid & Container

The page centers in a ~1100px column on desktop; the rotating hero card extends to the column edge with the photography rows clamping the grid to a 3-up tile triad in the "Venmo everything" row. The "Venmo your friends" and "Grow a business" rows use a 2-up split with one photography pane and one product copy pane. Section gaps tend toward 53px with the rotating-card band breathing at 79px.

Whitespace Philosophy

Bands have generous vertical breathing room (53–79px section padding) and the column width holds at ~1100px even on wide screens — the brand chooses readable rhythm over edge-to-edge density. Inside cards the rhythm tightens: 16px between body rows, 8px on adjacent label-and-value pairs.

Elevation & Depth

Decorative Depth

Venmo's depth system is structural: the alternation between {colors.canvas-light} and {colors.surface-sand} is the visual lift, not a shadow ladder. Drop shadows do not appear on any extracted component — the page registers depth through hairline borders and band switches. The header gradient #008cff at the very top of the page is the one soft transition; below it every band edge is hard.

Shapes

Border Radius Scale

Pill Geometry

The 1000px value is the actual radius Venmo ships — not the customary 9999px infinity-radius shortcut. The literal 1000px reads in the stylesheet as a maximal-pill commitment rather than a "round it off to whatever" convention. Every button across primary, hover, and outline variants uses this same radius, with 12px 34px padding and a 48px height. The 32px product-tile corner is the page's load-bearing decorative geometry — it appears 12 times across the rotating hero card and the "Venmo everything" tile grid, three times more than the next-most-common value.

Components

Headers & Navigation

header-gradient — the brand-blue page-top gradient strip.

• Background {colors.brand} (#008cff), text {colors.on-brand} (#ffffff) via {typography.link-sm}, height 64px, padding 16px 24px. The single atmospheric blue surface on the page; fades into the white hero immediately below.

top-nav — the page header underneath the gradient.

• Background {colors.canvas-light}, text {colors.ink} weight 700 via {typography.link-sm}. Logo wordmark on the left, primary nav center, sign-in + filled button-primary on the right.

nav-link — inline nav anchor.

• Background {colors.canvas-light}, text {colors.ink} weight 700 via {typography.link-sm}. No underline default; no hover colour shift documented.

Buttons

button-primary — the dominant CTA system-wide.

• Background {colors.brand-link} (#0074de), text {colors.on-brand} (#ffffff), type {typography.link-md}, padding 12px 34px, rounded {rounded.full} 1000px, height 48px.
• Used on every marketing band as the single filled pill. {colors.brand} (#008cff) never fills this button.

button-primary-hover — the pressed/hover variant.

• Background {colors.brand-link-hover} (#005ba4), inherits the rest from button-primary. Two steps darker than the base — a luminance step, not a chromatic shift.

button-outline-dark — 1px ink border on white.

• Background {colors.canvas-light}, text {colors.ink}, 1px solid {colors.ink} border, same pill geometry, height 48px. Appears as the secondary CTA on rows where the filled blue pill anchors the primary action.

Hero & Bands

hero-band-light — the white hero carrying "Pay friends."

• Background {colors.canvas-light}, text {colors.ink}, type {typography.display-xxl} (63px / 500 / letterSpacing: -1.89px), padding 53px 24px. The brand's tightest display tracking and largest type tier live here.

hero-band-sand — the warm sand band carrying the rotating Stash card.

• Background {colors.surface-sand} (#f1efea), text {colors.ink}, type {typography.display-md} (33px / 500), padding 53px 24px. The single non-white structural band on the page.

Cards

card-rotating-hero — the signature-blue Stash card mockup.

• Background {colors.brand} (#008cff), text {colors.on-brand} (#ffffff), padding 32px, rounded {rounded.lg} 32px. Hosts the rotating "Venmo everything" hero illustration on the sand band — the single component where {colors.brand} fills the surface.

card-product-tile — the "Venmo Debit / Check Out / Credit Card" triad.

• Background {colors.canvas-light}, text {colors.ink}, type {typography.body-md-lead}, padding 32px, rounded {rounded.lg} 32px, 1px {colors.hairline-light} border. The dominant card geometry on the page — three tiles render in this exact spec.

card-photography-row — the "Venmo your friends" and "Grow a business" rows.

• Background {colors.canvas-light}, text {colors.ink}, type {typography.body-lg}, padding 24px, rounded {rounded.lg} 32px. Pairs photography of friends holding phones with a single product copy block per row.

card-feature-pale — soft pale-blue interlude.

• Background {colors.surface-pale-blue} (#deefff), text {colors.ink}, padding 24px, rounded {rounded.md} 24px.

Rows & Lists

link-list-row — the FAQ-style anchor row.

• Background {colors.canvas-light}, text {colors.brand-link} (#0074de) via {typography.link-md} weight 700. Padding 16px 0px, 1px {colors.hairline-light} border between rows. The single place blue text appears as the row's anchor colour.

inline-link — body-prose inline link.

• Background {colors.canvas-light}, text {colors.brand-link} via {typography.body-lg-strong} weight 700. No padding, no border — pure anchor text inside paragraphs.

badge-tag — small pale-blue chip.

• Background {colors.surface-pale-blue} (#deefff), text {colors.brand-link}, type {typography.body-sm}, padding 4px 8px, rounded {rounded.xs} 4px. The sharpest-cornered geometry in the system.

Tiles & Footer

app-download-pill — dark-fill app-store pill.

• Background {colors.ink} (#000000), text {colors.on-ink} (#ffffff), padding 12px 24px, rounded {rounded.full} 1000px, height 44px. The single ink-filled pill on the page; reserved for App Store / Google Play download CTAs.

footer-light — the regulatory footer.

• Background {colors.canvas-light}, text {colors.ink-mute} (#2f3033) via {typography.footer-body}, padding 48px 24px, 1px {colors.hairline-light} top border. Holds 4 columns of link groups, social icons, and the FDIC / Synchrony Bank disclosure row.

footer-link — footer anchor row.

• Background {colors.canvas-light}, text {colors.ink-mute} via {typography.footer-label} weight 600. PayPal Open Regular renders here and only here on the page.

Do's and Don'ts

Do

• Reserve {colors.brand} (#008cff) for atmospheric surfaces — the header gradient and the rotating hero card. The signature blue fills header-gradient and card-rotating-hero and no other component.
• Use {colors.brand-link} (#0074de) as the primary CTA fill across every band — the one-step-darker blue is the brand's CTA voltage, not the signature #008cff.
• Render every heading in Athletics at weight 500 with negative letter-spacing scaling to size. Drop to Scto Grotesk A only when the type tier is {typography.body-lg} (22px) or smaller.
• Use literal 1000px for pill radius — not 9999px. The brand ships the explicit value.
• Switch background colour in full-bleed bands from #ffffff to #f1efea sand directly, never with gradient transitions — the slam is the depth system.
• Scope PayPal Open Regular to the footer at 14px. The parent-company UI sans is structurally walled off from every above-the-fold surface.

Don't

• Don't fill a CTA with {colors.brand} (#008cff) — the brand assigns the signature blue to atmosphere (header gradient, card mockup), not to actions. A #008cff filled button breaks the disciplined-scarcity rule that gives the colour its voltage and reads as a child of the gradient strip above.
• Don't bump Athletics below weight 500 — the single-weight-500 commitment is the brand's editorial signature. Lighter display weights collapse Athletics's slightly humanist silhouette into a generic display sans.
• Don't apply positive letter-spacing to Athletics display tokens — every Athletics token sits at negative tracking from -0.67px to -1.89px. Positive tracking inverts the brand's typographic signature and reads as generic editorial.
• Don't substitute 9999px for {rounded.full} (1000px) on buttons. The visual result clips identically, but the literal 1000px carries the brand's stylesheet voice.
• Don't use #2f3033 for primary body text — it is the brand's ink-mute (frequency 148, used as secondary text and footer-light copy). The primary body ink is {colors.ink} (#000000); reserve #2f3033 for secondary rows under section headings and footer prose.
• Don't soft-fade between {colors.canvas-light} and {colors.surface-sand} band boundaries — the hard slam is the brand's structural depth medium; a gradient transition removes the catalogue rhythm that lets photography do the warmth.
• Don't use PayPal Open Regular above the fold. The font is licensed for the parent-company chrome at the footer; using it on a hero or product tile breaks the brand-voice boundary the marketing canvas keeps strict.

Known Gaps

• Hover and pressed states are not fully captured across button variants — only the base button-primary and the button-primary-hover luminance step are documented. The brand likely applies a subtle opacity lift on button-outline-dark hover, but no precise value is extractable.
• Focus rings rely on browser-default outline behaviour; no token captures the focus colour or stroke width.
• Logged-in app surfaces (the social transaction feed, splits, the debit-card account view, Crypto holdings, Stash investing dashboards) are out of scope. Only the public marketing canvas at venmo.com is in this spec.
• Rotating hero illustration palette inside card-rotating-hero (the gradients on each rotating Stash card variant, the sage-green Stash card fill, the Credit Card metallic mockup) appears as raster art rather than CSS-rendered colour and is not enumerated as design tokens.
• Mobile-app screenshot art direction inside the "Venmo your friends" and "Grow a business" photography rows is described in prose but not tokenized — the photography is treated as content, not as a design token.
• Semantic palette (success, warning, danger, info) is not declared on the marketing canvas — error states live inside the authenticated app product and are out of scope here.
• Browser theme color #012169 from <meta name="theme-color"> does not paint any pixel on the rendered page; it is captured here as {colors.brand-header-deep} for completeness but is reserved for browser-chrome PWA install surfaces.