Finance / iOS / Android / Web

PayPay

PayPay keeps red for who it is and blue for what you do next, explained in bold Japanese type with plenty of air between the lines.

Download
  • #F24F4F
  • #3895FF
  • #242323
  • #F7F7F7
  • #FECF72
  • #FFFFFF

Color

Every color token in the file, grouped by role.

Brand

  • primary#3895FF
  • on primary#FFFFFF
  • brand red#F24F4F
  • on brand#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • ink#242323
  • ink muted#606060

Lines

  • border#D8D8D8

Status

  • alert red#FF0033

More

  • red light#FFAAAA
  • yellow#FECF72
  • orange#FEA93E
  • band#F7F7F7
  • band alt#F9F9F9

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Noto Sans JPOpen font, shown as published.
  • Hiragino Kaku Gothic ProNNot served by an open font library, so it falls back through the file's own stack.
  • display55px / 700 / 88px

    PayPay

  • headline42px / 700 / 67.2px

    PayPay

  • stat35px / 700 / 56px

    PayPay

  • button16px / 700 / 25.6px

    Continue to checkout

  • body16px / 400 / 25.6px

    The quick brown fox jumps over the lazy dog

  • nav16px / 700 / 22.4px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs5px
  • sm6px
  • md10px
  • lg11px
  • full9999px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md16px
  • base24px
  • lg32px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button outline
    button-outline
  • red band
    red-band
  • gray band
    gray-band
  • card
    card
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 98 lines
version: alpha
name: PayPay-design-analysis
description: "A Japanese QR code payments app in PayPay red (#f24f4f) for the brand and its numbers, a clear blue (#3895ff) for every button, near-black text on white and light gray, Noto Sans JP at 700 with roomy line heights, and 6px buttons."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#3895ff"
  on-primary: "#ffffff"
  brand-red: "#f24f4f"
  on-brand: "#ffffff"
  red-light: "#ffaaaa"
  alert-red: "#ff0033"
  yellow: "#fecf72"
  orange: "#fea93e"
  ink: "#242323"
  ink-muted: "#606060"
  canvas: "#ffffff"
  band: "#f7f7f7"
  band-alt: "#f9f9f9"
  border: "#d8d8d8"

typography:
  display:
    fontFamily: "'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif"
    fontSize: 55px
    fontWeight: 700
    lineHeight: 88px
  headline:
    fontFamily: "'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif"
    fontSize: 42px
    fontWeight: 700
    lineHeight: 67.2px
  stat:
    fontFamily: "'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif"
    fontSize: 35px
    fontWeight: 700
    lineHeight: 56px
  button:
    fontFamily: "'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 25.6px
  body:
    fontFamily: "'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 25.6px
  nav:
    fontFamily: "'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 22.4px

rounded:
  xs: 5px
  sm: 6px
  md: 10px
  lg: 11px
  full: 9999px

spacing:
  sm: 8px
  md: 16px
  base: 24px
  lg: 32px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 58px
    padding: 16px 32px
  button-outline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 58px
    padding: 16px 32px
  red-band:
    backgroundColor: "{colors.brand-red}"
    textColor: "{colors.on-brand}"
    typography: "{typography.display}"
  gray-band:
    backgroundColor: "{colors.band}"
    textColor: "{colors.ink}"
    typography: "{typography.headline}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"

Overview

PayPay is a cashless payments app in Japan, used to pay in shops by scanning a QR code. Its site opens on a PayPay red hero, then alternates white and light gray sections with near-black text and red highlights for its numbers, and every button is a clear blue. Text is Noto Sans JP, set bold with very roomy line heights. [Observed]

What defines the look:

  1. PayPay red for the brand. #f24f4f fills the hero and colors key numbers ("Registered users") and the scroll cue. [Measured]
  2. Blue for every button. "Other top up methods", "Find stores" and similar buttons are #3895ff with white text, 58 high, with white outlined versions in blue text. [Measured]
  3. Bold Japanese type with room. Noto Sans JP at 700, with line heights of 1.6 (55 on 88, 42 on 67.2). [Measured]
  4. White and light gray bands. Sections alternate #ffffff and #f7f7f7. [Measured]
  5. 6px buttons, 11px cards. Buttons use 6, cards 10 and 11, and icons sit in round frames. [Measured]

