# Système de design Visa Product ## Aperçu de l’interface système de design Visa Product Choisissez un format et une fréquence, vérifiez la préférence locale, puis réinitialisez-la. ## Référence de conception système de design Visa Product Styles publiés de @visa/nova-styles 1.6.5, thème Visa et métadonnées de l’exemple. Les valeurs par défaut/du thème clair sont distinguées des surcharges alternatives et du thème sombre. L’aperçu intègre localement CSS officiel et supprime les règles font-face distantes, en utilisant une police système de repli. ### Palette par défaut | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --palette-default-active | #1434cb | Référence au thème Visa 1.6.5 par défaut/clair. | | --palette-default-active-hover | #173be8 | Référence au thème Visa 1.6.5 par défaut/clair. | | --palette-default-active-pressed | #0f2595 | Référence au thème Visa 1.6.5 par défaut/clair. | | --palette-default-active-accent | #fcc015 | Référence au thème Visa 1.6.5 par défaut/clair. | | --palette-default-surface-1 | #ffffff | Référence au thème Visa 1.6.5 par défaut/clair. | | --palette-default-surface-2 | #f5f5f5 | Référence au thème Visa 1.6.5 par défaut/clair. | | --palette-default-surface-3 | #f0f0f0 | Référence au thème Visa 1.6.5 par défaut/clair. | | --palette-default-text | #000000 | Référence au thème Visa 1.6.5 par défaut/clair. | | --palette-default-text-subtle | #4a4a4a | Référence au thème Visa 1.6.5 par défaut/clair. | | --palette-default-text-on-active | #ffffff | Référence au thème Visa 1.6.5 par défaut/clair. | | --palette-default-border | rgba(0, 0, 0, 0.1) | Référence au thème Visa 1.6.5 par défaut/clair. | ### Taille et typographie du thème | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --theme-font-size | 14px | Référence au thème Visa 1.6.5 par défaut/clair. | | --theme-border-radius | 6px | Référence au thème Visa 1.6.5 par défaut/clair. | | --typography-headline-1-font-size | 2.2857142857rem | Référence au thème Visa 1.6.5 par défaut/clair. | | --typography-headline-2-font-size | 1.7857142857rem | Référence au thème Visa 1.6.5 par défaut/clair. | | --typography-headline-3-font-size | 1.4285714286rem | Référence au thème Visa 1.6.5 par défaut/clair. | | --typography-body-1-font-size | 1.1428571429rem | Référence au thème Visa 1.6.5 par défaut/clair. | | --typography-body-2-font-size | 1rem | Référence au thème Visa 1.6.5 par défaut/clair. | | --typography-body-3-font-size | 0.8571428571rem | Référence au thème Visa 1.6.5 par défaut/clair. | ### Dimensions adaptatives | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --size-scalable-4 | calc(4px * var(--theme-scale-factor)) | Dimension adaptative de base ; les contextes responsifs peuvent appliquer un facteur supplémentaire. | | --size-scalable-8 | calc(8px * var(--theme-scale-factor)) | Dimension adaptative de base ; les contextes responsifs peuvent appliquer un facteur supplémentaire. | | --size-scalable-12 | calc(12px * var(--theme-scale-factor)) | Dimension adaptative de base ; les contextes responsifs peuvent appliquer un facteur supplémentaire. | | --size-scalable-16 | calc(16px * var(--theme-scale-factor)) | Dimension adaptative de base ; les contextes responsifs peuvent appliquer un facteur supplémentaire. | | --size-scalable-24 | calc(24px * var(--theme-scale-factor)) | Dimension adaptative de base ; les contextes responsifs peuvent appliquer un facteur supplémentaire. | | --size-scalable-32 | calc(32px * var(--theme-scale-factor)) | Dimension adaptative de base ; les contextes responsifs peuvent appliquer un facteur supplémentaire. | | --size-scalable-40 | calc(40px * var(--theme-scale-factor)) | Dimension adaptative de base ; les contextes responsifs peuvent appliquer un facteur supplémentaire. | ### Classes utilitaires et de composants publiées | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | v-flex | Flex layout | Élément parent requis pour les exemples d’espacement. | | v-gap-20 | Gap utility | Présenté dans l’exemple officiel d’espacement par défaut. | | v-col-gap-20 | Column gap utility | Sépare les colonnes. | | v-button | Primary button | Utilisez un élément de bouton natif. | | v-button-secondary | Secondary modifier | Action de réinitialisation complémentaire dans l’exemple. | | v-radio | Native radio style | Conservez le même nom et des valeurs distinctes. | | v-label | Label style | Associez une étiquette ou utilisez une étiquette englobante. | | v-alternate | Alternate palette context | Affiché sur une surface ou un bouton. | | v-typography-headline-1 | Headline visual role | Appliquez-le au h1 sémantique de cette page. | ### Contrat de composition | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Radio group | One shared name per question | Le format et la fréquence constituent des groupes indépendants. | | fieldset / legend | Group question | Précisez la question à laquelle répondent les options. | | checked | Native selected state | N’utilisez pas CSS seul pour la sélection. | | disabled | Native unavailable state | Conservez une explication visible si l’option n’est pas disponible. | | aria-describedby | Optional supporting description | Associez le texte supplémentaire lorsqu’il ne fait pas partie de l’étiquette. | ## Guide complet système de design Visa Product Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Système de design Visa Product Une tâche de préférence avec un récapitulatif facile à lire ### Distinguez chaque question > L’exemple demande le format du relevé et la fréquence des récapitulatifs. Ces choix sont répartis en deux groupes de boutons radio distincts : modifier la fréquence ne désélectionne pas le format. Le récapitulatif répète les deux choix avant l’action principale, afin que l’utilisateur puisse vérifier le résultat sans interpréter d’icône ni deviner une valeur par défaut masquée. La vérification de la préférence enregistre uniquement une confirmation locale. La page ne demande pas de numéro de carte, n’accède à aucun compte, ne génère aucun relevé et ne modifie aucun paramètre de service financier. L’exemple reste ainsi centré sur le comportement de sélection et de retour d’information du design system. Consultez la spécification associée ## Système de design Visa Product Les styles Nova et le thème Visa sont importés séparément ### La structure ne constitue pas à elle seule le thème complet L’installation officielle indique d’importer styles.css, puis themes/visa/index.css. Le premier fichier fournit les règles des composants et des utilitaires ; le second apporte le thème Visa. N’en charger qu’un seul ne constitue pas une intégration complète. L’exemple autonome et l’extrait d’import respectent tous deux cet ordre. La version vérifiée du package est la 1.6.5. L’exemple intègre son CSS localement afin de ne pas dépendre d’une requête de feuille de style tierce à l’affichage. Les déclarations font-face distantes sont supprimées et l’application utilise explicitement une police système de remplacement ; il s’agit du Nova CSS natif avec une substitution de police signalée, et non d’une prétention à reproduire exactement une police propriétaire. Consultez la spécification associée ## Système de design Visa Product Les palettes par défaut et alternatives associent chacune des couleurs de premier plan ### Ne transposez pas une couleur de fond sans son rôle de texte La couleur active par défaut/en thème clair est #1434cb, avec #173be8 au survol et #0f2595 à l’activation. Le rôle de texte sur la couleur active est assuré par le blanc. Le contexte du thème alternatif modifie la correspondance des rôles ; c’est pourquoi l’exemple applique v-alternate à la surface de l’en-tête au lieu de remplacer uniquement son arrière-plan. L’accent #fcc015 ne constitue pas une couleur de fond universelle pour les boutons. Le contexte du thème détermine l’utilisation des rôles d’accent et d’activation. Le tableau de référence décrit la palette par défaut ; les définitions des thèmes sombre et alternatif qui suivent dans la même feuille de style ne sont pas fusionnées en un ensemble de valeurs trompeur. Consultez la spécification associée ## Système de design Visa Product Interprétez l’échelle rem en fonction de la racine du thème ### Une racine de thème de 14 pixels modifie les repères habituels pour les unités rem Le thème Visa définit une racine typographique de 14 pixels. La valeur headline-1 d’environ 2.285714rem correspond donc à 32 pixels avec cette racine, et non à la valeur obtenue en supposant une racine de 16 pixels. body-1 vaut environ 1.142857rem, tandis que body-2 vaut 1rem. Les jetons de taille évolutive expriment une quantité en pixels multipliée par le facteur d’échelle du thème. Les contextes adaptatifs peuvent introduire un second facteur. Conservez l’expression lorsque vous adaptez l’espacement à une application : ne copier que la valeur calculée par défaut fait perdre cette relation. L’exemple utilise les utilitaires d’espacement officiels dans les commandes de fréquence et les dimensions propres à l’application pour la disposition générale en deux parties. Consultez la spécification associée ## Système de design Visa Product Sémantique native des boutons radio sous la présentation Nova ### Un cercle stylisé n’est pas un groupe de boutons radio Les métadonnées publiques appliquent v-radio à un véritable input type="radio" et l’associent à une étiquette. L’aperçu conserve cette structure native et inclut la description visible de chaque option dans son étiquette. Les flèches du clavier permettent de se déplacer dans un groupe, et l’état sélectionné reste accessible au navigateur et aux technologies d’assistance. Un fieldset et un legend donnent un intitulé à chaque question. Les options de format en expliquent les conséquences : un PDF est un exemple téléchargeable, tandis que HTML est présenté comme un format redistribuable. Le contenu exact du produit est original ; la structure et les classes du contrôle proviennent de la bibliothèque native. - Utilisez un nom pour les deux options de format et un autre pour la fréquence. - Distinguez la valeur du bouton radio du texte visible afin que le récapitulatif puisse utiliser un libellé stable. - Utilisez les attributs checked et disabled pour définir l’état, plutôt qu’une simple classe décorative. Consultez la spécification associée ## Système de design Visa Product Nova CSS met en forme les contrôles ; HTML natif gère le choix ### Gérez le regroupement et la logique de révision en dehors de la feuille de style L’exemple applique la classe v-radio de Nova à de véritables champs radio. Des attributs name identiques rendent les choix de format exclusifs, tandis qu’un nom différent distingue le groupe de fréquence. Fieldset et legend précisent le contexte du groupe ; une étiquette associée inclut tout le texte de l’option dans le nom accessible du contrôle. Le package CSS ne sélectionne aucune option, ne gère pas la persistance de l’application et ne crée pas de compte rendu de révision. Le script fourni lit les deux groupes natifs et génère un récapitulatif local. Toute modification efface ce récapitulatif, car les valeurs précédentes ne correspondent alors plus à la préférence actuelle. Conservez dans l’implémentation la feuille de style structurelle et le thème Visa. L’en-tête alternatif utilise v-alternate, tandis que le formulaire reste dans le contexte de couleur par défaut ; ne cherchez pas à reproduire l’en-tête en modifiant uniquement son arrière-plan et en laissant les rôles de premier plan indéfinis. Consultez la spécification associée ## Système de design Visa Product Un ordre de lecture unique, quelle que soit la largeur ### Déplacez le récapitulatif sans modifier l’ordre des étapes Sur les grands écrans, les groupes de choix et le récapitulatif de la sélection actuelle sont côte à côte. Sur les petits écrans, le récapitulatif suit le formulaire. L’illustration originale du document disparaît, car elle n’apporte aucune information utile à la tâche ; tous les libellés, explications et actions sont conservés. La bibliothèque CSS prend en charge les navigateurs modernes toujours à jour. La documentation officielle de développement ne garantit pas la compatibilité avec les anciens navigateurs ; une équipe de production doit donc tester les versions réellement prises en charge, plutôt que de considérer qu’un aperçu moderne fonctionnel garantit une compatibilité universelle. 1. Chargez la version épinglée de CSS structurel et le thème Visa, puis ajoutez les styles de mise en page de l’application. 2. Sélectionnez Accessible HTML et Trimestriel, vérifiez la préférence et assurez-vous que les deux choix apparaissent dans le récapitulatif. 3. Modifiez l’un ou l’autre choix, vérifiez que le retour de révision est réinitialisé, puis testez Réinitialiser et la mise en page étroite. Consultez la spécification associée ## Système de design Visa Product Exemples de composants du système de design ### Composition complète de préférences avec Nova CSS Deux groupes natifs de boutons radio mettent à jour immédiatement un récapitulatif ; l’action principale crée un état de révision local explicite. ``` Statement preference

