# Sistema di progettazione Rivet ## Anteprima dell’interfaccia del sistema di progettazione sistema di design Rivet Passa da un breve pannello informativo sulla visita all’altro con il puntatore o la tastiera; i dettagli essenziali dell’evento restano visibili. ## Riferimento di progettazione del sistema di progettazione sistema di design Rivet Rivet 2.9.1 pubblicato da CSS e documentazione ufficiale di token e utility. Le conversioni in rem presuppongono una radice di 16 px; l’esempio locale usa font Arial/Georgia e imposta una larghezza esterna di 64rem. ### Tipografia | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --rvt-font-sans | BentonSans, system sans-serif fallbacks | Carattere tipografico istituzionale; l’anteprima usa esplicitamente Arial. | | --rvt-font-serif | GeorgiaPro, Georgia, Times New Roman, Times, serif | Ruolo serif; se necessario, l’anteprima usa Georgia. | | rvt-ts-12 / 14 / 16 / 18 / 20 / 23 / 26 | 12 / 14 / 16 / 18 / 20 / 23 / 26px | Utility numeriche con radice da 16px. | | rvt-ts-29 / 32 / 36 / 41 / 46 / 52 | 29 / 32 / 36 / 41 / 46 / 52px | Valori più grandi; applicali agli elementi di testo. | | rvt-lh-tight / base / loose | 1.2 / 1.5 / 1.65 | Valori di line-height senza unità. | | --rvt-font-regular / medium / bold | 400 / 500 / 700 | La disponibilità del peso medio dipende dal font. | ### Spaziatura e forma | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --rvt-spacing-xxs / xs / sm / md | 4 / 8 / 16 / 24px | Spaziature ridotte e a livello di componente. | | --rvt-spacing-lg / xl / xxl | 32 / 40 / 64px | Spaziature più ampie per la composizione. | | --rvt-spacing-3-xl / 4-xl | 128 / 192px | Ampia spaziatura per le visualizzazioni, non per il padding dei pannelli. | | --rvt-border-radius-sm / md / lg | .125 / .25 / .5rem | 2 / 4 / 8px con radice standard. | | --rvt-width-4-xl | 48rem (768px) | Il token di larghezza differisce dal token di spaziatura con lo stesso suffisso. | ### Palette | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --rvt-color-black-500 | #243142 | Colore scuro di riferimento principale. | | --rvt-color-black-000 / black-100 | #f8f9fa / #e2e7e9 | Riferimenti per superfici chiare e divisori. | | --rvt-color-crimson-500 / crimson-600 | #990000 / #800000 | Riferimenti della gamma cremisi. | | --rvt-color-blue-500 / blue-600 | #006298 / #004f80 | Riferimenti della gamma blu. | | --rvt-color-green-500 | #056e41 | Gamma verde; da sola non indica uno stato di successo. | ### Breakpoint | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --rvt-breakpoint-sm | 30em / 480px | Utility -sm-up. | | --rvt-breakpoint-md | 46.25em / 740px | Utility -md-up. | | --rvt-breakpoint-lg | 67.5em / 1080px | Utility -lg-up. | | --rvt-breakpoint-xl | 78.75em / 1260px | Utility -xl-up. | | --rvt-breakpoint-xxl | 87.5em / 1400px | Utility -xxl-up. | ## Guida completa al sistema di progettazione sistema di design Rivet Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Sistema di progettazione sistema di design Rivet per le attività universitarie ### Un sistema di componenti con un punto di ingresso HTML > Rivet fornisce CSS, JavaScript, classi di utilità e layout di pagina per le interfacce dell’Indiana University. L’esempio funzionante usa direttamente il bundle browser 2.9.1: non richiede né React né un compilatore di componenti. Lo scopo è realizzare una piccola pagina di dettaglio di un workshop con informazioni secondarie sulla visita, non un’applicazione di ammissione camuffata da dashboard. L’identità istituzionale e i contenuti d’esempio restano separati. Questa pagina non riproduce un marchio IU, non dichiara di registrare un visitatore né conferma l’esistenza di una struttura reale. Per un servizio universitario di produzione, segui la procedura approvata dall’università per l’uso del marchio e la titolarità dei contenuti. La licenza del codice non rende ufficiali i dettagli inventati dell’evento. Leggi la specifica di supporto ## Sistema di design Rivet: scala tipografica e ruoli dei font ### Usa utilità con dimensioni esatte per il testo La famiglia sans serif di Rivet inizia con BentonSans; la famiglia serif con GeorgiaPro. Il campione locale usa intenzionalmente Arial e Georgia come font alternativi e non effettua richieste di font remoti. Un’implementazione di produzione deve verificare le autorizzazioni istituzionali per l’uso e la distribuzione dei font, invece di copiare i file dei font da questa anteprima. La scala numerica segue una progressione arrotondata di seconda maggiore. Il titolo dell’esempio usa rvt-ts-32 e il titolo del pannello rvt-ts-23; le dimensioni compilate sono rispettivamente 2rem e 1.4375rem. Il testo di base è 1rem. Usa rvt-lh-base per un’interlinea di 1.5, rvt-lh-tight per 1.2 e rvt-lh-loose per 1.65. Applica queste classi agli elementi di testo, così che i controlli annidati in un contenitore non ereditino una dimensione tipografica da titolo non voluta. | Ruolo in questo esempio | Classe | Valore con una radice di 16px | | --- | --- | --- | | Titolo | rvt-ts-32 | 32px | | Titolo del pannello | rvt-ts-23 | 23px | | Testo del corpo | rvt-ts-16 | 16px | | Etichetta piccola | rvt-ts-14 | 14px | Leggi la specifica di supporto ## Sistema di design Rivet: scelte di colore e superfici ### Il cremisi non è l’unico colore La palette di riferimento distingue crimson-500 (#990000) da blue-500 (#006298). Il campione usa il cremisi con moderazione come bordo superiore e i controlli nativi di Rivet per gli elementi interattivi. Il testo usa black-500 (#243142), mentre la superficie informativa di supporto usa black-000 (#f8f9fa) e i separatori black-100 (#e2e7e9). Sono voci effettive della palette, non valori ricavati da uno screenshot. Il nome di un colore non garantisce che ogni combinazione superi i requisiti di contrasto. Mantieni lo stile di focus nativo delle schede e lo stato selezionato, insieme al contenuto visibile e al valore aria-selected. Non indicare un pannello attivo soltanto colorandone di cremisi l’etichetta. L’avviso relativo all’evento fittizio dell’esempio resta un testo normale e leggibile sopra il selettore. Leggi la specifica di supporto ## Sistema di design Rivet: spaziatura, larghezze e angoli ### Una scala con nomi e ampi intervalli intenzionali La spaziatura di Rivet non è un elenco di incrementi consecutivi di quattro pixel. Passa da xxs 4px a xs 8px, sm 16px, md 24px, lg 32px, xl 40px, xxl 64px, 3-xl 128px e 4-xl 192px, con una radice di 16px. L’esempio usa sm per il margine interno della pagina su dispositivi mobili, md per la spaziatura attorno al pannello e lg per le principali separazioni verticali. Il contenitore di lettura del campione, con una larghezza massima di 64rem, è una scelta applicativa, non un token di contenitore dichiarato di Rivet. All’interno del contenitore, il token di larghezza 4-xl è 48rem/768px; spacing-4-xl è 12rem/192px. La stessa desinenza non implica la stessa dimensione. Radius-sm è .125rem, md .25rem e lg .5rem; non sostituire tutti i componenti con un’estetica uniforme di grandi schede arrotondate. Leggi la specifica di supporto ## Sistema di design Rivet: struttura e stato delle schede ### Fai corrispondere i valori dei dati, poi inizializza Un gruppo di schede comprende un wrapper rvt-tabs, un rvt-tabs__tablist con un aria-label significativo, pulsanti di attivazione e pannelli rvt-tabs__panel adiacenti. I valori di data-rvt-tab e data-rvt-tab-panel devono corrispondere per ogni coppia. L’indicatore di selezione iniziale data-rvt-tab-init va inserito in un pannello, non nel relativo pulsante. Rivet può generare gli identificatori, ma le coppie esplicite rendono questo esempio più facile da esaminare. Rivet.init() aggiunge i ruoli delle schede, lo stato di selezione, le relazioni tra pannelli e il comportamento da tastiera. Non implementare un secondo gestore di clic che alterni autonomamente lo stato hidden: due gestori dello stato in conflitto possono desincronizzare la scheda selezionata e il pannello visibile. Il markup completo qui sotto contiene brevi testi originali e può essere inserito tra i tag del foglio di stile e dello script nella configurazione. ```

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.

