A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
23tokens
11type steps
4radius steps
12pxspacing base
Venmo, in one page
Venmo's iOS app is one of the few fintech apps that feels like a social network, not a bank — and that's the whole point. The first screen you see after login isn't a balance or a receipt, it's a feed of your friends' transactions written in plain English with emoji memos. "Alex paid Jordan 🍕🍺 Pizza Friday". The visual language is designed to make financial transactions feel casual, playful, and narratively interesting. The Venmo blue (#008CFF) is the hero color — saturated, friendly, slightly brighter than a traditional "banking blue" — and it does all the heavy lifting on CTAs, links, and branded moments. Beyond that, the app is remarkably restrained: clean white canvas, soft gray dividers, charcoal text, and a few semantic colors (green for received money, red for requests).
The layout rhythm is feed-first. Transaction rows stack vertically, each one telling a tiny social story: avatar | actor name | verb (paid/charged) | recipient name | emoji-rich memo | timestamp | comment-like-share row (Instagram-style). The typography cascades from this: a payment actor name is Medium weight, the verb is Regular, the recipient is Medium again, and the memo is Regular with emoji given generous breathing room. The emoji is not decorative here — it IS the primary signal of what the transaction was about, because Venmo has trained its users that "🍕" means pizza without needing any words. Payment amounts are never shown inline on the public feed (by design), only to the two parties.
Typography is Venmo Sans (internal, similar to Brown Std / Source Sans). It ships in weights 400 and 700 for most UI, with a custom Display cut for big moments — the balance on the Me tab (giant, bold, dollar sign + digits filled dynamically), the "You paid Alex $12.50" confirmation screen, and the sign-up welcome hero. The Display face is slightly geometric, slightly humanist, and heavy enough to feel substantial. The Pay / Request split button is the absolute center of the app and deserves the emphasis: it's a blue pill, 50pt tall, with two equal halves divided by a subtle white stroke, and it sits fixed at the bottom of the tab bar area.
Key Characteristics:
- Venmo Blue (
#008CFF) as the singular brand color — bright, friendly, not a banking navy - Social transactions feed — the defining signature: Instagram-style rows with like/comment on every payment
- Emoji-rich memos as the main "what was this for" cue —
🍕🍺 Pizza Fridayis canonical Venmo copy - Pay / Request split pill button — blue, 50pt tall, at the center of the bottom navigation
- Large balance display on the Me tab — Venmo Display 48-64pt with $ prefix
- Venmo Sans (Brown-adjacent), weights 400/700 — humanist sans with warm geometry
- Checkmark confirmation animation on payment send — blue circle, animated checkmark stroke
- Light canvas-first — white or off-white with soft divider gray
#F2F2F2 - Blue gradient hero sections on signup/onboarding — soft blue gradient behind big headlines
- QR code pay / scan — square QR with blue Venmo logo center, the preferred in-person flow
Do's and don'ts
Do
- Use Venmo Blue (
#008CFF) as the singular brand color — bright, friendly, not banking-navy - Render the feed transaction line as mixed weights: actor bold, verb regular, recipient bold
- Use emoji in memos as the primary "what this is for" signal —
🍕🍺 Pizza Friday - Keep the Pay / Request split pill pinned at the bottom as the defining CTA
- Render amounts in Venmo Display: 72pt on Pay screen, 56pt on balance, 44pt on confirm
- Use soft
#2F3033for text primary — warmer than pure black, on-brand - Show tabular numerals on balances and amounts — columns must align
- Use green (
#4BB543) for received money, red (#D32E2E) for requests/errors - Trigger medium haptic on Pay tap, success haptic + confetti on send commit
- Render the payment-sent checkmark as an animated stroke drawing inside a blue circle
Don't
- Don't show amounts on the public feed — Venmo's privacy model hides them except to the two parties
- Don't use navy or dark blue for the brand — Venmo Blue is saturated and bright (
#008CFF) - Don't separate the dollar sign from the number — it's "$24.50", one unit
- Don't replace emoji in memos with your own icon set — system emoji is the brand
- Don't use pure black for text —
#2F3033is warmer and softer - Don't animate aggressively — Venmo motion is calm (spring dampings 0.7-0.85)
- Don't use drop shadows beyond 15% opacity — the app is flat with one branded shadow (Pay button)
- Don't hide the Pay / Request pill — it's the permanent home-base action
- Don't skip the confirmation animation — the checkmark and confetti are the emotional payoff
- Don't use gradients on regular CTAs — gradient is reserved for balance card and hero moments
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Venmo design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Venmo Blue: #008cff
- Lighter Blue: #3d95ce
- Deep Blue: #0078de
- Blue Tint: #e6f4ff
- Canvas White: #ffffff
- Surface Muted: #f7f7f7
- Divider: #f2f2f2
- Divider Strong: #e0e0e0
- Text Primary: #2f3033
- Text Secondary: #6b6e76
Type:
- families: Venmo Sans, Venmo Display, Brown Std, Source Sans Pro
- scale: 11, 12, 13, 15, 16, 17, 22, 36, 44
- weights: 400, 600, 700
Shape:
- radius: 20, 22, 25, 26
- elevation: Shadow: `rgba(0,140,255,0.25) 0 4px 12px` (branded blue shadow)
Spacing: 12, 16
Rules:
- Use Venmo Blue (`#008CFF`) as the singular brand color — bright, friendly, not banking-navy
- Render the feed transaction line as mixed weights: actor bold, verb regular, recipient bold
- Use emoji in memos as the primary "what this is for" signal — `🍕🍺 Pizza Friday`
- Keep the Pay / Request split pill pinned at the bottom as the defining CTA
- Render amounts in Venmo Display: 72pt on Pay screen, 56pt on balance, 44pt on confirm
- Use soft `#2F3033` for text primary — warmer than pure black, on-brand
Avoid:
- Don't show amounts on the public feed — Venmo's privacy model hides them except to the two parties
- Don't use navy or dark blue for the brand — Venmo Blue is saturated and bright (`#008CFF`)
- Don't separate the dollar sign from the number — it's "$24.50", one unit
- Don't replace emoji in memos with your own icon set — system emoji is the brand
- Don't use pure black for text — `#2F3033` is warmer and softer
- Don't animate aggressively — Venmo motion is calm (spring dampings 0.7-0.85)
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Brand)
- Venmo Blue (
#008CFF): The defining brand color. Primary CTAs, links, Pay button, send confirmation, tab active. - Lighter Blue (
#3D95CE): Hover / secondary blue tint, used in illustrations and marketing. - Deep Blue (
#0078DE): Pressed state on primary buttons. - Blue Tint (
#E6F4FF): Soft blue wash for promo banners, info callouts, pressed row background. - Blue Gradient (hero screens):
linear-gradient(#008CFF 0%, #0078DE 100%)— vertical or slightly diagonal, used on signup, onboarding, checkmark animation.
Canvas & Text (Light)
- Canvas White (
#FFFFFF): Primary background. - Surface Muted (
#F7F7F7): Card/row pressed state, quiet sectional backgrounds. - Divider (
#F2F2F2): Hairline dividers between feed rows. - Divider Strong (
#E0E0E0): Group separators, setting row bottoms. - Text Primary (
#2F3033): Primary body, names, headlines (slightly warm charcoal, not pure black). - Text Secondary (
#6B6E76): Timestamps, metadata, helper text. - Text Tertiary (
#9AA0A8): Disabled states, placeholders.
Dark Mode
- Dark Canvas (
#1A1A1A): Primary dark canvas. - Dark Surface 1 (
#242424): Elevated cards. - Dark Surface 2 (
#2E2E2E): Sheets, higher elevation. - Dark Divider (
#2A2A2A). - Dark Text Primary (
#FFFFFF). - Dark Text Secondary (
#A0A0A0).
Semantic
- Received Green (
#4BB543): "+$24.50" payment-received amounts, success states. - Charge Red (
#D32E2E): "-$24.50" payment-sent amounts in your activity, error validation, destructive actions. - Pending Orange (
#F5A623): Pending transactions, "Scheduled" status. - Info Blue Link (
#008CFF): In-body links, comment @mentions.
Hero Illustrative
- Sunshine Yellow (
#FFE066): Accent on marketing illustrations and occasional emoji overlays. - Coral (
#FF8E72): Occasional accent in reward / promo graphics.
Type scaleRead the full spec
Font Family
- Primary (UI):
Venmo Sans(internal, ~Brown Std / Source Sans lineage) — weights 400 / 600 / 700 - Display (Hero moments):
Venmo Display— used for balance numbers, sign-up hero, confirmation amounts - Legacy / fallback:
Brown Std,Source Sans Pro— many early brand assets used Brown specifically - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Source Sans Pro', Helvetica, Arial, sans-serif - CJK / Non-Latin: Noto Sans fallback
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Balance Display | Venmo Display | 56pt | 700 | 1.0 | -0.8pt | Me-tab balance hero ("$124.50") |
| Payment Confirm | Venmo Display | 44pt | 700 | 1.0 | -0.5pt | Payment amount on confirm screen |
| Sign-up Hero | Venmo Display | 36pt | 700 | 1.1 | -0.4pt | Welcome headline |
| Screen Title | Venmo Sans | 22pt | 700 | 1.2 | -0.2pt | "Activity", "Me", "Pay or Request" |
| Feed Transaction Line | Venmo Sans | 15pt | 400 | 1.4 | 0pt | Mixed weights inline (see below) |
| Feed Actor / Recipient | Venmo Sans | 15pt | 600 | 1.4 | 0pt | Names in feed row (bolded) |
| Feed Memo | Venmo Sans | 15pt | 400 | 1.4 | 0pt | Memo + emoji text |
| Timestamp | Venmo Sans | 13pt | 400 | 1.3 | 0pt | "2h ago", "Nov 12" |
| Comment Body | Venmo Sans | 13pt | 400 | 1.4 | 0pt | Comments under a transaction |
| Amount (Activity) | Venmo Sans | 17pt | 700 | 1.1 | -0.1pt | "+$12.50" / "-$12.50" |
| Button (Primary) | Venmo Sans | 16pt | 700 | 1.0 | 0.2pt | "Pay", "Request", "Confirm" |
| Button (Secondary) | Venmo Sans | 15pt | 600 | 1.0 | 0pt | "Cancel", outline buttons |
| Input Field | Venmo Sans | 16pt | 400 | 1.3 | 0pt | Memo input, amount input |
| Amount Input (Hero) | Venmo Display | 72pt | 700 | 1.0 | -1.0pt | Central amount input on Pay screen |
| Tab Label | Venmo Sans | 11pt | 600 | 1.0 | 0.1pt | Tab bar labels |
| Meta / Helper | Venmo Sans | 12pt | 400 | 1.3 | 0pt | Terms, helper text |
Principles
- Feed rows mix weights inline: actor name bold, verb regular, recipient bold, memo regular — emphasis flows naturally through a single sentence
- Display face reserved for numbers and welcome moments: big-number moments (balance, payment confirm, amount input) earn the Display cut
- Dollar sign glued to number: no space between
$and the digits — "$24.50" not "$ 24.50" - Emoji in memos kept at native OS emoji rendering: don't re-render them; use the system emoji font stack
- Weights concentrated at 400 / 600 / 700: Regular, semibold, bold
- No italics: straight upright throughout
- Tabular numerals on balances and amounts: so columns align in activity lists
Components and layoutRead the full spec
Buttons
Pay / Request Split Pill (The Signature)
- Shape: Pill (full 50pt rounded), split into two halves by a 1pt white divider
- Width: full-width minus 16pt side margins
- Height: 50pt
- Background:
#008CFFVenmo Blue, solid fill - Text:
#FFFFFF, Venmo Sans 16pt weight 700 with 0.2pt tracking - Left half: "Pay" with optional leading arrow-right icon; Right half: "Request" with optional leading arrow-left icon
- Pressed state per half: background darkens to
#0078DE, scale 0.98, haptic medium - Shadow:
rgba(0,140,255,0.25) 0 4px 12px(branded blue shadow)
Primary Confirm ("Send $24.50")
- Background:
#008CFF - Text:
#FFFFFF, Venmo Sans 16pt w700 - Height: 52pt
- Corner radius: 26pt (full pill)
- Full-width minus 16pt margins
- Pressed:
#0078DE, scale 0.98, success haptic on send commit - Loading: white activity indicator replaces label
Outline Secondary
- Background: transparent
- Border: 1.5pt
#008CFF - Text:
#008CFF, Venmo Sans 15pt w600 - Height: 44pt, corner radius 22pt (pill)
- Pressed: background
#E6F4FF, light haptic
Destructive ("Cancel payment")
- Background: transparent
- Text:
#D32E2E, Venmo Sans 15pt w600 - Height: 44pt
- No border
- Used sparingly — Venmo prefers neutralized language
Icon Button (Feed Row)
- Size: 32pt hit area (fits beside timestamps in feed rows)
- Icon: 18pt
#6B6E76default,#008CFFon tap (like / comment) - No background
- Used for: Like (heart), Comment (bubble), Share (arrow up from square)
Cards & Containers
Feed Transaction Row (THE Signature Component)
- Padding: 12pt vertical, 16pt horizontal
- Background:
#FFFFFF - Leading: 40pt circular avatar (actor's photo)
- Main content column (flex-1):
- Line 1 (transaction story):
[Actor Bold] paid [Recipient Bold] · 2h - Line 2 (memo):
🍕🍺 Pizza Friday(15pt w400) - Line 3 (interaction row): Heart icon + count | Comment icon + count
- Trailing: no amount shown (public feed privacy)
- Divider: 1pt
#F2F2F2below each row - Pressed state: background
#F7F7F7
Activity Row (Your Own Transactions)
- Same structure but includes amount on trailing side
- Amount in Venmo Sans 17pt w700, colored:
+$24.50in#4BB543(you received)-$24.50in#2F3033(you paid — neutral)- Pending:
$24.50in#F5A623with "Pending" chip - Status chip: pill with colored text
Balance Card (Me Tab Hero)
- Full-width, 180pt tall
- Background: gradient
#008CFF → #0078DEvertical - Content:
- Top-left: "Venmo balance" in Venmo Sans 14pt w400 white 80%
- Center: "$124.50" in Venmo Display 56pt w700 white (with tabular digits)
- Bottom row: "Transfer to bank" pill (white bg, blue text) + "Add money" pill (white bg, blue text)
- Corner radius: 20pt
- Margin: 16pt horizontal
Payment Confirmation Screen
- Full-screen takeover after Pay tap
- Top: large blue gradient background
- Center: animated checkmark circle (80pt circle, blue background, white check stroke animates in 400ms)
- Below: "Sent" in Venmo Display 28pt w700 white + amount "$24.50" in 44pt Display w700 + "To Alex" in 16pt w400
- Confetti particle animation around the checkmark (200ms burst)
- "Done" pill button in white with blue text below
Amount Input Screen (Pay Flow)
- Pure canvas white, no decorations
- Centered: giant
$24.50entry field in Venmo Display 72pt w700#2F3033 - Dollar sign glued, digit-by-digit keypad taps update live
- Below: "Add memo..." text input, full-width, flat (no border, just underline on focus)
- Below memo: 👥 emoji picker with 12 popular emojis for quick selection
- Fixed bottom: "Pay $24.50" button (solid blue pill, 52pt, full-width)
Navigation
Top Nav (Screen Header)
- Height: 44pt + safe area
- Background:
#FFFFFFwith 0.5pt bottom border#F2F2F2when content scrolls - Leading: screen title "Activity" in Venmo Sans 22pt w700
#2F3033 - Trailing: 24pt
#008CFFaction icon (scan QR, add friend, etc.) - No centered title; title is left-aligned (iOS large-title style but smaller)
Bottom Tab Bar (with Pay/Request Pill)
- Height: 64pt + safe area (taller to accommodate the split pill)
- Background:
#FFFFFFwith 0.5pt top border#F2F2F2 - 5 tab slots, but the center "Pay/Request" is a full-width pill overlaying the tab bar rather than a tab icon
- Tabs arranged: Home feed | Incomplete | [Pay/Request pill — spans center 60%] | Cards | Me
- Icon size: 24pt
- Active:
#008CFFfill + label same color - Inactive:
#6B6E76outline icons - Labels: Venmo Sans 11pt w600, always shown
Scan / QR Sheet
- Full-screen takeover with black background
- Center: QR viewfinder with blue corner brackets (animated scanning line)
- Bottom: "Show my QR" pill to flip to your own personal QR (appears on a soft blue gradient card)
- Your QR: centered 240×240pt QR code with Venmo logo in the middle circle (white background, blue logo)
Input Fields
Amount Input
- Flat, no border
- Dollar sign auto-prepended
- Live digit update as user types
- Hero size: Venmo Display 72pt w700 on Pay screen
- Regular size: 22pt w700 on inline forms
Memo Input
- No border default
- Placeholder: "What's it for?" in Venmo Sans 16pt w400
#9AA0A8 - Emoji keyboard access via the system keyboard's emoji switcher
- Recent/suggested emoji row above the keyboard when active
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Balance card shrinks to 160pt, Display balance scales to 48pt |
| iPhone 13/14/15 | 390pt | Standard 180pt balance card, 56pt balance number |
| iPhone 15/16 Pro | 393pt | Dynamic Island pushes nav 8pt lower |
| iPhone 15/16 Pro Max | 430pt | Balance scales to 64pt, Pay button spans more horizontal space |
| iPad | 768pt+ | Feed constrains to 480pt centered, balance card max 600pt |
Dynamic Type
- Feed rows, body, comments: full scale
- Balance Display: scales to 72pt max, then truncates
- Amount input Display: fixed 72pt (layout-sensitive)
- Tab labels: fixed 11pt
- Button labels: scale to 120% then truncate
Orientation
- Home / Activity / Me: portrait-locked (social feed is portrait content)
- Pay / Request: portrait-locked
- Receipt / Transaction detail: portrait-locked
- QR scanner: portrait-locked
Touch Targets
- Pay/Request split pill: 50pt tall — both halves 44pt minimum touch area
- Feed rows: full-row tappable, 80-100pt tall
- Like / Comment icons: 32pt hit area with 18pt glyph
- Avatar: 40pt with 44pt hit area
- Tab bar icons: 24pt icon inside 44pt effective hit
Safe Area Handling
- Top: safe area respected on nav
- Bottom: tab bar + Pay pill extend to home indicator; pill padded 24pt above safe-area-bottom
- Sides: 16pt content insets
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-venmo {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #2f3033;
--heading-color: #2f3033;
--link-color: #0076d7;
--link-hover-color: #005aa4;
--border-color: #dadada;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(47,48,51,0.06);
--card-hover-shadow: 0 6px 18px rgba(47,48,51,0.12);
--header-bg: #2f3033;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #6e6e70;
--button-bg: #008cff;
--button-text-color: #000000;
--button-hover-bg: #0070cc;
--button-border: none;
--button-border-radius: 25px;
--button-secondary-bg: #f3f3f3;
--button-secondary-text-color: #2f3033;
--button-secondary-hover-bg: #e6e6e7;
--button-secondary-border: 1px solid #dadada;
--prompt-bg: #f5f5f5;
--prompt-text-color: #2f3033;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 25px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- westjr 79.0%
- recruit 78.5%
- sanu 78.1%
- plenty of fish 77.5%
- daikin 75.1%
Where this came from
- Source document
ios/design-md/finance/venmo/DESIGN.md· 25.3 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.