# Sistema di design Ripple ## Ripple Anteprima dell'interfaccia del sistema di design Leggi le note di preparazione, indica che sei pronto e passa direttamente al prossimo passaggio incompleto. ## Ripple Riferimento di design del sistema di design Documentazione di design Ripple pubblicata e verificata per questo studio: ruoli dei colori predefiniti, spaziatura, coppie di dimensioni del testo e interlinea e colori del focus. Sono riferimenti di design, non l'affermazione che sia inclusa una versione nativa di Ripple. ### Ruoli dei colori pubblicati | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --rpl-clr-primary | #0052C2 | Palette Ripple predefinita documentata; i valori del tema possono variare. Mantieni il nome del ruolo quando applichi un tema. | | --rpl-clr-primary-alt | #003174 | Palette Ripple predefinita documentata; i valori del tema possono variare. Mantieni il nome del ruolo quando applichi un tema. | | --rpl-clr-accent | #0095EC | Palette Ripple predefinita documentata; i valori del tema possono variare. Mantieni il nome del ruolo quando applichi un tema. | | --rpl-clr-accent-alt | #E6F5FD | Palette Ripple predefinita documentata; i valori del tema possono variare. Mantieni il nome del ruolo quando applichi un tema. | | --rpl-clr-neutral-0 | #FFFFFF | Palette Ripple predefinita documentata; i valori del tema possono variare. Mantieni il nome del ruolo quando applichi un tema. | | --rpl-clr-neutral-100 | #F5F5F5 | Palette Ripple predefinita documentata; i valori del tema possono variare. Mantieni il nome del ruolo quando applichi un tema. | | --rpl-clr-neutral-200 | #E6E6E6 | Palette Ripple predefinita documentata; i valori del tema possono variare. Mantieni il nome del ruolo quando applichi un tema. | | --rpl-clr-neutral-700 | #333333 | Palette Ripple predefinita documentata; i valori del tema possono variare. Mantieni il nome del ruolo quando applichi un tema. | | --rpl-clr-neutral-800 | #1A1A1A | Palette Ripple predefinita documentata; i valori del tema possono variare. Mantieni il nome del ruolo quando applichi un tema. | | --rpl-clr-type-default | #1A1A1A | Palette Ripple predefinita documentata; i valori del tema possono variare. Mantieni il nome del ruolo quando applichi un tema. | | --rpl-clr-link | #0052C2 | Palette Ripple predefinita documentata; i valori del tema possono variare. Mantieni il nome del ruolo quando applichi un tema. | | --rpl-clr-link-visited | #9F46B1 | Palette Ripple predefinita documentata; i valori del tema possono variare. Mantieni il nome del ruolo quando applichi un tema. | ### Scala di spaziatura pubblicata | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --rpl-sp-1 | 4px | Intervallo di spaziatura documentato. I valori successivi non corrispondono all'indice moltiplicato per quattro. | | --rpl-sp-2 | 8px | Intervallo di spaziatura documentato. I valori successivi non corrispondono all'indice moltiplicato per quattro. | | --rpl-sp-3 | 12px | Intervallo di spaziatura documentato. I valori successivi non corrispondono all'indice moltiplicato per quattro. | | --rpl-sp-4 | 16px | Intervallo di spaziatura documentato. I valori successivi non corrispondono all'indice moltiplicato per quattro. | | --rpl-sp-5 | 20px | Intervallo di spaziatura documentato. I valori successivi non corrispondono all'indice moltiplicato per quattro. | | --rpl-sp-6 | 24px | Intervallo di spaziatura documentato. I valori successivi non corrispondono all'indice moltiplicato per quattro. | | --rpl-sp-7 | 28px | Intervallo di spaziatura documentato. I valori successivi non corrispondono all'indice moltiplicato per quattro. | | --rpl-sp-8 | 32px | Intervallo di spaziatura documentato. I valori successivi non corrispondono all'indice moltiplicato per quattro. | | --rpl-sp-9 | 40px | Intervallo di spaziatura documentato. I valori successivi non corrispondono all'indice moltiplicato per quattro. | | --rpl-sp-10 | 48px | Intervallo di spaziatura documentato. I valori successivi non corrispondono all'indice moltiplicato per quattro. | | --rpl-sp-11 | 56px | Intervallo di spaziatura documentato. I valori successivi non corrispondono all'indice moltiplicato per quattro. | | --rpl-sp-12 | 64px | Intervallo di spaziatura documentato. I valori successivi non corrispondono all'indice moltiplicato per quattro. | | --rpl-sp-13 | 80px | Intervallo di spaziatura documentato. I valori successivi non corrispondono all'indice moltiplicato per quattro. | | --rpl-sp-14 | 120px | Intervallo di spaziatura documentato. I valori successivi non corrispondono all'indice moltiplicato per quattro. | ### Ruoli tipografici e fallback | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | rpl-type-font-family | VIC, Arial, Helvetica, sans-serif | Coppie di dimensione e interlinea tratte dai ruoli tipografici pubblicati. L'esempio autonomo usa il fallback Arial documentato, non il carattere VIC. | | rpl-type-h1 | 32/36px small · 56/60px large · 700 | Coppie di dimensione e interlinea tratte dai ruoli tipografici pubblicati. L'esempio autonomo usa il fallback Arial documentato, non il carattere VIC. | | rpl-type-h2 | 24/32px small · 32/40px large · 700 | Coppie di dimensione e interlinea tratte dai ruoli tipografici pubblicati. L'esempio autonomo usa il fallback Arial documentato, non il carattere VIC. | | rpl-type-h3 | 20/28px small · 24/32px large · 700 | Coppie di dimensione e interlinea tratte dai ruoli tipografici pubblicati. L'esempio autonomo usa il fallback Arial documentato, non il carattere VIC. | | rpl-type-p | 16/24px | Coppie di dimensione e interlinea tratte dai ruoli tipografici pubblicati. L'esempio autonomo usa il fallback Arial documentato, non il carattere VIC. | | rpl-type-p-small | 14/20px | Coppie di dimensione e interlinea tratte dai ruoli tipografici pubblicati. L'esempio autonomo usa il fallback Arial documentato, non il carattere VIC. | ### Contrasto del focus | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --rpl-clr-focus | #FF9E1B | Colori del focus pubblicati. L'esempio implementa un proprio CSS di focus invece di importare le classi utility di Ripple. | | --rpl-clr-focus-contrast | #1A1A1A | Colori del focus pubblicati. L'esempio implementa un proprio CSS di focus invece di importare le classi utility di Ripple. | | --rpl-clr-dark | #1A1A1A | Colori del focus pubblicati. L'esempio implementa un proprio CSS di focus invece di importare le classi utility di Ripple. | ## Ripple Guida completa al sistema di design 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. ## Fondamenti e ambito di esecuzione del sistema di design Ripple ### Distinguere un riferimento di design da un runtime di componenti > Il riferimento descrive il sistema di design Ripple pubblicato. La sequenza di lavoro del workshop è un’interpretazione originale e completa di HTML, CSS e JavaScript dei valori selezionati. Non esegue i componenti Vue di Ripple, non usa mirror di pacchetti non documentati e non si presenta come un servizio del Governo del Victoria. Questo limite è visibile nell’anteprima e resta valido anche nel codice sorgente scaricabile. ### Scegliere con attenzione l’integrazione nativa Ripple pubblica un percorso basato su Vue e uno con soli stili tramite il pacchetto core. L’installazione ufficiale richiede l’accesso a GitHub Packages. Anche il percorso con soli stili lascia all’applicazione la gestione del markup e del comportamento. Per integrare questa distribuzione, segui le istruzioni ufficiali di accesso collegate e blocca la versione scelta; lo studio autonomo qui sotto non richiede né autenticazione né installazione di pacchetti. ## Ruoli del colore e focus da tastiera nel sistema di design Ripple ### Mantenere distinta la marca dai contenuti L’intestazione della sequenza usa il valore primario più scuro, il bordo usa il colore d’accento e il testo di lettura usa il ruolo di testo neutro. Nel codice sorgente fornito corrispondono a variabili distinte di CSS. Il pannello di stato originale usa la superficie d’accento chiara. Il riferimento include i nomi dei ruoli oltre ai valori, così che un futuro cambio di tema possa aggiornare la relazione prevista invece di un insieme di valori esadecimali non correlati. ### Rendere il focus da tastiera visibilmente distinto Il focus è arancione con contenuto scuro, anziché essere un’altra tonalità del blu predefinito. La regola originale per il focus di pulsante e riepilogo cambia la superficie e aggiunge un contorno scuro. Il focus della casella di controllo resta un contorno. Questa è un’implementazione dell’approccio al colore del focus documentato, non un’affermazione che l’esempio importi le utilità native per il focus di Ripple o garantisca l’accessibilità per ogni tema possibile. ## Spaziatura e tipografia adattiva nel sistema di design Ripple ### Usare la sequenza di spaziatura effettiva Il codice sorgente usa incrementi denominati di 8, 16, 24, 32 e 48px per il ritmo di lettura. Il riferimento completo documenta anche incrementi più ampi; la sequenza smette di essere un semplice multiplo dell’indice, quindi rpl-sp-9 corrisponde a 40px, non a 36px. La spaziatura della griglia definita nel codice e il padding delle sezioni condividono intenzionalmente alcuni valori della scala, pur svolgendo ruoli diversi nel layout. ### Esplicitare i limiti dei caratteri tipografici Ripple documenta VIC con Arial e Helvetica come fallback. Questo studio non include file di font VIC e usa esplicitamente Arial. Nell’esempio, il titolo passa da 32/36px a 56/60px al breakpoint di 992px, mentre il testo del corpo resta a 16/24px. Questi valori di dimensione del carattere e interlinea sono riferimenti documentati; la composizione della sequenza temporale è originale e non va descritta come un componente nativo identico al pixel. ## Contenuti e visualizzazione progressiva della sequenza nel sistema di design Ripple ### Assegnare uno scopo distinto a ogni fase La prima fase definisce la decisione, la seconda prepara la partecipazione e la terza registra un’azione. Le etichette temporali relative indicano la sequenza senza inventare scadenze governative o promesse di servizio. Ogni fase ha un breve riepilogo sempre visibile e ulteriori note di preparazione in un elemento nativo per i dettagli. La sequenza resta un elenco ordinato, anche se gli indicatori visivi sono personalizzati. - Le indicazioni temporali relative descrivono la sequenza del workshop. - I riepiloghi visibili comunicano lo scopo di ogni fase. - Le note espandibili contengono dettagli secondari. - La preparazione si registra con una casella di controllo esplicita. ### Non confondere la lettura con la preparazione Espandere le note di preparazione non contrassegna una fase come completata. La casella di controllo separata registra la preparazione, e il conteggio dell’avanzamento si basa solo sugli elementi selezionati. In questo modo, la semplice lettura non porta a completare accidentalmente il lavoro. Il codice sorgente contiene tutti gli elementi e tutta la logica di stato, che possono quindi essere esaminati e modificati. ## Avanzamento, passo successivo e ripristino del sistema di design Ripple ### Ricavare l’azione successiva dallo stato corrente Vai al prossimo passaggio incompleto individua la prima fase non selezionata, ne espande le note e porta il focus sulla relativa casella di controllo. Non salta una fase solo perché il lettore l’aveva già aperta. Quando tutte e tre le caselle di controllo sono selezionate, il pulsante per il passo successivo viene disabilitato e lo stato indica che tutti i passaggi di preparazione sono pronti. Deselezionando un elemento, l’azione torna disponibile. ### Ripristinare insieme tutti gli stati correlati Il ripristino deseleziona le tre caselle di controllo, chiude le note, aggiorna l’elemento di avanzamento e riporta il focus sulla prima casella di controllo. Non lascia visibile un messaggio di completamento e non fa credere che sia stato eliminato un record remoto. Per questo studio locale, lo stato resta intenzionalmente in memoria; una spiegazione visibile chiarisce che non viene salvato né inviato. ## Codice sorgente completo e verifica del sistema di design Ripple ### Eseguire lo studio autonomo Salva il documento completo fornito come index.html e avvia un server nella relativa directory. Include token, markup, contenuti di esempio leggibili e codice per le interazioni, quindi non effettua richieste a runtime o a font esterni. Prima di realizzare un servizio vero, consulta i link di riferimento per verificare le API native di Ripple, le versioni da usare e le risorse di marca autorizzate. 1. Salva l’esempio completo di HTML come index.html. 2. Avvia un server locale nella directory. 3. Verifica con la tastiera il focus del passo successivo, il completamento e il ripristino. 4. Per un’integrazione nativa separata di Ripple, usa l’accesso ufficiale ai pacchetti e blocca le versioni. ### Verificare l’intera transizione di stato Contrassegna come pronto il primo elemento, usa l’azione per il passo successivo e verifica che il focus passi alla seconda casella di controllo e che le relative note siano espanse. Completa tutti gli elementi e verifica che l’azione per il passo successivo venga disabilitata; poi deseleziona un elemento e controlla che torni disponibile. Esegui il ripristino e verifica sia l’avanzamento sia le sezioni espandibili. Alla larghezza di uno smartphone, il pannello di stato si sposta sotto la sequenza temporale e tutti i controlli restano disponibili. ## Esempi di componenti del sistema di design Ripple ### index.html — sequenza temporale completa del workshop Valori dei token, stili adattivi, contenuti, avanzamento e comportamento del focus sono raccolti in un unico documento eseguibile. ``` Workshop planning timeline

