PayPal

---
version: alpha
name: "PayPal NL Homepage"
description: "PayPal's Dutch homepage uses a bold, consumer-facing design anchored by a vivid sky-blue (#60cdff) hero section with ultra-heavy black display typography (PayPal Pro w900). The navigation is white with black text and two distinct CTA buttons. an outlined \"Inloggen\" and a filled black \"Rekening openen\". A dark navy announcement banner sits at the top. The overall language is high-contrast, pill-radius-heavy, and brand-typeface-driven, projecting trust and accessibility for a broad consumer finance audience."
colors:
  deep-navy: "#002991"
  hero-sky-blue: "#60cdff"
  light-sky-tint: "#b8e9ff"
  pure-white: "#ffffff"
  warm-off-white: "#f1efea"
  true-black: "#000000"
  browser-link-blue: "#0000ee"
typography:
  display-hero:
    fontFamily: "PayPal Pro"
    fontSize: "69px"
    fontWeight: "900"
    lineHeight: "75.9px"
    letterSpacing: "-2.07px"
  display-xl:
    fontFamily: "PayPal Pro"
    fontSize: "119.786px"
    fontWeight: "900"
    lineHeight: "119.786px"
    letterSpacing: "-3.59px"
  section-heading:
    fontFamily: "PayPal Pro"
    fontSize: "48.29px"
    fontWeight: "900"
    lineHeight: "53.11px"
    letterSpacing: "-0.97px"
  subheading:
    fontFamily: "PayPal Pro"
    fontSize: "17.14px"
    fontWeight: "900"
    lineHeight: "21.14px"
  body-default:
    fontFamily: "PayPal Pro Text VF"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "18.4px"
  body-small:
    fontFamily: "PayPal Pro Text VF"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "21px"
    letterSpacing: "-0.21px"
  body-medium:
    fontFamily: "PayPal Pro Text VF"
    fontSize: "20.36px"
    fontWeight: "400"
    lineHeight: "30.54px"
    letterSpacing: "-0.31px"
  label-bold:
    fontFamily: "PayPal Pro Text VF"
    fontSize: "14px"
    fontWeight: "700"
    lineHeight: "21px"
    letterSpacing: "-0.21px"
  system-fallback:
    fontFamily: "ui-sans-serif"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  pill: "1000px"
  card: "12px"
  button-sm: "8px"
  badge-large: "104px"
  toggle: "26.7px"
  chip: "56px"
spacing:
  xs: "1px"
  sm-2: "6px"
  sm: "8px"
  md-1: "10px"
  md-2: "13.6px"
  md-3: "16px"
  md-4: "18.3px"
  md-5: "20px"
  md-6: "22.8px"
  lg-1: "24px"
  lg-2: "25px"
  lg-3: "28.9px"
  lg-4: "32.1px"
  xl-1: "44.8px"
  xl-2: "48px"
  xl-3: "61.7px"
---

## Overview

PayPal's Dutch homepage uses a bold, consumer-facing design anchored by a vivid sky-blue (#60cdff) hero section with ultra-heavy black display typography (PayPal Pro w900). The navigation is white with black text and two distinct CTA buttons. an outlined "Inloggen" and a filled black "Rekening openen". A dark navy announcement banner sits at the top. The overall language is high-contrast, pill-radius-heavy, and brand-typeface-driven, projecting trust and accessibility for a broad consumer finance audience.

**Signature traits:**
- Dual typeface system: Pairs PayPal Pro and PayPal Pro Text VF across the type hierarchy.
- Soft, rounded geometry: Generous corner rounding up to 1000px.
- Layered elevation: Depth comes from 4 validated shadow tokens.

## Colors

The palette uses 7 validated color tokens across 1 theme profile. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **surface-background** maps to `hero-sky-blue`: Role "background" is grounded by usage context "Hero section background, brand accent surface".
- **action-background** maps to `pure-white`: Role "background" is grounded by usage context "Navigation bar background, card surfaces, button fills".
- **action-text** maps to `true-black`: Role "text" is grounded by usage context "All body text, headings, nav links, icon fills".
- **content-background** maps to `light-sky-tint`: Role "background" is grounded by usage context "Subtle hero gradient or section tint".

