---
version: alpha
name: "Payoneer"
website: "https://www.payoneer.com"
description: >-
  A cross-border payments platform for freelancers and SMBs whose marketing site opens on a white canvas with a 48px AvenirNextWorld-Regular headline in near-black ink, then immediately transitions into a dark near-black footer section where the brand's distinctive multi-color gradient (blue-to-purple-to-green, registered as css variables --wp--preset--gradient--purple-green-blue) takes over as the primary visual identity. AvenirNextWorld in two cuts (Regular and Demi) handles every typographic role, with Demi doing the work of a semibold across headings, nav, and buttons — the system avoids declaring a separate bold weight for display text.

seo:
  title: "Payoneer Design System for React — near-black canvas, AvenirNextWorld, 16 components"
  metaDescription: "Payoneer's marketing-site design system as DESIGN.md. Near-black body text, AvenirNextWorld Demi headings, gradient decorations, 15 color tokens, 16 components. For React, Next.js, and AI coding tools."
  highlights:
    - "Gradient-as-identity — Payoneer's tri-color gradient (blue to purple to green) is wired as five named CSS gradient presets and appears as the primary visual decoration, not a single brand hex"
    - "Two-cut type system — AvenirNextWorld-Regular for body and AvenirNextWorld-Demi for headings, buttons, and nav; Demi carries the brand's semibold register without declaring a separate 700 weight"
    - "Dark footer section — the page transitions from a white body to a near-black footer section (#131314) where the gradient arc decoration and partner logos live"
    - "No orange in the chrome — despite the CSS declaring --wp--preset--color--payoneer-orange (#ff4800) as a named brand color, it appears only inside gradient stops and never as a flat fill in the captured page"
    - "12px card radius — the dominant interactive radius is 12px across cards, inputs, and most UI elements, with 16px on slightly larger panels"
  tags:
    - "Banking & Payments"
    - "Fintech & Crypto"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Payoneer's marketing page has an unusual relationship with its own color system. The CSS registers five named gradient presets — purple-green-blue, blue-green-yellow, orange-purple-blue, green-yellow-orange, and yellow-orange-purple — along with individual brand-color tokens for orange (#ff4800), purple (#DA54D8), blue (#0092F4), green (#20DC86), and yellow (#dfd902). But the above-fold page chrome is aggressively achromatic: a white canvas, near-black body text (#212529), and a standard-blue link color that the CTA buttons inherit from Bootstrap's `--bs-primary`. The gradient appears as the large decorative arc that opens the above-fold hero — a swooping multi-color stroke in the upper-left corner — and as the 3D-rendered wheel in the "facts and stats" section mid-page. The chrome says restraint; the decoration says spectrum.

    The DESIGN.md file packages the system into a machine-readable spec for React and AI coding tools. Inside: 15 color tokens anchored around the near-black Bootstrap body color (#212529), the gradient-stop colors (blue, purple, green — declared as Payoneer brand tokens), and a clean white canvas. Thirteen typography tokens run AvenirNextWorld in two cuts: Regular for body copy (14-20px, weight 400) and Demi for headings, navigation, and buttons (18-48px, weight treated as 400 by the renderer but visually rendered as demibold/semibold). Six radius tokens run from 4px for small chips to 500px pill for flag/avatar circles. Sixteen components cover the gradient-arc hero, trust-brand logo strip, feature-card grid, stats counter section, and the near-black footer with gradient-wheel decoration.

    Feed this file to Claude or Cursor and it will reproduce Payoneer's specific moves: white body canvas with near-black text, gradient decoration as hero identity rather than flat brand-color fill, AvenirNextWorld-Demi for all heading and button weight, 12px card radius as the dominant UI surface rounding, and the dark footer transition that reframes the gradient palette. The system is worth studying as an example of a gradient-led identity where the gradient itself — not any single hex from it — is the brand signal.
  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.payoneer.com"
      title: "Payoneer — official site"
      description: "Payoneer'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 Payoneer's primary brand color?"
      answer: "Payoneer does not have a single primary hex — it has a gradient. The CSS registers `--wp--preset--gradient--purple-green-blue: linear-gradient(90deg, #DA54D8 0%, #20DC86 50%, #0092F4 100%)` as the canonical tri-color brand gradient, along with four variant gradients mixing the same orange, blue, purple, green, and yellow brand tokens in different orders. No individual color from the gradient appears as a flat fill on the above-fold chrome. The nearest single color to 'the brand' is the Payoneer blue (#0092F4, wired as `--wp--preset--color--payoneer-blue` and used in 27 gradient stop occurrences), but even this appears only inside gradients on the captured marketing page — never as a standalone fill."
    - id: "typography"
      title: "What typeface does Payoneer use, and how does the Demi cut work?"
      answer: "Payoneer runs AvenirNextWorld in two named cuts: AvenirNextWorld-Regular for body copy and AvenirNextWorld-Demi for headings, nav links, and buttons. The Demi cut is the system's weight register for anything that needs emphasis — in typical web typography this role goes to font-weight: 600 or 700, but the renderer outputs font-weight: 400 for Demi because the weight is embedded in the font file name rather than set via the CSS weight property. The hero h1 at 48px, section h2 at 36px, and all card-heading text use the Demi cut. AvenirNextWorld is a proprietary font; the closest open-source substitute is Nunito SemiBold for Demi and Nunito Regular for Regular. Source Sans 3 transfers cleanly for the 14-16px body tiers."
    - id: "gradient-usage"
      title: "Where and how does Payoneer use its gradient system?"
      answer: "Payoneer declares five gradient presets in CSS, all mixing its five brand colors (orange, blue, purple, green, yellow) in different orders. The gradients appear in three places on the captured marketing page: (1) the large decorative arc in the upper-left of the hero, using the purple-green-blue gradient as a swooping stroke; (2) the 3D-rendered pie/wheel graphic in the 'facts and stats' section, using multiple gradient-stops including the blue (#0092F4), purple (#D054CE), and green (#20DC86) fills; (3) gradient stop occurrences totaling 27 blue, 26 purple, and 25 green appearances. The gradients are always decorative, never applied to button fills or section backgrounds."
    - id: "dark-footer"
      title: "How does the dark footer section work?"
      answer: "The 'Why do business with Payoneer?' section and the closing CTA are rendered on a near-pure-black surface (#131314, 6 background occurrences) — the single dark surface band on an otherwise white-canvas page. This dark section carries white body text and uses the gradient arc decoration and the VISA/Walmart/Rappi/Google/Netflix/Booking partner logos in white-reversed treatment. The transition from white body to near-black footer creates a strong terminal anchoring: the page ends with authority rather than with a light footer that would dissipate the accumulated scroll context."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a cross-border payment platform site?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI coding tool. The agent will reproduce Payoneer's specific moves: white body canvas with near-black (#212529) text, AvenirNextWorld-Demi for all heading and button copy, 12px card radius across most UI surfaces, gradient-arc decoration in the hero section, Bootstrap-compatible spacing and token structure, and the dark (#131314) terminal footer section. The gradient stop tokens (blue, purple, green) are included for constructing the decorative arc. One caveat: the gradient arc itself requires SVG or CSS clip-path construction; the token file captures the color stops but not the geometric path."

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

colors:
  ink: "#212529"
  ink-soft: "#4a4a4a"
  ink-muted: "#878787"
  canvas: "#ffffff"
  canvas-light: "#efefef"
  canvas-dark: "#131314"
  primary-blue: "#0033ff"
  brand-blue: "#0092f4"
  brand-purple: "#d054ce"
  brand-green: "#20dc86"
  hairline: "#d9d9d9"
  hairline-soft: "#efefef"
  shadow-ink: "#083452"
  link-blue: "#0d6efd"
  nav-text: "#ffffff"

typography:
  display-lg:
    fontFamily: "\"AvenirNextWorld-Demi\", \"Payo Fallback Demi Font\", sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: "-0.96px"
  display-md:
    fontFamily: "\"AvenirNextWorld-Regular\", \"Payo Fallback Font\", sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 64px
    letterSpacing: "-0.96px"
  heading-lg:
    fontFamily: "\"AvenirNextWorld-Demi\", \"Payo Fallback Demi Font\", sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 44px
    letterSpacing: "-0.72px"
  heading-md:
    fontFamily: "\"AvenirNextWorld-Demi\", \"Payo Fallback Demi Font\", sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: "-0.36px"
  heading-sm:
    fontFamily: "\"AvenirNextWorld-Demi\", \"Payo Fallback Demi Font\", sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-lg:
    fontFamily: "\"AvenirNextWorld-Regular\", \"Payo Fallback Font\", sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: 0
  body-md:
    fontFamily: "\"AvenirNextWorld-Regular\", \"Payo Fallback Font\", sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: 0
  body-sm:
    fontFamily: "\"AvenirNextWorld-Regular\", \"Payo Fallback Font\", sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  label-sm:
    fontFamily: "\"AvenirNextWorld-Regular\", \"Payo Fallback Font\", sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px
    letterSpacing: 0
  button-md:
    fontFamily: "\"AvenirNextWorld-Demi\", \"Payo Fallback Demi Font\", sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 25.7px
    letterSpacing: 0
  caption:
    fontFamily: "\"AvenirNextWorld-Demi\", \"Payo Fallback Demi Font\", sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0
  nav-link:
    fontFamily: "\"AvenirNextWorld-Demi\", \"Payo Fallback Demi Font\", sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: "0.385px"
  eyebrow:
    fontFamily: "\"AvenirNextWorld-Demi\", \"Payo Fallback Demi Font\", sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: "2.04px"

rounded:
  none: "0px"
  sm: "4px"
  md: "12px"
  lg: "16px"
  xl: "20px"
  pill: "500px"
  full: "50%"

spacing:
  xs: "8px"
  sm: "16px"
  md: "24px"
  base: "48px"
  lg: "88px"
  xl: "96px"

components:
  button-primary:
    backgroundColor: "{colors.primary-blue}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xl}"
    padding: "9px 53px"
    height: "44px"
    border: "0"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xl}"
    padding: "9px 53px"
    height: "44px"
    borderColor: "{colors.hairline}"
  top-nav:
    backgroundColor: "{colors.canvas-dark}"
    textColor: "{colors.nav-text}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 24px"
    height: "60px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.nav-text}"
    typography: "{typography.nav-link}"
    padding: "6px 0px"
  hero-section:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    rounded: "{rounded.none}"
    padding: "88px 15px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-lg}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "24px"
    borderColor: "{colors.hairline}"
  trust-logo-strip:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.none}"
    padding: "16px 0px"
  feature-grid:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.md}"
    padding: "24px 16px"
    borderColor: "{colors.hairline-soft}"
  stats-band:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-lg}"
    rounded: "{rounded.none}"
    padding: "48px 24px"
  footer-dark:
    backgroundColor: "{colors.canvas-dark}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "48px 24px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "24px 16px"
    height: "44px"
    borderColor: "{colors.hairline}"
  partner-logo-chip:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    rounded: "{rounded.pill}"
    padding: "0px"
    height: "24px"
