Visa

파란 Visa 카드 실물과 저장 카드 선택, 6px 결제 버튼이 만드는 Click to Pay

서양핀테크차가운modern-minimalhumanism고딕comfortablesoftsubtle라이트다크공식한글 지원출시 2025개정 2026

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: 비자 (Visa)
한 줄 정체성: 사람과 가게, 금융기관을 연결하는 글로벌 결제 네트워크. 제품 화면은 결제 정보와 다음 행동을 분명하게 보여 준다.
공식 디자인 철학: Visa Product Design System(VPDS)은 누구나, 어디서나 이용할 수 있는 접근성 높은 경험을 목표로 한다. 서체의 기준도 접근성·포용성·친근함이다.
시그니처 요소 1개: 비자 블루 #1434CB 카드와 단색 Visa 워드마크를, 조용한 중립색 결제 폼에 놓는 대비. 카드 선택은 라디오·가느다란 경계로, 마지막 결제는 너비가 넉넉한 6px 버튼 하나로 묶는다. 라이트 행동은 비자 블루, 다크 행동은 밝은 하늘색이며 카드 실물의 파랑은 그대로 남는다.
확인 범위와 신뢰도: 2026-10-04에 공식 웹 문서, 2025년 9월 브랜드 표준 PDF, 공식 배포 패키지 @visa/nova-styles 1.6.5와 @visa/nova-icons-svg 4.0.0을 curl로 확인했다. 색·서체 위계·간격·모서리·그림자는 확인값이다. 전환 시간은 공식 사이트 CSS 관찰값이고, 미리보기 구성과 일부 별칭은 갤러리용 해석이므로 hybrid / medium으로 표시했다.
연도 주의: 공개 npm 기록의 첫 배포가 2025년이라 released_year를 2025년으로 적었다(추정). VPDS 자체의 최초 공개 연도는 확인하지 못했다. last_major_revision은 1.6.5의 2026년 배포를 기준으로 적은 추정이며, 실제 메이저 개편 연도를 뜻하는 확정 기록은 아니다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 신뢰, 명료함, 포용성
무드 설명: 흰 바탕·옅은 회색 면·파란 워드마크 위에서 작은 숫자와 짧은 레이블이 정돈된다. 마스킹 이메일, 카드 마지막 네 자리, 소수 둘째 자리 금액을 먼저 보여 주며, 선택 행은 얇은 테두리로 구분한다. 큰 카드 그림의 파랑과 단색 파랑 결제 버튼에 시선이 모이고, 칩의 금속 광택은 카드 그림 안에만 둔다.
비주얼 스타일: 모던 미니멀 + 휴머니즘 — 좁고 읽기 편한 Visa Dialect UI, sentence case 제목, 6px 컨트롤, 10px 패널의 절제된 모서리. 마스킹 숫자·금액·선택 상태의 정렬이 장식보다 앞선다.
밀도(Density): Comfortable — 웹 기본 본문 14px/22px, 버튼 높이 38px. 터치 화면에서는 기본 컨트롤 높이를 46px로 늘린다.
모서리 성향: Soft(4~8px) — 기본 모서리 6px, 작은 요소 4px. 콘텐츠 카드는 별도로 10px를 쓴다.
평면성: Subtle — 얇은 구분선과 작은 그림자로 면을 나누고, 높은 그림자는 떠 있는 요소에 쓴다.

Color System

컬러 시스템 (CSS 변수)

브랜드 표준 PDF 2쪽은 로고의 파랑을 RGB 20·52·203, HEX #1434CB로 명시한다. 아래 색은 Nova 1.6.5의 visa-light·visa-dark에서 확인했다.

VPDS는 색을 숫자 램프보다 active·surface·messaging 같은 역할로 관리한다. 따라서 primary-50~900은 이 갤러리 스키마의 별칭이다. 밝은 면, 다크 행동색, 라이트 행동색과 alternate 색을 확인한 값 그대로 모았으며 공식 10단계 파랑 팔레트라고 주장하지 않는다. 새로운 중간색을 계산해 채우지 않았다. 다크의 중복 단계와 세 번째 글자·약한 경계도 기존 역할값을 그대로 재사용한다.

