---
version: alpha
name: "PayPal"
website: "https://www.paypal.com"
description: >-
  A global-payments brand whose marketing chrome runs on two blues at once — a deep navy PayPalOpen wordmark in midnight #001c64 layered with a cyan-blue secondary mark in #009cde, the two-tone "PP" monogram that has been the company's signature since the 2014 rebrand. The hero is a wide photographic band (a customer holding a phone), with the headline floating in pure white over the image and a cyan-blue pill CTA in #0070ba carrying the primary action. Below the fold the page returns to a sand-cream surface in #faf8f5, with hairline-edged feature cards in 25px-rounded chips and a deep-navy footer band in #001c64 that re-asserts the brand voltage as a flat block. Typography pairs the proprietary PayPalOpen sans for display and CTAs with Helvetica Neue at 14-15px for running body — a global Latin / RTL system that captures here in Hebrew but holds the same rules everywhere.

seo:
  title: "PayPal Design System for React — navy + cyan voltage, PayPalOpen, 18 components"
  metaDescription: "PayPal's marketing system runs on a two-blue brand voltage — midnight navy plus cyan — with PayPalOpen display, Helvetica Neue body, and 25px pill CTAs. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Two-blue voltage — midnight navy and cyan blue both carry brand weight, the duotone signature of the 2014 PP monogram rather than a single accent held in reserve"
    - "PayPalOpen + Helvetica Neue split — the proprietary sans handles headlines and CTAs, the system fallback Helvetica Neue carries 14-15px body across every locale"
    - "25px pill CTAs at 38px height — the corner-radius scale is binary: 25px pill or 0, no middle rounded-card tier"
    - "Sand-cream secondary canvas — feature bands sit on warm cream #faf8f5, not pure white, an off-white move that softens the navy footer"
    - "Uppercase tracked monospace nav — secondary nav links render in PayPalSansSmall at weight 700 with +1px tracking and uppercase casing, distinct from any other text on the page"
  tags:
    - "Banking & Payments"
    - "Fintech & Crypto"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    PayPal's marketing chrome does something most payments brands have walked away from: it commits to a duotone. The "PP" monogram in the top right pairs midnight navy with a lighter cyan blue, and both colors are wired into the system as load-bearing tokens — navy for nav labels, footer fill, and primary brand text; cyan for the hero CTA pill, the secondary mark, and icon strokes. Where Stripe collapsed its identity into a single indigo and Adyen leans on green-on-near-black, PayPal keeps both blues live and lets them divide labor by surface. Below the photographic hero, a sand-cream band carries three hairline-edged feature chips, each titled in PayPalOpen Medium at modest 14-20px sizes; further down, a flat navy block ("Join millions using PayPal in Israel and worldwide") inverts the figure-ground and re-asserts the brand voltage as a full-bleed surface.

    The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 15 color tokens drawn from the captured Hebrew locale plus the declared `--glnv-*` CSS-variable family (which exposes navy, cyan, and the sand-cream surface tones globally regardless of which locale renders); 11 typography tokens running PayPalOpen across display + CTAs and Helvetica Neue across body, with a dedicated PayPalSansSmall uppercase-tracked tier for nav-segment labels; 5 corner-radius tokens centered on a 25px pill default; 8 spacing values; and 18 component definitions covering the cyan pill CTA, the navy outlined secondary, the sand-cream feature card, the navy footer band, and the photographic hero cell.

    Feed this file to an AI coding tool and it reproduces PayPal's specific moves: two-blue voltage instead of a single accent, sand-cream off-canvas rather than pure white, 25px pill CTAs at compact 38px heights, and the PayPalOpen-over-Helvetica split that lets a Latin headline pair cleanly with Hebrew or any RTL body locale. One caveat worth flagging: the captured screenshot is the Israel locale (Hebrew, RTL), so the body sizes skew a hair smaller than the US site's 16px default and a few component widths are mirror-flipped — the tokens themselves are locale-agnostic, but verify direction-sensitive padding against your own surface before shipping.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.paypal.com"
      title: "PayPal — official site"
      description: "PayPal's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is PayPal's primary brand color?"
      answer: "PayPal runs a duotone brand voltage rather than a single accent. The deep midnight navy is wired into CSS as --glnv-style-general-text-main and --glnv-style-button-secondary, and carries the wordmark, primary text, secondary-button outline, and the full-bleed footer band. The lighter cyan blue is wired as --glnv-style-icon-main, --glnv-style-button-primary-hover-bg, and the focus / hover state of every link. The primary CTA in the captured hero sits at a third blue in between — a cyan-leaning hyperlink blue that drives the rounded pill button. Where most payments brands collapse to one accent, PayPal explicitly maintains a two-blue identity tied directly to its 2014 PP monogram."
    - id: "typography"
      title: "What typeface does PayPal use, and what should I use as a substitute?"
      answer: "PayPal's marketing site runs three families. PayPalOpen, a proprietary humanist sans, carries display headlines (40px at weight 400 with +0.8px tracking) and the PayPalOpen-Medium variant carries 14-20px CTA labels. PayPalSansSmall handles the uppercase-tracked segment-nav links (14px at weight 700, +1px letter-spacing, casing uppercase). Helvetica Neue carries every body paragraph (14-15px at weight 400). For substitutes, Inter at the same sizes is the closest open match for PayPalOpen; for PayPalSansSmall use the same font with text-transform uppercase and +1px letter-spacing. The Helvetica Neue body tier is already a system stack you can keep as-is."
    - id: "radius-scale"
      title: "Why are PayPal's buttons so round?"
      answer: "PayPal's CTA pill is 25px on a 38px-tall button — a full half-height radius that reads as a fully-rounded pill at that height. The radius scale extracted from the page is binary: 25px appears 9 times across primary, secondary, and ghost buttons; 50% appears 5 times on the round icon affordances (the chevrons inside circle backgrounds); and 1000px appears twice on container outlines that simulate a perfect pill at any width. There is no 6px / 8px / 12px middle tier. The result is that every clickable affordance reads as a pill and every container reads as either a flat block or a flat block with hairline outline — the contrast between the two shapes is the entire shape language."
    - id: "sand-cream"
      title: "Why does PayPal use a cream background instead of pure white?"
      answer: "The secondary canvas — the band that holds the three feature chips below the hero, and the global header-accordion background — runs at sand-cream #faf8f5, wired as --glnv-header-accordion-bg-color. Pure white #ffffff still appears as the body floor and inside hairline cards, but the cream tone signals the warmer surface where photography meets typography, softening the visual transition between the navy footer block and the photographic hero. The cream is also closer to the warm undertone of the navy / cyan blues — pure white beside the brand navy would create a slight blue cast in peripheral vision, while cream neutralizes it."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React payments marketing site?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce PayPal's specific moves: duotone navy + cyan voltage, sand-cream secondary canvas, 25px pill CTAs at 38px heights, the PayPalOpen-over-Helvetica typographic split, and the uppercase-tracked PayPalSansSmall nav label tier. Tokens resolve cleanly without invention: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS custom properties. The one move worth borrowing only if you have a strong heritage monogram is the two-blue voltage — it depends on having an identity mark that already carries two equally-weighted color slots."

