Adyen Design System

Overview

Adyen's marketing chrome holds back where enterprise fintechs typically pile on. Restraint as voltage: the hero is a single dark cinematic photograph (two hands exchanging a black payment card across a low-key studio backdrop), with the headline "Fintech you can bank on" floating in white at center and a small mint pill CTA underneath. Above the headline sits a 12px AdyenMono uppercase eyebrow — "INTELLIGENT MONEY MOVEMENT" with a mint indicator dot at the leading edge — the signature device that ties every section header on the page together. Where Stripe surrounds its hero with a saturated indigo gradient mesh and Cloudflare hands its hero to a full-bleed orange canvas, Adyen restricts every chromatic moment above the fold to the photograph itself. The single brand color, mint green {colors.primary} (#00d16a), appears 9 times in the captured page — 5 backgrounds, 2 text occurrences, 2 borders — almost all of them on the CTA and its leading indicator dot.

The near-black canvas ({colors.canvas-dark} — #001222) is the brand's second deliberate move. Wired into CSS as --color-black-3200, --main-solid, and --color-black, the value is a navy-leaning near-black with measurable chroma (OKLCH lightness 0.176, chroma 0.043) rather than pure #000000. The same #001222 carries text on the white-canvas sections below the fold — Adyen uses one near-black token for both background-on-light and background-on-dark inversion, which gives the entire page a unified neutral tone whether a band sits in dark or light mode.

Typography is the system's load-bearing signature. The proprietary Adyen sans renders at unusual variable-axis weights — 436, 452, 484, 496 — not the conventional 400 / 500 / 700 ladder. The hero h2 at 64px / weight 452 reads close to a regular weight but not quite; the section h3 at 32px / weight 484 reads close to medium but not quite. The variable-axis precision is the brand's typographic confidence move. AdyenMono at 12px / weight 500 / uppercase / +0 letter-spacing handles every eyebrow, small-caps label, and annotation; it is the only typeface allowed to carry an uppercase moment on the page.

Key Characteristics:

• Single mint voltage ({colors.primary} — #00d16a) reserved for the CTA pill, the eyebrow indicator dot, and emphasis underlines; total 9 occurrences across the captured page.
• Near-black canvas ({colors.canvas-dark} — #001222), a navy-leaning value with measurable chroma — wired as --main-solid and shared with the primary ink color on white-canvas sections.
• AdyenMono uppercase eyebrow strip — 12px monospace small-caps with a mint indicator dot leading each section's header, the device that organizes the entire page hierarchy.
• Variable-axis Adyen sans weights at 436 / 452 / 484 / 496 — unusual numeric values rather than the standard 400 / 500 / 700 ladder.
• Single 6px corner radius — appears 64 times in the captured page and is the entire rounded shape language. No 8 / 12 / 16 / 24px tier.
• 24px / 1.5rem base spacing unit — exposed as --base-spacing and used as the building block for --spacing-2xl (96px), --spacing-3xl (120px), --spacing-4xl (144px) etc.
• Dark-to-light band rhythm — hero on {colors.canvas-dark}, body inverts to white, then a second {colors.canvas-dark} promo block ("Control every aspect of your money") below the fold.
• Zero decorative chrome above the fold — no logo wall, no gradient mesh, no atmospheric texture, no secondary CTA. The photograph carries the entire visual load.

Colors

Brand

• Mint Voltage ({colors.primary} — #00d16a): frequency 9. Used as text (2), bg (5), border (2). Wired as --active-primary, --color-green, and --color-green-900. The single brand color — primary CTA fill, eyebrow indicator dot, emphasis underline. Outside these three contexts the mint does not appear.

Surface (Dark)

• Canvas Dark ({colors.canvas-dark} — #001222): frequency 745 — used as text (364), border (363), background (17), gradient (1). Wired as --main-solid, --color-black-3200, and --color-black. The dominant tone in the entire system — carries the hero background, the second promo band, and the primary text on white-canvas sections. Navy-leaning rather than pure black.
• Surface 1 ({colors.surface-1} — #0d1e2e): frequency 1 — bg. Wired as --color-black-3000. The slightly-lighter dark used as the gradient overlay underneath the hero photograph.
• Surface 2 ({colors.surface-2} — #1a2b3b): wired as --color-black-2800. Reserved for elevated dark cards in product surfaces; not rendered above the fold.
• Surface 3 ({colors.surface-3} — #2f3e4d): frequency 3 (all bg). Wired as --color-black-2500. The horizontal-rule divider tone between use-case rows on the dark promo band.

Surface (Light)

• Canvas ({colors.canvas} — #ffffff): frequency 652 — text (316), border (316), bg (20). The body floor below the dark hero. Wired as --main-surface, --color-white, and --color-black-000.
• Surface Light ({colors.surface-light} — #f4f5f6): frequency 5 (all bg). Wired as --color-black-100 and --color-grey. The card surface for the white-band carousel ("Compliance you can trust" / "Enterprise-grade reliability").
• Surface Sand ({colors.surface-sand} — #e6e4e2): frequency 6 (all bg). Wired as --color-sand-300 and --color-black-200. A warmer off-white used for the second carousel card surface — the warmth provides a subtle horizontal-band differentiation against {colors.surface-light}.

Text

• Ink ({colors.ink} — #001222): doubles with {colors.canvas-dark} — the brand uses one near-black token for both surface and text. The section h2 "Run your business with confidence" on the white band renders in this exact value.
• Ink Soft ({colors.ink-soft} — #5c6874): wired as --color-black-1900. A secondary text tone used inside body paragraphs where ink would feel too heavy.
• Ink Muted ({colors.ink-muted} — #6c7782): frequency 35 — text (20), border (15). Wired as --color-black-1700. The body-paragraph muted tone for sub-labels and feature captions. Carries the lead paragraph "Adyen delivers the control, reliability, and expertise" below the white-band section heading.
• Ink Tertiary ({colors.ink-tertiary} — #8c959d): frequency 4 — text (2), border (2). Wired as --color-black-1300. Tertiary captions and footer-link tones.

Hairline

• Hairline ({colors.hairline} — #d1d5d8): frequency 6 (all border). Wired as --color-black-500. The only border tone in the captured surface — used for the carousel-card outlines and the horizontal rules separating use-case rows on the dark promo band (where it appears at low opacity).

Shadow

• Shadow ({colors.shadow} — #000000): frequency 20 — text (7), bg (6), border (7). Wired as --overlay-medium (pure black at roughly 45% alpha) and --tw-gradient-*. The system uses pure black (not the navy-leaning canvas-dark) for shadow ink and overlay scrims — pure black at fractional opacity carries the gradient overlay that softens the bottom edge of the hero photograph.

Typography

Font Families

The system runs two proprietary families: Adyen (a humanist variable-axis sans) for every spoken surface (display, heading, body, button, nav) and AdyenMono (a proprietary monospace) for every annotated surface (uppercase eyebrows, small-caps labels, footnote captions). Fallbacks walk to Helvetica, Arial, sans-serif and monospace respectively.

The pairing is the brand's typographic signature. The Adyen sans handles spoken text at unusual variable-axis numeric weights (436, 452, 484, 496) — values that read close to but not exactly the conventional 400/500/700 tiers, suggesting the typeface was tuned to specific optical sizes rather than snapping to integer steps. AdyenMono carries every eyebrow strip and indicator label across the entire page, the device that organizes the section hierarchy.

Hierarchy

Principles

Display weight stays in the 436–496 range across every tier. The hero h2 at 64px / 452 is the loudest typographic moment — confidence through size and contrast rather than weight. There is no 700+ tier anywhere on the page. The variable-axis precision (436 instead of 400, 484 instead of 500) suggests typography tuned by visual rendering rather than by conventional weight steps.

AdyenMono carries the labor a label / caption tier would normally do. There are no uppercase-tracked sans labels in the system; the small-caps / annotation duty falls entirely to AdyenMono at 12px / weight 500 / +0 letter-spacing / uppercase casing. Each eyebrow strip leads with a mint indicator dot — the device organizes every section header on the page.

Note on Font Substitutes

Adyen sans and AdyenMono are proprietary. Inter Variable at the same numeric weights is the closest open-source substitute for Adyen sans — Inter's variable axis accepts arbitrary values between 100 and 900, so you can set font-weight: 484 directly. For AdyenMono, JetBrains Mono or IBM Plex Mono at 12px / weight 500 / uppercase with letter-spacing: 0 carry the same visual role. Don't snap the Adyen sans weights to 400/500/700 — the unusual variable-axis precision is the move worth preserving.

Layout

Spacing System

• Base unit: 24px / 1.5rem — exposed as --base-spacing and the building block for every multiplicative spacing value in the system.
• Tokens: {spacing.xs} 6px · {spacing.sm} 8px · {spacing.base} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 48px · {spacing.2xl} 72px · {spacing.3xl} 240px.
• Section padding (vertical): 240px between the hero band and the next section, 72px on body bands below the fold — the spacing is unusually generous and signals confidence.
• Card internal padding: {spacing.lg} (24px) on the white-card carousel; the dark promo block uses the same 24px on use-case rows.
• Nav padding: 9px vertical, 24px horizontal — the top-nav is compact at 60px height with a 9px row-gap that keeps the navigation visually low-key relative to the cinematic hero.

Grid & Container

• Max content width: 1280px (--grid-max-width) with 24px gutters (--grid-gap) on a 12-column grid (--grid-unit: 12).
• Hero band: full-bleed photographic image, with the headline + eyebrow + CTA stack centered at ~640-720px max-width over the image.
• Below-fold sections: centered display headlines at 1080-1280px, with body copy constrained to ~684px (the captured h2 width).
• White-band carousel: 3-up horizontal card row inside the white band, each card on {colors.surface-light} with paired left-arrow / right-arrow chevron controls.
• Promo band: full-bleed {colors.canvas-dark} block with 2-column layout — a wireframe-globe illustration on the left, use-case rows ("Accept payments / Send payouts globally / Adyen for Platforms") on the right.

Rhythm

The page alternates between dark and light bands rather than holding a single tempo. Dark hero (240px vertical padding) → white body section ("Run your business with confidence") → white-band carousel → dark promo band ("Control every aspect of your money") → white footer band. Each band fully commits to its surface color rather than blending — there are no atmospheric gradients between bands and no edge-blending transitions. The dark-light alternation is the page's structural device.

Elevation

The system has essentially no shadow tier on the captured marketing surface. Depth comes from full-bleed surface-color contrast (canvas-dark over canvas) rather than from layered shadow elevation.

• Flat (no shadow): hero, body bands, carousel cards, promo band, footer — every surface above the fold.
• Gradient overlay: the only "elevated" treatment is the subtle gradient overlay at the bottom edge of the hero photograph, fading from transparent into {colors.surface-1} to soften the transition into the white body band.
• Hairline outlines: {colors.hairline} (#d1d5d8) carries the carousel-card outlines and the horizontal rules separating use-case rows on the dark promo band.
• Modal scrim: {colors.shadow} at ~45% alpha — wired as --overlay-medium. Reserved for navigation flyout scrims; not rendered above the fold.

Shapes

The radius scale collapses to one value: 6px. The 5px sub-pixel variant appears 3 times; otherwise 6px is the entire rounded shape language.

• {rounded.none} 0px — every full-bleed band (hero, body, promo, footer), every text block, every horizontal rule.
• {rounded.sm} 5px — frequency 3. A sub-pixel variant that reads identical to the 6px tier at most viewport sizes.
• {rounded.md} 6px — frequency 64. The mint CTA, the carousel cards, the photographic-mask asset cells, the secondary buttons, the form input outlines. Wired as --base-radius and --radius-m.

There is no 8 / 12 / 16 / 24px tier. Every clickable affordance and every container that breaks the flat-block default uses the same 6px. The consistency across the entire system is the entire shape language — there is no warmer-pill tier reserved for special CTAs.

Components

button-primary — The signature CTA. Mint {colors.primary} fill, near-black text, {rounded.md} 6px radius, 0×16px padding, 48px height. "Talk to our team" is the captured instance — compact at 118px wide, the only mint moment in the hero composition.

button-secondary — Transparent fill, white text, 6px radius, 12px padding, 35px height. Used in the top-nav for "Pricing" and "Sign in" — reads as a quiet text affordance rather than a button.

button-ghost — Same geometry as button-secondary but with {colors.ink} text — the dark-canvas variant.

top-nav — Transparent surface overlay on the dark hero, 60px height, no bottom rule. Adyen wordmark flush left, product links centered ("Products," "Businesses we serve," "About," "Resources," "Pricing"), Search + Account + "Contact us" mint CTA flush right.

nav-link — White text in {typography.nav-link} (16.5626px / 400) — same size as the CTA label. 12px padding, 35px height. The nav reads as the same visual weight as the CTA, with only the mint fill distinguishing the primary action.

hero-band — Full-bleed {colors.canvas-dark} overlay on a cinematic photographic backdrop, 240px vertical padding, content centered. Holds the eyebrow strip + headline + lead paragraph + CTA stack in a single ~640px-wide column.

hero-heading — White text on the dark hero, {typography.display-lg} (64px / 452). The captured "Fintech you can bank on" is the canonical instance — confidence through size + photography contrast, not weight.

section-heading — {typography.display-md} (32px / 484) in {colors.ink} on the white body. The captured "Run your business with confidence." is the canonical instance — note the period, a deliberate editorial mark.

display-headline — The largest display tier at {typography.display-xl} (80px / 436), used for full-bleed display headlines below the fold.

body-paragraph — {colors.ink-muted} (#6c7782) running text at {typography.heading-md} (20px / 496). The lead paragraph beneath the section heading uses this tier — generous-large body that reads as a sub-heading.

body-paragraph-muted — {colors.ink-tertiary} text at {typography.body-md} for secondary captions and feature explanations.

mono-eyebrow — White text on dark, {typography.mono-eyebrow} (AdyenMono 12px / 500 / +0 tracking, uppercase). Leads each section with a small mint indicator dot at the leading edge. "INTELLIGENT MONEY MOVEMENT" is the captured instance.

indicator-dot — Mint {colors.primary} 8px square block sitting before each mono-eyebrow. Renders as a small square rather than a circular dot — the brand's deliberate sharpness move.

promo-band — Full-bleed {colors.canvas-dark} block, white text, 240px top padding. Holds the "Control every aspect of your money" headline plus the 2-column wireframe-globe + use-case-row layout below.

asset-card — {colors.surface-light} (#f4f5f6) fill, ink text, 6px radius, 24px padding. The white-band carousel cards ("Compliance you can trust," "Enterprise-grade reliability") use this surface.

photo-mask — {colors.canvas-dark} fill, white text, 6px radius. The first carousel card uses a photographic image masked into a 6px-cornered rectangle ("Compliance you can trust," with a nighttime city skyline behind the text).

use-case-row — Transparent row on the dark promo band, white text, {typography.heading-md} (20px / 496), {colors.surface-3} 1px bottom rule. The "Accept payments / Send payouts globally / Adyen for Platforms" navigation list inside the promo block uses this row pattern.

footer — {colors.canvas-dark} surface, {colors.ink-tertiary} text, 72×24px padding. No top rule against the promo band — the footer continues the dark canvas.

Do's and Don'ts

Do treat the mint voltage as scarce. The system uses {colors.primary} (#00d16a) exactly 9 times in the captured page — only on the CTA fill, the eyebrow indicator dot, and emphasis underlines. Multiplying it into secondary buttons, link colors, or decorative accents dilutes the only chromatic brand signal on the page.

Do use {colors.canvas-dark} (#001222) — not pure #000000 — for every dark surface. The navy-leaning chroma is intentional and softens the contrast with white headline text; pure black would crush the shadow detail in the captured hero image.

Do lead every section with a {typography.mono-eyebrow} + {component.indicator-dot} pair. The AdyenMono uppercase eyebrow is the device that organizes the entire page hierarchy; sections without one read as orphaned from the system.

Do keep the Adyen sans at variable-axis weights (436, 452, 484, 496). Snapping to 400/500/700 erases the brand's typographic precision; the unusual numeric values are the most recognizable typographic move.

Don't introduce any radius outside {rounded.md} 6px. The system uses one value 64 times in the captured page and nothing else. Adding an 8 / 12 / 16px tier breaks the single-value shape language and reads as borrowed from a different system.

Don't use AdyenMono for body or display copy — it is wired exclusively to the mono-eyebrow and small-caps annotation tiers. Reaching for it on a heading turns the page into a developer-tools site (Linear, Vercel) rather than an enterprise-fintech page.

Don't render the {component.indicator-dot} as a circle. Adyen's leading indicator is an 8px square — sharp corners on the dot mirror the system's flat 6px radius elsewhere. A circular dot would feel borrowed from a status-indicator UI convention.

Don't add a decorative gradient or texture above the fold. The brand's restraint above the fold (no logo wall, no atmospheric gradient, no secondary CTA cluster) is the entire visual move; adding chrome turns confident emptiness into ordinary marketing density.

Known Gaps

• Customer logo wall: Adyen does run a customer-logo strip (Lightspeed, Meta, eBay, Adobe, Uber, Decathlon) below the hero photograph but it sits at the bottom of the hero band rather than as a separate component. Token captured implicitly via the {component.hero-band} background.
• Hover and focus states: documented for the primary CTA fill only. The full state matrix (focus rings, active press, disabled tints) is wired into CSS variables (--tw-ring-color, --tw-ring-offset-color) but not rendered on the captured surface.
• Form input states: the captured page does not expose a form input. The Adyen Dashboard and developer-portal surfaces use a separate component system not represented here.
• Light vs. dark mode: the page commits to band-by-band inversion rather than a true dark/light mode preference. Both surface modes carry tokens here, but no preference-driven theme switch exists in the marketing chrome.
• Motion: the page uses scroll-triggered fade-in on each band, with --motion-default-duration 0.6s and --motion-default-ease cubic-bezier(0.19, 1, 0.22, 1). Captures encode these as CSS variables but the live animation behavior lives in JavaScript.
• Product surfaces: this DESIGN.md captures the marketing site only. The Adyen Dashboard, Drop-in Checkout component, and Adyen for Platforms surfaces carry their own token systems (purples, blues, oranges declared in --color-purple-1000, --color-blue-1700, --color-orange-1000) that do not appear in the captured marketing chrome.
• Subscription / pricing tiers: the brand's pricing page is gated behind a contact-sales flow; no pricing-table component is exposed on the public marketing surface.