:root {
  --font-ui: 'Visa Dialect UI', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', sans-serif;
  --color-brand-500: #1434CB; /* 브랜드 대표색: 테마와 무관하게 유지 */
  --logo-color: #1434CB; /* 라이트 배경용 공식 로고색 */

  /* Primary — 공식 역할색을 갤러리 번호로 옮긴 별칭 */
  --color-primary-50: rgba(179,215,255,0.35); /* surface-highlight */
  --color-primary-100: rgba(179,215,255,0.6); /* surface-lowlight */
  --color-primary-200: #B3D7FF; /* 위 두 면의 원색 RGB 179,215,255 */
  --color-primary-300: #80D7FF; /* 공식 다크 모드 active-pressed */
  --color-primary-400: #173BE8; /* 라이트 active-hover */
  --color-primary-500: #1434CB; /* 라이트 active */
  --color-primary-600: #122FBA; /* 라이트 alternate surface-2 */
  --color-primary-700: #112AA7; /* 라이트 alternate surface-3 */
  --color-primary-800: #0F2595; /* 라이트 active-pressed */
  --color-primary-900: #021E4C; /* 라이트 alternate text-on-active */
  --color-secondary-500: #FCC015; /* 공식 active-accent: 작은 보조 강조 */

  /* Neutral — 두 공식 테마에서 확인한 무채색, 번호는 문서용 별칭 */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F5F5F5;
  --color-neutral-100: #F0F0F0;
  --color-neutral-300: #D9D9D9;
  --color-neutral-500: #4A4A4A;
  --color-neutral-700: #2E2E2E;
  --color-neutral-800: #1A1A1A;
  --color-neutral-900: #0A0A0A;
  --color-neutral-1000: #000000;

  /* Semantic — 공식 messaging 역할색 */
  --color-success-bg: #D6F2C4;
  --color-success-fg: #2C6849;
  --color-warning-bg: #FFEF99;
  --color-warning-fg: #875903;
  --color-error-bg: #FFD6E9;
  --color-error-fg: #AD2929;
  --color-error-hover: #C62F2F;
  --color-error-pressed: #7C1D1D;
  --color-error-graphics: #D65151;
  --color-info-bg: #C7EDFF;
  --color-info-fg: #005E8A;

  /* Surface */
  --bg-base: #FFFFFF; /* surface-1 */
  --bg-subtle: #F5F5F5; /* surface-2 */
  --bg-elevated: #F0F0F0; /* surface-3: 더 높은 밝기를 뜻하지 않음 */
  --bg-overlay: rgba(20,34,57,0.4); /* 공식 overlay */

  /* Text — 원문에 없는 세 번째 단계는 보조 글자와 같은 값 */
  --text-primary: #000000;
  --text-secondary: #4A4A4A;
  --text-tertiary: #4A4A4A;
  --text-on-primary: #FFFFFF;
  --text-disabled: rgba(0,0,0,0.2); /* 공식 disabled */

  /* Border */
  --border-default: rgba(0,0,0,0.1); /* 장식·카드 구분 */
  --border-subtle: rgba(0,0,0,0.1); /* 원문 border의 별칭 */
  --border-strong: rgba(0,0,0,0.5); /* active-subtle: 입력 경계 */
  --border-focus: #173BE8; /* input-focus-container-border-color */
  --control-disabled: rgba(0,0,0,0.2);
  --surface-highlight: rgba(179,215,255,0.35);
  --surface-lowlight: rgba(179,215,255,0.6);
}

