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
24tokens
10type steps
4radius steps
14pxspacing base
PayPal, in one page
PayPal is the elder statesman of fintech rendered as a friendly, recognizable consumer-finance utility. The canvas is white, the brand is blue — specifically the deep navy PayPal Blue (#003087) that's been the company's identity since the original 1998 logo, paired with a lighter, more contemporary PayPal Sky (#0070BA) introduced in the 2014 rebrand. Where Cash App rebels and Robinhood streamlines, PayPal reassures: the design language signals 25 years of trusted money movement, not nightclub energy. The interface revolves around three things — your balance, your recent activity, and the Send/Request buttons — laid out in calm rectangular cards on a clean white canvas.
The primary accent is PayPal Blue (#003087) — a deep, almost navy blue used for the wordmark, primary CTAs ("Send", "Request", "Continue"), and the active state on tabs. The lighter PayPal Sky (#0070BA) — the second blue introduced in the 2014 rebrand — appears as a secondary accent on icons, link colors, and the gradient versions of the wordmark. The dual-blue palette is iconic: the "P-P" overlap in the modern logo uses both colors layered. The rest of the palette is muted institutional gray with selective use of PayPal Cobalt (#001C64) for the deepest dark moments — the splash screen, certain illustration backgrounds, and dark mode primary surfaces.
Typography is PayPal Sans Big (display) and PayPal Sans Small (body) — proprietary faces drawn by Monotype for PayPal in 2018, replacing their earlier use of Helvetica Neue. They're warm contemporary sans serifs with rounded corners on the terminals (PayPal Sans Big is notably more rounded than PayPal Sans Small for legibility at large sizes), and they share a common skeleton so display and body weights stack cleanly. Tabular figures throughout: every $-amount, every transaction value uses tabular-nums so the vertical scan of the Activity feed reads cleanly. The voice is reassuring, not playful — PayPal Sans's roundness is gentle, not whimsical.
Key Characteristics:
- White canvas (
#FFFFFF) with#F5F7FAfor subtle section fills — calm institutional look - PayPal Blue (
#003087) for primary CTAs, active tab, wordmark; PayPal Sky (#0070BA) as secondary accent and link color - Balance card at top of the Wallet tab — large rounded rectangle, white surface, $-balance in PayPal Sans Big 36pt
- Big Send Money flow as the primary action — fullscreen amount entry leading to a recipient picker
- Activity feed as a stacked vertical list with rich icons — each row has a colored circular icon indicating transaction type
- Bottom tab bar: Home / Send / Wallet / Activity / Finances — 5 tabs (the "Send" tab is sometimes a center FAB-style button)
- PayPal Sans Big at hero sizes; PayPal Sans Small for body and metadata; tabular numerals on amounts
- Subtle 8pt-radius rounded cards everywhere — the calm, blocky composition is the brand
- Light shadows (
rgba(0,0,0,0.06)) — slightly more elevated than a pure tech-product feel, more like a card wallet - Recognizable PayPal "P-P" mark in the top-left corner of most screens — the brand is signaled at all times
Do's and don'ts
Do
- Use PayPal Blue
#003087for primary CTAs ("Send", "Continue") and active tab states — it's the core brand action color - Use PayPal Sky
#0070BAas the secondary accent — link color, icon color, gradient highlight - Render the wordmark with the dual-blue P-P overlap — sky behind, blue front, NEVER a single color
- Use PayPal Sans Big for headings, balance amounts, button text — the rounded display weight is the brand voice
- Use PayPal Sans Small for body, metadata, transaction subtitles — Big at 14pt is wrong
- Make the balance card the visual anchor of the Wallet tab — white surface, 16pt radius, subtle shadow
- Use rich circular icons on Activity rows colored by transaction type (Sent = blue, Received = green, Card = sky, Reward = amber)
- Use tabular numerals on every $-amount — the Activity feed's vertical column of prices must align
- Use the soft-pill CTA shape (radius = half-height) for primary buttons — 48pt tall, 24pt radius
- Use
#001435(almost-black with slight blue tint) for primary text, NOT pure black — the warmth aligns with the brand
Don't
- Don't render the wordmark in a single solid color — the dual-blue P-P overlap is the brand
- Don't use pure black
#000000for primary text —#001435(slight blue tint) is correct - Don't use vivid greens or yellows as primary accents — green and amber are reserved for status (success / pending)
- Don't replace PayPal Sans with Helvetica or generic sans — the rounded terminals are intentional and warm
- Don't use sharp-corner buttons — primary CTAs are soft pills (radius equals half-height)
- Don't make activity rows shorter than 64pt — the rich icon plus 2-line text needs the room
- Don't use yellow or orange as a primary brand accent — PayPal is blue-first; amber is for warnings only
- Don't render the activity icon as monochrome gray — the transaction-type colors are part of the brand
- Don't crowd the Send Money screen — the giant amount needs to feel calm and confident
- Don't use the deep
#001C64Cobalt outside of splash / illustration backgrounds — keep it reserved
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 PayPal design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- PayPal Blue: #003087
- PayPal Sky: #0070ba
- PayPal Cobalt: #001c64
- Canvas White: #ffffff
- Surface Gray: #f5f7fa
- Surface Gray 2: #eef1f4
- Divider: #e5e8ed
- Card White: #ffffff
- Text Primary: #001435
- Text Secondary: #2c2e2f
Type:
- families: PayPal Sans Big, Display, PayPal Sans Small, Inter
- scale: 11, 13, 14, 15, 16, 17, 18, 24, 36
- weights: 400, 500, 700
Shape:
- radius: 8, 16, 22, 24
- elevation: Shadow: `rgba(0,0,0,0.06) 0 2px 8px`
Spacing: 14, 16, 20, 24
Rules:
- Use PayPal Blue `#003087` for primary CTAs ("Send", "Continue") and active tab states — it's the core brand action color
- Use PayPal Sky `#0070BA` as the secondary accent — link color, icon color, gradient highlight
- Render the wordmark with the dual-blue P-P overlap — sky behind, blue front, NEVER a single color
- Use PayPal Sans Big for headings, balance amounts, button text — the rounded display weight is the brand voice
- Use PayPal Sans Small for body, metadata, transaction subtitles — Big at 14pt is wrong
- Make the balance card the visual anchor of the Wallet tab — white surface, 16pt radius, subtle shadow
Avoid:
- Don't render the wordmark in a single solid color — the dual-blue P-P overlap is the brand
- Don't use pure black `#000000` for primary text — `#001435` (slight blue tint) is correct
- Don't use vivid greens or yellows as primary accents — green and amber are reserved for status (success / pending)
- Don't replace PayPal Sans with Helvetica or generic sans — the rounded terminals are intentional and warm
- Don't use sharp-corner buttons — primary CTAs are soft pills (radius equals half-height)
- Don't make activity rows shorter than 64pt — the rich icon plus 2-line text needs the room
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- PayPal Blue (
#003087): Primary CTA fill, wordmark color, active tab color — the iconic deep blue. - PayPal Sky (
#0070BA): Secondary accent — link color, secondary CTA, gradient highlight, icon color. - PayPal Cobalt (
#001C64): Deepest blue — splash screen, illustration backgrounds, dark mode surface 1.
Brand Gradients
- PayPal Gradient Blue (
linear-gradient(135deg, #003087 0%, #0070BA 100%)): Used on the modern wordmark's "P-P" overlap effect and occasionally on hero banners.
Canvas, Surfaces & Dividers
- Canvas White (
#FFFFFF): Primary canvas everywhere on light mode. - Surface Gray (
#F5F7FA): Section backgrounds, secondary fills. - Surface Gray 2 (
#EEF1F4): Input field fill, card press states. - Divider (
#E5E8ED): Hairline row dividers, card outlines. - Card White (
#FFFFFF): Balance card and wallet item cards.
Text
- Text Primary (
#001435): Almost-black with a slight blue tint — primary text, balance amounts, screen titles. - Text Secondary (
#2C2E2F): Body text on lighter contexts. - Text Muted (
#687173): Metadata — transaction subtitles, dates, secondary labels. - Text Tertiary (
#9DA3A6): Placeholders, disabled labels.
Semantic
- Success Green (
#1C8B43): Money received confirmation, successful transaction. - Success Green Bg (
#E4F5EA): Tinted background for "Received" pills on Activity rows. - Error Red (
#D20021): Payment failed, validation errors. - Error Red Bg (
#FCE5E8): Tinted background for error states. - Warning Amber (
#FFB81C): Pending payments, identity verification needed.
Activity Icon Colors
- Sent Icon (
#003087): PayPal Blue for outgoing money. - Received Icon (
#1C8B43): Success green for incoming money. - Card Icon (
#0070BA): Sky blue for card-related transactions. - Reward Icon (
#FFB81C): Amber for cashback / rewards.
Dark Mode
PayPal supports dark mode since 2020. The dark canvas is a deep cobalt-tinted near-black to preserve the brand's blue identity even in dark.
- Dark Canvas (
#0A0E1A): Primary dark background — has a slight blue tint, NOT pure black. - Dark Surface 1 (
#141A2A): Cards, sheets. - Dark Surface 2 (
#1F2740): Pressed states. - Dark Divider (
#2A3142): Hairlines. - Dark Text Primary (
#FFFFFF): Inverted. - Dark Text Secondary (
#A8AEC4): Inverted secondary. - PayPal Blue (dark) (
#3B82F6): On dark canvas, PayPal Blue shifts to a brighter, more readable blue to maintain contrast.
Type scaleRead the full spec
Font Family
- Display:
PayPal Sans Big(proprietary, drawn by Monotype for PayPal ~2018) - Body:
PayPal Sans Small(proprietary, sibling family — designed to pair with PayPal Sans Big at small sizes) - Weights available: Regular (400), Medium (500), Bold (700)
- Tabular figures: enabled on all $-amounts, transaction values, percentages
- Fallback stack:
-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'SF Pro Text', Arial, sans-serif - Google Fonts substitute:
Inter(closest match), withtabular-nums
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Balance Hero | PayPal Sans Big | 36pt | 700 | 1.0 | -0.5pt | "$1,247.92" on the balance card — TABULAR |
| Send Amount Hero | PayPal Sans Big | 56pt | 700 | 1.0 | -1pt | The $-amount on Send Money fullscreen — TABULAR |
| Screen Title | PayPal Sans Big | 24pt | 700 | 1.15 | -0.2pt | "Wallet", "Activity", "Finances" — left-aligned |
| Section Header | PayPal Sans Big | 18pt | 700 | 1.2 | -0.1pt | "Recent activity", "PayPal Balance", "Cards" |
| Card Title | PayPal Sans Big | 16pt | 500 | 1.3 | 0pt | "Visa debit card ending in 4242" |
| Body | PayPal Sans Small | 16pt | 400 | 1.45 | 0pt | About-the-transaction paragraph, help text |
| Body Small | PayPal Sans Small | 14pt | 400 | 1.4 | 0pt | Settings descriptions, fine print |
| Activity Title | PayPal Sans Small | 15pt | 500 | 1.3 | 0pt | Activity row recipient name |
| Activity Subtitle | PayPal Sans Small | 13pt | 400 | 1.3 | 0pt | "Yesterday, 3:42 PM · Completed" |
| Activity Amount | PayPal Sans Big | 16pt | 500 | 1.2 | 0pt | "$24.50" on activity rows — TABULAR |
| Button Primary | PayPal Sans Big | 17pt | 700 | 1.0 | 0pt | "Send", "Request", "Continue" |
| Button Secondary | PayPal Sans Small | 15pt | 500 | 1.0 | 0pt | Outline buttons |
| Tab Label | PayPal Sans Small | 11pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
| Link | PayPal Sans Small | 15pt | 500 | 1.4 | 0pt | "Add a payment method" links in PayPal Sky |
| Chip | PayPal Sans Small | 13pt | 500 | 1.0 | 0pt | Filter chips, "Completed", "Pending" |
Principles
- PayPal Sans Big for everything display + button + amount: Headings, balances, screen titles, primary button text — even tab bar would use Big if there were enough room. The decision rule: if it's marketing the brand or commanding attention, use Big.
- PayPal Sans Small for body + metadata: Activity subtitles, body paragraphs, settings descriptions, fine print. Small is the workhorse.
- Tabular numerals on all financial figures: Balance, transaction amounts, percentages, card numbers — non-negotiable. The Activity feed's vertical column of $-amounts must align perfectly.
- Tight tracking at hero sizes: -1pt at 56pt down to 0pt at body — gives the balance a confident, calm presence.
- Bold for buttons, Medium for everything else: PayPal Sans Big weight 700 on primary CTAs, 500 on card titles and activity rows; 400 is reserved for body / metadata.
Components and layoutRead the full spec
Buttons
Primary CTA ("Send", "Continue", "Add Money")
- Background:
#003087(PayPal Blue) - Text:
#FFFFFF, PayPal Sans Big 17pt weight 700 - Padding: 16pt vertical, 24pt horizontal
- Corner radius: 24pt (a soft pill — PayPal uses radius equal to half-height for the soft-pill look)
- Height: 48pt minimum (radius 24pt creates a pill)
- Width: typically full-width minus 16pt margins
- Pressed: background
#001C64, scale 0.98 - Haptic:
.impactOccurred(.medium)on Send confirmation
Secondary Outline Button ("Cancel", "More options")
- Background: transparent
- Border: 1.5pt
#003087 - Text:
#003087, PayPal Sans Small 15pt weight 500 - Padding: 14pt vertical, 22pt horizontal
- Corner radius: 24pt
Link Button ("Forgot password", "Learn more")
- Background: none
- Text:
#0070BA(PayPal Sky), PayPal Sans Small 15pt weight 500 - Underline on hover/press
- 44pt hit target
Send/Request Pair (in Send Money flow)
- Side-by-side pill buttons
- "Request":
#FFFFFFbackground, 1.5pt#003087border,#003087text - "Send":
#003087background, white text - Both: 48pt height, 24pt radius, half-width with 8pt gap between
Cards & Containers
Balance Card (top of Wallet)
- Container: full-width minus 16pt horizontal margins
- Background:
#FFFFFF - Border: 1pt
#E5E8ED - Corner radius: 16pt
- Shadow:
rgba(0,0,0,0.06) 0 2px 8px - Padding: 20pt
- Layout: "PayPal balance" label in PayPal Sans Small 13pt 500
#687173→ balance "$1,247.92" in PayPal Sans Big 36pt 700#001435tabular → row of action buttons (Add Money / Transfer)
Activity Row
- Height: 68pt minimum (slightly taller than competitors to allow rich icon + 2-line text)
- Background:
#FFFFFF - Leading: 40pt circular icon container in the transaction-type color (Sent =
#003087, Received =#1C8B43, Card =#0070BA, Reward =#FFB81C) with a white SF Symbol glyph centered - Middle: recipient name in PayPal Sans Small 15pt 500
#001435above subtitle in PayPal Sans Small 13pt 400#687173 - Trailing: $-amount in PayPal Sans Big 16pt 500 —
#1C8B43if received (with "+"),#001435if sent (no prefix or "−") - Divider: 0.5pt
#E5E8EDbottom - Tap: background fades to
#F5F7FAover 150ms
Wallet Item Card (linked card, bank, crypto)
- Container: rounded rectangle 12pt radius, 1pt
#E5E8EDborder, white background - Padding: 16pt
- Layout: card-art image leading (40pt × 26pt rounded rectangle showing the issuer logo) + "Visa debit card ending in 4242" in PayPal Sans Big 16pt 500 + "Linked Aug 2024" in PayPal Sans Small 13pt 400
#687173 - Tap: pushes card detail view
Send Money Recipient Card
- Circular avatar (48pt) + name in PayPal Sans Big 16pt 500 + email/phone in PayPal Sans Small 13pt 400
#687173 - Selected state: 2pt
#003087border around the avatar
Navigation
Top Nav Bar
- Height: 56pt + safe area
- Background:
#FFFFFF - Leading: PayPal "P-P" mark (24pt) in PayPal Blue and Sky gradient
- Trailing: notification bell (24pt) and a help "?" icon, or a profile circle
- Title: when present, sits center, PayPal Sans Big 17pt 500
#001435 - Border bottom: 0.5pt
#E5E8ED
Bottom Tab Bar
- Height: 56pt + safe area
- Background:
#FFFFFFwith 0.5pt#E5E8EDtop divider - 5 tabs: Home / Send / Wallet / Activity / Finances
- Icon size: 24pt outlined / filled when active
- Active state: icon + label
#003087 - Inactive:
#687173 - Labels: PayPal Sans Small 11pt 500 +0.1pt letter spacing, visible always
- Tap haptic:
.selectionChanged() - The Send tab is sometimes rendered as a center-floating FAB-style circle with the wordmark — in newer designs it's just a regular tab
Modal Sheet (Confirm Send, Filters)
- Slides up from bottom over a dimmed black overlay (
rgba(0,0,0,0.6)) - Top corners: 16pt radius
- Background:
#FFFFFF - Drag indicator: 4pt × 32pt pill at top,
#E5E8ED - Dismiss: swipe down or tap outside
Input Fields
Text Field (Email, Phone, Card Number)
- Background:
#FFFFFF - Border: 1pt
#E5E8EDdefault, 2pt#003087focused, 2pt#D20021if error - Corner radius: 8pt
- Height: 56pt
- Floating label: sits inside at 16pt PayPal Sans Small 400
#687173when empty; animates to 12pt 500#003087at the top when focused or filled - Text: PayPal Sans Big 16pt 400
#001435
Search Bar
- Background:
#EEF1F4(Surface Gray 2) - Height: 44pt
- Corner radius: 22pt (full pill)
- Leading icon:
magnifyingglass16pt#687173 - Placeholder: "Search transactions" in PayPal Sans Small 15pt 400
#9DA3A6
Send Amount Field
- Fullscreen modal, the $-amount is centered: enormous PayPal Sans Big 56pt 700
#001435tabular - Currency selector below: "USD" in PayPal Sans Small 13pt 500
#687173with a chevron - Numeric keypad at the bottom (standard iOS keypad)
- Below the keypad: "Send $X.XX" CTA that updates the button text live with the amount
Distinctive Components
The "P-P" Wordmark / Logomark
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Balance hero caps at 32pt; balance card padding reduces to 16pt |
| iPhone 13/14/15 | 390pt | Standard 36pt balance hero; 20pt card padding |
| iPhone 15/16 Pro | 393pt | Dynamic Island respected; nav bar sits below it |
| iPhone 15/16 Pro Max | 430pt | Balance hero at 40pt; activity row goes 72pt for more breathing room |
| iPad | 768pt+ | 2-column: balance + cards on left, activity on right; sidebar nav replaces tab bar |
Dynamic Type
- Body text, activity subtitles, secondary labels scale fully with Dynamic Type
- Balance hero (36pt) scales but clamps at 48pt
- Send Amount hero (56pt) scales but clamps at 72pt
- Activity row amount (16pt) honors scaling up to 22pt max
- Tab labels (11pt) and filter chips (13pt) are fixed — layout-sensitive
Orientation
- Portrait only on phones — PayPal is portrait-locked
- iPad supports landscape with the sidebar nav
Touch Targets
- Activity row: full 68pt hit area
- Tab bar: 56pt full row with 24pt icons
- Primary CTA: 48pt height, full-width minus 32pt margins
- Filter chip: 32pt visual, 44pt minimum hit width
- Input field: 56pt height with 44pt actionable middle
Safe Area Handling
- Top: nav bar respects safe area + Dynamic Island
- Bottom: tab bar pins above home indicator
- Modal sheets: top corners 16pt, bottom respects home indicator
- Sides: 16pt content insets on most screens
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-paypal {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #001435;
--heading-color: #001435;
--link-color: #003087;
--link-hover-color: #001e54;
--border-color: #d1d5db;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(0,20,53,0.06);
--card-hover-shadow: 0 6px 18px rgba(0,20,53,0.12);
--header-bg: #001435;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #59667c;
--button-bg: #003087;
--button-text-color: #ffffff;
--button-hover-bg: #001e54;
--button-border: none;
--button-border-radius: 22px;
--button-secondary-bg: #f0f1f3;
--button-secondary-text-color: #001435;
--button-secondary-hover-bg: #e0e3e7;
--button-secondary-border: 1px solid #d1d5db;
--prompt-bg: #f2f3f5;
--prompt-text-color: #001435;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 22px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- coinbase 80.2%
- zalo 78.2%
- pluto tv 76.3%
- kintetsu 76.2%
- paramount plus 76.2%
Where this came from
- Source document
ios/design-md/finance/paypal/DESIGN.md· 25.5 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.