Visa Design System

# Visa Design System — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Visa. "Visa Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Visa Design System
**Owner:** Visa
**Official documentation:** https://design.visa.com/
**Visual character:** Payment-network assurance: the deep Visa Blue with a gold flash, Dialect type, and accessibility-first components for financial flows.

---

## Summary

Design system for Visa's payment services.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Visa Blue | `#1434cb` | `--visa-blue` | Primary brand and actions |
| Visa Gold | `#f7b600` | `--visa-gold` | Signature accent |
| Text | `#000000` | `--visa-text` | Primary text |
| Secondary Text | `#4a4a4a` | `--visa-text-secondary` | Secondary text |
| White | `#ffffff` | `--visa-white` | Surfaces |
| Light Surface | `#f5f5f5` | `--visa-surface-low` | Subtle background |
| Border | `#d9d9d9` | `--visa-border` | Borders |
| Error | `#ad2929` | `--visa-negative` | Errors |
| Success | `#217c40` | `--visa-positive` | Success |

## Typography

- **Body:** Visa Dialect — weights 400, 500, 600 — `'Visa Dialect', 'Open Sans', Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| headline-1 | `36px` | `44px` |
| headline-2 | `28px` | `36px` |
| headline-3 | `22px` | `28px` |
| body-1 | `16px` | `24px` |
| body-2 | `14px` | `20px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `4px` |
| default | `8px` |
| pill | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| elevation-low | `0 1px 4px rgba(0,0,0,0.12)` |

## Motion

| Name | Value |
| --- | --- |
| default | `200ms ease` |

## Quick start (CSS)

```css
/* Visa Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://design.visa.com/ */

:root {
  /* Color */
  --visa-blue: #1434cb; /* Primary brand and actions */
  --visa-gold: #f7b600; /* Signature accent */
  --visa-text: #000000; /* Primary text */
  --visa-text-secondary: #4a4a4a; /* Secondary text */
  --visa-white: #ffffff; /* Surfaces */
  --visa-surface-low: #f5f5f5; /* Subtle background */
  --visa-border: #d9d9d9; /* Borders */
  --visa-negative: #ad2929; /* Errors */
  --visa-positive: #217c40; /* Success */

  /* Typography */
  --font-body: 'Visa Dialect', 'Open Sans', Arial, sans-serif;

  /* Type scale */
  --text-headline-1: 36px /* line-height 44px */;
  --text-headline-2: 28px /* line-height 36px */;
  --text-headline-3: 22px /* line-height 28px */;
  --text-body-1: 16px /* line-height 24px */;
  --text-body-2: 14px /* line-height 20px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radius */
  --radius-small: 4px;
  --radius-default: 8px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-elevation-low: 0 1px 4px rgba(0,0,0,0.12);

  /* Motion */
  --motion-default: 200ms ease;
}
```

## Engineering profile

- **Ships for:** Web Components
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Visa Design System by Visa — Design system for Visa's payment services. Character: Payment-network assurance: the deep Visa Blue with a gold flash, Dialect type, and accessibility-first components for financial flows. Use a primary colour near #1434cb, the typeface "Visa Dialect" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Visa Design System documentation](https://design.visa.com/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/visa-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._