[data-theme="dark"] {
  --logo-color: #FFFFFF;
  --color-primary-50: #0A0A0A;
  --color-primary-100: #1A1A1A;
  --color-primary-200: #2E2E2E;
  --color-primary-300: #80D7FF;
  --color-primary-400: #DBF4FF;
  --color-primary-500: #BDEAFF;
  --color-primary-600: #BDEAFF;
  --color-primary-700: #80D7FF;
  --color-primary-800: #80D7FF;
  --color-primary-900: #2E2E2E;
  --color-success-bg: #23533A;
  --color-success-fg: #DFF1E8;
  --color-warning-bg: #4B3102;
  --color-warning-fg: #FEE8BE;
  --color-error-bg: #9D2525;
  --color-error-fg: #F7DEDE;
  --color-error-hover: #FDF7F7;
  --color-error-pressed: #ECACAC;
  --color-info-bg: #00344D;
  --color-info-fg: #BDEAFF;
  --bg-base: #0A0A0A;
  --bg-subtle: #1A1A1A;
  --bg-elevated: #2E2E2E;
  --bg-overlay: rgba(0,0,0,0.4);
  --text-primary: #FFFFFF;
  --text-secondary: #D9D9D9;
  --text-tertiary: #D9D9D9;
  --text-on-primary: #2E2E2E;
  --text-disabled: #FFFFFF1F;
  --border-default: #FFFFFF0F;
  --border-subtle: #FFFFFF0F;
  --border-strong: #FFFFFF7E;
  --border-focus: #DBF4FF;
  --control-disabled: #FFFFFF1F;
  --surface-highlight: #0000005A;
  --surface-lowlight: #00000099;
}

테마 근거: 공식 Color Usage의 「Visa light and Visa dark modes」, 디자이너용 토큰 문서의 두 모드, npm의 두 테마 파일이 모두 일치한다. theme_modes는 [light, dark]다.
다크 대응: 바탕 #0A0A0A / 보조 면 #1A1A1A / 높은 면 #2E2E2E / 행동색 #BDEAFF / 호버 #DBF4FF / 눌림 #80D7FF. 대표 브랜드색은 계속 #1434CB이며, 어두운 면 위 로고는 #FFFFFF다.
alternate와 다크 구분: 라이트 테마의 파란 내비게이션 배경은 alternate 팔레트다. 다크 지원 판정은 이 배경이나 흰 로고가 아니라 위의 공식 다크 문서·토큰을 근거로 했다.
상태색: 성공·주의·오류·안내는 메시지에만 쓴다. 카드의 장식 경계 border를 입력 경계로 쓰지 않고, 입력에는 대비가 더 높은 active-subtle을 매핑한다.

Typography

타이포그래피

폰트 페어링:
- 한글: Noto Sans KR — 지원하지 않는 언어에 Noto Sans를 쓰라는 공식 지침의 한국어 가족. SIL Open Font License. 실제 미리보기는 외부 폰트를 불러오지 않고 Apple SD Gothic Neo·맑은 고딕 등 설치된 서체로 표시한다.
- 영문: Visa Dialect UI — Visa 전용 UI 서체. 일반 브랜드용 Visa Dialect보다 폭이 좁아 작은 글자에 맞는다. 공식 문서는 내부 SharePoint 경로로 제공한다고 안내한다. 비자 브랜드가 아닌 브라우저 제품의 대안은 Open Sans다.
위계: 공식 Typography Usage의 웹 표 기준. 항목 순서는 크기 / 굵기 / 줄 높이 / 자간이다.
- Display: 60px / 600 / 78px / 0px — Display 1
- H1: 32px / 600 / 42px / 0.5px — Headline 1
- H2: 25px / 500 / 33px / 0px — Headline 2
- H3: 20px / 600 / 26px / 0px — Headline 3
- Body Large: 16px / 400 / 24px / 0px — Body 1
- Body: 14px / 400 / 22px / 0px — Body 2
- Body Small: 12px / 400 / 18px / 0px — Body 3
- Caption: 11px / 400 / 14px / 0px — UI label small을 갤러리 Caption에 대응
버튼: 기본 중간 크기는 12px / 600 / 16px / 0.25px. 큰 버튼은 14px / 600 / 18px / 0.25px.
운용: 본문은 왼쪽, 버튼 문구는 가운데 정렬한다. 위계는 대문자 장식보다 크기와 굵기로 나눈다. 카드 미리보기의 작은 글자는 280×210용 축약 크기이며 공식 제품의 원래 크기가 아니다.

Spacing

스페이싱

Base unit: 4px — 공식 격자 문서는 4의 배수를 기준으로 설명한다. Nova의 실제 size-scalable은 1px 단위도 제공한다.
토큰: 아래는 웹 배율 1에서 공식 4·8·16·24·32·48·64 토큰을 고른 것이다.

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-card: 20px; /* 공식 v-content-card 패딩 */
  --space-control: 14px; /* 공식 중간 버튼 좌우 패딩 */
  --container-max: 1440px; /* 아래 고정 격자에서 계산한 데모 폭(추정) */
}

