---
title: "PayPal design system"
variant: extended
source: https://www.paypal.com/us/home
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/paypal-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# PayPal · Design System

> Everyday payments in bright, confident type

**Theme:** light · **Industry:** fintech · **Source:** https://www.paypal.com/us/home · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

PayPal’s homepage pairs a vivid cyan hero with oversized black typography, then shifts into spacious white sections for shopping rewards, payment options, and safety. Rounded cards and lifestyle photography make financial services feel approachable without losing a clear, high-contrast brand presence.

## North star

Use oversized, tightly tracked black headlines and a single confident color field to make everyday finance feel simple and approachable.

## Overview

The page leads with a clean white navigation bar above a saturated cyan hero, using black display lettering for a direct, high-contrast first impression. That bright opening gives way to long white stretches where compact copy and large headings sit beside product and lifestyle imagery. A warm off-white surface and occasional pale gray cards break up the canvas without introducing a dense interface. The type system is distinctive: heavy PayPal Pro display faces use tight tracking and compact line spacing, while PayPal Pro Text keeps navigation, body copy, and links legible. Images show everyday shopping and payment moments in rounded rectangular frames; they are treated as content rather than decorative background. The payment options section uses varied card colors, including black, blue, and gray, to distinguish offers. Generous vertical pauses separate sections, while rounded pills make navigation and calls to action feel approachable. Keep the visual hierarchy bold, airy, and unmistakably PayPal.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| PayPal Ink | `#000000` | `--color-paypal-ink` | brand | Primary headings, body copy, navigation labels, and high-contrast text on bright hero and pale card backgrounds. |
| Canvas White | `#ffffff` | `--color-canvas-white` | neutral | Main page canvas, navigation background, and the generous breathing space around content sections. |
| Warm Stone | `#f1efea` | `--color-warm-stone` | surface | Measured warm neutral surface for section or card variation; use sparingly against the white canvas. |
| PayPal Deep Blue | `#002991` | `--color-paypal-deep-blue` | brand | Deep blue full-width closing section and the lower end of a measured gradient accent. |
| Link Blue | `#0066f5` | `--color-link-blue` | accent | Inline link text and secondary interactive emphasis. |
| Signal Cyan | `#60cdff` | `--color-signal-cyan` | brand | Hero background and prominent blue section accents; it is the page’s defining color field. |
| Card Gray | `#cccccc` | `--color-card-gray` | surface | Neutral card background captured on payment-related content; secondary to the brighter brand colors. |
| Soft Gray | `#e5e5e5` | `--color-soft-gray` | surface | Subtle section surface variation and low-emphasis neutral separation. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#f1efea` (Warm Stone) · `--color-surface-2` → `#cccccc` (Card Gray) · `--color-surface-3` → `#e5e5e5` (Soft Gray) · `--color-text` → `#000000` (PayPal Ink) · `--color-text-muted` → `#ffffff` (Canvas White) · `--color-accent` → `#002991` (PayPal Deep Blue) · `--color-accent-2` → `#0066f5` (Link Blue) · `--color-accent-3` → `#60cdff` (Signal Cyan)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f1efea` | 18.27:1 | AAA |
| `#000000` | `#cccccc` | 13.08:1 | AAA |
| `#000000` | `#e5e5e5` | 16.67:1 | AAA |
| `#ffffff` | `#f1efea` | 1.15:1 | fail |
| `#ffffff` | `#cccccc` | 1.61:1 | fail |
| `#ffffff` | `#e5e5e5` | 1.26:1 | fail |
| `#002991` | `#ffffff` | 12.17:1 | AAA |
| `#002991` | `#f1efea` | 10.59:1 | AAA |
| `#002991` | `#cccccc` | 7.58:1 | AAA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 16px, rgb(0, 41, 145) 16px, rgb(0, 41, 145) calc(100% - 32px), rgba(0, 0, 0, 0) calc(100% - 32px), rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PayPal Pro Text VF | `--font-body` | webfont | 400, 700 | Navigation, body copy, captions, and links. | Inter |
| PayPal Pro | `--font-display` | webfont | 900 | Display headings and the main page headline. | Outfit |

