Système de design VA.

Système de design VA Un système de services pour les anciens combattants

Les fondations et les composants sont des packages distincts

Le système VA associe des modèles de service, des recommandations éditoriales, des jetons, des utilitaires CSS et des composants Web. L’installation documentée utilise un package CSS-library pour les fondations globales et un package component-library pour les éléments interactifs. Cette référence associe component-library 56.14.0 à css-library 0.36.1 ; ces packages ont des numéros de version indépendants.

L’exemple présente une explication fictive du traitement des demandes de dossiers. Il montre comment une liste de processus communique la progression, sans prétendre qu’une demande a été déposée ni qu’une personne est admissible à une prestation. Il ne comporte aucun logo VA, bandeau d’identité gouvernementale, dossier personnel ou statut de dossier réel. Les textes destinés à un service en production doivent être vérifiés par le programme VA responsable.

Consultez la spécification associée

Rôles typographiques sémantiques de système de design VA

Les familles du corps de texte et des titres sont volontairement différentes

La famille sémantique des titres est Bitter, avec Georgia et d’autres polices serif en remplacement. La pile du corps de texte commence par Source Sans Pro Web et Source Sans Pro, puis utilise les polices sans-serif de la plateforme comme solutions de repli. Le rôle par défaut du corps de texte est de 1.06rem, soit environ 17px à la racine de 16px ; les titres utilisent 40px au niveau 1, 32px au niveau 2, 20px au niveau 3 et environ 17px au niveau 4.

Utilisez --vads-font-size-body-default plutôt que l’ancien nom source-sans-normalized. Le jeton sémantique indique le rôle, tandis que l’ancien nom de normalisation révèle un détail d’implémentation de la police. L’aperçu utilise explicitement Arial pour le corps du texte et Georgia pour les titres. Le composant de processus natif CSS conserve sa structure et ses tailles internes ; la solution de repli ne prétend pas reproduire exactement les métriques de Source Sans et Bitter.

Consultez la spécification associée

La hauteur de ligne dépend du rôle

La hauteur de ligne par défaut est de 1.5 pour les paragraphes et de 1.2 pour les titres. Le texte d’introduction a un rôle de 1.75 ; le jeton de hauteur de ligne avec empattements est de 1.9 et convient au texte courant avec empattements, pas à tous les titres de ce type. Appliquer 1.9 à un titre de processus compact reviendrait à confondre deux rôles distincts. Dans cet exemple, les éléments du processus utilisent le niveau 3, sous le titre de section de niveau 2 de la page.

Consultez la spécification associée

Système de design VA Espacement sémantique et mise en page

Distinguez une pile ordinaire d’un formulaire

L’espacement vertical par défaut d’une pile générale est de 1rem/16px. Celui d’une pile de formulaire est de 2rem/32px. Cette différence est utile : deux courtes explications nécessitent un rythme différent de celui de questions distinctes avec libellés, indications, commandes et messages d’erreur. Les marges internes s, m et l correspondent respectivement à 16, 24 et 32px.

La famille d’espacements primitifs comprend 4, 8, 12, 16, 20 et 24px, puis des valeurs supérieures par incréments de huit pixels, ainsi que des valeurs spéciales d’un et de deux pixels. Privilégiez les noms d’espacement sémantiques lorsque leur fonction correspond à la mise en page. L’enveloppe extérieure de 52rem de l’exemple relève d’un choix propre à l’application, tandis que la marge interne de 24px et la séparation de section de 32px utilisent des valeurs de l’échelle publiée. Cette enveloppe ne s’impose pas à tous les modèles de page VA.

Consultez la spécification associée

Système de design VA Couleurs et jetons responsifs

Utilisez un rôle plutôt qu’un alias historique