### Text Scale
- **True Black** (#000000): All body text, headings, nav links, icon fills. Role: text. {authored: rgb(0, 0, 0), space: rgb, alpha: 0.1}

### Interactive
- **Browser Link Blue** (#0000ee): QR badge link color, default browser link color in footer/badge areas. Role: border. {authored: rgb(0, 0, 238), space: rgb}

### Surface & Shadows
- **Deep Navy** (#002991): Announcement banner background, PayPal brand blue accent. Role: background. {authored: rgb(0, 41, 145), space: rgb}
- **Hero Sky Blue** (#60cdff): Hero section background, brand accent surface. Role: background. {authored: rgb(96, 205, 255), space: rgb}
- **Light Sky Tint** (#b8e9ff): Subtle hero gradient or section tint. Role: background. {authored: rgb(184, 233, 255), space: rgb}
- **Pure White** (#ffffff): Navigation bar background, card surfaces, button fills. Role: background. {authored: rgb(255, 255, 255), space: rgb, alpha: 0}
- **Warm Off-White** (#f1efea): Secondary surface or section background. Role: background. {authored: rgb(241, 239, 234), space: rgb}

## Typography

Typography uses PayPal Pro, PayPal Pro Text VF, ui-sans-serif across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes PayPal Pro and PayPal Pro Text VF and ui-sans-serif for visual contrast. Weight range spans bold, regular. Sizes range from 14px to 119.786px.

### Font Roles
- **Headline Font**: PayPal Pro
- **Body Font**: PayPal Pro

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Primary hero headline (h1) | PayPal Pro | 69px | 900 | 75.9px | -2.07px | PayPal Pro, Century Gothic, Helvetica, Arial, sans-serif | Extracted token |
| Large decorative display numbers or oversized hero text | PayPal Pro | 119.786px | 900 | 119.786px | -3.59px | PayPal Pro, Century Gothic, Helvetica, Arial, sans-serif | Extracted token |
| Section-level headings | PayPal Pro | 48.29px | 900 | 53.11px | -0.97px | PayPal Pro, Century Gothic, Helvetica, Arial, sans-serif | Extracted token |
| Card titles, subheadings, tab labels | PayPal Pro | 17.14px | 900 | 21.14px | normal | PayPal Pro, Century Gothic, Helvetica, Arial, sans-serif | Extracted token |
| Primary body copy, nav links, UI labels | PayPal Pro Text VF | 16px | 400 | 18.4px | normal | PayPal Pro Text VF, Helvetica, Arial, sans-serif | Extracted token |
| Secondary body text, captions, fine print | PayPal Pro Text VF | 14px | 400 | 21px | -0.21px | PayPal Pro Text VF, Helvetica, Arial, sans-serif | Extracted token |
| Lead paragraph or feature description text | PayPal Pro Text VF | 20.36px | 400 | 30.54px | -0.31px | PayPal Pro Text VF, Helvetica, Arial, sans-serif | Extracted token |
| Bold labels, emphasized UI text | PayPal Pro Text VF | 14px | 700 | 21px | -0.21px | PayPal Pro Text VF, Helvetica, Arial, sans-serif | Extracted token |
| Fallback system font for non-branded UI elements | ui-sans-serif | 16px | 400 | 24px | normal | ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | Extracted token |

## Layout

Responsive system uses 3 breakpoint tier(s): mobile, tablet, desktop.

This system uses a 8px base grid with scale values 1, 6, 8, 10, 13.6, 16, 18.3, 20, 22.8, 24, 25, 28.9, 32.1, 44.8, 48, 61.7, 67.2, 71.7, 89.6.

### Responsive Strategy
- **mobile (<= 752px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **tablet (>= 752px)**: Increase spacing and column structure for medium-width viewports.
- **desktop (>= 1024px)**: Expand layout density and horizontal composition for wide viewports.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| xs | 1px | 1 | Extracted spacing token |
| sm-2 | 6px | 6 | Extracted spacing token |
| sm | 8px | 8 | Extracted spacing token |
| md-1 | 10px | 10 | Extracted spacing token |
| md-2 | 13.6px | 13.6 | Extracted spacing token |
| md-3 | 16px | 16 | Extracted spacing token |
| md-4 | 18.3px | 18.3 | Extracted spacing token |
| md-5 | 20px | 20 | Extracted spacing token |
| md-6 | 22.8px | 22.8 | Extracted spacing token |
| lg-1 | 24px | 24 | Extracted spacing token |
| lg-2 | 25px | 25 | Extracted spacing token |
| lg-3 | 28.9px | 28.9 | Extracted spacing token |
| lg-4 | 32.1px | 32.1 | Extracted spacing token |
| xl-1 | 44.8px | 44.8 | Extracted spacing token |
| xl-2 | 48px | 48 | Extracted spacing token |
| xl-3 | 61.7px | 61.7 | Extracted spacing token |
| xl-4 | 67.2px | 67.2 | Extracted spacing token |
| xl-5 | 71.7px | 71.7 | Extracted spacing token |
| 2xl | 89.6px | 89.6 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| inset-ring | 1 | inset 0px 0px 0px 1px rgba(0, 0, 0, 0) |
| white-top-bleed | 1 | 0px -28.5714px 0px 28.5714px rgb(255, 255, 255) |
| white-bottom-bleed | 1 | 0px 28.5714px 0px 28.5714px rgb(255, 255, 255) |
| card-elevation | 1 | 4px 4px 28px 6px rgba(0, 0, 0, 0.14) |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | backdrop-filter | blur(30px) |
| Light | outline-color | rgb(0, 0, 0) ; rgb(255, 255, 255) ; rgb(0, 0, 238) |
| Light | outline-width | 3px |
| Light | outline-offset | 0px |
| Light | transform | matrix(1, 0, 0, 1, 0, 0) ; matrix(1, 0, 0, 1, -2.89714, 0) ; matrix(1, 0, 0, 1, -7.18714, 0) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| button-sm | 8px | 8 | Control corner |
| card | 12px | 12 | Control corner |
| toggle | 26.7px | 26.7 | Large surface corner |
| chip | 56px | 56 | Large surface corner |
| badge-large | 104px | 104 | Large surface corner |
| pill | 1000px | 1000 | Large surface corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| pill | 1000px | px |
| card | 12px | px |
| button-sm | 8px | px |
| badge-large | 104px | px |
| toggle | 26.7px | px |
| chip | 56px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Dual typeface system, Soft, rounded geometry, Layered elevation without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 752px | screen and (max-width: 752px) |
| Mobile | >= 752px | only screen and (min-width: 752px) |
| Desktop | >= 1024px | only screen and (min-width: 1024px) |
| Desktop | >= 1152px | only screen and (min-width: 1152px) |
| Breakpoint 5 | Unknown | (max-width: 41rem) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.