What is Qonto's primary brand color?

Qonto's marketing chrome runs without a chromatic brand voltage on the captured page. The hero canvas is near-black charcoal, the body canvas below the fold is pure white, the headline ink is white-on-black above and black-on-white below, and the cards repeat the charcoal as a structural surface. Quiet sky-blue and mustard highlight tokens are declared as CSS variables (--color-highlight-blueberry, --color-highlight-mustard) for inline-emphasis treatments but never appear in the rendered marketing chrome. The brand voltage is the surface contrast itself — charcoal above, white below — not a single hex code.

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

Qonto runs QontoSans, a custom proprietary sans-serif, across every tier of the marketing site. The hero h1 is set at 72px in weight 700; the section h2s at 56px in weight 600; h3 product-card titles at 24px in weight 600; body copy at 18px in weight 400; secondary 14px in weight 400; legal footnotes at 12px in weight 400. There is no second family — no display serif, no monospace, no system-stack fallback that visibly differs. Inter at equivalent weights is the closest open-source substitute; Inter's slightly looser counters track close to QontoSans at 16-18px body sizes and reproduce the geometric efficiency of the display tier.

What corner-radius scale does Qonto use?

The radius system is binary. 24px appears 28 times in the captured page on every product card, every below-fold tile, and the rounded chip rendered around customer-logo orbs in the integrations section. 8px appears 12 times on chips, top-nav buttons, and form inputs. A 6px tier exists for tiny pill tags and a small 4-count of internal label chips. There is no 12 or 16px middle tier — cards are either generous-soft (24px) or modest-tight (8px), with nothing between. The binary scale is the system's silhouette signature: every card on the page has identical corner geometry.

Why does Qonto invert from black to white between the hero and the body?

Qonto's marketing page opens on a near-black charcoal canvas — the only above-fold elements are the 72px display, a tilted chrome debit-card render, two pill CTAs, and a small Trustpilot rating chip. Immediately below the fold the canvas flips to pure white for the product band, and the brand returns to charcoal again only inside the rounded product cards. The inversion is the system's defining structural move: the hero reads as industrial product photography (think Apple keynote with the lighting rig visible), while the white below-fold band reads as editorial product documentation. Most banking sites hold a single surface color top-to-bottom; Qonto trusts the inversion to do the work a hero gradient would normally carry.

Can I use this DESIGN.md to build my own React banking 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 Qonto's specific moves: a charcoal-above / white-below canvas inversion, a binary radius scale (24px cards / 8px chips), QontoSans-equivalent typography across every tier, and the absence of a chromatic brand voltage in the marketing chrome. You can also reference tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The one move worth borrowing only with a strong photography or 3D-render asset is the chrome product-shot hero; without it, the charcoal canvas reads empty rather than confident.

Qonto Design System

Qonto's marketing system pairs a charcoal hero with a flipped-white product band, 24px generous-radius black cards, and QontoSans at every tier.

About Qonto DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source qonto.com

Banking & Payments

Qonto's marketing surface opens with a move almost no other European fintech makes. The above-fold is charcoal black, no gradient — pure ink-on-shadow with a 72px QontoSans display headline stacked in three short sentences ("Business account. Finance management. Company creation."), a tilted chrome debit-card render floating overhead like a piece of industrial product photography, and two pill CTAs ("Open an account" / "Find the right plan") sitting beneath in modest weight. Where Revolut and Wise paint their heroes in saturated purples and chartreuses, and where Mercury and Brex go bright white with a graphite voltage, Qonto holds the canvas at near-black and lets the only color come from the rendered metal of the card itself.

Below the fold the page flips. The canvas inverts to white, and the product band reappears as a charcoal mosaic — five black 24px-rounded cards laid out in an asymmetric grid (a tall card for "Account remuneration," a payments tile with Apple/Google Pay glyphs, a "Get paid" card showing an embedded payment link, a "Financing" card with a phone mockup, a wide "Mastercard debit and credit cards" card with two metallic chips angled in the light). The repetition of the same 24px radius across every tile, paired with the absence of any second corner-radius value, is the system's structural signature: there is no middle tier, no soft 12px or 16px option. Either a surface is a card (24px) or it is a chip / input (8px). The binary scale gives the whole page its sharp-efficient feeling without using a single sharp corner.

The DESIGN.md file packages the system into a machine-readable spec. Inside: 17 color tokens stripped down from the 60+ CSS variables Qonto exposes in `:root` (the public marketing site only renders a charcoal-and-ink chrome with sky and mustard highlight tokens reserved for inline emphasis), 11 typography tokens running QontoSans from 12px footnote to 72px hero, a binary radius scale, an 8px-base spacing system, and 17 component definitions covering the dark hero band, the white below-fold canvas, the 24px charcoal product card, the pill CTA, and the chip-rendered top-nav. Feed it to a coding agent and the move worth reproducing is the inversion — charcoal above, white below, the same 24px card geometry repeating across both surfaces.

What makes it distinct

Hero-flip compositiona charcoal-black above-fold lands on a white below-fold; the brand voltage is the surface contrast, not a chromatic accent
Single-radius cardsevery product tile uses a 24px corner; the system runs only two radii (24px on cards, 8px on chips and inputs) with no middle tier
QontoSans across every tier72px hero in weight 700, 56px section heads in 600, 18px lead paragraphs in 400, 12px legal in 400, no second family on the page
Restraint by absence11 raw rendered colors total on a banking page that exposes 60+ CSS variables; the public chrome strips the palette down to charcoal, ink, hairline, white
Industrial product photographychrome debit cards and tilted phone mockups carry the hero rather than illustration, lit like an Apple keynote frame

Live at qonto.com

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

qonto.com

Explore Qonto

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Qonto design system FAQ

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

Qonto — official site

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