Venmo DESIGN.md

Brands

Peer-to-peer payments with bright blue consumer-fintech energy and playful simplicity. Venmo's public site uses its iconic blue, white space, rounded consumer UI, and social payment framing.

Raw DESIGN.md

At a glance

Group: Brands
Main color: #008cffBlue design systems
Fonts: Scto GroteskSF Mono

Colors in this file

#d9eaf8
Unnamed
#008cff
Unnamed
#0f172a
Unnamed
#0074d6
Unnamed
#ffffff
Unnamed
#f4faff
Unnamed
#64748b
Unnamed

Peer-to-peer payments with bright blue consumer-fintech energy and playful simplicity. Venmo's public site uses its iconic blue, white space, rounded consumer UI, and social payment framing.

1. Visual Theme & Atmosphere

Overall Aesthetic

Venmo feels like payments made social, simple, and highly mobile-native.

Mood & Feeling

Friendly
Social
Fast
Youthful
Clear

Design Density

Low to medium density. The product story is simple and consumer focused.

Visual Character

Bright Venmo blue
White rounded app surfaces
Phone mockups and social payment flows
Light, mobile-first confidence

2. Color Palette & Roles

Token	Hex	Role
`--venmo-blue`	`#008CFF`	Primary brand accent
`--venmo-blue-deep`	`#0074D6`	Hover/support
`--venmo-white`	`#FFFFFF`	Main surface
`--venmo-surface`	`#F4FAFF`	Soft background
`--venmo-ink`	`#0F172A`	Text
`--venmo-muted`	`#64748B`	Secondary text
`--venmo-border`	`#D9EAF8`	Borders

3. Typography Rules

Font Stack

css--font-display: "Scto Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Scto Grotesk", "Inter", system-ui, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Hero 54/700, H1 38/700, H2 28/700, Body 16/400, Small 14/400

4. Component Stylings

css.button-primary { background:#008cff; color:#fff; border:none; border-radius:999px; min-height:44px; padding:0 18px; font-weight:700; }
.button-secondary { background:#fff; color:#0f172a; border:1px solid #d9eaf8; border-radius:999px; min-height:44px; padding:0 18px; }
.card { background:#fff; border:1px solid #d9eaf8; border-radius:22px; }

5. Layout Principles

Spacing Scale

4, 8, 12, 16, 24, 32, 48px

Layout Behavior

Lead with app actions and social payment simplicity
Use phone UI mockups prominently
Keep the flow concise and mobile-first

6. Depth & Elevation

Venmo uses soft mobile-app card elevation on bright white and pale-blue surfaces.

7. Do's and Don'ts

Do

Keep it simple, fast, and social
Use bright blue decisively
Preserve friendly mobile payment flows

Don't

Don’t make it heavy banking UI
Don’t overcomplicate with enterprise product framing

8. Responsive Behavior

Breakpoints

Mobile <768px
Tablet 768px-1023px
Desktop 1024px+

Responsive Rules

Keep app download and payment actions prominent
Preserve phone mockup visibility on small screens

9. Agent Prompt Guide

textDesign this like Venmo: bright blue social-payments UI with rounded white app cards, mobile-first phone mockups, simple fintech messaging, and fast friendly consumer clarity.

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/venmo.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "venmo" })

RIDI (리디)

Brands · Pretendard Std

RIDI's interface is a long-form reading room dressed as a storefront. It is the rare consumer surface in Korean tech that treats typography itself as the brand — the screen opens on a near-pure white canvas (#ffffff)…

Costco

Brands · Helvetica Neue

Membership retail with practical red-blue branding and warehouse-scale merchandising. Costco's public site uses white surfaces, brand blue and red, straightforward retail hierarchy, and practical shopping modules.

Buffer

Brands · Public Sans

Social media management design with warm teal identity, creator-friendly surfaces, clean typography, and calm publishing workflows.

Intel

Brands · Intel Clear

Computing and silicon innovation with blue brand authority and clean technology framing. Intel's public site uses white and blue surfaces, a modern sans stack, and broad product storytelling around AI and chips.

VMware

Brands · Segoe UI

Enterprise-ready consumer-simple design with strong action blue, compact controls, and reusable app structure. VMware’s Clarity system focuses on accessibility, consistency, and practical patterns for dense business…

Unity

Brands · Inter

Creator-platform design with dark technical confidence and game-industry energy. Unity’s current web presence leans on black-and-white contrast, cool slate surfaces, bold product screenshots, and clean…

All Design.md files Browse by font