---

## Overview

Payoneer's marketing site runs on a principle that is unusual in the payments category. **Gradient-as-brand-signature**: the system does not hold a single hex as the voltage — it holds a gradient sequence. The CSS registers five named presets mixing blue, purple, green, orange, and yellow in different orders. The above-fold chrome is a white canvas with near-black body text and a swooping tri-color arc in the upper-left corner. That arc — not a button color, not a logo fill, not a section background — is the brand's most immediate visual statement. Where PayPal anchors on a flat dark navy, and where Wise anchors on a single lime-green, Payoneer positions itself through spectral breadth: a payment platform that touches every currency, every direction, every economic participant.

AvenirNextWorld runs in two cuts. Regular handles all body copy; Demi handles headings, navigation, and button labels. There is no separate bold tier for display text — the Demi cut is the system's maximum weight for everything above 14px. This keeps the page from developing typographic muscle that would push it toward enterprise-banking gravity; instead the weight register sits at a comfortable semibold throughout, appropriate for a platform built for working freelancers and small businesses rather than corporate finance teams.

The page's dark moment is the footer. The "Why do business with Payoneer?" section and the closing CTA sit on a near-pure-black surface (#131314). The gradient arc and the partner logo strip (Walmart, Google, Rappi, VISA, Netflix, Booking.com) appear in this dark section in white-reversed treatment. This is not a dark-mode toggle — it is a deliberate terminal punctuation, ending the page with authority before the footer fine print.

