# Système de design Rivet
## Aperçu de l’interface du système de design Rivet
Parcourez de courts panneaux d’informations sur la visite à l’aide du pointeur ou du clavier ; les informations essentielles sur l’événement restent visibles.
## Référence de conception du système de design Rivet
Documentation publiée de Rivet 2.9.1 CSS et documentation officielle des jetons et utilitaires. Les conversions en rem supposent une taille de police racine de 16px ; l’échantillon local utilise Arial/Georgia en remplacement et choisit sa propre largeur extérieure de 64rem.
### Typographie
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --rvt-font-sans | BentonSans, system sans-serif fallbacks | Police institutionnelle ; l’aperçu utilise explicitement Arial. |
| --rvt-font-serif | GeorgiaPro, Georgia, Times New Roman, Times, serif | Rôle de la police à empattements ; l’aperçu utilise Georgia si nécessaire. |
| rvt-ts-12 / 14 / 16 / 18 / 20 / 23 / 26 | 12 / 14 / 16 / 18 / 20 / 23 / 26px | Utilitaires numériques avec une taille de police racine de 16px. |
| rvt-ts-29 / 32 / 36 / 41 / 46 / 52 | 29 / 32 / 36 / 41 / 46 / 52px | Tailles plus grandes ; à appliquer aux éléments de texte. |
| rvt-lh-tight / base / loose | 1.2 / 1.5 / 1.65 | Choix de hauteur de ligne sans unité. |
| --rvt-font-regular / medium / bold | 400 / 500 / 700 | La disponibilité d’une graisse moyenne dépend de la police. |
### Espacement et formes
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --rvt-spacing-xxs / xs / sm / md | 4 / 8 / 16 / 24px | Espacements réduits à ceux des composants. |
| --rvt-spacing-lg / xl / xxl | 32 / 40 / 64px | Espacements plus importants pour la composition. |
| --rvt-spacing-3-xl / 4-xl | 128 / 192px | Grand espacement d’affichage, pas un remplissage de panneau. |
| --rvt-border-radius-sm / md / lg | .125 / .25 / .5rem | 2 / 4 / 8px à la taille racine standard. |
| --rvt-width-4-xl | 48rem (768px) | Le jeton de largeur diffère du jeton d’espacement qui porte le même suffixe. |
### Palette
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --rvt-color-black-500 | #243142 | Couleur de référence sombre principale. |
| --rvt-color-black-000 / black-100 | #f8f9fa / #e2e7e9 | Références pour les surfaces claires et les séparateurs. |
| --rvt-color-crimson-500 / crimson-600 | #990000 / #800000 | Références de la gamme cramoisie. |
| --rvt-color-blue-500 / blue-600 | #006298 / #004f80 | Références de la gamme bleue. |
| --rvt-color-green-500 | #056e41 | Gamme verte ; ne signifie pas à elle seule « succès ». |
### Points de rupture
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --rvt-breakpoint-sm | 30em / 480px | Utilitaires -sm-up. |
| --rvt-breakpoint-md | 46.25em / 740px | Utilitaires -md-up. |
| --rvt-breakpoint-lg | 67.5em / 1080px | Utilitaires -lg-up. |
| --rvt-breakpoint-xl | 78.75em / 1260px | Utilitaires -xl-up. |
| --rvt-breakpoint-xxl | 87.5em / 1400px | Utilitaires -xxl-up. |
## Guide complet du système de design Rivet
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 Rivet pour les activités universitaires
### Un système de composants avec un point d’entrée HTML
> Rivet fournit CSS, JavaScript, des classes utilitaires et des mises en page pour les interfaces de l’Indiana University. L’exemple fonctionnel utilise directement le bundle navigateur 2.9.1 : il ne nécessite ni React ni compilateur de composants. Il sert à présenter une petite page de détails sur un atelier, avec des informations complémentaires sur la visite, plutôt qu’à déguiser une demande d’admission en tableau de bord.
L’identité de l’établissement et le contenu d’exemple restent distincts. Cette page ne reproduit pas de signature IU, ne prétend pas enregistrer de visiteur et ne confirme pas l’existence d’un lieu réel. Pour un service universitaire en production, suivez les processus approuvés par l’université en matière d’identité visuelle et de propriété des contenus. La licence du code ne transforme pas des détails d’événement inventés en informations officielles.
Consultez la spécification associée
## Échelle typographique et rôles des polices du système de design Rivet
### Appliquer des utilitaires de taille précise au texte
La famille sans empattements de Rivet commence par BentonSans ; sa famille avec empattements commence par GeorgiaPro. L’échantillon local utilise délibérément Arial et Georgia comme polices de remplacement et ne demande aucune police à distance. Une mise en production doit vérifier les autorisations d’utilisation des polices institutionnelles et prévoir leur distribution, plutôt que de copier les fichiers de polices de cet aperçu.
L’échelle numérique suit une progression de seconde majeure arrondie. Le titre de l’exemple utilise rvt-ts-32 et le titre du panneau, rvt-ts-23 ; leurs tailles compilées sont respectivement de 2rem et de 1.4375rem. Le texte de base est de 1rem. Utilisez rvt-lh-base pour une hauteur de ligne de 1.5, rvt-lh-tight pour 1.2 et rvt-lh-loose pour 1.65. Appliquez ces classes aux éléments de texte afin que les contrôles imbriqués dans un conteneur n’héritent pas d’une taille d’affichage inadaptée.
| Rôle dans cet exemple | Classe | Valeur avec une taille de police racine de 16px |
| --- | --- | --- |
| Titre | rvt-ts-32 | 32px |
| Titre du panneau | rvt-ts-23 | 23px |
| Corps de texte | rvt-ts-16 | 16px |
| Petite étiquette | rvt-ts-14 | 14px |
Consultez la spécification associée
## Choix des couleurs et des surfaces du système de design Rivet
### Le cramoisi n’est pas la seule couleur
La palette de référence distingue crimson-500 (#990000) de blue-500 (#006298). L’échantillon utilise le cramoisi avec retenue pour une bordure supérieure et les contrôles Rivet natifs pour les interactions. Le texte est en black-500 (#243142), la surface d’information complémentaire en black-000 (#f8f9fa) et les séparateurs en black-100 (#e2e7e9). Il s’agit de véritables entrées de la palette, et non de valeurs extraites d’une capture d’écran.
Le nom d’une couleur ne garantit pas que toutes ses associations offrent un contraste suffisant. Conservez le traitement natif de la mise au point des onglets et leur état sélectionné, ainsi que le contenu visible et la valeur aria-selected correspondants. N’indiquez pas qu’un panneau est actif en affichant simplement son libellé en cramoisi. La mention sur l’événement fictif de l’exemple reste un texte courant lisible, placé au-dessus du sélecteur.
Consultez la spécification associée
## Espacements, largeurs et arrondis du système de design Rivet
### Une échelle nommée aux grands écarts délibérés
Les espacements de Rivet ne forment pas une suite d’incréments consécutifs de quatre pixels. À une taille de police racine de 16px, l’échelle va de xxs, soit 4px, à xs, soit 8px, sm, soit 16px, md, soit 24px, lg, soit 32px, xl, soit 40px, xxl, soit 64px, 3-xl, soit 128px, et 4-xl, soit 192px. L’exemple utilise sm pour la marge intérieure de la page sur mobile, md pour le rythme autour du panneau et lg pour les grandes séparations verticales.
La largeur maximale de 64rem de la zone de lecture de l’échantillon est un choix propre à l’application, et non un jeton de conteneur attribué à Rivet. Dans cette zone, le jeton de largeur 4-xl correspond à 48rem/768px ; spacing-4-xl correspond à 12rem/192px. Un suffixe identique ne signifie pas que les dimensions sont les mêmes. radius-sm vaut .125rem, md .25rem et lg .5rem ; ne remplacez pas tous les composants par une esthétique uniforme de cartes très arrondies.
Consultez la spécification associée
## Onglets : anatomie et états du système de design Rivet
### Faites correspondre les valeurs, puis initialisez
Un ensemble d’onglets comprend un conteneur rvt-tabs, un rvt-tabs__tablist doté d’un aria-label pertinent, des boutons déclencheurs et des éléments rvt-tabs__panel frères. Les valeurs data-rvt-tab et data-rvt-tab-panel doivent correspondre pour chaque paire. Le marqueur de sélection initiale data-rvt-tab-init se place sur un panneau, et non sur son bouton. Rivet peut générer des identifiants, mais des paires explicites facilitent l’examen de cet exemple.
Rivet.init() ajoute les rôles d’onglet, l’état de sélection, les liens vers les panneaux et le comportement au clavier. N’ajoutez pas de second gestionnaire de clic qui bascule indépendamment l’état masqué : deux mécanismes concurrents de gestion de l’état peuvent désynchroniser l’onglet sélectionné et le panneau visible. Le balisage complet ci-dessous contient un court contenu original et peut être placé entre les balises de feuille de style et de script lors de la configuration.
```
A practical introduction to archives
Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.
Arrive at the learning studio
In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.
Choose a comfortable way to participate
The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.
```
Référence du code
Consultez la spécification associée
## Éléments à laisser en dehors des onglets du système de design Rivet
### Protéger les informations essentielles sur la visite
Le titre de l’événement, la date, la durée et la mention indiquant qu’il s’agit d’un exemple fictif restent visibles en dehors des onglets. Les visiteurs ne devraient pas avoir à ouvrir un panneau masqué pour savoir si le contenu décrit une vraie réservation. Chaque panneau contient un titre et un paragraphe courts ; les trois libellés sont assez brefs pour tenir sur une seule ligne sur un écran étroit.
Les onglets conviennent lorsque des contenus associés peuvent être lus séparément. Ils sont peu adaptés à la comparaison de plusieurs tarifs de programme ou de deux plans d’études, car le passage d’un onglet à l’autre masque l’un des éléments à comparer. Pour cela, mieux vaut opter pour un tableau ou une liste déroulée.
- Utilisez Vue d’ensemble, Arrivée et Accessibilité pour présenter des explications complémentaires qui peuvent être consultées séparément.
- Laissez les échéances, les avis d’annulation et l’action principale visibles en dehors des panneaux des onglets.
- Utilisez un tableau comparatif lorsque le lecteur doit examiner simultanément des valeurs réparties entre plusieurs catégories.
Consultez la spécification associée
## Système de design Rivet : affichage adaptatif et navigation au clavier
### Cinq seuils adaptés aux mobiles
Les points de rupture de Rivet sont 30em, 46.25em, 67.5em, 78.75em et 87.5em. Avec une taille de police initiale habituelle de 16px, ils correspondent à 480, 740, 1080, 1260 et 1400px. Le seuil intermédiaire est de 740px, et non de 768px selon une convention reprise d’ailleurs. Les utilitaires adaptatifs ajoutent le point de rupture et -up, par exemple rvt-ts-32-md-up.
La barre d’onglets ne doit pas se répartir sur plusieurs lignes. Gardez les libellés courts et vérifiez leur affichage réel sur les écrans étroits ; réduire la taille du texte pour qu’il tienne n’est pas une solution de remplacement au choix du bon composant de navigation. Dans l’interaction native, les flèches gauche et droite déplacent le focus entre les onglets et reviennent au premier ou au dernier en bout de liste. Entrée ou Espace active l’onglet sélectionné par le focus. Les panneaux fermés ne doivent pas laisser leurs éléments interactifs dans l’ordre de tabulation.
Consultez la spécification associée
## Système de design Rivet : installer et vérifier l’exemple
### Un bundle de navigateur avec une seule initialisation
L’installation fournie épingle la version 2.9.1 et copie CSS publié ainsi que JavaScript compressé pour le navigateur dans le répertoire statique du site. Servez ces ressources avant d’appeler Rivet.init(). Si un framework monte HTML ultérieurement, utilisez le cycle de vie d’intégration JavaScript documenté au lieu de supposer que l’analyse initiale de la page a détecté les nouveaux nœuds.
L’aperçu autonome exécute localement ces ressources officielles CSS et JavaScript. La police de substitution et la largeur du conteneur sont des surcharges explicites de l’application. Aucun appel réseau de réservation, aucune persistance, aucune analytique ni aucune confirmation générée ne sont prévus. Les onglets natifs constituent l’intégralité de l’interaction présentée.
1. Chargez la feuille de style locale et vérifiez que les trois déclencheurs d’onglet et leurs panneaux sont présents avant l’initialisation.
2. Initialisez Rivet, passez d’un onglet à l’autre avec un pointeur, puis recommencez avec les flèches et Entrée ou Espace.
3. Vérifiez l’onglet sélectionné, le panneau visible, l’indicateur de focus et la largeur du document sur grand écran et sur un mobile étroit.
Consultez la spécification associée
## Système de design Rivet : exemples de composants
### Un sélecteur à trois panneaux pour les informations sur la visite
Attributs de données correspondants explicitement définis et panneau initial ; Rivet natif gère le focus et la visibilité.
```
A practical introduction to archives
Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.
Arrive at the learning studio
In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.
Choose a comfortable way to participate
The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.
```
Référence du code
- Gardez le titre de l’événement et les informations essentielles en dehors des panneaux.
- Incluez CSS et JavaScript publiés et appelez Rivet.init() une seule fois.
- Les flèches déplacent le focus ; Entrée ou Espace active l’onglet sélectionné par le focus.
### 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.
```
Workshop visit — Rivet specimen
LEARNING STUDIO · RIVET COMPONENT EXAMPLE
Reading the archive
A hands-on introduction to working with historical sources. Explore the visit information below.
SessionSaturday · 10:00–11:30
FormatSmall-group workshop
LocationLearning studio · Room 204
Fictional event for interface demonstration. No reservation is made.
A practical introduction to archives
Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.
Arrive at the learning studio
In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.
Choose a comfortable way to participate
The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.
```
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 Rivet
### Point de départ de l’implémentation
Les chemins des ressources de navigateur publiées de rivet-core 2.9.1 ont été vérifiés à l’aide du guide officiel de prise en main. Adaptez le répertoire public à votre serveur ; l’aperçu utilise des copies locales et une police de substitution. Le fichier ZIP de l’exemple complet fonctionnel, indiqué dans Sources, contient aussi les dépendances exactes de l’aperçu et le document intégral. Extrayez-le, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/indiana-rivet.html. N’ouvrez pas les exemples basés sur des modules via file://.
```
npm install rivet-core@2.9.1
mkdir -p public/vendor/rivet
cp node_modules/rivet-core/css/rivet.min.css public/vendor/rivet/
cp node_modules/rivet-core/js/rivet.min.js public/vendor/rivet/
# Add these tags to the HTML served from public/:
#
# ...component markup...
#
#
```
### Un prompt pour votre projet
```
Créez une page de détails pour un atelier universitaire avec Rivet 2.9.1 et les onglets natifs HTML. Chargez rivet.min.css et rivet.min.js et appelez Rivet.init(). Utilisez des valeurs correspondantes pour data-rvt-tab et data-rvt-tab-panel, un libellé explicite pour la liste d’onglets et data-rvt-tab-init sur le premier panneau. Gardez le titre, la date et les avis essentiels en dehors des onglets. Utilisez un corps de texte de 16px, des titres de panneau de 23px, un titre de page de 32px et les jetons d’espacement Rivet. Respectez les points de rupture de 480/740/1080/1260/1400px. Gardez les panneaux courts, préservez le comportement du focus et de la sélection au clavier et indiquez que tous les détails inventés de l’événement sont fournis à titre de démonstration. N’utilisez pas les marques de l’IU sans autorisation.
```
## Système de design Rivet : sources et périmètre
Référence technique Rivet et démonstration fictive d’un atelier. L’utilisation des marques institutionnelles et des polices reste soumise aux règles de l’Indiana University ; aucune visite ni réservation réelle n’est proposée.
- Présentation de Rivet Présentation des objectifs et ressources officiels.
- Jetons de design Valeurs nommées pour les choix visuels partagés.
- Mises en page Mises en page de départ pour les applications et les pages de contenu.
- Composants Composants d’interface documentés.
- 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.
## Système de design Rivet : ressources associées
### Digital Agency système de design
Créez des interfaces japonaises de services publics faciles à lire grâce aux rôles typographiques DADS, aux tokens sémantiques et à l’anatomie native des composants HTML. Essayez une recherche de reçu fonctionnelle avec des erreurs de format, un résultat sans correspondance et un relevé de statut consultable.
### KERN
Créez une interface native KERN avec une typographie vérifiée, des thèmes sémantiques, des panneaux dépliables et un parcours de confirmation réversible.
### Michigan Forty Two
Découvrez le flux de travail WordPress pris en charge par Forty-Two, sa palette Web et ses modèles d’annuaire, au moyen d’un exemple fonctionnel de filtre par rôle et domaine de recherche.
- [Référence de mise en œuvre](https://rivet.iu.edu/components/tabs/)
- [Source](https://rivet.iu.edu/utilities/typography/)
- [Source](https://rivet.iu.edu/design-tokens/)
- [Consultez la spécification associée](https://rivet.iu.edu/getting-started/)
- [Consultez la spécification associée](https://rivet.iu.edu/utilities/typography/)
- [Consultez la spécification associée](https://rivet.iu.edu/design-tokens/)
- [Référence du code](https://rivet.iu.edu/components/tabs/)
- [Consultez la spécification associée](https://rivet.iu.edu/components/tabs/)
- [Présentation de Rivet Présentation des objectifs et ressources officiels.](https://rivet.iu.edu/)
- [Jetons de design Valeurs nommées pour les choix visuels partagés.](https://rivet.iu.edu/design-tokens/)
- [Mises en page Mises en page de départ pour les applications et les pages de contenu.](https://rivet.iu.edu/layouts/)
- [Composants Composants d’interface documentés.](https://rivet.iu.edu/components/)