mockups:
  - "marketing-hero"
  - "checkout-flow"

colors:
  primary: "#0070ba"
  primary-hover: "#0070e0"
  brand-navy-deep: "#001c64"
  brand-navy: "#003087"
  brand-cyan: "#009cde"
  canvas: "#ffffff"
  surface-cream: "#faf8f5"
  surface-light: "#f0f2f9"
  ink: "#001c64"
  ink-soft: "#2c2e2f"
  ink-muted: "#545d68"
  ink-tertiary: "#666666"
  ink-quaternary: "#767676"
  hairline: "#e6e0d9"
  hairline-cool: "#d4d9dc"
  divider: "#c0c0c0"

typography:
  display-xl:
    fontFamily: "PayPalOpen, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 50px
    letterSpacing: "0.8px"
  display-md:
    fontFamily: "PayPalOpen, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 35px
    fontWeight: 400
    lineHeight: 44px
    letterSpacing: "0.7px"
  heading-md:
    fontFamily: "PayPalOpen, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 35px
    letterSpacing: "0.28px"
  heading-sm:
    fontFamily: "PayPalOpen-Medium, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 30px
    letterSpacing: 0
  body-lg:
    fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: 0
  body-md:
    fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22.5px
    letterSpacing: 0
  body-sm:
    fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22.4px
    letterSpacing: 0
  label-md:
    fontFamily: "PayPalOpen-Medium, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 17.5px
    letterSpacing: "-0.14px"
  nav-segment:
    fontFamily: "PayPalSansSmall-Regular, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 14px
    letterSpacing: "1px"
  button-md:
    fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 12px
    letterSpacing: 0
  caption:
    fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 12px
    letterSpacing: 0

