Design de produits d’entreprise · Nouvelle ressource
Système de design Visa Product.
Utilisez Visa Nova CSS pour créer un choix clair de format de relevé, avec des boutons radio natifs, un en-tête dans une couleur différente et un récapitulatif de révision. Examinez les valeurs exactes du thème 1.6.5, l’espacement évolutif et l’intégration complète de la feuille de style.
@visa/nova-styles 1.6.5 CSS natif et thème Visa intégrés localement ; règles font-face distantes supprimées et polices système utilisées. Mise en page et script d’application d’origine. · Référence de mise en œuvre
02
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.
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.
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.
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.
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.
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.
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.
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.
Chargez la version épinglée de CSS structurel et le thème Visa, puis ajoutez les styles de mise en page de l’application.
Sélectionnez Accessible HTML et Trimestriel, vérifiez la préférence et assurez-vous que les deux choix apparaissent dans le récapitulatif.
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.
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.
En l’absence du fichier de thème, les classes structurelles peuvent être présentes sans les jetons Visa attendus.
04
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.
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
Un prompt pour votre projet
Prompt pour l’agent IA
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.
05
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.
