Finance / iOS / Android / Web

PayPal

PayPal talks loudly in black 900 headlines and lets whole sections of navy and sky carry the brand, with pills for every action.

Download
  • #002991
  • #60CDFF
  • #000000
  • #0066F5
  • #F1EFEA
  • #FFFFFF

Color

Every color token in the file, grouped by role.

Brand

  • primary#000000
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • link#0066F5
  • on tint#000000
  • ink#000000
  • on navy#FFFFFF

More

  • navy#002991
  • sky#60CDFF
  • tint#EDF0F4
  • bone#F1EFEA
  • mist#F5F7FA
  • mist strong#EDF0F2

Typography

Each style is set with the file's own family, size, weight and spacing.

  • PayPal ProPayPal Pro is private and not available in open fonts. Shown in Plus Jakarta Sans, the closest open match.
  • PayPal Pro Text VFPayPal Pro Text VF is private and not available in open fonts. Shown in Be Vietnam Pro, the closest open match.
  • display99.4px / 900 / 109.4px

    PayPal

  • headline55.3px / 900 / 60.9px

    PayPal

  • title31.2px / 900 / 34.4px

    PayPal

  • lead21.5px / 400 / 32.3px

    Pack my box with five dozen liquor jugs

  • body17.9px / 400 / 26.8px

    The quick brown fox jumps over the lazy dog

  • button16px / 700 / 24px

    Continue to checkout

  • nav16px / 400 / 22.4px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs4px
  • sm8px
  • md12px
  • lg24px
  • pill1000px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md12px
  • base16px
  • lg20px
  • xl24px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button secondary
    button-secondary
  • navy card
    navy-card
  • sky section
    sky-section
  • nav link
    nav-link
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 115 lines
version: alpha
name: PayPal-design-analysis
description: "A payments brand built on black type over white and bone, with big navy (#002991) and sky (#60cdff) sections, PayPal Pro headlines at weight 900, PayPal Pro Text for reading, black and tinted pill buttons and 24px cards."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#000000"
  on-primary: "#ffffff"
  navy: "#002991"
  sky: "#60cdff"
  link: "#0066f5"
  tint: "#edf0f4"
  on-tint: "#000000"
  ink: "#000000"
  canvas: "#ffffff"
  bone: "#f1efea"
  mist: "#f5f7fa"
  mist-strong: "#edf0f2"
  on-navy: "#ffffff"

typography:
  # Font note: "PayPal Pro" is a private font and is not available in open fonts. Closest open alternative: "Plus Jakarta Sans".
  # Font note: "PayPal Pro Text VF" is a private font and is not available in open fonts. Closest open alternative: "Be Vietnam Pro".
  display:
    fontFamily: "'PayPal Pro', 'Century Gothic', Helvetica, Arial, sans-serif"
    fontSize: 99.4px
    fontWeight: 900
    lineHeight: 109.4px
    letterSpacing: -2.98px
  headline:
    fontFamily: "'PayPal Pro', 'Century Gothic', Helvetica, Arial, sans-serif"
    fontSize: 55.3px
    fontWeight: 900
    lineHeight: 60.9px
    letterSpacing: -1.66px
  title:
    fontFamily: "'PayPal Pro', 'Century Gothic', Helvetica, Arial, sans-serif"
    fontSize: 31.2px
    fontWeight: 900
    lineHeight: 34.4px
    letterSpacing: -0.94px
  lead:
    fontFamily: "'PayPal Pro Text VF', Helvetica, Arial, sans-serif"
    fontSize: 21.5px
    fontWeight: 400
    lineHeight: 32.3px
    letterSpacing: -0.32px
  body:
    fontFamily: "'PayPal Pro Text VF', Helvetica, Arial, sans-serif"
    fontSize: 17.9px
    fontWeight: 400
    lineHeight: 26.8px
    letterSpacing: -0.27px
  button:
    fontFamily: "'PayPal Pro Text VF', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: -0.24px
  nav:
    fontFamily: "'PayPal Pro Text VF', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22.4px

rounded:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  pill: 1000px

spacing:
  sm: 8px
  md: 12px
  base: 16px
  lg: 20px
  xl: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 48px
    padding: 12px 20px
  button-secondary:
    backgroundColor: "{colors.tint}"
    textColor: "{colors.on-tint}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 48px
    padding: 12px 20px
  navy-card:
    backgroundColor: "{colors.navy}"
    textColor: "{colors.on-navy}"
    typography: "{typography.title}"
    rounded: "{rounded.lg}"
    padding: 24px
  sky-section:
    backgroundColor: "{colors.sky}"
    textColor: "{colors.ink}"
    typography: "{typography.display}"
    padding: 24px
  nav-link:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav}"
    height: 36px
    padding: 10px 16px

Overview

PayPal lets people pay online and in stores, send money and pay later. Its public site sets heavy black headlines on white and a bone #f1efea page, and alternates whole sections of PayPal navy and sky blue. Buttons are pills: black for the main action and a faint blue tint for the second. [Observed]

