# Sistema de diseño Ripple ## Vista previa de la interfaz del sistema de diseño Ripple Lee las notas de preparación, indica que estás listo y pasa directamente al siguiente paso pendiente. ## 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. ### Roles de color publicados | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --rpl-clr-primary | #0052C2 | Paleta predeterminada documentada de Ripple; los valores del tema pueden variar. Al aplicar un tema, conserva el nombre del rol. | | --rpl-clr-primary-alt | #003174 | Paleta predeterminada documentada de Ripple; los valores del tema pueden variar. Al aplicar un tema, conserva el nombre del rol. | | --rpl-clr-accent | #0095EC | Paleta predeterminada documentada de Ripple; los valores del tema pueden variar. Al aplicar un tema, conserva el nombre del rol. | | --rpl-clr-accent-alt | #E6F5FD | Paleta predeterminada documentada de Ripple; los valores del tema pueden variar. Al aplicar un tema, conserva el nombre del rol. | | --rpl-clr-neutral-0 | #FFFFFF | Paleta predeterminada documentada de Ripple; los valores del tema pueden variar. Al aplicar un tema, conserva el nombre del rol. | | --rpl-clr-neutral-100 | #F5F5F5 | Paleta predeterminada documentada de Ripple; los valores del tema pueden variar. Al aplicar un tema, conserva el nombre del rol. | | --rpl-clr-neutral-200 | #E6E6E6 | Paleta predeterminada documentada de Ripple; los valores del tema pueden variar. Al aplicar un tema, conserva el nombre del rol. | | --rpl-clr-neutral-700 | #333333 | Paleta predeterminada documentada de Ripple; los valores del tema pueden variar. Al aplicar un tema, conserva el nombre del rol. | | --rpl-clr-neutral-800 | #1A1A1A | Paleta predeterminada documentada de Ripple; los valores del tema pueden variar. Al aplicar un tema, conserva el nombre del rol. | | --rpl-clr-type-default | #1A1A1A | Paleta predeterminada documentada de Ripple; los valores del tema pueden variar. Al aplicar un tema, conserva el nombre del rol. | | --rpl-clr-link | #0052C2 | Paleta predeterminada documentada de Ripple; los valores del tema pueden variar. Al aplicar un tema, conserva el nombre del rol. | | --rpl-clr-link-visited | #9F46B1 | Paleta predeterminada documentada de Ripple; los valores del tema pueden variar. Al aplicar un tema, conserva el nombre del rol. | ### Escala de espaciado publicada | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --rpl-sp-1 | 4px | Paso de espaciado documentado. Los pasos posteriores no se obtienen multiplicando el índice por cuatro. | | --rpl-sp-2 | 8px | Paso de espaciado documentado. Los pasos posteriores no se obtienen multiplicando el índice por cuatro. | | --rpl-sp-3 | 12px | Paso de espaciado documentado. Los pasos posteriores no se obtienen multiplicando el índice por cuatro. | | --rpl-sp-4 | 16px | Paso de espaciado documentado. Los pasos posteriores no se obtienen multiplicando el índice por cuatro. | | --rpl-sp-5 | 20px | Paso de espaciado documentado. Los pasos posteriores no se obtienen multiplicando el índice por cuatro. | | --rpl-sp-6 | 24px | Paso de espaciado documentado. Los pasos posteriores no se obtienen multiplicando el índice por cuatro. | | --rpl-sp-7 | 28px | Paso de espaciado documentado. Los pasos posteriores no se obtienen multiplicando el índice por cuatro. | | --rpl-sp-8 | 32px | Paso de espaciado documentado. Los pasos posteriores no se obtienen multiplicando el índice por cuatro. | | --rpl-sp-9 | 40px | Paso de espaciado documentado. Los pasos posteriores no se obtienen multiplicando el índice por cuatro. | | --rpl-sp-10 | 48px | Paso de espaciado documentado. Los pasos posteriores no se obtienen multiplicando el índice por cuatro. | | --rpl-sp-11 | 56px | Paso de espaciado documentado. Los pasos posteriores no se obtienen multiplicando el índice por cuatro. | | --rpl-sp-12 | 64px | Paso de espaciado documentado. Los pasos posteriores no se obtienen multiplicando el índice por cuatro. | | --rpl-sp-13 | 80px | Paso de espaciado documentado. Los pasos posteriores no se obtienen multiplicando el índice por cuatro. | | --rpl-sp-14 | 120px | Paso de espaciado documentado. Los pasos posteriores no se obtienen multiplicando el índice por cuatro. | ### Roles tipográficos y alternativa | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | rpl-type-font-family | VIC, Arial, Helvetica, sans-serif | Pares de tamaño e interlineado de los roles tipográficos publicados. El ejemplo independiente usa la alternativa Arial documentada, no la fuente VIC. | | rpl-type-h1 | 32/36px small · 56/60px large · 700 | Pares de tamaño e interlineado de los roles tipográficos publicados. El ejemplo independiente usa la alternativa Arial documentada, no la fuente VIC. | | rpl-type-h2 | 24/32px small · 32/40px large · 700 | Pares de tamaño e interlineado de los roles tipográficos publicados. El ejemplo independiente usa la alternativa Arial documentada, no la fuente VIC. | | rpl-type-h3 | 20/28px small · 24/32px large · 700 | Pares de tamaño e interlineado de los roles tipográficos publicados. El ejemplo independiente usa la alternativa Arial documentada, no la fuente VIC. | | rpl-type-p | 16/24px | Pares de tamaño e interlineado de los roles tipográficos publicados. El ejemplo independiente usa la alternativa Arial documentada, no la fuente VIC. | | rpl-type-p-small | 14/20px | Pares de tamaño e interlineado de los roles tipográficos publicados. El ejemplo independiente usa la alternativa Arial documentada, no la fuente VIC. | ### Contraste del foco | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --rpl-clr-focus | #FF9E1B | Colores de foco publicados. El ejemplo implementa su propio CSS de foco en lugar de importar las clases de utilidad de Ripple. | | --rpl-clr-focus-contrast | #1A1A1A | Colores de foco publicados. El ejemplo implementa su propio CSS de foco en lugar de importar las clases de utilidad de Ripple. | | --rpl-clr-dark | #1A1A1A | Colores de foco publicados. El ejemplo implementa su propio CSS de foco en lugar de importar las clases de utilidad de Ripple. | ## Guía completa del sistema de diseño Ripple Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## 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 Desplegar las notas de preparación no marca una etapa como completada. La casilla independiente indica si se está preparado, y el recuento de progreso solo se calcula a partir de los elementos marcados. Así se evita que alguien complete el trabajo por accidente con solo leerlo. El documento incluye todos los elementos y toda la lógica de estado, por lo que esta distinción se puede revisar y editar. ## 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. 1. Guarda el ejemplo completo de HTML como index.html. 2. Sirve el directorio localmente. 3. Prueba con el teclado el enfoque del siguiente paso, la finalización y el restablecimiento. 4. 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. ``` 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.