- **PayPal Pro Text VF:** Use regular body text and bold navigation, captions, and links; measured tracking is slightly tight, with no uppercase transformation.
- **PayPal Pro:** Heavy 900 weight, tight negative tracking, and compact line height create the oversized, rounded headline character.

### Type scale — Custom (ratio ≈ 1.738, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 222px | 900 | 1 | -0.03em | — | PayPal Pro | Oversized hero headline and other dominant promotional display text. |
| h1 | 181px | 900 | 1 | -0.03em | — | PayPal Pro | Primary page headline, set very large and heavy. |
| h2 | 178px | 900 | 1.1 | -0.039em | — | PayPal Pro | Major section headlines, including rewards and payment-choice sections. |
| h3 | 99.5px | 900 | 1.1 | -0.03em | — | PayPal Pro | Secondary promotional and feature headings. |
| h4 | 67px | 900 | 1.1 | -0.03em | — | PayPal Pro | Smaller nested headings within feature content. |
| body | 14px | 400 | 1.5 | -0.015em | — | PayPal Pro Text VF | Supporting descriptions and explanatory copy. |
| caption | 12px | 700 | 1.33 | -0.015em | — | PayPal Pro Text VF | Compact legal notes and supporting labels. |
| nav | 12px | 700 | 1.33 | -0.015em | — | PayPal Pro Text VF | Header navigation labels and compact navigation text. |
| link | 16px | 700 | 1.5 | -0.015em | — | PayPal Pro Text VF | Emphasized inline links and calls to action. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 8, 10, 12, 16, 17, 20, 23, 24, 26, 48, 53, 55, 70, 106 px.
- Section rhythm 53px · element gap 24px · card padding — · max content width 1080px.

A centered desktop composition uses a measured 1080px maximum page width, with the navigation spanning the top and the hero content centered. Main sections align to a consistent left edge, while the rewards showcase and hero use centered focal points. A comfortable density and measured 53px section gap create substantial pauses between content groups; the measured element gap is 24px. Keep long white stretches intact rather than filling every interval. Cards form a vertical sequence in the payment section, with paired text and image areas; a later full-bleed image section deliberately breaks the constrained content rhythm.

## Shape & elevation