What defines the look:

  1. Navy and sky sections. #002991 fills product sections and 24px feature cards with white text. #60cdff fills the hero and the closing app section with black text. [Measured]
  2. Weight 900 headlines. PayPal Pro at 900 with -3 percent tracking and a 1.1 line height, from 31 up to 99 on desktop. [Measured]
  3. Two faces. PayPal Pro for headlines and PayPal Pro Text, a variable face, for reading, links and buttons. [Measured]
  4. Black and tinted pills. The main button is a black pill with white text, 48 high. The second is a pill tinted with navy at 8 percent and black text. On navy, the second button is a translucent light gray with white text. [Measured]
  5. Fluid sizes. Sizes are fractional at 1440 wide (99.447, 55.339, 21.518) and smaller round values at 390. [Measured]

Source for this file: the home page, the send and receive money page, the business page and the sign-up account chooser, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. The sign-in page rendered empty in the automated browser. PayPal's design system documentation was not read. No account screens and no app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Main button#000000 with white textGet the App [Measured]
Second buttonnavy at 8 percent (about #edf0f4 on white) with black textSign Up, Browse Offers [Measured]
Navy#002991Product sections, feature cards [Measured]
Sky#60cdffHero, accent plates, closing app section [Measured]
Link#0066f5Inline links, 14 bold [Measured]
Text#000000, muted black at 63 percentHeadlines and body [Measured]
Canvas#ffffffContent surfaces [Measured]
Bone#f1efeaThe page behind the content [Measured]
Mist#f5f7fa, #edf0f2Light bands on product pages [Measured]

Typography

Role1440 wide390 wideFace and weight
Display99.45 on 109.39, -2.98px56.5 on 62.15PayPal Pro 900 [Measured]
Large headline81.5 on 89.6549 on 53.9PayPal Pro 900 [Measured]
Headline55.34 to 67.11, line height 1.137 to 42.5PayPal Pro 900 [Measured]
Card title31.23 on 34.3624.5 on 26.95PayPal Pro 900 [Measured]
Lead21.52 on 32.28, -0.32px18.5 on 27.75PayPal Pro Text 400 [Measured]
Body17.86 on 26.7916 on 24PayPal Pro Text 400 [Measured]
Button16 on 24, -0.24pxsamePayPal Pro Text 700 [Measured]
Navigation16 on 22.4not measuredPayPal Pro Text 400 [Measured]

Headline tracking is -3 percent of the size at every step. [Measured]

Shape and spacing

Cards and plates use 24px corners, buttons and chips full pills, and smaller tiles 8 and 12. [Measured] Buttons carry 12 by 20 padding, navigation links 10 by 16. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light only. The dark color scheme pass changed nothing. [Measured]

Platform: iOS

How the PayPal iOS app looks and behaves was not captured. PayPal's design system documentation was not read, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for home, payments, the wallet and the account is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Send and request money as prominent pills. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the navy and sky, the heavy headlines and the pills with the web. [Inferred]

Platform: Android

How the PayPal Android app looks and behaves was not captured. PayPal's design system documentation was not read, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for home, payments, the wallet and the account is expected. [Inferred]

Main action

Expected on Android: Floating action button.

Send and request money as prominent pills. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the navy and sky, the heavy headlines and the pills with the web. [Inferred]

Platform: Web

The home page, send and receive money page, business page and sign-up account chooser, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A top bar with Personal and Business as 36 high text links (16 on 22.4) and product menus, with Log In and Sign Up at the right. [Measured]

Main action

Expected on Web: Page-level button.

A black pill with white 16px bold text, 48 high, with 12 by 20 padding. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Product pages list actions ("Pay back friends", "Send a request", "Start a pool") as 40 high text pills with no fill. The sign-up chooser presents Personal and Business as large radio cards with a 24px corner: the selected card has a 2px black border and a navy tint at 4 percent, the other a 2px border of black at 16 percent. The business page switches feature tabs with 52 high text tabs (48 on mobile). [Measured]

Text sizing

Expected on Web: Browser zoom.

Fractional sizes at 1440 and round sizes at 390. [Measured] Sizes likely scale with the window between those widths, which was not checked. [Inferred]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 48 high, text pills 40. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

The sign-in page rendered empty in the automated browser, so sign-in options were not checked. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A responsive site whose type is smaller at 390 than at 1440, with the same pills, cards and color sections at both widths. [Measured]

Cross-platform consistency

Consistent across platforms: the navy and sky, heavy headlines and pill buttons. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Set headlines in the heavy face at 900 with tight tracking.
  • Use whole navy or sky sections instead of small color accents.
  • Use a black pill for the main action and a faint navy tint pill for the second.
  • Round cards to 24.

Don't

  • Don't use navy text on navy sections. Text there is white.
  • Don't set body text in the heavy headline face.
  • Don't use square buttons.

Known Gaps

  • The sign-in page rendered empty in the automated browser (the sign-up chooser did load), and the wallet, activity and checkout screens sit behind an account, so none were measured.
  • The iOS and Android apps were not captured, and PayPal's design system documentation was not read, so every mobile topic is inferred.
  • Icons, motion and modals were not measured.
  • The second button's tint is navy at 8 percent. The hex given here is that tint flattened on white, which is how it appears on white sections.
  • PayPal Pro and PayPal Pro Text are private. Plus Jakarta Sans (within 1 percent of the 81.5px headline) and Be Vietnam Pro (about 1 percent narrower at 17.86px bold) were chosen by comparing the same line side by side. Open Sans matched the text width more closely but its letters are more humanist than the real face.
  • Account deletion and store policy rules were not verified.