OpenDesign · Workshop practice

Make room for a useful conversation

A short planning timeline for a team workshop. Mark what is ready and jump to the next unfinished step.

Your preparation timeline

  1. One week before

    Define the decision

    Agree on the question the workshop should answer and the people who need to take part.

    Preparation notes
    • Write a one-sentence outcome.
    • Invite people with different perspectives on the decision.
    • Explain what is already decided and what is still open.

  2. Two days before

    Prepare for participation

    Share a short agenda and offer a way to contribute before the session.

    Preparation notes
    • Send readable material in advance.
    • Check access needs and remote participation.
    • Choose someone to capture decisions.

  3. On the day

    Leave with a next step

    Close with a clear decision, an owner and a date to review what happens next.

    Preparation notes
    • Leave time to compare different views.
    • Record unanswered questions separately.
    • Read back the agreed action before closing.

An original OpenDesign HTML/CSS study using published Ripple color, spacing and type values. It uses Arial, Ripple’s documented fallback, and does not run the Ripple Vue components or supply the VIC font. The checklist stays in this page and is not saved or sent.

``` Riferimento del codice - È codice originale dell’applicazione, non il codice sorgente di un componente Vue di Ripple. - Non servono runtime esterni, richieste di font, account o invio di dati. ## Configurazione dell’agente per il sistema di design Ripple ### Punto di partenza per l’implementazione Questo comando serve l’interpretazione autonoma. Per usare Ripple in modo nativo, segui le istruzioni ufficiali per l’accesso a GitHub Packages e la configurazione con Vue o con i soli stili, disponibili nelle Fonti. ``` # Save the complete example as index.html in an empty directory. python3 -m http.server 8000 # Open http://localhost:8000/ ``` ### Un prompt per il tuo progetto ``` Crea la sequenza temporale completa e originale del workshop a partire dal documento fornito. Mantieni i valori dei ruoli e la spaziatura documentati di Ripple, il fallback esplicito Arial, la distinzione tra lettura e preparazione, il focus sul primo passaggio incompleto, il completamento e il ripristino completo. Indica chiaramente che il risultato è un’interpretazione di HTML/CSS, non un’implementazione nativa Vue di Ripple. ``` ## Fonti e ambito del sistema di design Ripple Un’interpretazione di HTML/CSS di OpenDesign basata sui valori di design pubblicati di Ripple e sul fallback Arial documentato. Questa anteprima non esegue i componenti Vue di Ripple e non include risorse dei font VIC. - Ruoli cromatici Palette predefinita e ruoli dei contenuti. - Spaziatura La sequenza completa di spaziatura pubblicata. - Tipografia VIC, fallback e coppie tipografiche adattive. - Stati del focus Trattamento del focus arancione e scuro. - Configurazione nativa con soli stili Accesso ai pacchetti e responsabilità nell’uso dei soli stili. - Token di progettazione Nomi dei ruoli e relazioni tra i temi. ## Risorse correlate al sistema di design Ripple ### Scottish Government sistema di design Applica la tipografia responsive, le spaziature e i ruoli cromatici del governo scozzese a un campo nativo con conteggio dei caratteri, che conserva il testo oltre il limite e consente di correggerlo. ### Singapore Government sistema di design Usa gli attuali Web Components di SGDS con token responsive reali, temi giorno e notte e quantità native con limiti, per mantenere sincronizzato un piano locale. ### Decanter Componi pagine editoriali accademiche con il preset Tailwind di Decanter, la scala tipografica responsive e margini fluidi. Esplora schede di eventi originali con filtri tematici funzionanti e abstract espandibili. - [Riferimento per l’implementazione](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/) - [Fonte](https://www.ripple.sdp.vic.gov.au/design-system/styles/colour/) - [Fonte](https://www.ripple.sdp.vic.gov.au/design-system/styles/spacing/) - [Fonte](https://www.ripple.sdp.vic.gov.au/design-system/styles/typography/) - [Fonte](https://www.ripple.sdp.vic.gov.au/design-system/styles/focus-state/) - [Riferimento del codice](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/) - [Ruoli cromatici Palette predefinita e ruoli dei contenuti.](https://www.ripple.sdp.vic.gov.au/design-system/styles/colour/) - [Spaziatura La sequenza completa di spaziatura pubblicata.](https://www.ripple.sdp.vic.gov.au/design-system/styles/spacing/) - [Tipografia VIC, fallback e coppie tipografiche adattive.](https://www.ripple.sdp.vic.gov.au/design-system/styles/typography/) - [Stati del focus Trattamento del focus arancione e scuro.](https://www.ripple.sdp.vic.gov.au/design-system/styles/focus-state/) - [Configurazione nativa con soli stili Accesso ai pacchetti e responsabilità nell’uso dei soli stili.](https://www.ripple.sdp.vic.gov.au/design-system/develop/usage/css-only/) - [Token di progettazione Nomi dei ruoli e relazioni tra i temi.](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/)