Explore as funções de cor reais de Ripple, sua escala de espaçamento de 14 etapas e referências tipográficas responsivas em uma linha do tempo completa de oficina, com exibição progressiva de informações, progresso e foco no próximo passo pelo teclado.
Complete a interpretação original de HTML/CSS/JavaScript usando valores documentados de Ripple; alternativa Arial, sem ambiente de execução nativo de Ripple. · Referência de implementação
02
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.
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
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.
Salve o exemplo completo de HTML como index.html.
Disponibilize o diretório localmente em um servidor.
Teste com o teclado o foco da próxima etapa, a conclusão e a redefinição.
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.
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 é 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.
04
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.
sh
# 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
Prompt para agente de IA
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.
05
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.
