83.3K+다운로드
엔터프라이즈 제품 디자인 · 신규 리소스

Visa Product 디자인 시스템.

Visa의 Nova CSS를 사용해 명세서 형식 선택 화면을 명확하게 구성하세요. 기본 라디오 컨트롤, 대비되는 헤더 색상, 검토 요약을 적용합니다. 정확한 1.6.5 테마 값, 확장 가능한 간격, 전체 스타일시트 통합 방식을 확인하세요.

OpenDesign 다운로드 DESIGN.md 다운로드
OpenDesign 가이드7개 챕터참조 항목 40개독자적 적용 가이드
01

Visa Product 디자인 시스템 인터페이스 미리보기

형식과 빈도를 선택하고, 로컬 기본 설정을 확인한 다음 초기화하세요.

명세서 형식 기본 설정전체 예시 열기
기본 @visa/nova-styles 1.6.5 CSS와 Visa 테마를 로컬에 포함했습니다. 원격 font-face 규칙을 제거하고 시스템 글꼴을 사용합니다. 애플리케이션의 원래 레이아웃과 로컬 스크립트를 유지합니다. · 구현 레퍼런스
02

Visa Product 디자인 시스템 디자인 참고 자료

게시된 @visa/nova-styles 1.6.5 스타일, Visa 테마 및 예제 메타데이터입니다. 기본/밝은 테마 값은 대체 및 다크 테마 재정의 값과 구분되어 있습니다. 미리보기에는 공식 CSS가 로컬로 포함되어 있으며, 원격 font-face 규칙을 제거하고 시스템 대체 글꼴을 사용합니다.

기본 팔레트

출처
이름 / 규칙값 / 구성용도
--palette-default-active#1434cb Visa 1.6.5 기본/밝은 테마 참고 자료.
--palette-default-active-hover#173be8 Visa 1.6.5 기본/밝은 테마 참고 자료.
--palette-default-active-pressed#0f2595 Visa 1.6.5 기본/밝은 테마 참고 자료.
--palette-default-active-accent#fcc015 Visa 1.6.5 기본/밝은 테마 참고 자료.
--palette-default-surface-1#ffffff Visa 1.6.5 기본/밝은 테마 참고 자료.
--palette-default-surface-2#f5f5f5 Visa 1.6.5 기본/밝은 테마 참고 자료.
--palette-default-surface-3#f0f0f0 Visa 1.6.5 기본/밝은 테마 참고 자료.
--palette-default-text#000000 Visa 1.6.5 기본/밝은 테마 참고 자료.
--palette-default-text-subtle#4a4a4a Visa 1.6.5 기본/밝은 테마 참고 자료.
--palette-default-text-on-active#ffffff Visa 1.6.5 기본/밝은 테마 참고 자료.
--palette-default-borderrgba(0, 0, 0, 0.1)Visa 1.6.5 기본/밝은 테마 참고 자료.

테마 크기 및 서체

출처
이름 / 규칙값 / 구성용도
--theme-font-size14pxVisa 1.6.5 기본/밝은 테마 참고 자료.
--theme-border-radius6pxVisa 1.6.5 기본/밝은 테마 참고 자료.
--typography-headline-1-font-size2.2857142857remVisa 1.6.5 기본/밝은 테마 참고 자료.
--typography-headline-2-font-size1.7857142857remVisa 1.6.5 기본/밝은 테마 참고 자료.
--typography-headline-3-font-size1.4285714286remVisa 1.6.5 기본/밝은 테마 참고 자료.
--typography-body-1-font-size1.1428571429remVisa 1.6.5 기본/밝은 테마 참고 자료.
--typography-body-2-font-size1remVisa 1.6.5 기본/밝은 테마 참고 자료.
--typography-body-3-font-size0.8571428571remVisa 1.6.5 기본/밝은 테마 참고 자료.

확장 가능한 치수