``` Riferimento del codice Leggi la specifica di supporto ## Sistema di design Rivet: cosa tenere fuori dalle schede ### Metti in evidenza le informazioni essenziali sulla visita Il titolo dell’evento, la data, la durata e l’avviso che specifica che si tratta di un esempio fittizio restano fuori dalle schede. Un visitatore non dovrebbe dover aprire un pannello nascosto per scoprire se il contenuto riguarda una prenotazione reale. Ogni pannello contiene un breve titolo e un paragrafo; le tre etichette sono abbastanza brevi da stare su una sola riga anche su uno schermo stretto. Le schede sono adatte quando i contenuti correlati possono essere letti separatamente. Sono poco indicate per confrontare le quote di più programmi o due piani di studio, perché il passaggio da una scheda all’altra nasconde una delle opzioni. Per questo tipo di attività, è meglio usare una tabella o un elenco aperto. - Usa Panoramica, Arrivo e Accessibilità per spiegazioni di supporto utili anche singolarmente. - Mantieni visibili, fuori dai pannelli delle schede, le scadenze, gli avvisi di annullamento e l’azione principale. - Usa una tabella comparativa quando il lettore deve esaminare contemporaneamente i valori di più categorie. Leggi la specifica di supporto ## Sistema di design Rivet: adattabilità e uso da tastiera ### Cinque breakpoint mobile-first I breakpoint di Rivet sono 30em, 46.25em, 67.5em, 78.75em e 87.5em. Con la consueta dimensione iniziale del font di 16px, corrispondono a 480, 740, 1080, 1260 e 1400px. Il breakpoint medio è 740px, non il valore convenzionale di 768px preso da un altro sistema. Le utilità responsive aggiungono il breakpoint e -up, per esempio rvt-ts-32-md-up. La barra delle schede non deve trasformarsi in più righe sovrapposte. Mantieni brevi le etichette e prova il testo effettivo su schermi stretti; ridurre la dimensione del testo per farlo stare non sostituisce la scelta del componente di navigazione corretto. Nell’interazione nativa, i tasti Freccia sinistra e Freccia destra spostano il focus tra le schede e ricominciano dall’estremità opposta quando si raggiunge un limite. Invio o Spazio attivano la scheda selezionata con il focus. I pannelli chiusi non devono lasciare i relativi elementi interattivi nell’ordine di tabulazione. Leggi la specifica di supporto ## Sistema di design Rivet: installazione e verifica dell’esempio ### Un bundle browser con una sola inizializzazione L’installazione fornita fissa la versione 2.9.1 e copia il suo CSS pubblicato e il JavaScript browser minificato nella directory statica del sito. Distribuisci queste risorse prima di chiamare Rivet.init(). Se un framework monta HTML in un secondo momento, usa il ciclo di vita di integrazione documentato di JavaScript, anziché presumere che la scansione iniziale della pagina abbia individuato i nuovi nodi. L’anteprima autonoma esegue localmente le risorse ufficiali CSS e JavaScript. I font alternativi e la larghezza del contenitore sono override applicativi espliciti. Non invia richieste di prenotazione in rete, non salva dati, non raccoglie dati analitici e non genera conferme. Le schede native costituiscono l’intera interazione dimostrata. 1. Carica il foglio di stile locale e verifica che tutti e tre i pulsanti delle schede e i relativi pannelli esistano prima dell’inizializzazione. 2. Inizializza Rivet, cambia scheda con il puntatore, poi ripeti usando i tasti freccia e Invio o Spazio. 3. Verifica il pulsante selezionato, il pannello visibile, l’anello di focus e la larghezza del documento su desktop e su dispositivi mobili con schermi stretti. Leggi la specifica di supporto ## Sistema di design Rivet: esempi di componenti ### Un selettore di informazioni sulla visita con tre pannelli Attributi dei dati con corrispondenze esplicite e un pannello iniziale; le schede native di Rivet gestiscono focus e 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.

``` Riferimento del codice - Mantieni il titolo dell’evento e le informazioni essenziali fuori dai pannelli. - Includi CSS e JavaScript pubblicati e chiama Rivet.init() una sola volta. - I tasti freccia spostano il focus; Invio o Spazio attivano la scheda selezionata. ### Esempio autonomo completo Il documento completo include layout, controlli e inizializzazione. Estrai l’archivio di esempio collegato per ottenere gli esatti asset vendor relativi, quindi avvialo tramite 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.