Container: 공식 가로 내비게이션 격자는 1024px 이상에서 12열, 좌우 여백 24px, 열 사이 24px다. 1600px 이상 고정 격자의 최소 좌우 여백은 80px다. 예시의 max-width 1440px는 1600−80×2로 계산한 데모 선택값(추정)이며 공개 토큰 이름은 아니다.
작은 화면: 좌우 여백 16px. 768~1023px는 8열, 열 사이 24px이고, 작은 모바일 격자는 4열·열 사이 16px다.
터치 배율: 공식 모바일 배율은 1.25다. 반응형 예시는 공식 본문 16px/24px와 컨트롤 높이 46px를 사용한다.

Border Radius

공식 theme-border-radius: 6px에 Nova의 배수를 적용한 값이다. 임의로 둥근 정도를 추가하지 않았다.

:root {
  --radius-none: 0;
  --radius-sm: 4px; /* small: 기본값 × 2/3 */
  --radius-md: 6px; /* medium: 버튼·입력 */
  --radius-lg: 8px; /* large: 기본값 × 4/3 */
  --radius-xl: 10px; /* xlarge: 콘텐츠 카드 */
  --radius-full: 9999px; /* pill: 원형 아이콘 버튼 등 */
}

Shadow / Elevation

두 공식 테마의 elevation 선언은 같다. 아래는 실제 배포 CSS의 웹 값을 사용했다. Usage 문서의 일부 표는 이보다 절반 크기로 표기하므로 코드 구현에는 패키지 값을 우선한다. 컴포넌트 배치 용도는 원문 계층을 갤러리 이름으로 정리한 것이다.

:root {
  --shadow-none: none; /* 면·구분선만으로 충분한 구획 */
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.05); /* xsmall: 아주 낮은 면 */
  --shadow-md: 0 4px 15px -1px rgba(0,0,0,0.08), 0 4px 2px -2px rgba(0,0,0,0.1); /* medium: 떠 있는 패널 */
  --shadow-lg: 0 10px 18px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); /* large: 겹치는 면 */
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 4px 10px 2px rgba(0,0,0,0.1); /* xlarge: 높은 레이어 */
}

Iconography

스타일: 채운 경로(Filled) 중심. Visa 아이콘은 주·보조 두 경로로 나눠 두 색을 적용할 수도 있다.
Stroke 굵기: 공식 예시 SVG에는 stroke가 없다. 선처럼 보이는 부분도 채운 경로이므로 일괄 stroke 값을 부여하지 않는다. 잠금 아이콘의 주요 선 폭은 24px 원본에서 2px로 관찰된다.
모서리 처리: Square — 끝과 꺾임이 또렷한 사각형 중심.
추천 라이브러리: 공식 Nova Icons(@visa/nova-icons-svg). Tiny는 16px, Low는 24px다. 예시에 쓴 체크·잠금 경로는 이 패키지에서 가져왔다.
로고: 공식 design.visa.com 헤더의 v-logo SVG 경로를 그대로 인라인으로 넣었다. 로고와 일반 아이콘은 구분한다. 로고 SVG에 외부 참조나 id가 없으며, 색만 공식 파랑·흰색으로 바꾼다. 카드 실물의 칩·빛 반사·곡선은 로고와 별개로 제작한 SVG 그림이며 모든 내부 id는 visa- 접두사를 쓴다.

Component Guide

컴포넌트 가이드 (상태별 CSS)

다음 클래스는 Nova 역할 토큰을 갤러리용 이름에 연결한 작은 구현이다. Primary·Secondary·Ghost는 공식 기본·보조·tertiary 버튼에 대응한다. Danger는 공식 destructive 역할색을 쓴다. 카드 강조형·외곽선형과 배지의 Solid·Outline은 이 문서의 조합 예시이며 별도 공식 컴포넌트 이름은 아니다.

Button — 웹 높이 38px, 모서리 6px, 좌우 14px. 네 variant 모두 기본·호버·눌림·비활성·로딩 상태를 지원한다.

