Pay, send, save

PayPal's system makes money movement feel direct, secure, and instantly tappable.

A brand preview built from PayPal blues, pill CTAs, geometric headline rhythm, checkout modules, rewards panels, pricing rows, and wallet-like product surfaces.

Available balance $1,248.20 Ready to pay, send, or save
PayPal Debit
5% cash back offer
Active
Send to Maya
Instant transfer
Pay Later available
29 Colors
14 Type levels
17 Components
68 Tokens
01 / Colors

Trust blues, white clarity, checkout yellow

Color roles separate brand trust, action, surfaces, pricing, wallet choice, and checkout-specific moments.

primary
#003087

Core PayPal trust blue.

accent
#0070E0

Links and action details.

ink
#001435

Nearly navy primary text.

surfaceAlt
#FAF8F5

Warm marketing band.

checkoutYellow
#FFC439

Payment button only.

venmoBlue
#008CFF

Wallet choice accent.

border
#DADDE1

Card and row dividers.

success
#0A7A3D

Completed payments.

02 / Typography

Compact geometric confidence

Display levels track tightly; body levels stay plain, trustworthy, and task-focused.

display - 76px / 700 / .95 / -0.045em / PayPal Pro
Pay smarter
hero - 64px / 700 / 1 / -0.04em / PayPal Pro
Send money securely
title-lg - 36px / 700 / 1.14 / -0.025em
Checkout built for conversion
body - 18px / 400 / 1.5 / 0em
Offer customers a familiar way to pay, save time, and move through checkout with confidence.
03 / Buttons

Pill-shaped commerce actions

Primary and secondary buttons keep the same physical rhythm; checkout yellow is scoped to payment modules.

button-primary
button-secondary
button-ghost
button-checkout-yellow
button-secondary-on-dark
04 / Cards & Surfaces

Flat panels with serious spacing

Cards rely on radius, border, spacing, and rate scale before decorative shadow.

Shop online

Tap into PayPal checkout and rewards with a calm white panel.

Browse offers

Pay Later

Warm surface for promotional payment options without turning yellow into the brand.

See options

PayPal Open

Deep blue enterprise tone for business platform capability groups.

PayPal and Venmo 3.49%

+ $0.49 per transaction

Developer card

Integration choices stay bordered, direct, and scannable.

View docs

Rewards

Cash-back offers use modular white and off-white rhythm.

05 / Brand-Specific Product Patterns

Wallet, checkout, pricing, rewards

These schematic modules carry the PayPal product logic beyond a generic component catalog.

Checkout sheet

PayPal
Buyer protection available
Selected
Venmo
Card ending 2049 Visa

Rewards grid

5% cash back
+5% monthly category
3% checkout
1.5% everywhere else

Send money

M J A
Instant transfer preview

Pricing rows

PayPal 3.49% + $0.49
Cards 2.89% + $0.29
POS 2.29% + $0.09
06 / Forms

Secure and direct inputs

Fields are white, bordered, and practical with clear blue focus treatment.

07 / Spacing

4px base, large marketing jumps

xs 4px
sm 8px
md 16px
lg 24px
xl 40px
section 96px
08 / Radius

Pills for commerce, smaller radii for utility

4px

small utility

8px

inputs, code

16px

cards

28px

hero panels

9999px

commerce CTAs

09 / Elevation

Mostly flat, selectively tactile

Flat card

Depth comes from border, spacing, and type scale.

Checkout module

Low shadow for payment sheets and wallet surfaces.

Mega menu

Floating navigation needs stronger separation.

10 / Extracted Component Tokens

CSS custom properties

:root {
  --brand-primary: #003087;
  --brand-accent: #0070E0;
  --brand-accent-pressed: #001C64;
  --brand-ink: #001435;
  --brand-body: #2C2E2F;
  --brand-muted: #687173;
  --brand-surface-alt: #FAF8F5;
  --brand-checkout-yellow: #FFC439;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-pill: 9999px;
  --space-section: 96px;
}