What is Payoneer's primary brand color?

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.

What typeface does Payoneer use, and how does the Demi cut work?

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.

Where and how does Payoneer use its gradient system?

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.

How does the dark footer section work?

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.

Can I use this DESIGN.md to build a cross-border payment platform site?

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.

Payoneer Design System

Payoneer's marketing-site design system as DESIGN.md.

About Payoneer DESIGN.md

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

Banking & Payments
Fintech & Crypto

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.

What makes it distinct

Gradient-as-identityPayoneer'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 systemAvenirNextWorld-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 sectionthe 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 chromedespite 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 radiusthe dominant interactive radius is 12px across cards, inputs, and most UI elements, with 16px on slightly larger panels

Live at payoneer.com

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

payoneer.com

Explore Payoneer

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.

Payoneer design system FAQ

Common questions about Payoneer'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.

Payoneer — official site

Payoneer'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.