Source for this file: the home page (shown in English), the getting started page and the points page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. PayPay does not publish its design system. The app sits behind an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Blue#3895ff with white textEvery button, links [Measured]
PayPay red#f24f4fHero, key numbers, scroll cue [Measured]
Light red and alert#ffaaaa, #ff0033Accents [Measured]
Yellow and orange#fecf72, #fea93eHighlight outlines and small accents [Measured]
Ink#242323Text [Measured]
Muted#606060Secondary text [Measured]
Canvas and bands#ffffff, #f7f7f7, #f9f9f9Sections [Measured]
Border#d8d8d8Dividers [Measured]

Typography

Noto Sans JP at 400 and 700, with Hiragino Kaku Gothic for navigation on systems that have it and Futura for the scroll cue. [Measured]

RoleDesktopMobileWeight
Display55 on 8836.4 on 58.24700 [Measured]
Headline42 on 67.236.4 on 58.24700 [Measured]
Stat35 on 5620.8 on 39.52700 [Measured]
Button16 on 25.618.72 on 29.95700 [Measured]
Body16 on 25.616.64 on 26.62400 to 700 [Measured]
Navigation16 on 22.4not shown700 [Measured]

Line height is 1.6 times the size almost everywhere. [Measured]

Shape and spacing

Buttons use 6, cards 10 and 11, small parts 5, and icon frames full round. [Measured] Buttons carry 16 by 32 padding on desktop. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light only. The dark color scheme pass changed nothing. [Measured]

Platform: iOS

How the PayPay iOS app looks and behaves was not captured. PayPay does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A home with a large scan and pay entry and a bottom tab bar is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Scanning a QR code or showing a barcode to pay. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the red brand and Japanese system-style type with the web. [Inferred]

Platform: Android

How the PayPay Android app looks and behaves was not captured. PayPay does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A home with a large scan and pay entry and a bottom navigation bar is expected. [Inferred]

Main action

Expected on Android: Floating action button.

Scanning a QR code or showing a barcode to pay. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the red brand and Japanese system-style type with the web. [Inferred]

Platform: Web

The home page, the getting started page and the points page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A white header with text menus ("How to start", "How to use") at 16 bold, 60 high. [Measured]

Main action

Expected on Web: Page-level button.

A blue #3895ff button with white 16px bold text, 58 high with a 6px corner and 16 by 32 padding. On mobile the same buttons grow to 74 to 104 high with 18.72px text. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Outlined buttons are white with blue text and a hairline. Highlight boxes use a 3px yellow #fecf72 outline. [Measured]

Text sizing

Expected on Web: Browser zoom.

Mobile sizes are fractional (36.4, 16.64, 18.72), which suggests type that scales with the window, not checked at other widths. [Inferred]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 58 high on desktop and taller on mobile, menu items 60. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A guide-like site with large buttons and generous line spacing, suited to explaining how to pay with the app. [Observed]

Cross-platform consistency

Consistent across platforms: the PayPay red and the bold Japanese type. [Measured for web, Inferred for the apps]

Intentionally different: on the web, buttons are blue while the brand is red. [Measured]

Do's and Don'ts

Do

  • Keep red for the brand and key numbers, and blue for buttons.
  • Set Japanese text bold with a 1.6 line height.
  • Alternate white and light gray sections.
  • Use 6px buttons and 11px cards.

Don't

  • Don't make buttons red.
  • Don't tighten line heights for Japanese text.
  • Don't mix in extra accent colors for actions.

Known Gaps

  • The app sits behind an account, and no signed-in screens were measured.
  • The site was measured in its English view. The Japanese view may differ in line breaks and spacing.
  • The iOS and Android apps were not captured, and PayPay publishes no design system, so every mobile topic is inferred.
  • Icons, motion and modals were not measured.
  • White text on blue #3895ff measures 3.04 to 1, and white on the red hero 3.50 to 1 (large text there), below the 4.5 to 1 minimum for normal text. Those are the shipped pairings and were kept.
  • Account deletion and store policy rules were not verified.