.visa-btn {
  min-height: 38px; padding: 0 var(--space-control); border: 0 solid transparent;
  border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; font: 600 12px/16px var(--font-ui); letter-spacing: 0.25px; cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-in-out), color var(--duration-base) var(--ease-out);
}
.visa-btn:focus-visible { outline: 1px solid var(--border-focus); outline-offset: 1px; }
.visa-btn--primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.visa-btn--primary:hover:not(:disabled):not([aria-busy="true"]) { background: var(--color-primary-400); }
.visa-btn--primary:active:not(:disabled):not([aria-busy="true"]) { background: var(--color-primary-800); }
.visa-btn--secondary { border-width: 1px; border-color: var(--color-primary-500); background: transparent; color: var(--color-primary-500); }
.visa-btn--secondary:hover:not(:disabled):not([aria-busy="true"]) { border-color: var(--color-primary-400); background: var(--surface-highlight); color: var(--color-primary-400); }
.visa-btn--secondary:active:not(:disabled):not([aria-busy="true"]) { border-color: var(--color-primary-800); background: var(--surface-lowlight); color: var(--color-primary-800); }
.visa-btn--ghost { background: transparent; color: var(--color-primary-500); }
.visa-btn--ghost:hover:not(:disabled):not([aria-busy="true"]) { background: var(--surface-highlight); color: var(--color-primary-400); }
.visa-btn--ghost:active:not(:disabled):not([aria-busy="true"]) { background: var(--surface-lowlight); color: var(--color-primary-800); }
.visa-btn--danger { background: var(--color-error-fg); color: var(--text-on-primary); }
.visa-btn--danger:hover:not(:disabled):not([aria-busy="true"]) { background: var(--color-error-hover); }
.visa-btn--danger:active:not(:disabled):not([aria-busy="true"]) { background: var(--color-error-pressed); }
.visa-btn--danger:focus-visible { outline-color: var(--color-error-pressed); }
.visa-btn:disabled { background: var(--control-disabled); color: var(--text-on-primary); border-color: var(--control-disabled); cursor: not-allowed; }
.visa-btn--secondary:disabled, .visa-btn--ghost:disabled { background: transparent; color: var(--text-disabled); }
.visa-btn--ghost:disabled { border-color: transparent; }
.visa-btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.visa-btn[aria-busy="true"]::after {
  content: ""; width: 12px; height: 12px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: visa-loading var(--duration-loading) linear infinite;
}
@keyframes visa-loading { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .visa-btn { transition: none; } .visa-btn[aria-busy="true"]::after { animation: none; } }

로딩 중에는 aria-busy="true"를 붙이고 「처리 중」처럼 상태가 읽히는 문구를 남긴다. 예시에는 실제 결제 처리를 연결하지 않는다.

Input — 공식 기본 컨테이너는 높이 38px, 경계 1px, 내부 좌우 6px다. 오류는 색과 안내 문구로 함께 표시한다.

.visa-field { display: grid; gap: var(--space-xs); }
.visa-label { font: 400 12px/16px var(--font-ui); color: var(--text-primary); }
.visa-input {
  width: 100%; min-height: 38px; padding: 3px 6px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--bg-base); color: var(--text-primary);
  font: 400 14px/22px var(--font-ui);
}
.visa-input:hover:not(:disabled):not([aria-invalid="true"]) { border-color: var(--color-primary-400); }
.visa-input:focus { outline: none; border-color: var(--border-focus); }
.visa-input[aria-invalid="true"] { border-color: var(--color-error-graphics); }
.visa-input:disabled { border-style: dashed; border-color: var(--control-disabled); color: var(--text-disabled); cursor: not-allowed; }
.visa-field-message { margin: 0; font: 400 12px/16px var(--font-ui); color: var(--text-secondary); }
.visa-field-message--error { color: var(--color-error-fg); }

Card — 공식 콘텐츠 카드의 면·1px 경계·10px 모서리·20px 패딩을 쓴다. 예시 기본형은 그림자를 생략하고 면을 구분한다.

.visa-card {
  padding: var(--space-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl); background: var(--bg-base); color: var(--text-primary);
  box-shadow: var(--shadow-none);
}
.visa-card--emphasis { background: var(--bg-subtle); border-color: transparent; }
.visa-card--outlined { background: transparent; border-color: var(--border-strong); }