rounded:
  none: "0px"
  md: "14px"
  pill: "25px"
  full: "1000px"
  circle: "9999px"

spacing:
  xs: "4px"
  sm: "10px"
  base: "15px"
  md: "18px"
  lg: "25px"
  xl: "35px"
  2xl: "48px"
  3xl: "72px"
  4xl: "90px"
  5xl: "130px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "12px 18px"
    height: "38px"
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "12px 18px"
    height: "38px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.brand-navy}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "11px 18px"
    height: "38px"
    borderColor: "{colors.brand-navy}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "11px 18px"
    height: "38px"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-segment}"
    rounded: "{rounded.none}"
    padding: "0px 48px"
    height: "65px"
    borderColor: "{colors.hairline}"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink-soft}"
    typography: "{typography.nav-segment}"
    padding: "25px 25px 23px"
    height: "65px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    padding: "0"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-quaternary}"
    typography: "{typography.body-sm}"
  hero-photo-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
    padding: "90px 0px"
  feature-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-sm}"
    rounded: "{rounded.md}"
    padding: "25px 25px 23px"
    borderColor: "{colors.hairline}"
  feature-band:
    backgroundColor: "{colors.surface-cream}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "72px 0px 0px"
  promo-band:
    backgroundColor: "{colors.brand-navy-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.none}"
    padding: "130px 0px 0px"
  segment-pill:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill}"
    padding: "11px 18px"
    height: "38px"
    borderColor: "{colors.hairline-cool}"
  icon-circle:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.brand-cyan}"
    rounded: "{rounded.circle}"
    padding: "0"
    height: "40px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-tertiary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "35px 10px"
    borderColor: "{colors.divider}"
---

## Overview

PayPal's marketing chrome commits to a duotone where most payments brands have collapsed to one. **Two-blue voltage**: the deep midnight navy (`{colors.brand-navy-deep}` — #001c64) and the lighter cyan blue (`{colors.brand-cyan}` — #009cde) both carry brand weight, the duotone "PP" monogram in the top right resolving into actual system tokens rather than just a logo. Navy carries nav labels, primary text, the secondary-button outline, and the full-bleed promo band; cyan carries icon strokes, the hover state of every link, and the hero-CTA pill (`{colors.primary}` — #0070ba, a closely-related hyperlink blue). Where Stripe collapsed its identity into a single indigo voltage and Adyen leans on a mint-green accent against near-black, PayPal explicitly keeps both blues live and divides their work by surface.

