Дизайн-система 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 — для цветов по умолчанию и альтернативной палитры предусмотрены соответствующие цвета текста

Не переносите цвет заливки без роли текста

Активный цвет темы по умолчанию/light — #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

Стилизованный круг — это не группа радиокнопок

В публичных метаданных v-radio применяется к настоящему элементу input type="radio" и сочетается с label. В предварительном просмотре сохранена эта нативная структура, а видимое описание каждого варианта помещено внутрь его label. Стрелки на клавиатуре позволяют перемещаться внутри группы, а состояние выбора доступно браузеру и вспомогательным технологиям.

Для каждого вопроса используются fieldset и legend. Описания вариантов поясняют их особенности: PDF — это образец для скачивания, а HTML описан как формат с изменяемой компоновкой. Содержание о продукте создано специально для примера; структура элементов управления и классы взяты из нативной библиотеки.

• Используйте одно значение name для двух вариантов формата, а другое — для частоты.
• Храните значение радиокнопки отдельно от видимого текста, чтобы в сводке можно было использовать стабильную подпись.
• Задавайте состояние атрибутами checked и disabled, а не только декоративным классом.

Прочитать вспомогательную спецификацию

Дизайн-система Visa Product Nova CSS оформляет элементы управления; выбор задаёт нативный HTML

Логику группировки и проверки оставьте за пределами таблицы стилей

В примере класс v-radio из Nova применяется к настоящим элементам radio. Одинаковые атрибуты name делают варианты формата взаимоисключающими, а для группы частоты используется другое значение name. Fieldset и legend задают контекст группы; связанный с элементом label включает полный текст варианта в доступное имя элемента управления.

Пакет CSS не выбирает вариант, не управляет сохранением данных приложения и не создаёт запись о проверке. Приведённый скрипт считывает данные из двух нативных групп и формирует локальную сводку. При изменении выбора сводка очищается, поскольку прежние значения уже не отражают текущие предпочтения.

В реализации нужны и структурная таблица стилей, и тема Visa. Для альтернативного заголовка используется v-alternate, а форма остаётся в контексте цветов по умолчанию. Не пытайтесь имитировать заголовок, изменив только фон и не определив роли цветов переднего плана.

Прочитать вспомогательную спецификацию

Дизайн-система Visa Product Единый порядок чтения при любой ширине экрана

Перемещайте сводку, не меняя последовательность действий

На широких экранах группы вариантов и сводка текущего выбора расположены рядом. На узких экранах сводка следует за формой. Исходная иллюстрация документа скрывается, поскольку не помогает выполнить задачу; все подписи, пояснения и действия остаются на месте.

Библиотека CSS поддерживает современные браузеры с постоянными обновлениями. В официальной документации по разработке не обещана совместимость с устаревшими браузерами, поэтому перед выпуском команда должна проверить используемые версии, а не считать, что успешный просмотр в современном браузере гарантирует поддержку везде.

1. Подключите закреплённые версии структурного CSS и темы Visa, затем добавьте стили компоновки приложения.
2. Выберите Accessible HTML и Quarterly, проверьте предпочтение и убедитесь, что оба значения отображаются в сводке.
3. Измените любой вариант, убедитесь, что подтверждение проверки сбросилось, затем проверьте кнопку Reset и узкую компоновку.

Прочитать вспомогательную спецификацию

Примеры компонентов дизайн-системы дизайн-система Visa Product

<!-- 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>

import '@visa/nova-styles/styles.css';
import '@visa/nova-styles/themes/visa/index.css';
import './application.css';