출처
이름 / 규칙값 / 구성용도
--size-scalable-4calc(4px * var(--theme-scale-factor))기본 확장형 치수이며, 반응형 맥락에서는 추가 배율을 적용할 수 있습니다.
--size-scalable-8calc(8px * var(--theme-scale-factor))기본 확장형 치수이며, 반응형 맥락에서는 추가 배율을 적용할 수 있습니다.
--size-scalable-12calc(12px * var(--theme-scale-factor))기본 확장형 치수이며, 반응형 맥락에서는 추가 배율을 적용할 수 있습니다.
--size-scalable-16calc(16px * var(--theme-scale-factor))기본 확장형 치수이며, 반응형 맥락에서는 추가 배율을 적용할 수 있습니다.
--size-scalable-24calc(24px * var(--theme-scale-factor))기본 확장형 치수이며, 반응형 맥락에서는 추가 배율을 적용할 수 있습니다.
--size-scalable-32calc(32px * var(--theme-scale-factor))기본 확장형 치수이며, 반응형 맥락에서는 추가 배율을 적용할 수 있습니다.
--size-scalable-40calc(40px * var(--theme-scale-factor))기본 확장형 치수이며, 반응형 맥락에서는 추가 배율을 적용할 수 있습니다.

게시된 유틸리티 및 컴포넌트 클래스

출처
이름 / 규칙값 / 구성용도
v-flexFlex layout간격 예제에는 부모 요소가 필요합니다.
v-gap-20Gap utility공식 기본 간격 예제에 표시됩니다.
v-col-gap-20Column gap utility열 사이를 구분합니다.
v-buttonPrimary button기본 button 요소를 사용합니다.
v-button-secondarySecondary modifier예제에 지원용 재설정 동작을 표시합니다.
v-radioNative radio style이름은 공유하고 값은 서로 구분합니다.
v-labelLabel style연결된 label 또는 요소를 감싸는 label을 유지합니다.
v-alternateAlternate palette context표면이나 버튼에 표시됩니다.
v-typography-headline-1Headline visual role이 페이지의 의미상 h1에 적용합니다.

구성 규칙

출처
이름 / 규칙값 / 구성용도
Radio groupOne shared name per question형식과 빈도는 서로 독립된 그룹입니다.
fieldset / legendGroup question옵션으로 답할 질문을 명확히 알립니다.
checkedNative selected state선택 표시를 위해 CSS만 단독으로 사용하지 마세요.
disabledNative unavailable state사용할 수 없는 경우에도 설명을 표시합니다.
aria-describedbyOptional supporting description추가 텍스트가 레이블에 포함되지 않았다면 연결합니다.
03

Visa Product 디자인 시스템 완벽 가이드

실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.

DESIGN-visa.md

완전한 안내와 구현 시작점, 소스 링크.

가이드 다운로드

Visa Product 디자인 시스템 검토 상태를 명확하게 보여 주는 기본 설정 작업

질문을 각각 독립적으로 구성하세요

이 예제에서는 명세서 형식과 요약 빈도를 묻습니다. 두 항목은 서로 다른 라디오 그룹이므로 빈도를 바꿔도 형식 선택은 해제되지 않습니다. 기본 동작 버튼 앞에 두 선택 항목을 모두 요약해 보여 주므로, 사용자는 아이콘이나 숨겨진 기본값을 해석하지 않고 결과를 확인할 수 있습니다.

이 OpenDesign 가이드에서

기본 설정 검토는 로컬에서 확인 상태만 기록합니다. 이 페이지는 카드 번호를 요청하거나 계정을 조회하지 않으며, 명세서를 생성하거나 금융 서비스 설정을 변경하지도 않습니다. 따라서 이 예제는 디자인 시스템의 선택 및 피드백 동작에 초점을 둡니다.

지원 사양 읽기

Visa Product 디자인 시스템 Nova 스타일과 Visa 테마는 별도로 가져옵니다

구조가 테마의 전부는 아닙니다