``` Riferimento del codice - Scarica l’esempio completo dalla sezione Fonti. Il README indica il comando esatto per avviarlo in locale. - Mantieni i percorsi vendor relativi a questo documento; l’archivio include tutti gli asset usati da questa anteprima. ## Sistema di design Rivet: configurazione dell’agente ### Punto di partenza per l’implementazione I percorsi delle risorse browser pubblicate di rivet-core 2.9.1 sono stati verificati con la guida ufficiale introduttiva. Adatta la directory pubblica al tuo server; l’anteprima usa copie locali e un font alternativo. Lo ZIP completo dell’esempio funzionante, disponibile in Fonti, include anche le dipendenze esatte dell’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory, quindi apri http://localhost:8080/indiana-rivet.html. Non aprire gli esempi basati su moduli tramite 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 per il tuo progetto ``` Crea una pagina di dettaglio per un workshop universitario con Rivet 2.9.1 e le schede native di HTML. Carica rivet.min.css e rivet.min.js e chiama Rivet.init(). Usa valori corrispondenti per data-rvt-tab e data-rvt-tab-panel, un’etichetta significativa per l’elenco delle schede e data-rvt-tab-init sul primo pannello. Mantieni titolo, data e avvisi essenziali fuori dalle schede. Usa 16px per il testo del corpo, 23px per i titoli dei pannelli, 32px per il titolo della pagina e i token di spaziatura di Rivet. Rispetta i breakpoint di 480/740/1080/1260/1400px. Mantieni brevi i pannelli e conserva il comportamento da tastiera per il focus e la selezione; indica che tutti i dettagli inventati dell’evento sono contenuti dimostrativi. Non usare i simboli dell’identità IU senza autorizzazione. ``` ## Sistema di design Rivet: fonti e ambito Un riferimento tecnico Rivet e una dimostrazione fittizia per un workshop. L’uso dei simboli istituzionali e dei font resta soggetto alle norme dell’Indiana University; non si offrono visite né prenotazioni reali. - Panoramica di Rivet Panoramica ufficiale degli obiettivi e delle risorse. - Token di progettazione Valori definiti per le decisioni visive condivise. - Layout Layout iniziali per applicazioni e pagine di contenuto. - Componenti Componenti dell’interfaccia documentati. - Scarica l’esempio completo e funzionante ZIP con HTML completo, dipendenze locali CSS/JavaScript, licenze fornite e istruzioni esatte per l’avvio. Non è necessario alcun passaggio di compilazione. ## Sistema di design Rivet: risorse correlate ### Digital Agency sistema di design Crea interfacce leggibili per i servizi pubblici giapponesi con i ruoli testuali DADS, token semantici e anatomia nativa dei componenti HTML. Prova una ricerca di ricevute funzionante con errori di formato, un risultato senza corrispondenze e un record di stato consultabile. ### KERN Crea un’interfaccia nativa KERN con tipografia verificata, temi semantici, pannelli informativi e un flusso di conferma reversibile. ### Michigan Forty Two Scopri i flussi di lavoro WordPress supportati da Forty-Two, la palette web e gli schemi delle directory del personale attraverso un esempio funzionante di filtro per ruolo e ricerca. - [Riferimento per l’implementazione](https://rivet.iu.edu/components/tabs/) - [Fonte](https://rivet.iu.edu/utilities/typography/) - [Fonte](https://rivet.iu.edu/design-tokens/) - [Leggi la specifica di supporto](https://rivet.iu.edu/getting-started/) - [Leggi la specifica di supporto](https://rivet.iu.edu/utilities/typography/) - [Leggi la specifica di supporto](https://rivet.iu.edu/design-tokens/) - [Riferimento del codice](https://rivet.iu.edu/components/tabs/) - [Leggi la specifica di supporto](https://rivet.iu.edu/components/tabs/) - [Panoramica di Rivet Panoramica ufficiale degli obiettivi e delle risorse.](https://rivet.iu.edu/) - [Token di progettazione Valori definiti per le decisioni visive condivise.](https://rivet.iu.edu/design-tokens/) - [Layout Layout iniziali per applicazioni e pagine di contenuto.](https://rivet.iu.edu/layouts/) - [Componenti Componenti dell’interfaccia documentati.](https://rivet.iu.edu/components/)