Badge / Tag — 공식 작은 모서리 4px와 패딩 4px. 성공 상태는 stable 배지 역할에 대응한다.

.visa-badge { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--radius-sm); font: 400 12px/16px var(--font-ui); }
.visa-badge--solid { background: var(--color-primary-500); color: var(--text-on-primary); }
.visa-badge--subtle { background: var(--border-default); color: var(--text-secondary); }
.visa-badge--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-primary); }
.visa-badge--success { background: var(--color-success-bg); color: var(--color-success-fg); }

Navigation — 가로 헤더 예시. 현재 위치는 밑줄과 글자 굵기로 표시한다. 간격은 공식 격자의 24px를 사용하며 이 헤더의 항목 구성은 데모용이다.

.visa-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); padding: var(--space-lg); border-bottom: 1px solid var(--border-default); background: var(--bg-base); }
.visa-nav-items { margin-left: auto; display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.visa-nav-item { border: 0; border-bottom: 2px solid transparent; padding: 8px 0; background: transparent; color: var(--text-secondary); font: 400 14px/18px var(--font-ui); cursor: pointer; }
.visa-nav-item[aria-current="page"] { color: var(--color-primary-500); border-bottom-color: var(--color-primary-500); font-weight: 500; }
.visa-nav-item:focus-visible { outline: 1px solid var(--border-focus); outline-offset: 1px; }
@media (max-width: 767px) {
  .visa-btn, .visa-input { min-height: 46px; }
  .visa-btn { font-size: 14px; line-height: 18px; }
  .visa-input { font-size: 16px; line-height: 24px; }
  .visa-nav { padding: var(--space-md); }
}

Motion

Nova 기본 CSS에는 통합된 fast·base·slow 시간표가 없다. 공식 VPDS 사이트 CSS에서 카드 전환 300ms, 테마 아이콘 사라짐 200ms, 진행 스피너 3초를 확인했다. 아래 이름은 그 관찰값을 재사용한 갤러리 별칭이며, 전체 Visa 제품의 공통 모션 표준으로 단정하지 않는다. fast 200ms를 버튼 등에도 대응한 것은 해석이다.

:root {
  --duration-fast: 200ms; /* 공식 사이트 테마 아이콘 관찰값 */
  --duration-base: 300ms; /* 공식 콘텐츠 카드 전환 */
  --duration-slow: 300ms; /* 별도 장시간 값을 만들지 않고 재사용 */
  --duration-loading: 3000ms; /* 공식 진행 스피너 주기 */
  --ease-out: cubic-bezier(0,0,0.58,1); /* CSS ease-out */
  --ease-in-out: cubic-bezier(0.42,0,0.58,1); /* CSS ease-in-out */
}

브랜드 표준의 결제 완료 연출은 로고 등장 뒤 확인 상태를 보여 주는 흐름이다. 이 문서는 정적인 확인 화면만 만든다. 모션 감소 설정에서는 전환·스피너 회전을 멈추고 문구를 남긴다.

Anti-patterns

1. 옛 Visa Flag를 섞지 않는다. 파랑·금색 띠가 있는 옛 로고 대신 현재의 단색 공식 경로를 쓴다. 비율을 바꾸거나 글자로 로고를 대신하지 않는다. 2. 브랜드색과 다크 행동색을 혼동하지 않는다. 다크 버튼은 #BDEAFF이며 어두운 배경의 로고는 흰색이다. 모든 것을 #1434CB로 칠하지 않는다. 3. 상태색으로 일반 행동을 꾸미지 않는다. 초록·앰버·빨강은 성공·주의·오류에만 연결하고, 오류에는 읽을 수 있는 안내 문구도 붙인다. 4. 파랑으로 본문 전체를 강조하지 않는다. 활성색은 버튼·링크·현재 위치에 집중하고, 카드 경계용 옅은 색을 입력 경계에 재사용하지 않는다. 5. 언어가 바뀌면 글자를 억지로 줄이지 않는다. 한글은 Noto Sans 계열로 이어 주고, 작은 화면은 공식 16px 본문·46px 컨트롤로 확장한다. 로고 주위에도 빈 공간을 남긴다.

Sources

출처

Visa 이름과 로고는 각 권리자의 상표입니다.