Esplora i ruoli cromatici effettivi di Ripple, la scala di spaziatura a 14 livelli e i riferimenti tipografici responsive attraverso una timeline completa per un workshop, con visualizzazione progressiva, indicatore di avanzamento e focus da tastiera sul passaggio successivo.
Completa HTML/CSS/JavaScript originali usando i valori Ripple documentati; fallback Arial, nessun runtime nativo di Ripple. · Riferimento per l’implementazione
02
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.
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
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.
Salva l’esempio completo di HTML come index.html.
Avvia un server locale nella directory.
Verifica con la tastiera il focus del passo successivo, il completamento e il ripristino.
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.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop planning timeline</title><style>
:root{--rpl-clr-primary:#0052c2;--rpl-clr-primary-alt:#003174;--rpl-clr-accent:#0095ec;--rpl-clr-accent-alt:#e6f5fd;--rpl-clr-type-default:#1a1a1a;--rpl-clr-neutral-0:#fff;--rpl-clr-neutral-100:#f5f5f5;--rpl-clr-neutral-200:#e6e6e6;--rpl-clr-focus:#ff9e1b;--rpl-clr-focus-contrast:#1a1a1a;--rpl-sp-2:8px;--rpl-sp-4:16px;--rpl-sp-6:24px;--rpl-sp-8:32px;--rpl-sp-10:48px;--rpl-type-font-family:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--rpl-clr-neutral-0);color:var(--rpl-clr-type-default);font:16px/1.5 var(--rpl-type-font-family)}main{max-width:1160px;margin:auto;padding:var(--rpl-sp-8)}header{background:var(--rpl-clr-primary-alt);color:white;padding:var(--rpl-sp-8);border-bottom:8px solid var(--rpl-clr-accent)}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700}h1{font-size:32px;line-height:36px;margin:16px 0;max-width:20ch}header p:last-child{max-width:65ch;margin-bottom:0}.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:var(--rpl-sp-10);margin-top:var(--rpl-sp-8)}h2{font-size:24px;line-height:32px;margin:0 0 16px}h3{font-size:20px;line-height:28px;margin:0}.timeline{list-style:none;margin:0;padding:0 0 0 24px;border-left:2px solid var(--rpl-clr-primary);}.timeline>li{position:relative;padding:0 0 32px 8px}.timeline>li:before{content:'';position:absolute;width:14px;height:14px;background:var(--rpl-clr-primary);border:3px solid white;outline:2px solid var(--rpl-clr-primary);border-radius:50%;left:-32px;top:6px}.when{font-size:14px;font-weight:700;color:var(--rpl-clr-primary);margin:0 0 8px}.timeline p{margin:8px 0 16px}.timeline label{display:flex;align-items:flex-start;gap:8px;font-weight:700}.timeline input{width:20px;height:20px;flex-shrink:0;margin:2px 0;accent-color:var(--rpl-clr-primary)}details{background:var(--rpl-clr-neutral-100);margin:16px 0;padding:16px}summary{font-weight:700;cursor:pointer}details ul{padding-left:24px}.progress{background:var(--rpl-clr-accent-alt);padding:24px;align-self:start;border-top:4px solid var(--rpl-clr-primary)}progress{width:100%;height:16px;accent-color:var(--rpl-clr-primary)}button{font:700 16px/24px var(--rpl-type-font-family);padding:12px 16px;cursor:pointer;border:2px solid var(--rpl-clr-primary);background:var(--rpl-clr-primary);color:white;text-align:left;max-width:100%}button:hover{background:var(--rpl-clr-primary-alt)}.secondary{color:var(--rpl-clr-primary);background:white;margin-top:16px}button:disabled{cursor:default;opacity:.6}.progress button{width:100%;margin-top:16px}button:focus-visible,summary:focus-visible{outline:3px solid var(--rpl-clr-focus-contrast);outline-offset:2px;background:var(--rpl-clr-focus);color:var(--rpl-clr-focus-contrast);border-radius:0}input:focus-visible{outline:3px solid var(--rpl-clr-focus);outline-offset:3px}.note{font-size:14px;border-top:1px solid var(--rpl-clr-neutral-200);padding-top:24px;margin-top:8px;max-width:80ch}[hidden]{display:none!important}@media(min-width:992px){h1{font-size:56px;line-height:60px}h2{font-size:32px;line-height:40px}}@media(max-width:760px){main{padding:20px}header{padding:24px}.layout{grid-template-columns:1fr;gap:24px}.eyebrow{overflow-wrap:anywhere}}
</style></head><body><main><header><p class="eyebrow">OpenDesign · Workshop practice</p><h1>Make room for a useful conversation</h1><p>A short planning timeline for a team workshop. Mark what is ready and jump to the next unfinished step.</p></header><div class="layout"><section aria-labelledby="plan-heading"><h2 id="plan-heading">Your preparation timeline</h2><ol class="timeline">
<li><p class="when">One week before</p><h3>Define the decision</h3><p>Agree on the question the workshop should answer and the people who need to take part.</p><details><summary>Preparation notes</summary><ul><li>Write a one-sentence outcome.</li><li>Invite people with different perspectives on the decision.</li><li>Explain what is already decided and what is still open.</li></ul></details><label><input type="checkbox" data-step="0">The purpose and invitations are ready</label></li>
<li><p class="when">Two days before</p><h3>Prepare for participation</h3><p>Share a short agenda and offer a way to contribute before the session.</p><details><summary>Preparation notes</summary><ul><li>Send readable material in advance.</li><li>Check access needs and remote participation.</li><li>Choose someone to capture decisions.</li></ul></details><label><input type="checkbox" data-step="1">The agenda and access arrangements are ready</label></li>
<li><p class="when">On the day</p><h3>Leave with a next step</h3><p>Close with a clear decision, an owner and a date to review what happens next.</p><details><summary>Preparation notes</summary><ul><li>Leave time to compare different views.</li><li>Record unanswered questions separately.</li><li>Read back the agreed action before closing.</li></ul></details><label><input type="checkbox" data-step="2">The action and follow-up are recorded</label></li>
</ol></section><aside class="progress" aria-labelledby="progress-heading"><h2 id="progress-heading">Preparation status</h2><p id="count" role="status">0 of 3 steps ready</p><progress max="3" value="0" aria-label="Preparation progress"></progress><p id="next-note">Next: Define the decision</p><button id="next" type="button">Go to next unfinished step</button><button class="secondary" id="reset" type="button">Reset checklist</button></aside></div><p class="note">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.</p></main><script>
const checks=[...document.querySelectorAll('[data-step]')],names=['Define the decision','Prepare for participation','Leave with a next step'];const next=document.querySelector('#next');
function update(){let count=checks.filter(c=>c.checked).length,first=checks.findIndex(c=>!c.checked);document.querySelector('#count').textContent=`${count} of 3 steps ready`;document.querySelector('progress').value=count;document.querySelector('#next-note').textContent=first<0?'All three preparation steps are ready.':'Next: '+names[first];next.disabled=first<0;}
checks.forEach(c=>c.addEventListener('change',update));next.addEventListener('click',()=>{let check=checks.find(c=>!c.checked);if(check){check.closest('li').querySelector('details').open=true;check.focus();}});document.querySelector('#reset').addEventListener('click',()=>{checks.forEach(c=>c.checked=false);document.querySelectorAll('details').forEach(d=>d.open=false);update();checks[0].focus();});update();
</script></body></html>
È 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.
04
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.
sh
# 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
Prompt per l’agente
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.
05
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.