- Radius: card `24px` · media `8px` · nav `9999px` · link `9999px` · xs `12px` · sm `24px` · pill `9999px`
- Shadow `inset` (link): `rgba(0, 0, 0, 0) 0px 0px 0px 1px inset`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.08) 0px 24px 48px 0px`
- Shadow `hairline` (card): `rgb(255, 255, 255) 0px -28.5714px 0px 28.5714px`
- Shadow `hairline-2` (other): `rgb(255, 255, 255) 0px 28.5714px 0px 28.5714px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 1.2, 0.2, 1)` on interactive elements.

The overall interface is largely flat, with white space doing more work than borders. Cards use generous rounded corners; measured card radius is 24px, while media radius is 8px. A soft, large card shadow appears in measured styles, but avoid adding shadows to every tile. Rounded pill navigation and links use an inset hairline treatment rather than heavy outlines.

## Imagery

Use candid, polished lifestyle photography showing people shopping, paying, and using products. Images are presented in rounded rectangular frames or as one side of split cards; keep the imagery vivid and photographic rather than adding decorative illustration. Product and merchant tiles may form a dense mosaic in the rewards area, but the text and reward figures remain easy to scan. The hero also includes a product-style media card; imagery supports the message instead of replacing the bold headline.

## Components

### Header navigation

White top bar with PayPal mark, compact dark text links, and pill-shaped Log In and Sign Up actions. The measured nav uses bold 12px text.

### Hero and audience switch

Bright cyan hero field with a centered Personal/Business pill selector, oversized black headline, and a central rounded product-media frame.

### Rewards showcase

White section with a bold heading, a mosaic of merchant and product imagery, and large centered percentage-back figures with compact supporting copy.

### Payment option cards

Vertical set of rounded split cards combining offer copy and lifestyle photography. Use differentiated black, blue, gray, and pale surfaces.

### Safety feature

A large section heading, broad rounded lifestyle photograph, concise security statement, and a compact pill-shaped link.

### Closing brand band

Full-bleed deep-blue section with oversized white promotional lettering and a strong horizontal brand-color treatment.

### Measured component styles

- **Link** (“Browse Offers”): background #ebeff5 · text #000000 · radius 1000px · padding 12px 20px · 700 16px PayPal Pro Text VF · shadow rgba(0, 0, 0, 0) 0px 0px 0px 1px inset
- **Card** (“Pay Monthly in store5 Buy an item in sto”): background #cccccc · text #000000 · radius 24px · padding 0px · 400 16px PayPal Pro Text VF · shadow rgba(0, 0, 0, 0.08) 0px 24px 48px 0px
- **Navigation item** (“Personal Business”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px PayPal Pro Text VF

## Do

- Use Signal Cyan (#60cdff) as the distinctive hero color.
- Set headline text in PayPal Ink (#000000) with a heavy display face.
- Preserve broad white areas between major content groups.
- Use rounded image frames and pill-shaped interactive elements.
- Pair concise copy with authentic lifestyle photography.
- Reserve PayPal Deep Blue (#002991) for strong closing or gradient accents.

## Don't

- Do not introduce unmeasured brand colors.
- Do not fill generous white section gaps with extra content.
- Do not use thin, delicate display typography.
- Do not apply heavy borders or shadows to every card.
- Do not make product imagery compete with the main headline.
- Do not turn the clean layout into a dense dashboard.

## Agent prompt

Build a new PayPal-style fintech page with a white canvas, a crisp top navigation, and a bold opening color field in Signal Cyan (#60cdff). Use PayPal Pro or a close rounded geometric display substitute for oversized PayPal Ink (#000000) headlines; set supporting copy in a clean sans-serif. Keep content centered within the measured 1080px page width, use measured 53px section rhythm and 24px element gaps, and allow broad white pauses. Present features as rounded image-and-copy cards with restrained soft elevation. Use lifestyle photography in rounded frames, not decorative illustrations. Apply Link Blue (#0066f5) to links and reserve PayPal Deep Blue (#002991) for a strong closing band or gradient accent. Keep interactions pill-shaped, copy concise, and the overall impression open and confident.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width cyan hero with centered audience switch, oversized headline, and centered media. | Personal/Business switch, Prominent brand message | Cyan field, Heavy black display type, Rounded media frame |
| 2 | feature-split | White feature section with heading and supporting shopping imagery. | Shopping benefit introduction | White canvas, Large section heading, Product imagery |
| 3 | product-grid | White rewards showcase with a merchant-image mosaic around centered reward figures and copy. | Browse offers link, Rewards information | Merchant tiles, Large percentage figures, Compact supporting text |
| 4 | feature-grid | White section with a vertical stack of rounded split-image payment cards. | Compare payment options, Learn-more links | Split cards, Alternating card colors, Lifestyle photography |
| 5 | feature-split | White section with a heading, broad rounded photo, short explanatory copy, and a compact link. | Trust reassurance, Safety details link | Large lifestyle image, Minimal copy, Pill link |
| 6 | gallery | Full-bleed photographic section with oversized typography crossing the image and color band. | Brand storytelling | Edge-to-edge photography, Oversized lettering, Strong blue band |
| 7 | cta | Full-width deep-blue closing band with a large white headline. | International money-sending message | PayPal Deep Blue background, Oversized white text |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/paypal-com