Le jeton de texte actuel est --vads-color-text (#1b1b1b). --vads-color-link est #005ea2 et le rôle actif des liens est #0b4778 ; ces valeurs ne correspondent pas à toutes les teintes plus foncées de la palette principale. Le rôle d’erreur est #d54309. La famille secondaire rouge héritée est obsolète pour cet usage ; tout nouveau traitement de validation doit donc faire référence à la sémantique d’erreur plutôt qu’à la couleur secondaire.

Les tableaux de valeurs primitives et sémantiques sont générés à partir d’une version nommée de CSS-library. L’exemple charge ces variables réelles au lieu de recopier une ancienne palette USWDS et de la présenter comme celle de VA. Ses composants natifs peuvent également intégrer leurs propres valeurs compilées en plus de ces variables ; vérifiez les deux couches lors d’une mise à niveau.

Consultez la spécification associée

Les points de rupture VA ne suivent pas une échelle générique de framework

Consultez la spécification associée

Système de design VA Anatomie d’une liste de processus

De trois à dix étapes significatives

La liste de processus VA est également décrite comme une carte de métro. Elle présente un processus long ou indique où en est une personne dans ce processus. Les recommandations préconisent de trois à dix étapes et une seule liste de ce type par page. Chaque élément doit comporter un titre concis commençant par un verbe et un texte explicatif visible ; il ne s’agit pas d’ajouter un numéro décoratif à côté d’un titre sans contenu.

Les balises natives sont va-process-list et va-process-list-item. Un élément accepte header et level, ainsi que active, pending, checkmark et status-text. Le module de composant publié donne la priorité à checkmark, puis à active, puis à pending. Évitez les combinaisons contradictoires en désactivant les autres états booléens lorsque vous en définissez un. Un texte d’état explicite accompagne la mise en forme de l’état et permet de comprendre l’étape sans se fier à la couleur.

<va-process-list>
  <va-process-list-item header="Prepare your request" level="3"
      checkmark="true" status-text="Complete">
    <p>Identify the record you need and the office that holds it.</p>
    <va-details label="What information helps identify a record?">
      <p>A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.</p>
    </va-details>
  </va-process-list-item>
  <va-process-list-item header="Send the request" level="3"
      active="true" status-text="Active">
    <p>In this example, a request is ready for the appropriate service. No request is sent from this page.</p>
  </va-process-list-item>
  <va-process-list-item header="Read the response" level="3"
      pending="true" status-text="Pending">
    <p>A real service should explain where a response appears and how to ask about missing information.</p>
  </va-process-list-item>
</va-process-list>

Référence du code

Consultez la spécification associée

Système de design VA Utilisez Details pour compléter une étape visible

Ne transformez pas chaque étape en accordéon

Les recommandations relatives au processus déconseillent d’associer un en-tête d’accordéon à une étape. Masquer toutes les explications va à l’encontre de l’objectif, qui est de rendre le processus visible. Il est toutefois possible d’ajouter un composant Details à une étape pour y présenter des informations complémentaires. L’exemple laisse visible l’explication sur l’identification d’un dossier et place un complément facultatif dans va-details.

L’attribut label du composant devient la question visible de la section dépliable. Une question courte est plus utile que « Plus d’informations », car elle indique aux lecteurs si le contenu masqué les concerne. Dans cet exemple, la section Details explique ce qui peut aider à identifier un dossier et précise que son contenu est fourni à titre d’illustration, et non comme une consigne pour une procédure VA particulière.

• Gardez un résumé de chaque étape visible, y compris des étapes marquées « En attente ».
• Utilisez une section Details uniquement pour une explication secondaire au sein d’une étape.
• Laissez la prochaine véritable action du service en dehors du titre de l’étape, au lieu de transformer celui-ci en commande.

Consultez la spécification associée

Système de design VA Démonstration des états et véracité

Utilisez un sélecteur de scénario, pas une progression fictive

Dans l’aperçu, le sélecteur d’étape d’exemple fait passer l’exemple de composant entre la préparation, l’envoi et l’examen de la réponse. Il ne fait pas avancer une véritable demande, n’estime pas un délai de traitement officiel et ne déduit pas qu’une demande est terminée parce qu’une personne a cliqué sur un bouton. Un service en production doit associer les états visuels aux états vérifiés du backend et expliquer séparément la signification de tout délai.

Le changement de sélection marque les étapes précédentes comme terminées, l’étape sélectionnée comme active et les étapes suivantes comme en attente. Une phrase d’état dynamique annonce le changement d’état de l’exemple. Les trois explications restent visibles et l’état facultatif de Details est conservé. La réinitialisation ramène à la première étape illustrative et referme la section complémentaire.

Consultez la spécification associée

Système de design VA Charger les Web Components natifs

Enregistrez-les une seule fois et préservez les dépendances

Le parcours de bundling documenté importe main.css et appelle defineCustomElements depuis le package component-library. Les polices proviennent de CSS-library et sont fournies séparément. Les composants qui utilisent le sprite d’icônes ont besoin d’un chemin vers le sprite sur la même origine, /img/sprite.svg par défaut. Ce sont de véritables exigences d’intégration, et non des finitions facultatives à découvrir après le déploiement.

Cet exemple autonome utilise le point d’entrée ESM officiel pour navigateur de web-components 24.14.0, la dépendance déclarée par component-library 56.14.0, ainsi que les modules à chargement différé propres à Process List, Process List Item et Details. Le script de l’application ne fait que sélectionner des états d’exemple. L’environnement d’exécution du navigateur fournit le comportement natif des éléments personnalisés, y compris le contrôle Details.

1. Chargez le jeton correspondant CSS et le point d’entrée des composants pour navigateur, en préservant l’emplacement relatif des modules.
2. Attendez que va-process-list-item soit défini avant d’attribuer des propriétés d’état d’exemple.
3. Testez tous les états de scénario, le contrôle clavier Details et les affichages étroits sans masquer le contenu explicatif.

Consultez la spécification associée

Système de design VA Exemples de composants du système de design

<va-process-list>
  <va-process-list-item header="Prepare your request" level="3"
      checkmark="true" status-text="Complete">
    <p>Identify the record you need and the office that holds it.</p>
    <va-details label="What information helps identify a record?">
      <p>A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.</p>
    </va-details>
  </va-process-list-item>
  <va-process-list-item header="Send the request" level="3"
      active="true" status-text="Active">
    <p>In this example, a request is ready for the appropriate service. No request is sent from this page.</p>
  </va-process-list-item>
  <va-process-list-item header="Read the response" level="3"
      pending="true" status-text="Pending">
    <p>A real service should explain where a response appears and how to ask about missing information.</p>
  </va-process-list-item>
</va-process-list>

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Request journey — VA component specimen</title><link rel="stylesheet" href="vendor/va-56.14.0/variables.css"><style>*{box-sizing:border-box}:root{--font-serif:Georgia,serif;--font-sans:Arial,sans-serif;--vads-font-family-heading:Georgia,serif;--vads-font-family-serif:Georgia,serif;--vads-font-family-sans:Arial,sans-serif}body{margin:0;font:1.06rem/1.5 Arial,sans-serif;color:var(--vads-color-text);border-top:8px solid var(--vads-color-primary-darker)}main{max-width:52rem;margin:auto;padding:32px 24px}h1,h2{font-family:Georgia,serif;line-height:1.2}h1{font-size:40px;margin:16px 0 24px}h2{font-size:32px;margin:32px 0 24px}.controls{padding:24px;background:var(--vads-color-base-lightest);display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:32px 0}label{font-weight:bold}select,button{font:inherit;padding:8px 12px;max-width:100%;background:white;color:var(--vads-color-text);border:1px solid var(--vads-color-base-dark)}button{cursor:pointer;color:var(--vads-color-link)}select:focus-visible,button:focus-visible{outline:3px solid #ffbe2e;outline-offset:3px}va-process-list-item,va-process-list-item *,va-process-list-item::before{font-family:Arial,sans-serif!important}va-process-list-item .usa-process-list__heading{font-family:Georgia,serif!important}va-process-list-item p{margin:8px 0 16px}footer{border-top:1px solid #dfe1e2;padding-top:24px;margin-top:32px}.note{background:#e7f6f8;padding:16px;border-left:4px solid #005ea2}#state{font-weight:bold}@media(max-width:479px){h1{font-size:32px}.controls{padding:16px;align-items:flex-start;flex-direction:column}}</style></head><body><main><p>VA native component example</p><h1>Understand a request journey</h1><p>See how a service can explain preparation, sending a request, and reviewing its response.</p><p class="note">Fictional process for design exploration. These are not VA submission instructions or a real case status.</p><div class="controls"><label for="stage">Example stage</label><select id="stage"><option value="0">Preparing a request</option><option value="1">Sending a request</option><option value="2">Reviewing a response</option></select><button id="reset" type="button">Reset example</button></div><p id="state" role="status">Example: preparing a request.</p><h2>The three stages</h2><va-process-list>
  <va-process-list-item header="Prepare your request" level="3"
      checkmark="true" status-text="Complete">
    <p>Identify the record you need and the office that holds it.</p>
    <va-details label="What information helps identify a record?">
      <p>A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.</p>
    </va-details>
  </va-process-list-item>
  <va-process-list-item header="Send the request" level="3"
      active="true" status-text="Active">
    <p>In this example, a request is ready for the appropriate service. No request is sent from this page.</p>
  </va-process-list-item>
  <va-process-list-item header="Read the response" level="3"
      pending="true" status-text="Pending">
    <p>A real service should explain where a response appears and how to ask about missing information.</p>
  </va-process-list-item>
</va-process-list><footer>Native VA Web Components 24.14.0 · CSS tokens 0.36.1<br>Arial and Georgia fallbacks. No request is sent or stored.</footer></main><script>globalThis.getVaIconSpriteLocation=()=>new URL("vendor/va-web-24.14.0/sprite.svg",document.baseURI).pathname;</script><script type="module" src="vendor/va-web-24.14.0/component-library.esm.js"></script><script type="module">await customElements.whenDefined('va-process-list-item');const items=[...document.querySelectorAll('va-process-list-item')],select=document.querySelector('#stage');function render(){const current=Number(select.value);items.forEach((item,i)=>{for(const [key,on] of Object.entries({active:i===current,pending:i>current,checkmark:i<current})){item[key]=on;if(on)item.setAttribute(key,'true');else item.removeAttribute(key)}item.statusText=i<current?'Complete':i===current?'Active':'Pending';item.setAttribute('status-text',item.statusText)});document.querySelector('#state').textContent='Example: '+select.selectedOptions[0].textContent.toLowerCase()+'.'}select.addEventListener('change',render);document.querySelector('#reset').addEventListener('click',()=>{select.value='0';render();const detail=document.querySelector('va-details');if(detail.shadowRoot){if(detail.shadowRoot.querySelector('details').open)detail.shadowRoot.querySelector('summary').click()}select.focus()});render();</script></body></html>