Administración pública y servicios públicos · Nuevo recurso
Sistema de diseño Ripple.
Explora los roles de color reales de Ripple, su escala de espaciado de 14 pasos y sus referencias tipográficas adaptables mediante una cronología completa de taller con divulgación progresiva, progreso y enfoque del teclado en el siguiente paso.
Implementación original completa de HTML/CSS/JavaScript con los valores documentados de Ripple; alternativa Arial, sin entorno de ejecución nativo de Ripple. · Referencia de implementación
02
Referencia de diseño del sistema de diseño Ripple
Documentación publicada del diseño de Ripple verificada para este estudio: roles de color predeterminados, espaciado, pares de tamaño e interlineado tipográficos y colores de foco. Son referencias de diseño, no una afirmación de que se incluya una versión nativa de Ripple.
Fundamentos y alcance del entorno de ejecución del sistema de diseño Ripple
Distingue las referencias de diseño del entorno de ejecución de componentes
La referencia describe el sistema de diseño publicado de Ripple. La cronología del taller es una interpretación original y completa de HTML, CSS y JavaScript basada en valores seleccionados. No ejecuta componentes Vue de Ripple, no usa un espejo de paquetes sin documentar ni afirma ser un servicio del Gobierno de Victoria. Este límite se muestra en la vista previa y se mantiene en el código fuente descargable.
Elige deliberadamente la integración nativa
Ripple publica una ruta de paquetes orientada a Vue y otra que solo incluye estilos mediante su paquete principal. La instalación oficial requiere acceso a GitHub Packages. La ruta de solo estilos sigue dejando el marcado y el comportamiento en manos de la aplicación. Para integrar esa distribución, sigue las instrucciones oficiales de acceso enlazadas y fija la versión que elijas; el estudio independiente de abajo no requiere autenticación ni instalación de paquetes.
Roles de color y foco de teclado del sistema de diseño Ripple
Mantén diferenciados la marca y el contenido
El encabezado de la cronología usa el valor primario más oscuro, el borde usa el color de acento y el texto de lectura usa el rol de texto neutro. En el código fuente proporcionado, corresponden a variables distintas de CSS. El panel de estado original usa la superficie de acento pálido. La referencia incluye tanto los nombres de los roles como sus valores, para que un cambio de tema futuro pueda actualizar la relación prevista en lugar de un conjunto de valores hexadecimales sin conexión entre sí.
Haz que el foco de teclado se distinga a simple vista
El foco es naranja con contenido oscuro, no otro tono del azul predeterminado. La regla de foco original para botones y resúmenes cambia su superficie y dibuja un contorno oscuro. El foco de las casillas de verificación conserva un contorno. Esta es una implementación del enfoque de colores de foco publicado, no una afirmación de que el ejemplo importe las utilidades de foco nativas de Ripple ni de que garantice la accesibilidad en todos los temas posibles.
Espaciado y tipografía adaptable del sistema de diseño Ripple
Usa la secuencia de espaciado real
El código fuente usa los pasos con nombre de 8, 16, 24, 32 y 48px para marcar el ritmo de lectura. La referencia completa también registra pasos mayores; la secuencia deja de ser un simple múltiplo del índice, por lo que rpl-sp-9 es 40px, no 36px. El espacio entre columnas de la cuadrícula y el relleno de las secciones comparten deliberadamente valores de la escala, aunque cumplen funciones distintas en el diseño.
Deja claros los límites de uso de fuentes
Ripple documenta VIC con Arial y Helvetica como alternativas. Este estudio no incluye ningún archivo de fuente VIC y usa Arial explícitamente. El encabezado cambia de 32/36px a 56/60px en el punto de ruptura de 992px del ejemplo, mientras que el texto del cuerpo mantiene 16/24px. Estos valores de tamaño e interlineado son referencias documentadas; la composición de la cronología es original y no debe describirse como un componente nativo idéntico píxel por píxel.
Contenido de la cronología y divulgación progresiva del sistema de diseño Ripple
Asigna una función distinta a cada etapa
La primera etapa define la decisión, la segunda prepara la participación y la tercera registra una acción. Las etiquetas de tiempo relativo indican la secuencia sin inventar plazos gubernamentales ni compromisos de servicio. Cada etapa tiene un resumen breve que permanece visible y notas de preparación adicionales en un elemento details nativo. La secuencia sigue siendo una lista ordenada, aunque sus marcadores visuales sean personalizados.
El tiempo relativo describe la secuencia del taller.
Los resúmenes visibles comunican el propósito de cada etapa.
Las notas desplegables incluyen información secundaria.
La preparación se indica mediante una casilla de verificación explícita.
No confundas leer con estar preparado
Progreso, enfoque del siguiente paso y restablecimiento del sistema de diseño Ripple
Determina la siguiente acción a partir del estado actual
Ir al siguiente paso pendiente busca la primera etapa sin marcar, despliega sus notas y enfoca su casilla. No omite una etapa solo porque el lector ya la haya abierto. Cuando se marcan las tres casillas, el botón para ir al siguiente paso se desactiva y el estado indica que todos los pasos de preparación están listos. Si se desmarca un elemento, la acción vuelve a estar disponible.
Restablece juntos todos los estados relacionados
Restablecer desmarca las tres casillas, cierra las notas, actualiza el elemento de progreso y devuelve el foco a la primera casilla. No deja un aviso de tarea completada ni da a entender que se ha eliminado un registro remoto. En este estudio local, el estado se mantiene intencionadamente en la memoria, y la explicación visible indica que no se guarda ni se envía.
Código fuente completo y verificación del sistema de diseño Ripple
Ejecuta el estudio independiente
Guarda el documento completo proporcionado como index.html y sirve su directorio. Incluye sus propios tokens, marcado, contenido de ejemplo legible y código de interacción, por lo que no requiere recursos externos en tiempo de ejecución ni solicitudes de fuentes. Consulta los enlaces de referencia para revisar las API nativas de Ripple, las opciones de publicación y los recursos de marca autorizados antes de crear un servicio real.
Guarda el ejemplo completo de HTML como index.html.
Sirve el directorio localmente.
Prueba con el teclado el enfoque del siguiente paso, la finalización y el restablecimiento.
Para una integración nativa independiente de Ripple, usa el acceso oficial a los paquetes y fija las versiones.
Verifica toda la transición de estado
Marca como listo el primer elemento, usa la acción para ir al siguiente paso y verifica que el foco pase a la segunda casilla y que sus notas estén desplegadas. Completa todos los elementos y confirma que la acción para ir al siguiente paso se desactive; después, desmarca un elemento y verifica que vuelva a estar disponible. Restablece y comprueba el progreso y los paneles desplegables. En una pantalla de ancho reducido, el panel de estado aparece debajo de la línea de tiempo y todos los controles siguen disponibles.
Ejemplos de componentes del sistema de diseño Ripple
index.html — línea de tiempo completa del taller
Todos los valores de tokens, estilos adaptables, contenido, progreso y comportamiento del foco en un único documento ejecutable.
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>
Este es código de aplicación original, no el código fuente de un componente Vue de Ripple.
No se necesita ningún recurso externo en tiempo de ejecución, solicitud de fuentes, cuenta ni envío de datos.
04
Configuración del agente de IA del sistema de diseño Ripple
Punto de partida para la implementación
Este comando sirve la interpretación independiente. Para usar Ripple de forma nativa, sigue las instrucciones oficiales de acceso a GitHub Packages y la configuración de Vue o solo de estilos que se indican en Fuentes.
sh
# Save the complete example as index.html in an empty directory.
python3 -m http.server 8000
# Open http://localhost:8000/
Una instrucción para tu proyecto
Instrucción para el agente
Crea la línea de tiempo completa y original del taller a partir del documento proporcionado. Conserva los valores de rol y espaciado documentados de Ripple, la alternativa explícita Arial, los estados diferenciados de lectura y preparación, el enfoque del siguiente paso pendiente, la finalización y el restablecimiento completo. Identifica el resultado como una interpretación de HTML/CSS, no como una implementación nativa de Vue de Ripple.
05
Fuentes y alcance del sistema de diseño Ripple
Una interpretación de OpenDesign con HTML/CSS que utiliza valores de diseño publicados de Ripple y la alternativa Arial documentada. Esta vista previa no ejecuta componentes Vue de Ripple ni incluye recursos de la fuente VIC.
