# Visa Product 디자인 시스템

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

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

## 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-border | rgba(0, 0, 0, 0.1) | Visa 1.6.5 기본/밝은 테마 참고 자료. |
### 테마 크기 및 서체

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --theme-font-size | 14px | Visa 1.6.5 기본/밝은 테마 참고 자료. |
| --theme-border-radius | 6px | Visa 1.6.5 기본/밝은 테마 참고 자료. |
| --typography-headline-1-font-size | 2.2857142857rem | Visa 1.6.5 기본/밝은 테마 참고 자료. |
| --typography-headline-2-font-size | 1.7857142857rem | Visa 1.6.5 기본/밝은 테마 참고 자료. |
| --typography-headline-3-font-size | 1.4285714286rem | Visa 1.6.5 기본/밝은 테마 참고 자료. |
| --typography-body-1-font-size | 1.1428571429rem | Visa 1.6.5 기본/밝은 테마 참고 자료. |
| --typography-body-2-font-size | 1rem | Visa 1.6.5 기본/밝은 테마 참고 자료. |
| --typography-body-3-font-size | 0.8571428571rem | Visa 1.6.5 기본/밝은 테마 참고 자료. |
### 확장 가능한 치수

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --size-scalable-4 | calc(4px * var(--theme-scale-factor)) | 기본 확장형 치수이며, 반응형 맥락에서는 추가 배율을 적용할 수 있습니다. |
| --size-scalable-8 | calc(8px * var(--theme-scale-factor)) | 기본 확장형 치수이며, 반응형 맥락에서는 추가 배율을 적용할 수 있습니다. |
| --size-scalable-12 | calc(12px * var(--theme-scale-factor)) | 기본 확장형 치수이며, 반응형 맥락에서는 추가 배율을 적용할 수 있습니다. |
| --size-scalable-16 | calc(16px * var(--theme-scale-factor)) | 기본 확장형 치수이며, 반응형 맥락에서는 추가 배율을 적용할 수 있습니다. |
| --size-scalable-24 | calc(24px * var(--theme-scale-factor)) | 기본 확장형 치수이며, 반응형 맥락에서는 추가 배율을 적용할 수 있습니다. |
| --size-scalable-32 | calc(32px * var(--theme-scale-factor)) | 기본 확장형 치수이며, 반응형 맥락에서는 추가 배율을 적용할 수 있습니다. |
| --size-scalable-40 | calc(40px * var(--theme-scale-factor)) | 기본 확장형 치수이며, 반응형 맥락에서는 추가 배율을 적용할 수 있습니다. |
### 게시된 유틸리티 및 컴포넌트 클래스

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

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Radio group | One shared name per question | 형식과 빈도는 서로 독립된 그룹입니다. |
| fieldset / legend | Group question | 옵션으로 답할 질문을 명확히 알립니다. |
| checked | Native selected state | 선택 표시를 위해 CSS만 단독으로 사용하지 마세요. |
| disabled | Native unavailable state | 사용할 수 없는 경우에도 설명을 표시합니다. |
| aria-describedby | Optional supporting description | 추가 텍스트가 레이블에 포함되지 않았다면 연결합니다. |
## Visa Product 디자인 시스템 완벽 가이드

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

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

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

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

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

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

지원 사양 읽기

## 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 설정 구성 완료

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

```
<!-- index.html after installing @visa/nova-styles@1.6.5 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 토큰이 적용되지 않을 수 있습니다.

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

### 구현 시작점

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

```
npm create vite@latest statement-preference -- --template vanilla
cd statement-preference
npm install
npm install @visa/nova-styles@1.6.5
# Replace index.html with the complete example below.
npm run dev
```

### 프로젝트를 위한 프롬프트

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

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

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

- Nova 저장소 공식 설치 및 테마 불러오기 안내입니다.

- Styles 1.6.5 네이티브 컴포넌트 규칙과 크기 조정이 가능한 치수입니다.

- Visa 테마 1.6.5 정확한 테마 팔레트와 타이포그래피입니다.

- 예시 메타데이터 검증된 HTML 클래스 구조입니다.

- CSS 시작하기 공개 통합 안내입니다.

- 브라우저 지원 에버그린 브라우저 지원 범위입니다.

## Visa Product 디자인 시스템 관련 리소스

### Volvo Cars Web 디자인 시스템

완성된 짐 꾸리기 계획 예제를 통해 Volvo Cars의 HTML 우선 웹 기반, 실제 라이트 모드 토큰, 기본 선택형 카드 스타일을 살펴보세요. 각 선택 항목은 서로 독립적으로 설정할 수 있으며 테마 전환과 초기화도 지원합니다.

### Wonderflow Wanda

완성된 피드백 검토 작업 공간에서 Wanda의 실제 테마 역할과 토큰 문법을 사용하세요. 주제 필터, 펼쳐서 볼 수 있는 근거 맥락, 계속 유지되는 로컬 노트북을 포함합니다.

### Workday Canvas

Canvas Kit의 복합 FormField, 제어형 TextInput, PrimaryButton을 사용해 로컬 학습 계획을 구성하고, 현재 사용하는 시맨틱 토큰의 출처와 이전 space.x4 마이그레이션 예시를 구분하세요.


- [구현 레퍼런스](https://github.com/visa/nova-styles)
- [출처](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css)
- [출처](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css)
- [출처](https://unpkg.com/@visa/nova-styles@1.6.5/data.json)
- [출처](https://design.visa.com/components/radio/)
- [지원 사양 읽기](https://design.visa.com/components/radio/)
- [지원 사양 읽기](https://github.com/visa/nova-styles)
- [지원 사양 읽기](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css)
- [지원 사양 읽기](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css)
- [지원 사양 읽기](https://unpkg.com/@visa/nova-styles@1.6.5/data.json)
- [지원 사양 읽기](https://design.visa.com/developing/)
- [코드 참조](https://unpkg.com/@visa/nova-styles@1.6.5/data.json)
- [코드 참조](https://github.com/visa/nova-styles)
- [Nova 저장소 공식 설치 및 테마 불러오기 안내입니다.](https://github.com/visa/nova-styles)
- [Styles 1.6.5 네이티브 컴포넌트 규칙과 크기 조정이 가능한 치수입니다.](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css)
- [Visa 테마 1.6.5 정확한 테마 팔레트와 타이포그래피입니다.](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css)
- [예시 메타데이터 검증된 HTML 클래스 구조입니다.](https://unpkg.com/@visa/nova-styles@1.6.5/data.json)
- [CSS 시작하기 공개 통합 안내입니다.](https://design.visa.com/developing/styles-css/)
- [브라우저 지원 에버그린 브라우저 지원 범위입니다.](https://design.visa.com/developing/)