What is Visa's primary brand color?

Visa's brand voltage is Visa Brand Blue #1434cb, wired into the page CSS as `--color-primary`, `--color-btn-primary`, `--color-text-link`, `--card-link`, `--color-border-focus`, and `--tab-focus`. It appears as the fill of the primary CTA pill, as inline link color, and as the focus-ring tone, but it is held back from the hero panel — the wide horizontal block reading 'I am looking for a credit card with travel benefits' uses a deeper midnight navy #020f27 wired as `--promoted-dark-blue` instead. The hover and active states for the primary button step to a darker #1a1f72 (`--color-primary-hover`, `--color-btn-primary-hover`) and `#20317e` (`--color-primary-active`). Three blues, one role each.

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

Visa's marketing site runs Visa Dialect across every display, heading, body, and button surface — a commissioned humanist sans wired into eight `--font-dialect-*` CSS variables covering light, regular, medium, semibold, and bold weights for both Latin and Cyrillic. Display headlines sit at 32–52px in weight 400 with -0.52px letter-spacing at the largest size; body copy at 14–16px in weight 400; small labels at 12px. Open Sans 12px appears only inside the cookie-banner copy, presumably a legal-text fallback. There is no 700+ weight on the page. The closest open-source substitute is Inter at the same weights; Source Sans 3 is also close in feel. The weight discipline — 400 on display, never 600+ — is the move to preserve.

Why doesn't Visa flood the hero with brand blue?

The marketing surface treats Visa Brand Blue as a CTA color, not a canvas color. It appears only twice as a background fill in the captured page — on the primary button and on the focus ring — and the wide promoted hero panel mid-page uses a darker #020f27 midnight navy that reads as evening sky rather than as the wordmark blue. The decision lets Visa's flag-and-wordmark logotype (already a saturated blue rectangle) sit on a warm-white body without competing with itself. Most card networks (Mastercard, Amex) lean into gradient blocks above the fold; Visa trusts that you already know the brand color and reserves the saturated tone for the one decision the page actually wants you to make.

How does Visa's marketing site draw card outlines without shadows?

The system has essentially no shadow tier on cards. A single pale hairline tone #e5e7eb (wired as `--color-border-secondary`, `--card-bottom-panel-border`, `--share-article-border`) carries 371 of the page's 372 captured border occurrences. The card-finder block, the comparison panel, the bento-grid tiles, the quick-link rows, and the disclaimer panel all sit as 1px-outlined warm-white surfaces on a warm-white body — depth comes from the geometry of the outline (`--border-radius-md` at 8px, occasionally `--border-radius-xl` at 16px) rather than from any drop shadow. The declared `--shadow-md` / `--shadow-lg` tokens exist for modal scrims and toast notifications, not for body cards.

Can I use this DESIGN.md to build my own payments-brand 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 Visa's specific moves: warm-white body canvas, brand-blue restraint at the CTA and link tier only, midnight-navy reserved for one wide horizontal promoted panel per page, Visa Dialect-equivalent typography at weight 400 across every step, hairline-bordered cards without elevation shadows, and the binary 4 / 8 / 1000px radius scale. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat worth flagging — the 'brand-blue restraint' move only reads as confidence if the brand mark is already saturated and instantly recognized; on a new fintech brand the same restraint would read as undercooked.

Visa Design System

Visa's marketing-site design system as a DESIGN.md file.

About Visa DESIGN.md

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

Banking & Payments

Visa's marketing site reads like a financial-services magazine wearing a payment-network logo. The top of the page is warm white with a slim cookie band in Visa Brand Blue above it, the headline "Where AI Meets Commerce" sits at 32px in Visa Dialect over a travel photograph, and the structural work below is carried by a 1px hairline in pale neutral that draws 371 of the 372 border occurrences captured on the page. Where most card networks lean on saturated gradient blocks to broadcast trust, Visa holds back: the brand blue waits for the primary CTA pill and the inline links, and the only field of saturated color above the second fold is the wide midnight-navy panel reading "I am looking for a credit card with travel benefits" alongside a parallel-line illustration that echoes the dolphin-fin shape from the wordmark.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 31 color tokens drawn from a 240-variable `:root` namespace, organized into a brand tier (Visa Brand Blue #1434cb plus a darker midnight navy #1a1f72 for hover and a deeper #020f27 for the panel canvas), a structural tier of ink at #1a1a1a / secondary at #353535 / tertiary at #757575, a single hairline at #e5e7eb, plus a complete semantic set for success / warning / error / focus that ships unused on the homepage; 18 typography tokens running Visa Dialect at modest weights — 52px display at weight 400 is the heaviest typographic moment — with Open Sans appearing only inside the cookie-banner copy; a binary radius scale of 4 / 8 / 1000px; and 16 component definitions covering the Visa Blue primary button, the secondary outline button, the hairline-bordered card finder, the midnight-navy promoted panel, and the bento-grid tile.

Feed this file to Claude or Cursor and it reproduces Visa's specific moves: warm-white body canvas instead of grayscale neutral, brand-blue restraint at the CTA and link tier only, midnight-navy reserved for the one wide horizontal promoted panel per page, Visa Dialect across every typographic step, and hairline-bordered cards that never lift with a shadow. The one decision worth borrowing only if you control a category-defining trust brand is the willingness to spend the brand color on a single CTA pill — most fintech brands cannot resist coating the hero in voltage. Visa can; the wordmark already does that job everywhere else in the world.

What makes it distinct

Two-blue brand voltageVisa Brand Blue carries the primary CTA pill and inline links while a deep midnight navy carries the wide horizontal hero panel mid-page, splitting the work between accent and surface
Visa Dialect across every tiera commissioned humanist sans wired into eight `--font-dialect-*` variables, running 52px display at weight 400 with -0.52px tracking, never above weight 500
Hairline-only card chromea pale neutral #e5e7eb carries 371 of the page's border occurrences; depth comes from outline geometry rather than from elevation shadows
Binary radius scale4 / 8px on inputs and cards plus a 1000px pill on CTAs; no 12 / 16 / 20px middle tier
240 :root custom propertiessemantic tokens like `--color-btn-primary`, `--card-link`, and `--promoted-dark-blue` map every component surface to a named slot in the system

Live at visa.com

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

visa.com

Explore Visa

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.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Visa design system FAQ

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

Visa — official site

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