The hero is a wide photographic band — a customer holding a phone — with the headline floating in pure white over the image and the cyan pill CTA carrying the primary action. Below the fold the page returns to a sand-cream secondary canvas (`{colors.surface-cream}` — #faf8f5, not pure white) where three hairline-edged feature chips sit on a 14px-rounded card geometry. Further down a flat `{colors.brand-navy-deep}` block ("Join millions using PayPal in Israel and worldwide") inverts the figure-ground and re-asserts the brand voltage as a full-bleed surface.

Typography splits cleanly. The proprietary **PayPalOpen** sans handles display (40px / 400 with a generous +0.8px tracking — confidence through tracking, not weight) and the PayPalOpen-Medium variant handles 14-20px CTA labels and feature titles. **Helvetica Neue** carries 14-15px running body across every locale. **PayPalSansSmall** at weight 700, +1px tracking, uppercase casing handles the segment-nav links — the loudest typographic tier on the page despite sitting at 14px, because the brand reserves uppercase + mono-style tracking for navigation only.

**Key Characteristics:**
- Two-blue brand voltage — `{colors.brand-navy-deep}` (#001c64) plus `{colors.brand-cyan}` (#009cde), both load-bearing rather than one held as accent — the 2014 PP monogram structure preserved as tokens.
- Sand-cream secondary canvas (`{colors.surface-cream}` — #faf8f5) holds the feature band below the photographic hero; pure white `{colors.canvas}` carries the body floor.
- PayPalOpen display + Helvetica Neue body — proprietary sans on the loud surfaces, system fallback on the quiet ones.
- PayPalSansSmall uppercase-tracked nav at 14px / 700 with +1px tracking — the single loudest typographic moment on the page.
- 25px pill CTAs at 38px button height — every primary, secondary, and ghost affordance reads as a fully-rounded pill at that aspect ratio.
- Binary radius scale: 25px pill (`{rounded.pill}`) and full circle (`{rounded.circle}`) carry every clickable affordance; 14px feature card (`{rounded.md}`) is the single rounded-container tier; everything else terminates at 0.
- Hairline-only cards: `{colors.hairline}` (#e6e0d9, warm sand-tone) and `{colors.hairline-cool}` (#d4d9dc) carry every border in the system — there are no shadow-lifted cards.
- Photographic hero band (`{component.hero-photo-band}`) — a wide image of a person holding a phone, with headline + CTA pinned in pure white over the image at center.

## Colors

### Brand

- **Hyperlink Blue** (`{colors.primary}` — #0070ba): frequency 24. Used as text (11), border (11), background (2). The CTA-pill fill in the captured hero — a cyan-leaning blue that sits between the navy and the brand cyan, used wherever a link or primary action needs to read as a clickable affordance.
- **Primary Hover** (`{colors.primary-hover}` — #0070e0): frequency 3. Wired as `--glnv-style-button-primary-hover-bg`, `--glnv-style-general-hyperlink-main-hover`, and `--glnv-style-icon-main`. The hover variant of the hyperlink blue plus the icon stroke color, one half-step brighter than `{colors.primary}`.
- **Brand Navy Deep** (`{colors.brand-navy-deep}` — #001c64): wired as `--glnv-style-general-text-main`, `--glnv-style-nav-item-page-active`, and the footer link colors. The dominant navy half of the PP monogram, used as the full-bleed promo-band background and the primary text tone across the entire system.
- **Brand Navy** (`{colors.brand-navy}` — #003087): wired as `--glnv-style-button-primary-bg`, `--glnv-style-button-secondary`, and `--glnv-style-button-secondary-border`. A slightly warmer navy used on the global secondary-button outline (not the locale-specific cyan pill captured in the Israel hero).
- **Brand Cyan** (`{colors.brand-cyan}` — #009cde): frequency 2 (1 bg, 1 gradient). The lighter half of the PP monogram. Wired into the brand system but used sparingly on the marketing surface itself — its main role is the wordmark color and icon-stroke accent.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 83. The body floor, feature-card fills, and the white space beneath the photographic hero. Wired as `--glnv-style-background` and `--glnv-style-button-primary-active`.
- **Surface Cream** (`{colors.surface-cream}` — #faf8f5): wired as `--glnv-header-accordion-bg-color`. The sand-cream secondary canvas — feature bands and the global-header accordion sit on this off-white tone rather than pure white. Warmer than `{colors.canvas}` and intentional.
- **Surface Light** (`{colors.surface-light}` — #f0f2f9): frequency 1. A cool blue-tinted off-white used as the carousel slide background ("PayPal connects buyers and sellers") below the feature chips.

### Text

- **Ink** (`{colors.ink}` — #001c64): the brand navy deep, doubling as the primary text token across headings and lead paragraphs. The convergence is deliberate — PayPal uses its brand navy as the text floor rather than maintaining a separate neutral ink tone.
- **Ink Soft** (`{colors.ink-soft}` — #2c2e2f): frequency 56 — used as text (29), border (26), background (1). The nav-link inactive tone and a secondary body color. A true dark gray, distinct from the brand navy.
- **Ink Muted** (`{colors.ink-muted}` — #545d68): wired as `--glnv-style-general-text-muted-main`. The body-paragraph muted tone for sub-labels and feature-card descriptions.
- **Ink Tertiary** (`{colors.ink-tertiary}` — #666666): frequency 40 — text (21), border (19). Tertiary captions and footer labels.
- **Ink Quaternary** (`{colors.ink-quaternary}` — #767676): frequency 164 — text (82), border (82). The dominant captured text tone in the Hebrew-locale page — used on the small body, footnote, and form-label tier where the brand navy would feel too heavy.

### Hairline

- **Hairline** (`{colors.hairline}` — #e6e0d9): wired as `--glnv-style-structure-border` and `--glnv-header-border-bottom`. The warm sand-tone border used on feature cards and the global header bottom-rule — the warmth ties to `{colors.surface-cream}` and signals the brand's preference against cool-blue grays for chrome.
- **Hairline Cool** (`{colors.hairline-cool}` — #d4d9dc): frequency 4 (all borders). A cool blue-tinted gray used on segment-pill borders below the hero.
- **Divider** (`{colors.divider}` — #c0c0c0): frequency 3. Wired as `--glnv-footer-separator-color`. The footer separator line — distinctly heavier than the structural hairline.

## Typography

### Font Families

The system runs three families: **PayPalOpen** (proprietary humanist sans) for display headlines and CTA labels; **PayPalSansSmall** (also proprietary, wider/tracked variant) for uppercase nav-segment labels; **Helvetica Neue** (system stack) for every 14-15px body paragraph and caption. Fallbacks walk to `"Helvetica Neue", Helvetica, Arial, sans-serif` across the board.

The split is the distinguishing typographic move. Most fintechs use one proprietary family across every tier (Stripe with Sohne-var, Wise with Inter); PayPal explicitly hands the body to Helvetica Neue, which keeps the page reading as familiar / system across global locales while the proprietary PayPalOpen handles the loud display + CTA surfaces.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 40px | 400 | 50px | 0.8px | Hero h1 / h2 ("חשבון אישי") |
| `{typography.display-md}` | 35px | 400 | 44px | 0.7px | Section h2 below the photographic hero |
| `{typography.heading-md}` | 28px | 400 | 35px | 0.28px | Sub-section titles, large feature titles |
| `{typography.heading-sm}` | 20px | 500 | 30px | 0 | h3 / h4 — feature-card titles |
| `{typography.body-lg}` | 20px | 400 | 30px | 0 | Hero sub-paragraph |
| `{typography.body-md}` | 15px | 400 | 22.5px | 0 | Default running text, link rows |
| `{typography.body-sm}` | 14px | 400 | 22.4px | 0 | Caption rows, secondary copy |
| `{typography.label-md}` | 14px | 500 | 17.5px | -0.14px | Feature-chip titles, anchor labels |
| `{typography.nav-segment}` | 14px | 700 | 14px | 1px | Uppercase segment-nav links |
| `{typography.button-md}` | 12px | 400 | 12px | 0 | Primary CTA labels |
| `{typography.caption}` | 12px | 400 | 12px | 0 | Footnote, small-print captions |

### Principles

Display weight stays at 400. The hero at 40px / 400 with generous +0.8px tracking is the editorial treatment — confidence through tracking and color contrast against the photographic hero, not through weight. The captured h2 at 39.998px appears 4 times across the page. There is no 700-weight display tier; weight 700 is reserved for the PayPalSansSmall uppercase nav-segment tier only.

The CTA-button text is the quietest typographic moment on the page — 12px at weight 400 in Helvetica Neue, with no letter-spacing. The button itself does the visual work through its 25px pill geometry and cyan fill; the label sits inside as functional text rather than declaration.

### Note on Font Substitutes

PayPalOpen and PayPalSansSmall are proprietary. **Inter** at the same sizes is the closest open-source substitute for PayPalOpen — adjust display tracking to +0.02em on the 40px tier to match. For PayPalSansSmall, use **Inter** at weight 700 with `text-transform: uppercase` and `letter-spacing: 1px`; the result reads close to the original. The Helvetica Neue body tier is already a system stack — keep it as-is or substitute the more legible **Inter** if you want a single family across body too.

## Layout

### Spacing System

- **Base unit:** approximately 5px increments, with 10/15/25/35px as the dominant module steps — not a strict 4 or 8px grid.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 10px · `{spacing.base}` 15px · `{spacing.md}` 18px · `{spacing.lg}` 25px · `{spacing.xl}` 35px · `{spacing.2xl}` 48px · `{spacing.3xl}` 72px · `{spacing.4xl}` 90px · `{spacing.5xl}` 130px.
- **Section padding (vertical):** 90px on the hero band, 72px on the feature band, 130px on the navy promo band — increasing as the page progresses downward.
- **Card internal padding:** 25/25/23px on feature cards (an asymmetric "top + sides equal, bottom -2px" pattern that appears on multiple surfaces).
- **Nav padding:** 25/25/23px vertical, 48px horizontal — the same asymmetric padding the feature cards use, anchoring the rhythm.

### Grid & Container

- **Max content width:** approximately 1080px on the hero band, ~1280px on the feature row.
- **Hero band:** full-bleed photographic image, with the headline + CTA centered at ~720px max-width over the image.
- **Feature band:** 3-column hairline-card grid on `{colors.surface-cream}`, collapsing to 1-column on narrow viewports.
- **Carousel band:** 3-up rounded-card carousel on `{colors.surface-light}` with cyan-stroked chevron icon-buttons in `{rounded.circle}` containers.
- **Promo band:** full-bleed `{colors.brand-navy-deep}` block, 130px vertical padding, centered headline + 3-up support columns + a single cyan-pill CTA.

### Rhythm

The page alternates band colors more aggressively than most marketing surfaces: photographic hero → white body → cream feature band → light-blue carousel band → navy promo block → white CTA band → light footer. Each band carries a distinct surface color, and the brand voltage rotates between background fill (navy promo) and contrast accent (cyan CTA on white). The rhythm is the structural device — color shifts mark section boundaries rather than spacing alone.

## Elevation

The system has essentially **no shadow tier** rendered on the captured marketing surface. The brand carries elevation through hairline borders and full-bleed color blocks instead.

- **Flat (no shadow):** body, feature cards, segment pills, promo band, footer — 99% of surfaces.
- **Hairline outlines:** `{colors.hairline}` (#e6e0d9) on feature cards; `{colors.hairline-cool}` (#d4d9dc) on segment pills.
- **Photographic hero:** the only "elevated" surface is the photographic image itself, which sits as a full-bleed band rather than a card.
- **Modal scrim:** not exposed on the captured surface; the global header accordion uses `{colors.surface-cream}` as a flat backdrop rather than a darkened scrim.

## Shapes

The radius scale is **binary**: pill or flat. There is essentially no middle rounded-card tier on the captured surfaces.

- `{rounded.none}` 0px — every full-bleed band (hero, feature, promo, footer), every text block.
- `{rounded.md}` 14px — frequency 1. The single rounded-card tier, used on the carousel slide ("PayPal connects buyers and sellers").
- `{rounded.pill}` 25px — frequency 9. The dominant button radius — primary CTA, secondary outline, ghost button, segment pill. At a 38px button height, 25px reads as fully rounded.
- `{rounded.full}` 1000px — frequency 2. Used on long-pill containers where 25px would not reach the full half-height.
- `{rounded.circle}` 50% — frequency 5. Icon-button circles for the carousel chevrons and the round-icon affordances inside cards.

There is no 4px / 8px / 12px tier — small surfaces start at 14px and most affordances jump directly to the 25px pill. The contrast between flat blocks and pill affordances is the entire shape language.

## Components

**`button-primary`** — The signature CTA. Cyan-blue `{colors.primary}` fill, white text, `{rounded.pill}` 25px radius, 12×18px padding, 38px height. The captured hero CTA sits at 84px width — a compact pill that reads as the primary action without dominating the photographic hero.

**`button-primary-hover`** — Flips to `{colors.primary-hover}` (#0070e0) — one half-step lighter / brighter cyan. The hover state of every link in the system uses the same blue, tying the CTA to the link palette.

**`button-secondary`** — White fill, `{colors.brand-navy}` text, 1px navy outline, same 25px pill geometry. Used on the "Login" affordance and secondary CTAs throughout — the navy outline signals a less-loud action than the cyan fill.

**`button-ghost`** — Transparent fill, ink text, 25px pill radius. The "Learn more" tertiary action that appears in feature cards.

**`top-nav`** — White surface, 65px height, 1px `{colors.hairline}` bottom rule. PayPal "PP" monogram flush left (in the captured Israel locale, flush right due to RTL), product-segment links centered in `{typography.nav-segment}` (uppercase + tracked), "Login" + "Get Started" cluster at the opposite edge.

**`nav-link`** — Ink-soft `{colors.ink-soft}` text in `{typography.nav-segment}` (PayPalSansSmall 14px / 700, +1px tracking, uppercase casing). 25/25/23px asymmetric padding. The loudest typographic tier on the page despite being only 14px — the uppercase + tracked treatment is the brand's nav signature.

**`hero-heading`** — White text on the photographic hero band, `{typography.display-xl}` (40px / 400, +0.8px tracking). The captured h2 "חשבון אישי" is the canonical instance; the corresponding English would read "Personal Account."

**`section-heading`** — Ink `{colors.ink}` text on white or cream surfaces at `{typography.heading-md}` (28px / 400). Used for sub-section titles below the hero.

**`body-paragraph`** — `{colors.ink-muted}` (#545d68) running text at `{typography.body-md}` (Helvetica Neue 15px / 400). The default reading tier across the page.

**`body-paragraph-muted`** — `{colors.ink-quaternary}` (#767676) at `{typography.body-sm}` (14px / 400). The captured-page dominant text tone for small body and form-label tier — appears 82 times as text in the Hebrew locale.

**`hero-photo-band`** — Full-bleed white container holding the photographic hero image. 90px vertical padding, edge-to-edge horizontal. The headline + CTA pin to the image center; the image extends behind them.

**`feature-card`** — White surface, `{colors.hairline}` (#e6e0d9) warm-sand border, `{rounded.md}` 14px radius, 25/25/23px padding. The three feature chips below the hero ("Smart shopping," "Business accounts," "Personal accounts") use this surface.

**`feature-band`** — Cream `{colors.surface-cream}` (#faf8f5) full-bleed band holding the feature cards. 72px top padding, edge-to-edge horizontal — the cream signals a soft transition from the photographic hero.

**`promo-band`** — Full-bleed `{colors.brand-navy-deep}` (#001c64) block, white text, 130px top padding. The single in-body application of the brand voltage as full surface fill — re-asserting the navy identity below the cream feature band.

**`segment-pill`** — White surface, `{colors.ink}` text, 1px `{colors.hairline-cool}` outline, 25px pill, 11×18px padding, 38px height. Used for the category-segment switcher above the carousel.

**`icon-circle`** — White surface, cyan `{colors.brand-cyan}` stroke, `{rounded.circle}` full-circle radius, 40px height. Carousel chevrons and round icon affordances.

**`footer`** — White surface, `{colors.ink-tertiary}` text, 1px `{colors.divider}` (#c0c0c0) top rule. 35×10px padding, language selector + small-print links + copyright row.

## Do's and Don'ts

**Do** treat the brand voltage as a duotone, not a single accent. Navy and cyan are both load-bearing — navy carries text and full-bleed surfaces, cyan carries CTAs and link-hover states. Collapsing to a single blue would discard the PP-monogram structure that defines the identity.

**Do** use `{colors.surface-cream}` (#faf8f5) — never pure `#ffffff` — for the secondary canvas behind feature cards. The warmth difference is intentional and ties to the warm `{colors.hairline}` (#e6e0d9) sand-tone border; mixing pure white with the warm border tone breaks the cohesion.

**Do** let `{typography.nav-segment}` (PayPalSansSmall 14px / 700, +1px tracking, uppercase) carry every product-segment label. The system has no other uppercase or tracked tier — reaching for one breaks the brand's nav-only convention.

**Do** keep CTA buttons at 38px height with 25px pill radius. The half-height pill ratio is the brand's most recognizable shape; bumping the height to 44/48px or dropping the radius to 8/12px erases the signature.

**Don't** use `{colors.brand-navy}` (#003087) for body text — it is wired as a button-bg / button-outline token only. For ink, use `{colors.ink}` (#001c64) or `{colors.ink-muted}` (#545d68). Mixing the two navies in adjacent text and surface creates a visible blue-mismatch.

**Don't** introduce a shadow tier on feature cards. The captured marketing surface has zero shadow elevation — depth is hairline + full-bleed color contrast. Adding a 4-8px shadow turns the brand's flat-on-hairline language into a generic SaaS card system.

**Don't** drop the +1px letter-spacing on `{typography.nav-segment}`. The tracking is the brand's nav signature; without it the 14px PayPalSansSmall reads like an ordinary small label rather than the loudest typographic moment on the page.

**Don't** use `{colors.brand-cyan}` (#009cde) for primary CTAs — it is wired into the monogram and icon strokes, not the action layer. The primary CTA uses `{colors.primary}` (#0070ba), a hyperlink-blue that sits between navy and cyan; substituting cyan there reads as a wordmark color leak.

## Known Gaps

- **Locale capture:** the screenshot is the Israel (`/il/home`) Hebrew RTL page. The tokens are locale-agnostic, but verify direction-sensitive padding (the asymmetric 25/25/23px pattern) on your own LTR / RTL surface before shipping.
- **Hover and focus states:** documented for `{component.button-primary-hover}` only. The full state matrix (focus rings, active press, disabled tints) is wired into CSS variables (`--glnv-header-link-box-shadow-color`, `--glnv-style-structure-focus`) but not directly rendered on the captured surface.
- **Form input states:** the captured page does not expose a form input. PayPal's actual checkout flow uses a separate component system not represented here.
- **Dark mode:** the captured surface is light-only. The CSS variables include some dark / overlay tokens (`--overlay-medium`) but no full dark-mode palette is exposed on the marketing chrome.
- **Motion:** the page uses a band-by-band scroll-in animation; the spec captures end-state values only. Easing curves and stagger timing live in the live JavaScript.
- **Product surfaces:** this DESIGN.md captures the global homepage marketing chrome. The PayPal Dashboard, Checkout, and PayPal Business surfaces (`paypal.com/business`, `developer.paypal.com`) carry their own token systems not represented here.
- **Logo wall:** the customer/partner trust band typically present on the global homepage is not captured here — the Israel locale page does not surface a logo wall above the fold.