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 layoutgapの例には親要素が必要です。 v-gap-20Gap utility公式のdefault-gapの例に表示されています。 v-col-gap-20Column gap utility列を区切ります。 v-buttonPrimary button標準のbutton要素を使用します。 v-button-secondarySecondary modifierサンプル内でリセット操作を補助します。 v-radioNative radio style共通のnameと異なるvalueを維持します。 v-labelLabel style対応するラベル、または選択肢を囲むラベルを用意します。 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 デザインシステム 確認しやすいレビュー画面を備えた選択タスク 質問はそれぞれ独立させる この例では、明細書の形式と要約の頻度を尋ねています。これらは別々のラジオボタングループなので、頻度を変更しても形式の選択は解除されません。主要な操作の前に要約で両方の選択内容を繰り返し表示するため、アイコンを読み解いたり、非表示の初期値を推測したりせずに結果を確認できます。
設定の確認操作では、ローカルに確認したことを記録するだけです。このページではカード番号の入力を求めず、アカウントへのアクセス、明細書の生成、金融サービスの設定変更も行いません。これにより、サンプルはデザインシステムの選択とフィードバックの動作に焦点を絞っています。
関連する仕様を確認する
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で、このルートサイズでは32ピクセルに相当します。16ピクセルのルートサイズを前提にした場合の値とは異なります。body-1は約1.142857rem、body-2は1remです。
拡縮可能なサイズのトークンは、ピクセル単位の値にテーマの倍率を掛けたものです。レスポンシブなコンテキストでは、さらに別の倍率が加わることがあります。アプリケーションの間隔を調整する際は、この関係を保てるよう式のまま扱ってください。デフォルトの計算結果だけをコピーすると、この関係が失われます。サンプルでは、頻度のコントロールに公式のgapユーティリティを、全体の分割レイアウトにアプリケーション独自の寸法を使用しています。
関連する仕様を確認する
Visa Product デザインシステム Novaのスタイルの下にある標準のラジオボタンのセマンティクス スタイル付きの円だけではラジオボタングループにならない 公開されているメタデータでは、実際のinput type="radio"にv-radioを適用し、labelと組み合わせています。プレビューでもこの標準の構造を維持し、各選択肢の表示説明をそのラベルで囲んでいます。キーボードの矢印キーでグループ内を移動でき、選択状態はブラウザーと支援技術からも認識できます。
各質問はfieldsetとlegendで名前を付けます。形式の選択肢では、それぞれを選んだ場合の内容を説明しています。PDFはダウンロードできるサンプルで、HTMLはリフロー可能な形式として説明されています。具体的な製品コンテンツは独自に作成したものですが、コントロールの構造とクラスは標準ライブラリに基づいています。
2つの形式の選択肢には同じnameを使い、頻度には別のnameを使います。 ラジオボタンのvalueと表示テキストを分けると、要約に安定したラベルを使用できます。 状態は装飾用クラスだけでなく、checked属性とdisabled属性で表します。 関連する仕様を確認する
Visa Product デザインシステム Nova CSSがコントロールをスタイルし、選択状態は標準のHTMLが管理します グループ化と確認のロジックはスタイルシートの外に置きます このサンプルでは、実際のラジオボタンにNovaのv-radioクラスを使用しています。同じname属性を設定した選択肢は排他的に選択され、別のname属性を設定した頻度グループとは分離されます。fieldsetとlegendでグループの文脈を示し、関連付けたlabelによって選択肢のテキスト全体をコントロールのアクセシブルネームにします。
CSSパッケージは、選択肢の選択、アプリケーション内での状態の永続化、レビュー記録の作成を行いません。付属のスクリプトは2つのネイティブグループを読み取り、ローカルの概要を作成します。設定を変更すると、それまでの値が現在の設定を表さなくなるため、概要はクリアされます。
実装には構造用スタイルシートとVisaテーマの両方を含めてください。代替ヘッダーではv-alternateを使用し、フォームはデフォルトのカラーコンテキストのままにします。背景だけを変更して前景色の役割を未解決のままにする方法で、ヘッダーを模倣しないでください。
関連する仕様を確認する
Visa Product デザインシステム あらゆる画面幅で一貫した読み順 タスクの順序を変えずに概要を移動する 広い画面では、選択グループと現在の選択内容の概要を横並びに表示します。小さい画面では、概要をフォームの後に配置します。元のドキュメントのイラストはタスクに関する情報を増やさないため非表示にしますが、ラベル、説明、操作はすべて残します。
CSSライブラリは、最新の主要ブラウザーをサポートしています。公式の開発ガイドではレガシーブラウザーとの互換性を保証していません。したがって、本番環境でサポートする実際のバージョンをチームでテストし、最新ブラウザーでプレビューが正常に表示されたことを、すべての環境での動作保証と見なさないでください。
バージョンを固定した構造用CSSとVisaテーマを読み込み、その後にアプリケーションのレイアウトスタイルを追加します。 「アクセシブルなHTML」と「四半期ごと」を選択し、設定を確認して、どちらも概要に表示されることを確かめます。 どちらかの選択を変更し、確認メッセージがリセットされることを確かめてから、リセットと狭い画面幅での表示をテストします。 関連する仕様を確認する
Visa Product デザインシステムのコンポーネント例 Nova CSSの設定画面を構成する 2つのネイティブラジオグループを操作すると、概要が即時に更新されます。メイン操作を実行すると、ローカルに明示的なレビュー状態が作成されます。
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にアクセスできるブラウザーで開いてください。このガイドに埋め込まれたプレビューでは、スタイルをローカルに保持しています。 構造とテーマをまとめて読み込む バンドルを使うアプリケーションでは、アプリケーションのスタイルシートより前に、両方のレイヤーを一度ずつインポートします。
JavaScript コードをコピー
import '@visa/nova-styles/styles.css';
import '@visa/nova-styles/themes/visa/index.css';
import './application.css'; コードリファレンス
テーマファイルがないと、構造用クラスは適用されても、意図したVisaトークンが適用されないことがあります。 04
Visa Product デザインシステムエージェントのセットアップ 実装の出発点 HTML一式では、確認済みのstyles.cssとthemes/visa/index.cssのパスを使用します。両方が必要です。iframeではこれらのスタイルをローカルに埋め込んでいます。公式のリモートfont-face宣言は省略しています。
シェル / 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 あなたのプロジェクト向けプロンプト AI エージェント用プロンプト プロンプトをコピー
バージョンを固定した構造用スタイルとテーマCSSを使い、Visa Novaの明細書設定例を作成してください。ネイティブラジオグループ、明確なlegend、関連付けられたlabelを維持します。デフォルトと代替のテーマロールを分け、rem値を読む際はルートサイズが14pxであることを考慮してください。レビュー状態はローカルに保ち、設定変更後は古い確認状態をクリアし、小さい画面では概要を縦に並べます。 05
Visa Product デザインシステム参照元と対象範囲 ネイティブのNova CSSを使った独立したOpenDesignガイドです。この架空の設定タスクはアカウントデータを使用せず、金融サービスにも変更を加えません。プレビューではシステムフォントへの置き換えを明示しています。
