# Système de design USWDS
## Aperçu de l’interface du système de design USWDS
Recherchez et filtrez des enregistrements fictifs, récupérez-vous lorsqu’aucun résultat n’est trouvé et dépliez les panneaux natifs des exigences.
## Référence du système de design USWDS
Distribution native des composants USWDS 3.14.0. Jetons par défaut tirés de la documentation officielle ; substitutions de polices de l’aperçu choisies explicitement pour ce projet local.
### Unités d’espacement
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| 0.5 / 05 | 4px | Espacement par demi-unités et syntaxe des utilitaires |
| 1 | 8px | Unité d’espacement de base |
| 1.5 / 105 | 12px | Espacement intermédiaire |
| 2 | 16px | Marge intérieure compacte |
| 3 | 24px | Espacement entre contenus associés |
| 4 | 32px | Espacement des sections |
| 5 | 40px | Séparation plus importante |
| 6 | 48px | Grand espacement |
| tablet | 640px | Jeton de largeur nommé |
| desktop | 1024px | Jeton de largeur nommé |
### Correspondance typographique par défaut
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| sans | source-sans-pro | Jeton de famille par type |
| serif | merriweather | Jeton de famille par type |
| body / ui | sans | Correspondance par rôle |
| heading | serif | Correspondance par rôle |
| code | mono → roboto-mono | Correspondance du rôle de code |
### Couleurs du thème par défaut
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| primary | blue-60v / #005ea2 | Alias principal |
| primary-lighter | blue-10 / #d9e8f6 | Nuance complémentaire du primaire |
| primary-dark | blue-warm-70v / #1a4480 | Alias principal plus foncé |
| ink | gray-90 / #1b1b1b | Alias du texte principal |
### Contrats des composants
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| aria-controls | Panel ID | Associe chaque bouton d’accordéon à son contenu. |
| aria-expanded | true / false | Le JavaScript natif gère l’état ouvert. |
| data-allow-multiple | Accordion root attribute | Permet d’ouvrir plusieurs panneaux indépendamment. |
| usa-accordion--bordered | Root modifier | Fournit la variante avec bordure. |
## Guide complet du système de design USWDS
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.
## USWDS Foundation configurable : système de design
### Les jetons par défaut constituent une configuration de départ
> USWDS distingue les jetons du système, les paramètres du thème du projet, les classes utilitaires et les composants. La référence ci-dessous répertorie les choix de thème par défaut de la documentation actuelle. Un programme fédéral peut configurer d’autres rôles typographiques ou alias de couleur sans remplacer tous les composants.
L’aperçu est une comparaison indépendante de possibilités de recherche, qui utilise 3.14.0 CSS et l’accordéon JavaScript. Il ne comprend ni la bannière gouvernementale ni les marques d’identité visuelle. Les noms et étapes des programmes sont fictifs, et le filtrage s’effectue entièrement dans le navigateur.
Consultez la spécification associée
## Espacement et jetons de thème du système de design USWDS
### Tenez compte de l’unité, pas du chiffre
Une unité d’espacement USWDS vaut 8px : units(2) correspond à 16px, tandis que units(3) correspond à 24px. Les jetons en demi-unités permettent de définir des espacements plus petits, et la syntaxe des utilitaires utilise 05 pour une demi-unité. Un utilitaire margin-2 ne signifie pas une marge de deux pixels.
L’échelle comprend également des largeurs nommées, comme tablette et ordinateur. Ces noms sont des jetons réutilisables, et non une obligation de repenser chaque page pour chaque largeur. La comparaison utilise grid-container autour du contenu et une zone défilante dédiée au tableau.
```
@use "uswds-core" as *;
.opportunity-meta {
padding: units(2);
margin-bottom: units(3);
}
```
Référence du code
Consultez la spécification associée
## Polices et rôles du système de design USWDS
### Un rôle peut changer sans qu’il soit nécessaire de renommer les composants
Le jeton sans-serif par défaut correspond à Source Sans Pro, et le jeton serif à Merriweather. Les rôles body et UI correspondent au sans-serif ; le rôle heading, au serif. La fonction family("body") résout cette chaîne. Dans la documentation d’un projet, distinguez le rôle sémantique de la famille de polices finale.
L’aperçu local utilise explicitement Helvetica/Arial pour le corps du texte et Georgia pour les titres, afin d’éviter tout téléchargement de polices. Il s’agit d’une surcharge propre à cette étude, et non de l’identité typographique standard de USWDS. Dans une version de production, configurez ces rôles via les paramètres uswds-core ou copiez les fichiers de polices distribués.
```
@use "uswds-core" with (
$theme-font-type-sans: "helvetica",
$theme-font-type-serif: "georgia",
$theme-font-role-body: "sans",
$theme-font-role-heading: "serif"
);
```
Référence du code
Consultez la spécification associée
## Alias de couleur du thème du système de design USWDS
### Associez les alias à leur rôle
L’alias primary par défaut correspond à blue-60v, #005ea2. Primary-dark correspond à blue-warm-70v, #1a4480 ; ink correspond à gray-90, #1b1b1b. Il s’agit de valeurs de thème, et non d’une affirmation selon laquelle tous les sites USWDS doivent utiliser la même couleur de marque.
Utilisez l’alias sémantique pour une action ou un traitement de titre, et un jeton de couleur système uniquement lorsque c’est bien le choix de conception retenu. Remplacer un alias primary dans les paramètres est plus contrôlé que de remplacer chaque chaîne hexadécimale correspondante dans CSS compilé.
Consultez la spécification associée
## Lignes d’offres comparables du système de design USWDS
### Préservez la sémantique du tableau
L’exemple utilise une légende, des en-têtes de colonne avec scope="col" et un nom d’offre avec scope="row". Il s’agit d’un tableau, car les lecteurs comparent les mêmes champs de thème et d’étape entre plusieurs entrées. Ces relations restent accessibles lorsque la zone défile.
Le conteneur défilant possède tabindex="0" afin que les utilisateurs du clavier puissent y accéder. Il confine les données trop larges à cette zone, au lieu d’élargir tout le document. L’aperçu contient des cellules de texte ordinaires ; si des données de programme manquaient, il faudrait prévoir un état de contenu explicite plutôt que d’inventer un nombre.
Consultez la spécification associée
### Le tri est une amélioration distincte
USWDS permet de trier les en-têtes grâce à data-sortable. Un tableau triable nécessite également une zone usa-table__announcement-region avec aria-live="polite". Pour les valeurs numériques, data-sort-value peut être nécessaire afin qu’un montant formaté soit trié comme une valeur plutôt que par ordre alphabétique. Cette comparaison n’active pas le tri, car le filtre par thème sur trois lignes est la démonstration souhaitée.
Consultez la spécification associée
## Les exigences sous forme de panneaux dépliables dans le système de design USWDS
### Reliez les identifiants du bouton et du panneau
Chaque usa-accordion__button possède un attribut aria-controls qui pointe vers le usa-accordion__content associé. Le composant natif JavaScript met à jour aria-expanded et la visibilité. Le modificateur de bordure change l’encadrement ; data-allow-multiple permet de laisser plusieurs sections ouvertes.
Le bouton est placé dans un titre afin que la structure du contenu reste compréhensible. Les exigences nécessaires pour déterminer si un programme est pertinent doivent rester visibles au-dessus du panneau dépliable. Ici, les panneaux contiennent des notes de préparation complémentaires et une explication du jeu de données fictif.
- Le titre décrit le sujet du panneau.
- Le bouton porte l’état déplié et l’identifiant cible.
- Le panneau conserve le même identifiant lorsque sa visibilité change.
Consultez la spécification associée
## Installer l’arborescence complète des ressources du système de design USWDS
### Préservez les chemins utilisés par CSS compilé
Installez @uswds/uswds@3.14.0 et copiez son répertoire dist sans regrouper css, js, img et fonts dans un seul dossier. La feuille de style utilise des chemins relatifs vers les icônes et les polices. Sinon, une page peut sembler en partie correcte tout en étant dépourvue des symboles des panneaux dépliables ou des polices.
Chargez uswds-init.min.js dans l’en-tête, puis la feuille de style, et enfin uswds.min.js après le balisage du corps. La bibliothèque incluse ajoute le comportement de l’accordéon. Le champ de recherche et le filtre par thème ci-dessous reposent sur une logique personnalisée de l’application ; ils n’interrogent aucun service de recherche à distance.
Consultez la spécification associée
## Filtrage et récupération dans le système de design USWDS
### Une recherche doit présenter son résultat
Les styles natifs des éléments label, input, select et button mettent les commandes en forme ; l’application compare la recherche et le thème sélectionné aux trois entrées fictives. Le nombre de résultats se trouve dans une zone dynamique polie. Si aucun résultat ne correspond, un message explicatif et une action de réinitialisation s’affichent, tandis que la recherche saisie est conservée.
La démonstration distingue volontairement la découverte d’une possibilité de la candidature. Ouvrir le contenu préparatoire ne crée pas de brouillon et ne marque aucune exigence comme remplie. Une véritable demande de financement nécessiterait sa propre politique de programme, son système d’authentification et un état de transaction persistant.
1. Filtrez sur « Environnement » et examinez les possibilités restantes.
2. Recherchez une expression sans résultat, puis utilisez « Effacer les filtres ».
3. Ouvrez les deux panneaux de préparation et vérifiez que chacun possède son propre état de développement.
Consultez la spécification associée
## Exemples de composants du système de design USWDS
### Accordéon de préparation complémentaire
Un élément de divulgation natif USWDS, avec un lien explicite entre le bouton et le panneau.
```
This fictional opportunity asks for a project summary and a named contact.
```
Référence du code
### Tableau comparatif des possibilités
La légende et les en-têtes de ligne et de colonne préservent les relations de comparaison.
```
Illustrative research opportunities
Opportunity
Topic
Stage
Community water study
Environment
Example draft
```
Référence du code
### Exemple autonome complet
Le document complet comprend sa mise en page, ses contrôles et son initialisation. Extrayez l’archive d’exemple liée pour obtenir les ressources de fournisseur avec leurs chemins relatifs exacts, puis servez le contenu via HTTP.
```
Research opportunities — OpenDesign study
OpenDesign · USWDS component study Fictional research records. No application is submitted.
Research opportunities
Compare topics and read the preparation notes.
3 opportunities
Illustrative research opportunities
Opportunity
Topic
Stage
Community water study
Environment
Example draft
Accessible transport research
Transport
Example review
Local skills survey
Education
Example draft
No matching opportunities. Broaden the topic or clear the filters.
Preparation notes
This fictional opportunity asks for a project summary and a named contact.
Draft and review are demonstration stages. They do not indicate an actual funding programme or eligibility decision.
USWDS 3.14.0 native accordion and styles, with local Helvetica/Georgia font overrides. Filters are original application code. Distribution licence.
```
Référence du code
- Téléchargez l’exemple complet depuis les sources. Son fichier README indique la commande exacte pour le lancer localement.
- Conservez des chemins relatifs pour les ressources de fournisseur par rapport à ce document ; l’archive contient toutes les ressources utilisées par cet aperçu.
## Configuration de l’agent du système de design USWDS
### Point de départ de l’implémentation
Préservez la structure du répertoire dist pour que CSS puisse trouver les polices et les icônes. Il s’agit de la distribution précompilée ; la personnalisation du thème nécessite une compilation Sass. L’archive ZIP complète de l’exemple fonctionnel, dans Sources, comprend aussi les dépendances exactes de l’aperçu et le document complet. Décompressez-la, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/uswds.html. N’ouvrez pas les exemples utilisant des modules avec file://.
```
npm install @uswds/uswds@3.14.0
mkdir -p public/assets/uswds
cp -R node_modules/@uswds/uswds/dist public/assets/uswds/
```
### Un prompt pour votre projet
```
Créez un comparatif fictif de possibilités de recherche avec USWDS 3.14.0. Chargez l’arborescence complète des ressources dist, le script d’initialisation, la feuille de style des composants et JavaScript. Présentez les entrées comparables dans un tableau sémantique avec une légende et des en-têtes de colonne ; proposez une recherche et un filtre par catégorie clairement étiquetés, un nombre de résultats, un état utile en l’absence de correspondance et une commande de réinitialisation. Utilisez des accordéons natifs pour les exigences complémentaires, tout en laissant visibles les informations essentielles à la comparaison. Respectez les unités d’espacement et les correspondances des rôles du thème documentées ; indiquez clairement la surcharge de la police système. Ne transformez pas ce répertoire en processus de candidature et ne laissez pas entendre qu’il existe de véritables critères d’admissibilité ou engagements d’attribution.
```
## Sources et périmètre du système de design USWDS
Étude indépendante des composants de USWDS 3.14.0. Entrées fictives concernant des possibilités de recherche ; aucune revendication d’identité fédérale ni aucun point de terminaison de candidature. Helvetica/Arial et Georgia sont des polices de substitution locales, et non les ressources de police par défaut de USWDS.
- Unités d’espacement Unités numériques et largeurs nommées.
- Rôles des familles de polices Résolution des jetons de typographie et de rôle.
- Couleurs du thème Alias et paramètres par défaut.
- Tableau Comparaison sémantique et défilement.
- Accordéon États et balisage des panneaux.
- Configuration du développeur Distribution et chemins d’accès aux ressources.
- Télécharger l’exemple complet fonctionnel Archive ZIP comprenant le HTML complet, les dépendances locales CSS/JavaScript, les licences fournies et les instructions de lancement exactes. Aucune étape de build n’est nécessaire.
## Ressources associées au système de design USWDS
### VA système de design
Créez des parcours de service clairs avec les tokens sémantiques de VA et la liste de processus native Process List : des explications visibles pour chaque étape, des libellés d’état explicites et des détails complémentaires qui préservent la lisibilité du parcours principal.
### W3C système de design
Créez des interfaces de lecture résilientes grâce à une typographie fluide, des rôles de couleurs sémantiques et du contenu repliable natif, qui reste lisible sans JavaScript.
### Codex
Utilisez la structure réelle de SearchInput de Codex, sa hiérarchie d’actions et ses jetons axés sur la lecture. Recherchez dans un index local d’articles, consultez un résultat, puis revenez à la même position de lecture.
- [Référence de mise en œuvre](https://designsystem.digital.gov/components/accordion/)
- [Source](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Source](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Source](https://designsystem.digital.gov/design-tokens/color/theme-tokens/)
- [Source](https://designsystem.digital.gov/components/accordion/)
- [Consultez la spécification associée](https://designsystem.digital.gov/documentation/developers/)
- [Référence du code](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Consultez la spécification associée](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Référence du code](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Consultez la spécification associée](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Consultez la spécification associée](https://designsystem.digital.gov/design-tokens/color/theme-tokens/)
- [Consultez la spécification associée](https://designsystem.digital.gov/components/table/)
- [Consultez la spécification associée](https://designsystem.digital.gov/components/accordion/)
- [Référence du code](https://designsystem.digital.gov/components/accordion/)
- [Référence du code](https://designsystem.digital.gov/components/table/)
- [Unités d’espacement Unités numériques et largeurs nommées.](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Rôles des familles de polices Résolution des jetons de typographie et de rôle.](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Couleurs du thème Alias et paramètres par défaut.](https://designsystem.digital.gov/design-tokens/color/theme-tokens/)
- [Tableau Comparaison sémantique et défilement.](https://designsystem.digital.gov/components/table/)
- [Accordéon États et balisage des panneaux.](https://designsystem.digital.gov/components/accordion/)
- [Configuration du développeur Distribution et chemins d’accès aux ressources.](https://designsystem.digital.gov/documentation/developers/)