``` Referencia de código - 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. ## 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. ``` # 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 ``` 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. ``` ## 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. - Funciones del color Paleta predeterminada y roles de contenido. - Espaciado La secuencia de espaciado completa publicada. - Tipografía VIC, alternativas y pares tipográficos adaptables. - Estados de foco Tratamiento de foco naranja y oscuro. - Configuración nativa de solo estilos Acceso a paquetes y responsabilidades de la configuración de solo estilos. - Tokens de diseño Nombres de roles y relaciones entre temas. ## Recursos relacionados con el sistema de diseño Ripple ### Scottish Government sistema de diseño Aplica los roles tipográficos adaptables, de espaciado y de color del Gobierno escocés mediante un campo nativo con contador de caracteres que conserva el texto que supera el límite y permite corregirlo. ### Singapore Government sistema de diseño Usa los SGDS Web Components actuales con tokens adaptables reales, temas de día y de noche, y controles nativos de cantidades con límites que mantienen sincronizado un plan local. ### Decanter Compón páginas editoriales académicas con el preset de Tailwind de Decanter, una escala tipográfica adaptable y bordes de pantalla fluidos. Explora tarjetas de eventos originales con filtros de temas funcionales y resúmenes expandibles. - [Referencia de implementación](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/) - [Fuente](https://www.ripple.sdp.vic.gov.au/design-system/styles/colour/) - [Fuente](https://www.ripple.sdp.vic.gov.au/design-system/styles/spacing/) - [Fuente](https://www.ripple.sdp.vic.gov.au/design-system/styles/typography/) - [Fuente](https://www.ripple.sdp.vic.gov.au/design-system/styles/focus-state/) - [Referencia de código](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/) - [Funciones del color Paleta predeterminada y roles de contenido.](https://www.ripple.sdp.vic.gov.au/design-system/styles/colour/) - [Espaciado La secuencia de espaciado completa publicada.](https://www.ripple.sdp.vic.gov.au/design-system/styles/spacing/) - [Tipografía VIC, alternativas y pares tipográficos adaptables.](https://www.ripple.sdp.vic.gov.au/design-system/styles/typography/) - [Estados de foco Tratamiento de foco naranja y oscuro.](https://www.ripple.sdp.vic.gov.au/design-system/styles/focus-state/) - [Configuración nativa de solo estilos Acceso a paquetes y responsabilidades de la configuración de solo estilos.](https://www.ripple.sdp.vic.gov.au/design-system/develop/usage/css-only/) - [Tokens de diseño Nombres de roles y relaciones entre temas.](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/)