What is PayPal's primary brand color?

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.

What typeface does PayPal use, and what should I use as a substitute?

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.

Why are PayPal's buttons so round?

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.

Why does PayPal use a cream background instead of pure white?

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.

Can I use this DESIGN.md to build my own React payments marketing site?

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.

PayPal Design System

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.

About PayPal DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source paypal.com

Banking & Payments
Fintech & Crypto

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.

What makes it distinct

Two-blue voltagemidnight 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 splitthe proprietary sans handles headlines and CTAs, the system fallback Helvetica Neue carries 14-15px body across every locale
25px pill CTAs at 38px heightthe corner-radius scale is binary: 25px pill or 0, no middle rounded-card tier
Sand-cream secondary canvasfeature bands sit on warm cream #faf8f5, not pure white, an off-white move that softens the navy footer
Uppercase tracked monospace navsecondary nav links render in PayPalSansSmall at weight 700 with +1px tracking and uppercase casing, distinct from any other text on the page

Live at paypal.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

paypal.com

Explore PayPal

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

PayPal design system FAQ

Common questions about PayPal's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

PayPal — official site

PayPal's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.