Use Visa’s Nova CSS to build a clear statement-format preference with native radio controls, an alternate-color header and a review summary. Inspect the exact 1.6.5 theme values, scalable spacing and complete stylesheet integration.
Native @visa/nova-styles 1.6.5 CSS and Visa theme embedded locally; remote font-face rules removed and system fonts used. Original application layout and local script. · Implementation reference
02
Visa Product Design System Design Reference
Published @visa/nova-styles 1.6.5 styles, Visa theme and example metadata. Default/light values are separated from alternate and dark overrides. The preview embeds official CSS locally and removes remote font-face rules, using a system fallback.
Visa Product Design System A preference task with a readable review state
Make each question independent
The example asks for statement format and summary frequency. Those are separate radio groups: changing the frequency does not deselect the format. The summary repeats both choices before the primary action, so the user can inspect the result without interpreting an icon or a hidden default.
Review preference records a local confirmation only. The page does not request a card number, retrieve an account, generate a statement or change a financial-service setting. This keeps the specimen focused on the design system’s selection and feedback behavior.
Visa Product Design System Nova styles and the Visa theme are separate imports
Structure is not the entire theme
The official installation shows styles.css followed by themes/visa/index.css. The first provides the component and utility rules; the second supplies the Visa theme. Loading only one is an incomplete integration. The standalone example and import snippet both preserve that order.
The checked package is version 1.6.5. The specimen embeds its CSS locally so it does not depend on a third-party stylesheet request at viewing time. Remote font-face declarations are removed and the application explicitly uses a system fallback; this is native Nova CSS with a disclosed font substitution, not a claim of exact proprietary-font parity.
Visa Product Design System Default and alternate palettes carry paired foregrounds
Do not transplant a fill without its text role
The default/light active color is #1434cb, with #173be8 on hover and #0f2595 when pressed. Its text-on-active role is white. The alternate theme context changes the role mapping, which is why the specimen uses v-alternate on the header surface rather than overriding only its background.
Accent #fcc015 is not a universal button fill. Theme context decides how the accent and active roles are used. The reference table describes the default palette; later dark and alternate definitions in the same stylesheet are not merged into a single misleading set of values.
Visa Product Design System Read the rem scale against the theme root
A 14-pixel theme root changes familiar rem assumptions
The Visa theme defines a 14-pixel font root. Its headline-1 value of approximately 2.285714rem therefore corresponds to 32 pixels at that root, not the value obtained by assuming a 16-pixel root. Body-1 is approximately 1.142857rem, while body-2 is 1rem.
Scalable size tokens express a pixel quantity multiplied by the theme scale factor. Responsive contexts can introduce a second factor. Keep the expression when adapting spacing to an application; copying only the default computed number loses that relationship. The specimen uses official gap utilities in the frequency controls and original application dimensions for the overall split layout.
Visa Product Design System Native radio semantics beneath Nova presentation
A styled circle is not a radio group
The public metadata places v-radio on an actual input type="radio" and pairs it with a label. The preview keeps that native structure and wraps each option’s visible description in its label. Keyboard arrows can move within a group, and the checked state remains available to the browser and assistive technology.
A fieldset and legend name each question. The format options explain their consequences: a PDF is a downloadable sample, while HTML is described as reflowable. The exact product content is original; the control anatomy and classes come from the native library.
Use one name for the two format options and another for frequency.
Keep the radio value distinct from the visible prose so the summary can use a stable label.
Use checked and disabled attributes for state rather than a decorative class alone.
Visa Product Design System Nova CSS styles controls; native HTML owns the choice
Keep grouping and review logic outside the stylesheet
The specimen uses Nova’s v-radio class on real radio inputs. Shared name attributes make format choices exclusive, while a different name separates the frequency group. Fieldset and legend provide the group context; an associated label makes the complete option text part of the control’s accessible name.
The CSS package does not choose an option, manage application persistence or create a review record. The provided script reads the two native groups and builds a local summary. An edit clears that summary because the previous values no longer describe the current preference.
Keep both the structural stylesheet and the Visa theme in the implementation. The alternate header uses v-alternate, while the form remains in the default color context; do not imitate the header by changing only its background and leaving foreground roles unresolved.
Visa Product Design System One reading order at every width
Move the summary without changing the task sequence
On wide screens the choice groups and current-selection summary appear side by side. At small widths the summary follows the form. The original document illustration disappears because it contributes no task information, while all labels, explanations and actions remain.
The CSS library supports modern evergreen browsers. The official development guidance does not promise legacy-browser compatibility, so a production team should test its actual supported versions rather than treating a successful modern preview as universal support.
Load the pinned structural CSS and Visa theme, then add application layout styles.
Select Accessible HTML and Quarterly, review the preference and verify that both appear in the summary.
Change either choice, confirm that review feedback resets, then test Reset and the narrow layout.
CSS provides the component presentation; the small script supplies application behavior.
Changing a preference clears its previous review status.
The alternate header is a real theme context, not a hand-painted imitation of the palette.
Save the complete HTML as index.html and open it in a browser with access to the pinned public CSS URLs. The embedded preview in this guide keeps those styles local.
Load structure and theme together
In a bundled application, import both layers once before the application stylesheet.
A missing theme file can leave structural classes present without the intended Visa tokens.
04
Visa Product Design System Agent Setup
Implementation Starting Point
The complete HTML uses the verified styles.css and themes/visa/index.css paths. Both are required. The iframe has these styles embedded locally; official remote font-face declarations are omitted there.
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
A Prompt for Your Project
Agent Prompt
Build the Visa Nova statement-preference example with the pinned structural and theme CSS. Preserve native radio groups, clear legends and associated labels. Separate default from alternate theme roles, and respect the 14px root when reading rem values. Keep the review local, clear stale confirmation after changes and stack the summary on small screens.
05
Visa Product Design System Sources and Scope
Independent OpenDesign guide with native Nova CSS. This fictional preference task does not use account data or change any financial service. The preview discloses its system-font substitution.