공식 설치 가이드에서는 styles.css를 먼저, themes/visa/index.css를 다음으로 불러옵니다. 첫 번째 파일은 컴포넌트 및 유틸리티 규칙을 제공하고, 두 번째 파일은 Visa 테마를 적용합니다. 둘 중 하나만 불러오는 것은 불완전한 통합입니다. 독립 실행형 예제와 가져오기 코드에서도 이 순서를 유지합니다.

확인된 패키지 버전은 1.6.5입니다. 이 예제는 확인 시점에 서드파티 스타일시트를 요청하지 않도록 해당 패키지의 CSS를 로컬에 포함합니다. 원격 font-face 선언을 제거하고 애플리케이션에서 시스템 대체 글꼴을 명시적으로 사용합니다. 이는 글꼴을 대체한다고 밝힌 기본 Nova CSS이며, 독점 글꼴과 완전히 동일하다는 뜻은 아닙니다.

지원 사양 읽기

Visa Product 디자인 시스템 기본 및 대체 팔레트는 각각 짝을 이루는 전경색을 사용합니다

텍스트 역할과 분리된 채 색상 채우기만 가져오지 마세요

기본/밝은 테마의 활성 색상은 #1434cb이며, 호버 시 #173be8, 누른 상태에서는 #0f2595를 사용합니다. 활성 배경 위의 텍스트 역할에는 흰색을 사용합니다. 대체 테마 맥락에서는 역할 매핑이 달라지므로, 이 예제에서는 배경만 재정의하지 않고 헤더 표면에 v-alternate를 사용합니다.

강조 색상 #fcc015를 어디서나 버튼 배경색으로 사용할 수 있는 것은 아닙니다. 강조 및 활성 역할을 어떻게 사용할지는 테마 맥락에 따라 달라집니다. 참고 표에는 기본 팔레트가 나와 있으며, 동일한 스타일시트의 후반부에 정의된 다크 및 대체 테마 값을 오해를 부르는 단일 값 집합으로 합치지 않았습니다.

지원 사양 읽기

Visa Product 디자인 시스템 테마 루트를 기준으로 rem 배율을 확인하세요

테마 루트가 14픽셀이면 익숙한 rem 기준도 달라집니다

Visa 테마의 기본 글꼴 크기는 14픽셀입니다. 따라서 headline-1 값인 약 2.285714rem은 기본 글꼴 크기가 16픽셀이라고 가정했을 때의 값이 아니라, 14픽셀을 기준으로 32픽셀에 해당합니다. body-1은 약 1.142857rem이고 body-2는 1rem입니다.

크기 조정이 가능한 크기 토큰은 테마 배율을 픽셀 수량에 곱한 값으로 표현합니다. 반응형 맥락에서는 두 번째 배율이 적용될 수 있습니다. 간격을 애플리케이션에 맞게 조정할 때는 이 계산식을 유지하세요. 기본 계산 결과만 복사하면 이러한 관계가 사라집니다. 예시에서는 빈도 선택 항목에 공식 gap 유틸리티를 사용하고, 전체 분할 레이아웃에는 독자적인 애플리케이션 크기를 적용합니다.

지원 사양 읽기

Visa Product 디자인 시스템의 표현 아래에 있는 네이티브 라디오 의미 체계

스타일이 적용된 원은 라디오 그룹이 아닙니다

공개 메타데이터에 따르면 v-radio는 실제 type="radio" 입력 요소에 적용되며 label과 함께 사용됩니다. 미리보기에서도 이 네이티브 구조를 유지하고 각 선택 항목의 설명을 label로 감쌉니다. 키보드 화살표 키로 그룹 내 항목을 이동할 수 있으며, 선택 상태는 브라우저와 보조 기술에서도 확인할 수 있습니다.

