PayPal

---
version: alpha
name: PayPal-design-analysis
description: PayPal's design language is a trustworthy financial interface built on a deep navy `#003087`, a confident blue `#0070e0`, and a warm yellow `#ffc439` accent over white. Typography is clean and friendly, buttons are rounded, and the system uses the navy/blue duo for structure with yellow reserved for the logo and key CTA moments. The tone is secure, warm, and reassuring.

colors:
  primary: "#003087"
  primary_2: "#0070e0"
  accent: "#009cde"
  yellow: "#ffc439"
  canvas: "#ffffff"
  surface: "#f5f7fa"
  surface_2: "#eef1f5"
  fg_default: "#001435"
  fg_muted: "#687173"
  border_default: "#d9dce1"
  success: "#0e6245"
  danger: "#c92c2c"
  link: "#0070e0"
  on_primary: "#ffffff"

typography:
  display-xxl:
    fontFamily: ""PayPal Sans", "Helvetica Neue", Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  display-xl:
    fontFamily: ""PayPal Sans", "Helvetica Neue", Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.75px
  display-lg:
    fontFamily: ""PayPal Sans", "Helvetica Neue", Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.5px
  display-md:
    fontFamily: ""PayPal Sans", "Helvetica Neue", Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-lg:
    fontFamily: ""PayPal Sans", "Helvetica Neue", Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: ""PayPal Sans", "Helvetica Neue", Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  heading-sm:
    fontFamily: ""PayPal Sans", "Helvetica Neue", Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: ""PayPal Sans", "Helvetica Neue", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: ""PayPal Sans", "Helvetica Neue", Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: ""PayPal Sans", "Helvetica Neue", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  caption:
    fontFamily: ""PayPal Sans", "Helvetica Neue", Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
---

# Design System Inspired by PayPal

## 1. Visual Theme & Atmosphere

PayPal's interface is engineered for trust: a deep navy `#003087` and confident blue `#0070e0` structure the experience, with the warm yellow `#ffc439` of the double-P logo reserved for signature brand moments. The canvas is white and airy, buttons are rounded and friendly, and the overall tone says "your money is safe, and this is easy."

## 2. Color System

- **Navy** `#003087` — headers, footers, primary dark surfaces.
- **Blue** `#0070e0` — primary buttons and links; lighter `#009cde` for accents.
- **Yellow** `#ffc439` — the logo and occasional high-emphasis CTA.
- Neutrals `#ffffff` / `#f5f7fa` / `#eef1f5` with hairlines `#d9dce1`; text `#001435`, muted `#687173`.
- Semantic: success `#0e6245`, danger `#c92c2c`.

## 3. Typography

PayPal Sans (Helvetica Neue fallback) with a clean, friendly, sans-serif voice. Headlines are bold and confident; body 16px/1.5. Numbers and amounts are set in a slightly larger, tabular style for clarity in transaction contexts.

## 4. Components & Shape

Buttons are full-radius pills or 8px rounded rectangles; the primary is a solid blue, and high-emphasis moments use navy. Cards are clean white with soft shadows and rounded corners. The signature blue-to-navy gradient appears in the logo and hero areas. Inputs are large with clear labels and inline validation.

## 5. Layout & Spacing

A generous 8px grid with 16/24/32/48 spacing tokens. Checkout and account flows are centered single-column with clear progression; marketing pages are full-width and imagery-led. The footer is a deep navy band.

## 6. Motion

Smooth and reassuring: transitions fade and slide gently, success states animate a subtle checkmark, and the primary CTA brightens on hover. Durations 200-300ms with a soft ease.