PayPal Brand Design System Deep Dive

1. Brand Overview

PayPal’s Singapore homepage radiates a very clear intent: functional trust. The design language is not about chasing the latest design trends—it’s engineered for clarity, security, and recognisability. You can see it in the crisp blues, the restrained typography, the familiar rounded-pill buttons. There’s no fluff here. Every pixel feels like it’s there to reassure: "This is safe. This is professional. This works."

The vibe is corporate-tech with a consumer-friendly polish. It’s built for users who care about transactions, not browsing. The primary audience spans both merchants and consumers—people sending money, buying goods, or integrating PayPal into their checkout flow. That dual audience skews the visual tone toward a blend of approachable and authoritative. They avoid overly playful colors or decorative typography. Instead: brand blues, plenty of white space, consistent sans-serif text.

The philosophy here is “brand confidence through consistency.” PayPal has been around long enough that its deep navy (#001c64) and mid-blue (#003087) are instantly recognisable. The design system reinforces that with disciplined color usage: primary blues for action, white for contrast, and functional colors for alerts (error red, success green, warning amber). There’s no gradient experimentation, no neon surprise—just solid, accessible color blocks. The typography is PayPal’s own “PayPalOpen” family, which keeps the visual voice proprietary. Even the fallback stacks (Helvetica, Arial) are safe, neutral, and widely available, ensuring predictable rendering.

Buttons are bold, rounded, and slightly oversized. They use scale transforms on hover (subtle enlargement) to offer tactile feedback without gimmicks. Focus states are handled seriously, with clear outlines in #097ff5. Border radii are consistent—small elements get 8px or 16px, call-to-action pills go all the way to 1000px radius. The overall effect: you can’t mistake a PayPal button for anything else.

If you’re designing for PayPal, you’re designing for trust. This isn’t a playground—it’s a bank counter with friendly signage. The design system is built to maintain that trust across every viewport, every platform, every interaction. And they’ve nailed it by keeping the toolkit tight and disciplined.

2. Color System

2.1 Primary Colors

The main brand color is a deep navy: #001c64 (rgb(0, 28, 100)). This is the anchor. It’s heavy enough to imply authority and stability, but still clean enough to work in modern UI. The secondary actionable blue is #003087—slightly brighter, used for hover/focus states and secondary emphasis.

From a psychology standpoint: blue signals trust, security, and reliability. PayPal leans into the darker end of the spectrum to avoid the casualness of lighter blues. Competitors like Stripe use brighter blues (#635bff) to feel more “developer-friendly,” while PayPal’s palette says “financial institution.”

2.2 Complete Palette

2.3 Color Relationships

The palette is tuned for high contrast. Primary blue (#001c64) on white yields strong WCAG compliance for text readability. The hover blues (#0070e0) are bright enough to signal interactivity without losing contrast against white.

Error red (#d50102) is pure and saturated—no orange tint—so it reads immediately as “stop.” Success greens are in two tones: darker for active (#388c00) and brighter for hover (#6fc400). This dual-tone approach prevents hover states from blending with active states.

Dark mode isn’t directly represented here, but the palette could adapt easily: swap white backgrounds for medium gray (#545d68), keep blues consistent.

2.4 Usage Guide

• Good combos: Deep navy (#001c64) text on white, action blue (#0070e0) buttons on white backgrounds, yellow (#ffd140) with featured contrast blue (#003087) text.
• Avoid: Using light aqua (#b9effc) for text—it’s too low contrast. Avoid placing warning yellow (#ffbe4a) next to action blue (#0070e0); they vibrate.
• Functional usage: Keep error red exclusive to validation/alerts. Don’t use success green for decorative elements—it loses meaning.

3. Typography

3.1 Font Families

PayPal uses its proprietary PayPalOpen family extensively, with fallbacks to Helvetica, Arial. Some contexts use PayPalOpen-Medium, PayPalOpen-Regular, and PayPalSansSmall-Regular. These are not Google or Adobe fonts—they’re custom. No variable fonts.

Fallbacks are safe defaults—Helvetica Neue where available, Arial otherwise—to maintain sans-serif consistency across OSes.

3.2 Type Scale

3.3 Hierarchy

Heading sizes are huge—119px for top-level hero text. That’s rare in corporate design; it turns the homepage into a billboard. The scale drops quickly for subheadings, then stabilises around 16–20px for body text. Links and buttons hover in the 15–18px range, ensuring touch targets are readable and accessible.

Weights are mostly bold (700), with occasional medium (500) or regular (400) for body and links. This keeps the overall tone assertive.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px, but they mix in some odd decimals (1.904px, 7.6px). Likely from rem conversions or responsive tweaks.

4.2 Layout

Only one breakpoint listed: 752px. That’s an odd choice (usually 768px). Possibly a custom decision to tweak tablet layout earlier.

5. Visual Elements

Border Radius

Ranges from 0px for square edges to 1000px for full pills.

Shadows

Sparse usage—mostly flat design.

• rgba(0,0,0,0.08) 0px 4px 16px 4px — Soft card shadow
• rgba(0,0,0,0.14) 4px 4px 28px 6px — Deeper shadow
• Complex multi-shadow for subtle depth
• White outline shadow for contrast

6. Components

6.1 Buttons

Variant 1 — Outline Blue

• Default: #ffffff bg, #003087 text, 32px radius, 2px solid #003087, padding 12px 32px
• Hover: scale(1.05), white text, #0070e0 bg
• Active: scale(1), white text, #001c64 bg
• Focus: box-shadow rgba(209,229,249,0.9), border #097ff5

Variant 2 — Solid Blue

• Default: #003087 bg, white text, 32px radius, border #003087
• Hover: scale(1.05), white text, #0070e0 bg
• Active: scale(1), white text, #001c64 bg
• Focus: same as variant 1

Variant 3 — Light Pill

• Default: rgba(255,255,255,0.7) bg, black text, 1000px radius, border #cfd3d8
• Hover: white text, #0070e0 bg
• Active: white text, #001c64 bg
• Focus: box-shadow rgba(209,229,249,0.9), border #097ff5

6.2 Links

Colors vary from white (#ffffff) to deep navy (#001c64). No hover underline except for specific cases (#0070e0 with underline). Font weights range 400–700.

6.3 Forms

No inputs extracted—likely styled minimally with focus outline #097ff5.

6.4 Cards

16px radius, occasional shadows, padding from spacing scale (24px common).

7. Design Tokens

:root {
  /* Colors */
  --color-primary-navy: #001c64;
  --color-white: #ffffff;
  --color-secondary-blue: #003087;
  --color-light-aqua: #b9effc;
  --color-action-blue: #0070e0;
  --color-footer-separator: #c6c6c6;
  --color-unselected-active: #f1ede8;
  --color-featured-hover-yellow: #ffe888;
  --color-focus-outline-blue: rgba(209,229,249,0.9);
  --color-tertiary-active: #e6e0d9;
  --color-link-alt-active: #001435;
  --color-featured-contrast-blue: #003087;
  --color-success-active: #388c00;
  --color-medium-contrast-gray: #545d68;
  --color-warning-active: #ff9100;
  --color-link-contrast-hover-aqua: #b9effc;
  --color-scrim-black: rgba(0,0,0,.4);
  --color-selected-range-active-blue: #0070e0;
  --color-error-red: #d50102;
  --color-success-green: #0f8514;
  --color-header-submenu-card: hsla(32,21%,88%,.25);
  --color-warning-yellow: #ffbe4a;
  --color-success-hover-green: #6fc400;
  --color-specialty-hover-purple: #b976ff;
  --color-specialty-active-navy: #24247f;
  --color-accent-red: #e02d50;
  --color-selected-range-hover-blue: #5bbbfc;
  --color-featured-yellow: #ffd140;
  --color-error-hover-pink-red: #ff5a6d;
  --color-anchor-icon-circle-white: #ffffff;
  --color-warning-alt-orange: #e85e00;
  --color-specialty-purple: #7252cc;
  --color-header-link-focus-shadow: #0070e026;
  --color-error-active-dark-red: #9b0021;
  --color-structure-focus-blue: #097ff5;

  /* Typography */
  --font-primary: "PayPalOpen", Helvetica, Arial;
  --font-primary-medium: "PayPalOpen-Medium", Helvetica Neue, Arial;
  --font-primary-regular: "PayPalOpen-Regular", Helvetica Neue, Arial;
  --font-secondary: "PayPalSansSmall-Regular", Helvetica Neue, Arial;

  /* Spacing */
  --space-xxs: 1.904px;
  --space-xs: 4px;
  --space-sm: 7px;
  --space-sm2: 7.5px;
  --space-sm3: 7.6px;
  --space-md: 8px;
  --space-md2: 10px;
  --space-md3: 12px;
  --space-md4: 13px;
  --space-lg: 16px;
  --space-lg2: 20px;
  --space-lg3: 24px;
  --space-xl: 32px;
  --space-xl2: 38.4px;
  --space-xl3: 40px;
  --space-xxl: 48px;
  --space-xxl2: 56px;
  --space-xxl3: 57px;
  --space-hero: 76.8px;
  --space-hero2: 115.2px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 25px;
  --radius-xl: 32px;
  --radius-pill: 1000px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-soft: rgba(0,0,0,0.08) 0px 4px 16px 4px;
  --shadow-deep: rgba(0,0,0,0.14) 4px 4px 28px 6px;
}

8. AI Coding Assistant Prompt

# PayPal Design System Specification

You are a PayPal design expert. Build UIs matching their visual language exactly.

## Brand Context
PayPal values trust, clarity, and consistency. The design language is corporate-tech with consumer-friendly touches. Blues dominate, typography is proprietary, and buttons are bold and rounded.

## Color Palette
- Primary Deep Navy: #001c64 — Navigation text, active states
- White: #ffffff — Backgrounds, text on dark
- Secondary Blue: #003087 — Hover/focus borders
- Light Aqua: #b9effc — Link hover backgrounds
- Action Blue: #0070e0 — Hover states, selected ranges
- Error Red: #d50102 — Validation errors
- Success Green: #0f8514 — Success messages
- Success Hover Green: #6fc400 — Hover success
- Warning Yellow: #ffbe4a — Alerts
- Warning Active Orange: #ff9100 — Active warning
- Specialty Purple: #7252cc — Specialty promotions
- Accent Red: #e02d50 — Highlights
- Structure Focus Blue: #097ff5 — Focus outlines
- Medium Gray: #545d68 — Medium contrast surfaces
- Footer Separator Gray: #c6c6c6 — Footer dividers

## Typography
Fonts:
- Headings: "PayPalOpen", Helvetica, Arial
- Medium: "PayPalOpen-Medium", Helvetica Neue, Arial
- Regular: "PayPalOpen-Regular", Helvetica Neue, Arial
- Small: "PayPalSansSmall-Regular", Helvetica Neue, Arial

Type scale:
| Level | Size | Weight | Line Height | Use For |
| H1 | 119.2px | 700 | 1.00 | Hero titles |
| H2 | 76.29px | 700 | 1.00 | Section titles |
| H3 | 61.04px | 700 | 1.00 | Subsection titles |
| H4 | 48.832px | 700 | 1.10 | Large headings |
| Body | 16–20px | 400–450 | 1.4–1.6 | Paragraph text |
| Buttons | 14–18px | 500–700 | 1.29–1.33 | CTA labels |

## Spacing & Grid
Base: 8px grid. Values: 4px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 76.8px, 115.2px.

## Border Radius
- sm: 8px — Small cards
- md: 16px — Cards, groups
- lg: 25px — Buttons
- xl: 32px — Large links
- pill: 1000px — Pill buttons
- circle: 50% — Avatars

## Shadows & Depth
- Soft: rgba(0,0,0,0.08) 0px 4px 16px 4px — Cards
- Deep: rgba(0,0,0,0.14) 4px 4px 28px 6px — Modals

## Component Specifications

### Primary Button
Default: bg #ffffff, text #003087, padding 12px 32px, radius 32px, border 2px solid #003087, font-weight 700, font-size 18px
Hover: scale(1.05), bg #0070e0, text #ffffff
Active: bg #001c64, text #ffffff
Focus: box-shadow rgba(209,229,249,0.9) 0px 0px 0px 0.375rem, border #097ff5

### Secondary Button
Default: bg #003087, text #ffffff, padding 12px 32px, radius 32px, border 2px solid #003087
Hover: bg #0070e0
Active: bg #001c64
Focus: same as primary

### Light Pill Button
Default: bg rgba(255,255,255,0.7), text #000000, radius 1000px, border 2px solid #cfd3d8
Hover: bg #0070e0, text #ffffff
Active: bg #001c64, text #ffffff

### Navigation Links
Default: color varies (#ffffff, #003087), no underline
Hover: underline only for #0070e0 links

### Input Fields
Default: border 1px solid #c6c6c6, radius 8px, padding 10px, font-size 16px
Focus: border-color #097ff5, box-shadow rgba(209,229,249,0.9)

### Cards
bg #ffffff, radius 16px, padding 24px, shadow soft

## Layout & Responsive Rules
Max width: fluid
Breakpoint: 752px — adjust layout for tablets

## Interaction Rules
- Transition: 150ms ease for hover/active
- Focus indicators: always visible outline in #097ff5
- Hover scale: 1.05 for buttons

## DO List
- Use only colors from palette
- Maintain 8px grid
- Keep button radii consistent (32px or 1000px)
- Use PayPalOpen for headings
- Apply focus outlines on all interactive elements

## DON'T List
- Don’t use unapproved colors
- Don’t mix sharp and rounded corners
- Don’t remove focus outlines
- Don’t change button scale behaviour

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #ffffff;
  color: #003087;
  padding: 12px 32px;
  border-radius: 32px;
  border: 2px solid #003087;
  font-weight: 700;
  font-size: 18px;
  transition: all 150ms ease;
}
.btn-primary:hover { background: #0070e0; color: #ffffff; transform: scale(1.05); }
.btn-primary:focus { box-shadow: rgba(209,229,249,0.9) 0 0 0 0.375rem; border-color: #097ff5; }
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: rgba(0,0,0,0.08) 0px 4px 16px 4px;
}
```

Input:
```css
.input {
  border: 1px solid #c6c6c6;
  border-radius: 8px;
  padding: 10px;
  font-size: 16px;
}
.input:focus {
  border-color: #097ff5;
  box-shadow: rgba(209,229,249,0.9) 0 0 0 0.375rem;
  outline: none;
}
```

9. Summary

TL;DR — PayPal’s design system is disciplined: deep blues, bold sans-serif, pill buttons, and consistent focus styles. It’s built for trust and clarity, not experimentation.

Brand Keywords:

• trust-first
• corporate-clean
• blue-dominant
• rounded-bold
• focus-visible