각 질문에는 fieldset과 legend를 사용해 이름을 지정합니다. 형식 옵션에는 각 형식의 특성이 설명되어 있습니다. PDF는 다운로드할 수 있는 샘플이고, HTML는 리플로우할 수 있는 형식입니다. 구체적인 제품 내용은 새로 작성했으며, 컨트롤의 구조와 클래스는 네이티브 라이브러리에서 가져왔습니다.

  • 형식 옵션과 빈도 옵션에는 서로 다른 name을 사용하세요.
  • 요약에 안정적인 레이블을 사용할 수 있도록 라디오 값과 화면에 표시되는 설명을 분리하세요.
  • 상태를 표현할 때 장식용 클래스만 사용하지 말고 checked 및 disabled 속성을 사용하세요.

지원 사양 읽기

Visa Product 디자인 시스템 Nova CSS는 컨트롤의 스타일을 적용하고, 네이티브 HTML가 선택을 관리합니다

그룹화와 검토 로직은 스타일시트 밖에서 관리하세요

예시에서는 실제 라디오 입력에 Nova의 v-radio 클래스를 사용합니다. 같은 name 속성을 지정하면 형식 선택 항목을 하나만 선택할 수 있고, 다른 name을 지정하면 빈도 그룹과 분리됩니다. fieldset과 legend로 그룹의 맥락을 제공하고, 연결된 label을 통해 옵션의 전체 텍스트를 컨트롤의 접근 가능한 이름으로 사용합니다.

CSS 패키지는 옵션 선택, 애플리케이션 데이터의 지속성 관리, 검토 기록 생성을 담당하지 않습니다. 제공된 스크립트는 두 네이티브 그룹의 값을 읽어 로컬 요약을 만듭니다. 선택 항목이 수정되면 이전 값이 더 이상 현재 설정을 나타내지 않으므로 요약이 지워집니다.

구조 스타일시트와 Visa 테마를 모두 구현에 포함하세요. 대체 헤더에는 v-alternate를 사용하고, 양식은 기본 색상 맥락을 유지합니다. 배경만 바꾸고 전경색 역할을 정하지 않은 채 헤더를 흉내 내지 마세요.

지원 사양 읽기

Visa Product 디자인 시스템 모든 화면 너비에서 읽기 순서 유지

작업 순서는 그대로 두고 요약을 이동하세요

넓은 화면에서는 선택 그룹과 현재 선택 요약이 나란히 표시됩니다. 작은 화면에서는 요약이 양식 다음에 배치됩니다. 원본 문서의 삽화는 작업에 필요한 정보를 제공하지 않으므로 표시하지 않지만, 레이블과 설명, 동작은 모두 유지합니다.

CSS 라이브러리는 최신 에버그린 브라우저를 지원합니다. 공식 개발 안내에서는 레거시 브라우저와의 호환성을 보장하지 않으므로, 프로덕션 팀은 최신 브라우저에서 미리보기가 제대로 표시된다는 이유만으로 모든 브라우저를 지원한다고 간주하지 말고 실제 지원 버전을 테스트해야 합니다.

  1. 버전이 고정된 구조용 CSS과 Visa 테마를 불러온 다음 애플리케이션 레이아웃 스타일을 추가하세요.
  2. 접근 가능한 HTML과 Quarterly를 선택하고 설정을 검토한 뒤, 두 항목이 모두 요약에 표시되는지 확인하세요.
  3. 선택 항목을 하나 바꾸고 검토 피드백이 초기화되는지 확인한 다음, 초기화 기능과 좁은 화면 레이아웃을 테스트하세요.

지원 사양 읽기

Visa Product 디자인 시스템 컴포넌트 예시

Nova CSS 설정 구성 완료

네이티브 라디오 그룹 두 개의 선택 내용이 요약에 즉시 반영되며, 기본 동작으로 로컬 검토 상태를 명시적으로 생성합니다.

