# Sistema de design Ripple ## Prévia da interface do sistema de design Ripple Leia as notas de preparação, indique que está tudo pronto e vá diretamente para a próxima etapa pendente. ## Referência de design do sistema de design Ripple Documentação de design publicada de Ripple verificada para este estudo: funções de cor padrão, espaçamento, pares de tamanho e altura de linha e cores de foco. São referências de design, não uma afirmação de que haja uma versão nativa de Ripple incluída no pacote. ### Funções de cor publicadas | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --rpl-clr-primary | #0052C2 | Paleta padrão documentada de Ripple; os valores do tema podem variar. Ao aplicar um tema, mantenha o nome da função. | | --rpl-clr-primary-alt | #003174 | Paleta padrão documentada de Ripple; os valores do tema podem variar. Ao aplicar um tema, mantenha o nome da função. | | --rpl-clr-accent | #0095EC | Paleta padrão documentada de Ripple; os valores do tema podem variar. Ao aplicar um tema, mantenha o nome da função. | | --rpl-clr-accent-alt | #E6F5FD | Paleta padrão documentada de Ripple; os valores do tema podem variar. Ao aplicar um tema, mantenha o nome da função. | | --rpl-clr-neutral-0 | #FFFFFF | Paleta padrão documentada de Ripple; os valores do tema podem variar. Ao aplicar um tema, mantenha o nome da função. | | --rpl-clr-neutral-100 | #F5F5F5 | Paleta padrão documentada de Ripple; os valores do tema podem variar. Ao aplicar um tema, mantenha o nome da função. | | --rpl-clr-neutral-200 | #E6E6E6 | Paleta padrão documentada de Ripple; os valores do tema podem variar. Ao aplicar um tema, mantenha o nome da função. | | --rpl-clr-neutral-700 | #333333 | Paleta padrão documentada de Ripple; os valores do tema podem variar. Ao aplicar um tema, mantenha o nome da função. | | --rpl-clr-neutral-800 | #1A1A1A | Paleta padrão documentada de Ripple; os valores do tema podem variar. Ao aplicar um tema, mantenha o nome da função. | | --rpl-clr-type-default | #1A1A1A | Paleta padrão documentada de Ripple; os valores do tema podem variar. Ao aplicar um tema, mantenha o nome da função. | | --rpl-clr-link | #0052C2 | Paleta padrão documentada de Ripple; os valores do tema podem variar. Ao aplicar um tema, mantenha o nome da função. | | --rpl-clr-link-visited | #9F46B1 | Paleta padrão documentada de Ripple; os valores do tema podem variar. Ao aplicar um tema, mantenha o nome da função. | ### Escala de espaçamento publicada | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --rpl-sp-1 | 4px | Etapa de espaçamento documentada. As etapas posteriores não correspondem ao índice multiplicado por quatro. | | --rpl-sp-2 | 8px | Etapa de espaçamento documentada. As etapas posteriores não correspondem ao índice multiplicado por quatro. | | --rpl-sp-3 | 12px | Etapa de espaçamento documentada. As etapas posteriores não correspondem ao índice multiplicado por quatro. | | --rpl-sp-4 | 16px | Etapa de espaçamento documentada. As etapas posteriores não correspondem ao índice multiplicado por quatro. | | --rpl-sp-5 | 20px | Etapa de espaçamento documentada. As etapas posteriores não correspondem ao índice multiplicado por quatro. | | --rpl-sp-6 | 24px | Etapa de espaçamento documentada. As etapas posteriores não correspondem ao índice multiplicado por quatro. | | --rpl-sp-7 | 28px | Etapa de espaçamento documentada. As etapas posteriores não correspondem ao índice multiplicado por quatro. | | --rpl-sp-8 | 32px | Etapa de espaçamento documentada. As etapas posteriores não correspondem ao índice multiplicado por quatro. | | --rpl-sp-9 | 40px | Etapa de espaçamento documentada. As etapas posteriores não correspondem ao índice multiplicado por quatro. | | --rpl-sp-10 | 48px | Etapa de espaçamento documentada. As etapas posteriores não correspondem ao índice multiplicado por quatro. | | --rpl-sp-11 | 56px | Etapa de espaçamento documentada. As etapas posteriores não correspondem ao índice multiplicado por quatro. | | --rpl-sp-12 | 64px | Etapa de espaçamento documentada. As etapas posteriores não correspondem ao índice multiplicado por quatro. | | --rpl-sp-13 | 80px | Etapa de espaçamento documentada. As etapas posteriores não correspondem ao índice multiplicado por quatro. | | --rpl-sp-14 | 120px | Etapa de espaçamento documentada. As etapas posteriores não correspondem ao índice multiplicado por quatro. | ### Funções tipográficas e alternativa | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | rpl-type-font-family | VIC, Arial, Helvetica, sans-serif | Pares de tamanho e altura de linha das funções tipográficas publicadas. O exemplo independente usa a alternativa Arial documentada, não a fonte VIC. | | rpl-type-h1 | 32/36px small · 56/60px large · 700 | Pares de tamanho e altura de linha das funções tipográficas publicadas. O exemplo independente usa a alternativa Arial documentada, não a fonte VIC. | | rpl-type-h2 | 24/32px small · 32/40px large · 700 | Pares de tamanho e altura de linha das funções tipográficas publicadas. O exemplo independente usa a alternativa Arial documentada, não a fonte VIC. | | rpl-type-h3 | 20/28px small · 24/32px large · 700 | Pares de tamanho e altura de linha das funções tipográficas publicadas. O exemplo independente usa a alternativa Arial documentada, não a fonte VIC. | | rpl-type-p | 16/24px | Pares de tamanho e altura de linha das funções tipográficas publicadas. O exemplo independente usa a alternativa Arial documentada, não a fonte VIC. | | rpl-type-p-small | 14/20px | Pares de tamanho e altura de linha das funções tipográficas publicadas. O exemplo independente usa a alternativa Arial documentada, não a fonte VIC. | ### Contraste do foco | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --rpl-clr-focus | #FF9E1B | Cores de foco publicadas. O exemplo implementa seu próprio CSS de foco, em vez de importar classes utilitárias de Ripple. | | --rpl-clr-focus-contrast | #1A1A1A | Cores de foco publicadas. O exemplo implementa seu próprio CSS de foco, em vez de importar classes utilitárias de Ripple. | | --rpl-clr-dark | #1A1A1A | Cores de foco publicadas. O exemplo implementa seu próprio CSS de foco, em vez de importar classes utilitárias de Ripple. | ## Guia completo do sistema de design Ripple Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Fundamentos e escopo de execução do sistema de design Ripple ### Diferencie uma referência de design de um ambiente de execução de componentes > A referência descreve o sistema de design Ripple publicado. A linha do tempo funcional da oficina é uma interpretação original completa de HTML, CSS e JavaScript de valores selecionados. Ela não executa componentes Vue de Ripple, não usa um espelho de pacotes não documentado e não alega ser um serviço do Governo de Victoria. Esse limite está visível na prévia e permanece no código-fonte para download. ### Escolha deliberadamente a integração nativa Ripple publica uma opção de pacote voltada ao Vue e uma opção apenas com estilos por meio do pacote principal. A instalação oficial exige acesso ao GitHub Packages. A opção apenas com estilos ainda deixa a marcação e o comportamento a cargo da aplicação. Ao integrar essa distribuição, siga as instruções oficiais de acesso vinculadas e fixe a versão escolhida; o estudo independente abaixo não exige autenticação nem instalação de pacotes. ## Funções de cor e foco de teclado do sistema de design Ripple ### Preserve a distinção entre marca e conteúdo O cabeçalho da linha do tempo usa o valor primário mais escuro, a borda usa o valor de destaque e o texto de leitura usa a função de texto neutro. No código-fonte fornecido, eles são variáveis distintas de CSS. O painel de status original usa a superfície de destaque clara. A referência inclui tanto os nomes das funções quanto os valores, para que uma futura mudança de tema atualize a relação pretendida, em vez de um conjunto de valores hexadecimais sem relação entre si. ### Diferencie claramente o foco de teclado O foco é laranja com conteúdo escuro, em vez de outro tom do azul padrão. A regra original de foco do botão e do resumo altera a superfície e desenha um contorno escuro. O foco da caixa de seleção continua sendo um contorno. Esta é uma implementação da abordagem publicada para cores de foco, não uma afirmação de que o exemplo importe os utilitários nativos de foco de Ripple ou garanta acessibilidade para todos os temas possíveis. ## Espaçamento e tipografia responsiva do sistema de design Ripple ### Use a sequência de espaçamento real A fonte usa etapas nomeadas de 8, 16, 24, 32 e 48px para o ritmo de leitura. A referência completa também registra etapas maiores; a sequência deixa de ser um simples múltiplo do índice, por isso rpl-sp-9 é 40px, e não 36px. O espaçamento entre colunas da grade e o preenchimento das seções definidos no código compartilham deliberadamente valores da escala, embora desempenhem funções diferentes no layout. ### Deixe explícito o limite tipográfico Ripple documenta VIC com alternativas Arial e Helvetica. Este estudo não fornece um arquivo de fonte VIC e usa Arial explicitamente. O título passa de 32/36px para 56/60px no ponto de quebra de 992px do exemplo, enquanto o texto do corpo permanece em 16/24px. Esses valores de tamanho de fonte e altura de linha são referências documentadas; a composição da linha do tempo é original e não deve ser descrita como um componente nativo idêntico em cada pixel. ## Conteúdo da linha do tempo e divulgação progressiva no sistema de design Ripple ### Dê uma função distinta a cada etapa A primeira etapa define a decisão, a segunda prepara a participação e a terceira registra uma ação. Os rótulos de tempo relativo comunicam a sequência sem inventar um prazo governamental ou uma promessa de serviço. Cada etapa tem um breve resumo sempre visível e notas adicionais de preparação em um elemento details nativo. A sequência continua sendo uma lista ordenada, embora seus marcadores visuais sejam personalizados. - O tempo relativo descreve a sequência da oficina. - Os resumos visíveis comunicam o objetivo de cada etapa. - As notas expansíveis apresentam detalhes secundários. - A prontidão é uma ação explícita de marcar uma caixa. ### Não confunda leitura com prontidão Expandir as notas de preparação não marca uma etapa como concluída. A caixa de seleção separada registra a prontidão, e a contagem do progresso considera apenas os itens marcados. Isso evita que uma pessoa conclua uma tarefa por acidente apenas por ter lido sobre ela. A fonte contém todos os itens e toda a lógica de estado, permitindo inspecionar e editar essa distinção. ## Progresso do sistema de design Ripple, foco na próxima etapa e redefinição ### Determine a próxima ação com base no estado atual Ir para a próxima etapa incompleta localiza a primeira etapa não marcada, expande suas notas e move o foco para a caixa de seleção correspondente. Uma etapa não é ignorada só porque a pessoa já a abriu. Quando as três caixas estão marcadas, o botão da próxima etapa é desativado e o status informa que todas as etapas de preparação estão prontas. Desmarcar um item disponibiliza a ação novamente. ### Redefina todos os estados relacionados ao mesmo tempo A redefinição desmarca as três caixas, fecha as notas, atualiza o elemento de progresso e devolve o foco à primeira caixa de seleção. Ela não deixa um aviso de conclusão na tela nem sugere que um registro remoto foi excluído. Neste estudo local, o estado fica intencionalmente na memória, e a explicação visível informa que ele não é salvo nem enviado. ## Código-fonte completo e verificação do sistema de design Ripple ### Execute o estudo autocontido Salve o documento completo fornecido como index.html e disponibilize o diretório em um servidor. Ele inclui seus próprios tokens, marcação, conteúdo de exemplo legível e código de interação, sem solicitações externas de fontes ou dependências de execução. Antes de desenvolver um serviço real, consulte os links de referência para verificar as APIs nativas de Ripple, as opções de versão e os recursos de marca autorizados. 1. Salve o exemplo completo de HTML como index.html. 2. Disponibilize o diretório localmente em um servidor. 3. Teste com o teclado o foco da próxima etapa, a conclusão e a redefinição. 4. Para uma integração nativa separada com Ripple, use o acesso oficial aos pacotes e versões fixas. ### Verifique toda a transição de estado Marque o primeiro item como pronto, use a ação da próxima etapa e confirme que o foco vai para a segunda caixa de seleção e que as notas dela são expandidas. Conclua todos os itens, confirme que a ação da próxima etapa é desativada, depois desmarque um item e verifique se ela fica disponível novamente. Redefina tudo e confira o progresso e as seções expansíveis. Na largura de um celular, o painel de status passa para baixo da linha do tempo e todos os controles continuam disponíveis. ## Exemplos de componentes do sistema de design Ripple ### index.html — linha do tempo completa da oficina Todos os valores de tokens, estilos responsivos, conteúdo, progresso e comportamento de foco em um único documento executável. ``` 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.