ACCOUNT PREFERENCES / SAMPLE

Choose how you read
your statement.

One clear choice, with the details visible before you confirm.

Statement format

This page stores a demonstration preference only.

Summary frequency
``` Référence du code - CSS fournit la présentation des composants ; un petit script assure le comportement de l’application. - La modification d’une préférence efface son état de révision précédent. - L’en-tête alternatif utilise un véritable contexte de thème, et non une imitation de la palette peinte à la main. - Enregistrez le HTML complet sous le nom index.html et ouvrez-le dans un navigateur pouvant accéder aux URL publiques épinglées de CSS. L’aperçu intégré à ce guide conserve ces styles localement. ### Chargez ensemble la structure et le thème Dans une application assemblée, importez une seule fois les deux couches avant la feuille de style de l’application. ``` import '@visa/nova-styles/styles.css'; import '@visa/nova-styles/themes/visa/index.css'; import './application.css'; ``` Référence du code - En l’absence du fichier de thème, les classes structurelles peuvent être présentes sans les jetons Visa attendus. ## Système de design Visa Product Configuration de l’agent ### Point de départ de l’implémentation Le HTML complet utilise les chemins vérifiés styles.css et themes/visa/index.css. Les deux sont nécessaires. Ces styles sont intégrés localement dans l’iframe ; les déclarations officielles font-face distantes en sont exclues. ``` 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 ``` ### Un prompt pour votre projet ``` Créez l’exemple de préférence de relevé Visa Nova à l’aide de la structure et du thème CSS verrouillés. Conservez les groupes de boutons radio natifs, des légendes claires et des libellés associés. Distinguez les rôles du thème par défaut de ceux du thème alternatif et tenez compte de la racine de 14 px lors de la lecture des valeurs en rem. Gardez l’examen local, effacez les confirmations obsolètes après toute modification et empilez le récapitulatif sur les petits écrans. ``` ## Sources et périmètre système de design Visa Product Guide indépendant OpenDesign utilisant les éléments natifs de Nova CSS. Cette tâche fictive de préférence n’utilise aucune donnée de compte et ne modifie aucun service financier. L’aperçu signale le remplacement de la police par celle du système. - Dépôt Nova Instructions officielles d’installation et de chargement du thème. - Styles 1.6.5 Règles des composants natifs et dimensions évolutives. - Thème Visa 1.6.5 Palette du thème et typographie exactes. - Métadonnées de l’exemple Structure de classe HTML vérifiée. - CSS Premiers pas Guide d’intégration public. - Prise en charge des navigateurs Limites de prise en charge des versions pérennes. ## Ressources associées système de design Visa Product ### Volvo Cars Web système de design Examinez la base web de Volvo Cars, axée sur HTML, ses véritables tokens en mode clair et le style natif de ses cartes sélectionnables dans un exemple complet de préparation de bagages, avec des choix indépendants, le changement de thème et la réinitialisation. ### Wonderflow Wanda Utilisez les rôles de thème et la syntaxe des jetons réels de Wanda dans un espace de travail complet dédié à la consultation des retours, avec filtres par sujet, contexte justificatif dépliable et carnet local persistant. ### Workday Canvas Élaborez un parcours d’apprentissage local avec le composant composé FormField de Canvas Kit, TextInput contrôlé et PrimaryButton, en distinguant les sources actuelles des jetons sémantiques des anciens exemples de migration space.x4. - [Référence de mise en œuvre](https://github.com/visa/nova-styles) - [Source](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css) - [Source](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css) - [Source](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [Source](https://design.visa.com/components/radio/) - [Consultez la spécification associée](https://design.visa.com/components/radio/) - [Consultez la spécification associée](https://github.com/visa/nova-styles) - [Consultez la spécification associée](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css) - [Consultez la spécification associée](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css) - [Consultez la spécification associée](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [Consultez la spécification associée](https://design.visa.com/developing/) - [Référence du code](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [Référence du code](https://github.com/visa/nova-styles) - [Dépôt Nova Instructions officielles d’installation et de chargement du thème.](https://github.com/visa/nova-styles) - [Styles 1.6.5 Règles des composants natifs et dimensions évolutives.](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css) - [Thème Visa 1.6.5 Palette du thème et typographie exactes.](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css) - [Métadonnées de l’exemple Structure de classe HTML vérifiée.](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [CSS Premiers pas Guide d’intégration public.](https://design.visa.com/developing/styles-css/) - [Prise en charge des navigateurs Limites de prise en charge des versions pérennes.](https://design.visa.com/developing/)