html
<!-- index.html after installing @visa/[email protected] in a Vite vanilla project -->
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Statement preference</title>
<link rel="stylesheet" href="/node_modules/@visa/nova-styles/styles.css">
<link rel="stylesheet" href="/node_modules/@visa/nova-styles/themes/visa/index.css">
<style>:root{font-family:Arial,sans-serif}body{font-family:Arial,sans-serif;background:#fff}*{box-sizing:border-box}.app{max-width:1150px;margin:auto;padding:24px}.hero{padding:32px;display:grid;grid-template-columns:1fr 150px;align-items:center;gap:24px;border-radius:6px}.hero h1{font-family:Arial,sans-serif;font-weight:600;line-height:1.2;margin:12px 0 16px}.hero p{font-family:Arial,sans-serif}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:600}.paper{width:120px;height:150px;background:white;border-radius:6px;transform:rotate(8deg);padding:20px;box-shadow:8px 8px 0 #0f2595;position:relative}.paper span{display:block;height:3px;background:#1434cb;margin:10px 0;width:70px}.paper span:nth-child(2){width:45px}.paper b{position:absolute;bottom:10px;right:15px;color:#1434cb;font:600 36px Arial}.workspace{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;margin:32px 0}.workspace h2,.workspace legend{font-family:Arial,sans-serif;font-weight:600}.hint{font-size:14px;color:#4a4a4a;line-height:1.5;margin:12px 0 16px}.option{display:flex;gap:16px;padding:20px 16px;border:1px solid #ddd;border-radius:6px;margin:12px 0;cursor:pointer}.option:has(:checked){border:2px solid #1434cb;padding:19px 15px;background:#f6f9ff}.option b{font-size:16px}.option small{display:block;font-size:14px;color:#4a4a4a;line-height:1.5;margin-top:4px}.option .v-radio{flex-shrink:0}.frequency{margin-top:28px}.frequency legend{margin-bottom:16px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.v-button{font-family:Arial,sans-serif}.summary{background:#f5f5f5;padding:24px;border-radius:6px;align-self:start;min-height:285px}.summary h2{margin:16px 0 8px}.rule{height:1px;background:#ddd;margin-top:20px}.status{padding:16px 0;font-size:14px;line-height:1.5}.confirmed{color:#1434cb;font-weight:600}footer{font-size:12px;color:#4a4a4a;border-top:1px solid #ddd;padding-top:16px;line-height:1.5}@media(max-width:650px){.app{padding:16px}.hero{padding:24px;grid-template-columns:1fr}.paper{display:none}.workspace{grid-template-columns:1fr;gap:24px}.hero h1{font-size:28px}.option{padding:16px 12px}.option:has(:checked){padding:15px 11px}}
</style><main class="app"><header class="v-surface v-alternate hero"><div><p class="eyebrow">ACCOUNT PREFERENCES / SAMPLE</p><h1 class="v-typography-headline-1">Choose how you read<br>your statement.</h1><p class="v-typography-body-1">One clear choice, with the details visible before you confirm.</p></div><div class="paper" aria-hidden="true"><span></span><span></span><span></span><b>01</b></div></header><div class="workspace"><form id="form"><fieldset><legend class="v-typography-headline-3">Statement format</legend><p class="hint">This page stores a demonstration preference only.</p><label class="option"><input class="v-radio" type="radio" name="delivery" value="Digital PDF" checked><span><b>Digital PDF</b><small>A downloadable sample statement for offline reading.</small></span></label><label class="option"><input class="v-radio" type="radio" name="delivery" value="Accessible HTML"><span><b>Accessible HTML</b><small>A reflowable sample statement with structured headings.</small></span></label></fieldset><fieldset class="frequency"><legend class="v-typography-headline-3">Summary frequency</legend><div class="v-flex v-gap-16"><label class="v-flex v-align-items-center v-gap-4"><input class="v-radio" type="radio" name="frequency" value="Monthly" checked>Monthly</label><label class="v-flex v-align-items-center v-gap-4"><input class="v-radio" type="radio" name="frequency" value="Quarterly">Quarterly</label></div></fieldset><div class="actions"><button class="v-button" type="submit">Review preference</button><button class="v-button v-button-secondary" id="reset" type="button">Reset</button></div></form><aside class="summary"><p class="eyebrow">YOUR CURRENT SELECTION</p><h2 class="v-typography-headline-3" id="selection">Digital PDF</h2><p id="period">Monthly summary</p><div class="rule"></div><p class="hint">No account data is used. No statement is generated or delivered.</p><p class="status" id="status" role="status">Review your preference to create a local confirmation.</p></aside></div><footer>Nova styles 1.6.5 and Visa theme. The example application styles use a system-font fallback. Original demonstration, no financial service connection.</footer></main>
<script>const form=document.querySelector('#form'),status=document.querySelector('#status');function update(){document.querySelector('#selection').textContent=form.elements.delivery.value;document.querySelector('#period').textContent=form.elements.frequency.value+' summary';status.textContent='Review your preference to create a local confirmation.';status.classList.remove('confirmed')}form.onchange=update;form.onsubmit=e=>{e.preventDefault();status.textContent='Reviewed locally: '+form.elements.delivery.value+', '+form.elements.frequency.value.toLowerCase()+'. No account setting changed.';status.classList.add('confirmed')};document.querySelector('#reset').onclick=()=>{HTMLFormElement.prototype.reset.call(form);update()};</script>
</html>

코드 참조

  • CSS는 컴포넌트 표현을 제공하고, 간단한 스크립트가 애플리케이션 동작을 구현합니다.
  • 설정을 변경하면 이전 검토 상태가 지워집니다.
  • 대체 헤더는 팔레트를 손으로 흉내 낸 것이 아니라 실제 테마 맥락을 사용합니다.
  • 전체 HTML를 index.html로 저장한 다음, 버전이 고정된 공개 CSS URL에 접속할 수 있는 브라우저에서 여세요. 이 안내서의 미리보기에서는 해당 스타일을 로컬에 포함합니다.

구조와 테마를 함께 불러오세요

번들링된 애플리케이션에서는 애플리케이션 스타일시트보다 먼저 두 계층을 한 번씩 가져오세요.

자바스크립트
import '@visa/nova-styles/styles.css';
import '@visa/nova-styles/themes/visa/index.css';
import './application.css';

코드 참조

  • 테마 파일이 누락되면 구조 클래스는 적용되어도 의도한 Visa 토큰이 적용되지 않을 수 있습니다.
04

Visa Product 디자인 시스템 AI 에이전트 설정

구현 시작점

완성된 HTML에서는 검증된 styles.css 및 themes/visa/index.css 경로를 사용합니다. 두 파일이 모두 필요합니다. iframe에는 이 스타일이 로컬로 포함되어 있으며, 공식 font-face 선언은 생략했습니다.

shell / html
npm create vite@latest statement-preference -- --template vanilla
cd statement-preference
npm install
npm install @visa/[email protected]
# Replace index.html with the complete example below.
npm run dev

프로젝트를 위한 프롬프트

에이전트 프롬프트
버전이 고정된 구조 및 테마 CSS을 사용해 Visa Nova 명세서 환경 설정 예시를 만드세요. 네이티브 라디오 그룹과 명확한 범례, 연결된 레이블을 유지하세요. 기본 테마 역할과 대체 테마 역할을 구분하고, rem 값을 해석할 때 기본 글꼴 크기 14px을 기준으로 삼으세요. 검토 상태는 로컬에서 관리하고, 설정이 바뀌면 오래된 확인 상태를 지우며, 작은 화면에서는 요약을 세로로 배치하세요.
05

Visa Product 디자인 시스템 출처 및 범위

네이티브 Nova CSS을 사용한 독립형 OpenDesign 안내서입니다. 이 가상의 설정 작업은 계정 데이터를 사용하거나 금융 서비스를 변경하지 않습니다. 미리보기에서는 시스템 글꼴을 대신 사용한다는 점을 안내합니다.