What is Adyen's primary brand color?

Adyen's brand voltage is a saturated mint green wired into CSS as --active-primary, --color-green, and --color-green-900. Across the captured page the mint appears 9 times total — 5 as background, 2 as text, 2 as border — almost all of them on the single primary CTA, the mint indicator dot that leads each AdyenMono eyebrow strip, and the active-state underline beneath certain heading words. Every other color visible above the fold belongs to the photographic hero, not the brand chrome. This restraint is the brand signature: one scarce mint green, one near-black canvas, one inversion to white below the fold, photography for everything else.

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

Adyen runs two proprietary families: Adyen (a humanist sans) for every display, heading, body, button, and nav surface, plus AdyenMono for every uppercase eyebrow, small-caps label, and annotation. Display headlines sit at 32–80px, the hero h2 at 64px / weight 452 / +0 letter-spacing, body at 16-20px / weight 484-496 — unusual variable-axis weights that read close to but not exactly 500. AdyenMono eyebrows sit at 12px / weight 500 / uppercase / +0 tracking. Inter Variable at the same numeric weights is the closest open-source substitute for Adyen sans; JetBrains Mono at 12px uppercase substitutes for AdyenMono. The variable-axis weights are the move to preserve — don't snap them to 400/500/700.

Why is Adyen's canvas not pure black?

The dark canvas is #001222, wired as --color-black-3200, --main-solid, and --color-black. It is a navy-leaning near-black with measurable chroma (OKLCH lightness 0.176, chroma 0.043) rather than pure #000000. The choice softens the contrast against white headline text and signals warmth in cinematic photography — pure black would crush the shadow detail in the captured hero image and create a harder edge on the mint CTA's drop shadow. The same #001222 carries text on the white-canvas sections below the fold, so the brand uses one near-black token for both background-on-light and background-on-dark inversion. The dark gradient overlays use a translucent black at roughly 45% alpha, kept separate from the canvas value.

What is Adyen's corner-radius philosophy?

Adyen runs a single-value radius scale. The 6px radius appears 64 times in the captured page — on the mint CTA, the white-card carousel, the photographic-mask asset cells, the secondary segment buttons, and the feature-cards block. A second 5px value appears 3 times (effectively a sub-pixel variant). There is no 8px, 12px, 16px, or 24px tier. Even the round photographic asset masks are square containers with 6px rounded corners rather than oval / circular shapes. The result is that every corner-rounded surface on the page reads as the same shape — the consistency is the entire shape language.

Can I use this DESIGN.md to build my own React enterprise-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 Adyen's specific moves: near-black #001222 canvas instead of pure black, single mint voltage held back to the CTA and indicator dot only, AdyenMono uppercase eyebrow strip with mint indicator dot, unusual variable-axis numeric weights for the Adyen sans tier, and 6px-everywhere radius. Tokens resolve cleanly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS custom properties. One caveat: the restraint above the fold (no decorative chrome, no logo wall, no gradient) only works when paired with photography this strong — for a brand without comparable cinematic imagery, the discipline reads as emptiness rather than confidence.

Adyen Design System

Adyen's marketing system pairs a near-black canvas with a single mint-green voltage — proprietary Adyen sans plus AdyenMono uppercase eyebrows over cinematic photography.

About Adyen DESIGN.md

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

Banking & Payments
Fintech & Crypto

Adyen's marketing chrome holds back. The hero is a cinematic dark photograph — two hands exchanging a black payment card across a low-key studio backdrop — and the headline "Fintech you can bank on" sits as a single line of white type at center. Above it, in 12px AdyenMono uppercase with a small mint indicator dot at the leading edge, sits "INTELLIGENT MONEY MOVEMENT" — the brand's signature monospace eyebrow, the device that ties every section header on the page together. Below the headline sits a single mint pill CTA in #00d16a, "Talk to our team" in compact black type on the green fill. There is nothing else above the fold: no secondary nav cluster, no logo wall, no gradient mesh, no decorative element. Where Stripe surrounds its hero with a saturated gradient and PayPal hands the hero to wide photography of customers, Adyen restricts every chromatic moment on the page to the photograph itself.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 13 color tokens drawn from the `--color-black-*` ladder (a 5-step structural scale from #001222 through #6c7782 to #d1d5d8) plus the single mint voltage; 9 typography tokens running the proprietary Adyen sans at unusual numeric weights (436, 452, 484, 496) and AdyenMono at 12px uppercase for every annotation, eyebrow, and small-caps label; 2 corner-radius tokens — 6px appears 64 times and is the entire rounded shape language on the page; 8 spacing tokens on a 24px / 1.5rem base; and 17 component definitions covering the mint CTA, the dark hero band, the white-card carousel, the navy-on-near-black "Control every aspect" promo block, the photographic-mask asset cell, and the mono-eyebrow strip.

Feed this file to an AI coding tool and it reproduces Adyen's specific moves: near-black canvas at the navy-leaning #001222 rather than pure black, single mint voltage held back to a CTA + indicator + emphasis-underline only, AdyenMono uppercase eyebrow strip on every section, the unusual variable-axis weights that read close to 500 but not quite, and the single 6px radius across every corner-rounded surface. One caveat: the canvas is dark in the hero but the body inverts to white below the fold, and the system asks for both surface modes on the same page — verify your dark-to-light section transitions explicitly rather than assuming Adyen's chrome is uniformly dark.

What makes it distinct

Single mint voltage#00d16a appears only on the CTA pill, the active dot, and emphasis underlines; every other chromatic moment on the page is photography
Variable-axis weightsAdyen sans renders at unusual numeric weights (436, 452, 484, 496) instead of the conventional 400/500/700 ladder
AdyenMono uppercase eyebrows12px monospace small-caps with mint indicator dot carries every section eyebrow on the page
Single radius value6px is the entire shape language; the CTA, cards, image masks, and feature blocks all share one corner-radius
Near-black canvas at #001222a deep navy-leaning black with measurable chroma, the system's deliberate alternative to pure #000000

Live at adyen.com

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

adyen.com

Explore Adyen

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.

Other

Specialty colors.

Adyen design system FAQ

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

Adyen — official site

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