``` Referência de código - Este é um código original de aplicação, não o código-fonte de um componente Vue de Ripple. - Não é necessário usar dependências de execução externas, solicitar fontes, criar uma conta ou enviar dados. ## Configuração do agente de sistema de design Ripple ### Ponto de partida para implementação Este comando disponibiliza a interpretação autocontida. Para usar Ripple nativamente, siga as instruções oficiais de acesso ao GitHub Packages e de configuração para Vue ou apenas estilos indicadas em Fontes. ``` # Save the complete example as index.html in an empty directory. python3 -m http.server 8000 # Open http://localhost:8000/ ``` ### Um prompt para seu projeto ``` Crie a linha do tempo completa e original da oficina com base no documento fornecido. Preserve os valores de papéis e espaçamento documentados de Ripple, a alternativa Arial explícita, os estados distintos de leitura e prontidão, o foco na próxima etapa incompleta, a conclusão e a redefinição completa. Identifique o resultado como uma interpretação de HTML/CSS, não como uma implementação nativa de Vue de Ripple. ``` ## Fontes e escopo do sistema de design Ripple Uma interpretação de OpenDesign em HTML/CSS, baseada nos valores de design publicados de Ripple e na alternativa Arial documentada. Esta prévia não executa componentes Vue de Ripple nem inclui fontes VIC. - Papéis das cores Paleta padrão e papéis do conteúdo. - Espaçamento Sequência completa de espaçamento publicada. - Tipografia VIC, alternativas e pares tipográficos responsivos. - Estados de foco Tratamento de foco laranja/escuro. - Configuração nativa apenas de estilos Acesso aos pacotes e responsabilidades da configuração apenas de estilos. - Tokens de design Nomenclatura de papéis e relações entre temas. ## Recursos relacionados ao sistema de design Ripple ### Scottish Government sistema de design Aplique a tipografia responsiva, o espaçamento e as funções de cor do governo escocês em um campo nativo com contagem de caracteres, que preserva o texto acima do limite e permite corrigir o conteúdo. ### Singapore Government sistema de design Use os Web Components atuais do SGDS com tokens responsivos reais, temas diurno e noturno e quantidades nativas com limites que mantêm um plano local sincronizado. ### Decanter Crie páginas editoriais acadêmicas com a predefinição Tailwind de Decanter, uma escala tipográfica responsiva e bordas de tela fluidas. Explore cartões originais de eventos com filtros de tema funcionais e resumos expansíveis. - [Referência de implementação](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/) - [Referência de código](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/) - [Papéis das cores Paleta padrão e papéis do conteúdo.](https://www.ripple.sdp.vic.gov.au/design-system/styles/colour/) - [Espaçamento Sequência completa de espaçamento publicada.](https://www.ripple.sdp.vic.gov.au/design-system/styles/spacing/) - [Tipografia VIC, alternativas e pares tipográficos responsivos.](https://www.ripple.sdp.vic.gov.au/design-system/styles/typography/) - [Estados de foco Tratamento de foco laranja/escuro.](https://www.ripple.sdp.vic.gov.au/design-system/styles/focus-state/) - [Configuração nativa apenas de estilos Acesso aos pacotes e responsabilidades da configuração apenas de estilos.](https://www.ripple.sdp.vic.gov.au/design-system/develop/usage/css-only/) - [Tokens de design Nomenclatura de papéis e relações entre temas.](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/)