**Key Characteristics:**
- Tri-color gradient (blue-to-purple-to-green and variants) is the brand identity, not a single hex.
- AvenirNextWorld-Demi as the single weight register for all headings, buttons, and nav — no bold display tier.
- White canvas (#ffffff) body with near-black ink (#212529) — 1040 total occurrences for the dark ink.
- Near-black terminal footer (#131314 — 6 background occurrences) providing a dark-section transition.
- 12px as the dominant card radius (24 occurrences), 16px on larger panels, 20px on selected CTA elements.
- Bootstrap CSS custom property naming (`--bs-*` variables) throughout the structural tier — the site runs on WordPress with Bootstrap 5.
- Trust-brand logo strip (allianz, Walmart, Rappi, Google, VISA, Booking.com) immediately below the hero fold.

## Colors

### Brand Gradient Stops

- **Brand Blue** (`{colors.brand-blue}` — #0092f4): frequency 27, all gradient. The sky-blue stop in the tri-color gradient. Wired as `--wp--preset--color--payoneer-blue` and `--wp--preset--color--vivid-cyan-blue`.
- **Brand Purple** (`{colors.brand-purple}` — #d054ce): frequency 26, all gradient. The magenta-purple stop. Wired as `--wp--preset--color--payoneer-purple`. Clustered from #d054ce and #da54d8.
- **Brand Green** (`{colors.brand-green}` — #20dc86): frequency 25, all gradient. The mint-green stop. Wired as `--wp--preset--color--payoneer-green`.
- **Primary Blue** (`{colors.primary-blue}` — #0033ff): frequency 19. Text (9), background (1), border (9). The deepest blue in the system — used on CTA button fills and link text in the section headings. Wired as `--wp--preset--color--primary-blue`.
- **Link Blue** (`{colors.link-blue}` — #0d6efd): frequency 58. Text (29), border (29). Bootstrap's `--bs-primary` and `--bs-link-color` — the body link color and the derived form-element accent.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 204. Text (95), background (12), border (94), gradient (3). The page floor for the body.
- **Canvas Light** (`{colors.canvas-light}` — #efefef): frequency 409. Text (204), background (13), border (192). The light-grey band used in the "facts and stats" section and as a hairline-light surface. Clustered from four near-identical light-grey values.
- **Canvas Dark** (`{colors.canvas-dark}` — #131314): frequency 6, all background. The near-black footer section.

### Text

- **Ink** (`{colors.ink}` — #212529): frequency 1040. Text (513), background (20), border (507). The dominant body text color. Bootstrap's `--bs-dark` and `--bs-body-color`. Clustered from near-identical near-black values.
- **Ink Soft** (`{colors.ink-soft}` — #4a4a4a): frequency 18, text (9) and border (9). Secondary body text and icon fills. Wired as `--bs-gray-700` and `--wp--preset--color--payoneer-middle-grey`.
- **Ink Muted** (`{colors.ink-muted}` — #878787): frequency 3. Tertiary labels and disabled text. Wired as `--wp--preset--color--payoneer-hard-grey`.

### Structural

- **Hairline** (`{colors.hairline}` — #d9d9d9): frequency 1, border only. The card outline color. Wired as `--bs-gray-400` and `--bs-border-color`.
- **Hairline Soft** (`{colors.hairline-soft}` — #efefef): the soft divider color, part of the canvas-light cluster.
- **Shadow Ink** (`{colors.shadow-ink}` — #083452): frequency 48, shadow only. The tinted navy shadow used on card and button elevation. A deep-ocean blue that adds cool undertone to shadows.
- **Nav Text** (`{colors.nav-text}` — #ffffff): the white text used in the dark-background top navigation bar.

## Typography

### Font Families

The system runs **AvenirNextWorld** in two named cuts:
- **AvenirNextWorld-Regular** — body paragraphs, hero sub-text, caption text (14-20px).
- **AvenirNextWorld-Demi** — headings, button labels, nav links, eyebrow labels (11-48px). The Demi cut reports font-weight: 400 to the CSS renderer because the weight sits in the font file name, but visually it renders as a demibold/600.

There is also a legacy `Payoneer-Level-One` family declared in CSS (`--wp--preset--font-family--payoneer-level-one`), but it does not appear in the extracted typography samples — it likely applies to a graphic-display treatment in video or print contexts not captured here.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-lg}` | 48px | Demi | 64px | -0.96px | Hero h1 — "Global payments made easy" |
| `{typography.display-md}` | 48px | Regular/500 | 64px | -0.96px | Hero h1 variant in Regular cut |
| `{typography.heading-lg}` | 36px | Demi | 44px | -0.72px | Section h2 ("All you need to grow your business globally") |
| `{typography.heading-md}` | 18px | Demi | 30px | -0.36px | Feature-card headings and sub-section titles |
| `{typography.heading-sm}` | 16px | Demi | 24px | 0 | Small card titles and inline labels |
| `{typography.body-lg}` | 20px | Regular | 30px | 0 | Hero sub-paragraph |
| `{typography.body-md}` | 16px | Regular | 30px | 0 | Default running text |
| `{typography.body-sm}` | 14px | Regular | 24px | 0 | Caption rows and secondary body |
| `{typography.label-sm}` | 14px | Regular | 19.6px | 0 | Inline link labels |
| `{typography.button-md}` | 18px | Demi | 25.7px | 0 | CTA button labels |
| `{typography.caption}` | 12px | Demi | 18px | 0 | Legal fine print |
| `{typography.nav-link}` | 11px | Demi | 24px | 0.385px | Top-nav links (uppercase small) |
| `{typography.eyebrow}` | 12px | Demi | 18px | 2.04px | UPPERCASE section category labels |

### Principles

The system runs Demi for every context requiring weight emphasis — buttons, headings, nav — but never declares a heavier weight for the display tier. The hero h1 at 48px uses the same Demi cut as a button label at 18px. This means the hierarchy is established entirely by size and letter-spacing, not by progressing through font weights. The nav links run at 11px with 0.385px tracking and an implicit uppercase treatment — visible in the captured screenshot as small caps over the dark nav bar.

### Note on Font Substitutes

AvenirNextWorld is a licensed font. The closest open-source substitute for the Demi cut is **Nunito SemiBold** (600). For the Regular cut, **Source Sans 3 Regular** transfers cleanly at all body sizes. If you need a single-family substitute for both cuts, **Plus Jakarta Sans** at 400 and 600 weights is the most structurally similar free option.

## Layout

### Spacing System

- **Base unit:** 8px (33 occurrences).
- **Tokens:** `{spacing.xs}` 8px · `{spacing.sm}` 16px · `{spacing.md}` 24px · `{spacing.base}` 48px · `{spacing.lg}` 88px · `{spacing.xl}` 96px.
- **Hero top padding:** 88px (the nav-height spacer).
- **Section padding (vertical):** 48px between major sections.
- **Card internal padding:** 24px on feature cards; 16px on compact grid items.

### Grid & Container

- **Max content width:** declared as `--wp--style--global--content-size: 800px` for editorial content, `--wp--style--global--wide-size: 1080px` for wide layout.
- **Hero:** white full-width canvas, content at 800px wide. Gradient arc decorates the upper-left corner.
- **Feature grid:** 3-column grid of feature cards ("Account Management," "Collections," "Payment Management," "Pricing," "Tax," "Investments"), each with a small purple/blue icon, a Demi 18px heading, and 2-3 body lines.
- **Trust-brand strip:** a horizontal logo row featuring Walmart, Rappi, Google, VISA, allianz, Booking.com at natural-size white or greyscale marks.
- **Stats strip:** three large figures ("Millions of customers," "70 currencies," "190+ countries," "17 years of experience") in Demi display type on the light-grey band.

### Rhythm

The page runs a consistent 48px vertical gap between sections, creating a stable scroll rhythm. The only interruption is the dark footer section — which the rhythm arrives at after 5-6 white-canvas sections, so the contrast lands with deliberate weight. Inside sections, the hero uses generous padding (88px top) while below-fold sections are more compact.

## Elevation

Payoneer uses a tinted navy shadow (#083452) for card elevation — the same move as Trezor but with a different navy source. The shadow appears 48 times in the extraction, all as shadow fills.

- **Flat:** hero section, logo strip, stats band, footer — no shadow.
- **Card elevation:** feature cards use the tinted navy shadow at low opacity for a 1-2px lift. The 12px card radius softens the shadow corner geometry.
- **Gradient wheel:** the 3D-rendered gradient wheel in the facts section does not use a CSS shadow — it is a self-lit render.

## Shapes

The radius scale is **medium-generous with a circular-avatar exception**:

- `{rounded.sm}` 4px — small chip and fine-rule accents (13 occurrences).
- `{rounded.md}` 12px — the dominant card radius (24 occurrences). Cards, inputs, most UI elements.
- `{rounded.lg}` 16px — larger panels and CTA cards (15 occurrences).
- `{rounded.xl}` 20px — CTA button radius and section-feature tiles (12 occurrences).
- `{rounded.pill}` 500px — pill-style navigation items and country/region badges (13 occurrences, declared as 500px in CSS).
- `{rounded.full}` 50% — avatar circles, flag thumbnails, and the gradient-wheel crop (41 occurrences, the most frequent radius).

The 50% (full-circle) radius is by far the most-used value in the extraction because the page includes multiple circular avatar and flag elements in the partner and regional sections.

## Components

**`button-primary`** — Primary blue fill (#0033ff), white text, AvenirNextWorld-Demi 18px, 20px radius, 9×53px padding, 44px height. "Get Payoneer" is the canonical instance in the hero.

**`button-secondary`** — Transparent fill, near-black text, 1px hairline border, 20px radius, same dimensions. Used for secondary CTA variants.

**`top-nav`** — Near-black (#131314) surface, white text, 60px height. The dark nav sits on a page that is otherwise entirely white-canvas, creating a strong header anchoring.

**`nav-link`** — White text, AvenirNextWorld-Demi 11px / 0.385px tracking, on the dark nav surface. Uppercase treatment gives the nav a small-caps feel.

**`hero-section`** — White canvas, 88×15px padding, gradient-arc decoration in upper-left. Headline in Demi 48px / -0.96px tracking, sub-copy in Regular 20px/400.

**`hero-heading`** — Near-black ink, AvenirNextWorld-Demi 48px / -0.96px tracking, -0.96px letter-spacing. Two-line display.

**`section-heading`** — Near-black ink, Demi 36px / -0.72px. Section h2 appearing above 6 major content blocks.

**`body-paragraph`** — Near-black ink, Regular 16px/400, 30px line-height. Default running text.

**`body-paragraph-muted`** — Ink-muted (#878787) text, Regular 14px/400. Tertiary labels and metadata.

**`card`** — White fill, 1px hairline border, 12px radius, 24px padding. The default feature card with icon, Demi 18px heading, and 2-3 body lines.

**`trust-logo-strip`** — White surface, greyscale partner logos at uniform height, no border or background tint. Rendered as a horizontal flex row immediately below the hero.

**`feature-grid`** — White card fill with a light-grey (#efefef) section background behind the grid. 12px radius, 24×16px padding. 3-column layout for the 6 feature categories.

**`stats-band`** — Light-grey (#efefef) band, near-black stats labels, Demi 36px / -0.72px for the numbers. Three-column layout for the four stats ("Millions," "70," "190+," "17").

**`footer-dark`** — Near-black (#131314) fill, white text, 48×24px padding. The gradient arc decoration re-appears here as a partial color wheel element.

**`text-input`** — White fill, near-black text, 1px hairline border, 12px radius. Standard form field.

**`partner-logo-chip`** — Transparent background, circular crop (50% radius), 24px height. Used for flag/avatar rows in the regional coverage section.

## Do's and Don'ts

**Do** use the gradient as the primary brand decoration. The tri-color gradient (blue-to-purple-to-green) is Payoneer's identity mark. It should appear as a decorative arc, a gradient wheel, or a gradient stroke — not as a flat fill on buttons or section backgrounds.

**Do** use AvenirNextWorld-Demi for every heading, button, and nav element. The system's weight discipline is a single cut for all non-body contexts. Introducing a separate 700 weight would create a typographic hierarchy the system isn't designed to support.

**Do** end the page with the dark (#131314) section. The near-black footer provides terminal authority after 5-6 white-canvas sections. Dropping this dark transition makes the page feel like it trails off rather than concludes.

**Do** keep the canvas pure white (#ffffff) for the body sections. The light-grey (#efefef) band is reserved for the stats section — the only below-fold section with a non-white background. Mixing additional tinted backgrounds would dilute both signals.

**Don't** use the brand gradient colors (blue #0092f4, purple #d054ce, green #20dc86) as flat button fills. They appear only inside gradient stop declarations in the captured page. Using them as flat fills introduces a "de-saturated gradient" aesthetic that conflicts with the arc-and-wheel decoration strategy.

**Don't** set hero headings heavier than the Demi cut. The 48px hero headline in Demi is the typographic ceiling; using Bold or Black weight at that scale tips the platform identity toward aggressive fintech, away from the accessible-payments positioning Payoneer holds for freelancers.

**Don't** use the shadow color (#083452) for border fills. The 48 occurrences are all shadow-role only — the navy appears only behind elements as a tinted elevation shadow, never as a visible border or background.

**Don't** apply the pill radius (500px) to content cards. The 500px pill is reserved for navigation badges and region chips. Content cards use 12px; applying pill radius to the feature grid would make the page feel product-UI rather than marketing.

## Known Gaps

- **Orange brand color:** the CSS declares `--wp--preset--color--payoneer-orange: #ff4800` but it appears only in gradient stop lists in the captured page. It may appear on sub-pages, campaign materials, or the mobile app.
- **Yellow brand color:** similarly, `--wp--preset--color--payoneer-yellow: #dfd902` is declared but not rendered on the captured homepage.
- **Mobile nav:** the above-fold capture shows the desktop dark nav bar; the mobile hamburger state (the page uses the mm-menu plugin, declared via `--mm-*` variables) is not captured.
- **Hover states:** the button hover color (Bootstrap's `--bs-link-hover-color`, a darkened mid-blue) is declared but not captured in the rendered states. No hover state for cards or nav items is represented.
- **Product app surfaces:** Payoneer's dashboard (app.payoneer.com) has a separate token system with more saturated brand-color usage that is not represented here.
- **Gradient arc geometry:** the decorative gradient arc's SVG path, stroke width, and precise color-stop positions are not captured as token values. The color stops are available in this spec; the geometric path requires visual reconstruction.
- **WordPress theme layer:** the site runs on a WordPress theme (payo) with Bootstrap 5 and mm-menu. Many structural values are Bootstrap defaults (`--bs-*`) rather than bespoke brand tokens.