Crie um guia extenso no estilo de Ontário, com tipografia real, valores publicados de espaçamento e cores, comportamento nativo de acordeão e código-fonte completo correspondente à versão.
Ontario 9.1.0 publicado: CSS e script do acordeão, fontes locais incluídas, conteúdo original e manipulador de abertura vinculada. · Referência de implementação
02
Referência de design sistema de design Ontario
Tokens do sistema de design Ontario e complete-styles 9.1.0; caminhos reais de exportação do pacote, SCSS do acordeão e script publicado verificados localmente.
Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente.
--ontario-colour-greyscale-black
#1A1A1A
Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente.
--ontario-colour-greyscale-greyscale5
#F2F2F2
Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente.
--ontario-colour-greyscale-greyscale20
#CCCCCC
Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente.
--ontario-colour-system-link
#0066CC
Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente.
--ontario-colour-system-link-hover
#00478F
Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente.
--ontario-colour-system-link-active
#002142
Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente.
--ontario-colour-system-link-visited
#551A8B
Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente.
--ontario-colour-system-focus
#009ADB
Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente.
--ontario-colour-system-alert
#CD0000
Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente.
--ontario-colour-system-success
#118847
Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente.
--ontario-colour-system-information
#1080A6
Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente.
Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão.
--ontario-font-sizes-standard-body-text
1rem
Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão.
--ontario-font-sizes-large
1.25rem
Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão.
--ontario-font-sizes-x-large
1.5rem
Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão.
--ontario-breakpoints-small
40em
Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão.
--ontario-breakpoints-medium
73em
Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão.
--ontario-grid-columns-total-columns
12
Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão.
--ontario-grid-columns-row-width
1152
Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão.
--ontario-grid-columns-column-gutter
32
Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão.
03
Guia completo sistema de design Ontario
Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.
DESIGN-ontario.md
Orientações completas, um ponto de partida para a implementação e links para o código-fonte.
Exportações de pacotes e estilos de componentes sistema de design Ontario
Use o pacote de estilos completo de forma intencional
O exemplo fixa @ongov/ontario-design-system-complete-styles 9.1.0 e usa o script publicado para expandir/recolher. Esta é uma implementação HTML/CSS, não o runtime separado de web components do Ontario. O mapa de exportações do pacote disponibiliza o tema compilado em styles/css/compiled/ontario-theme.min.css; uma importação interna presumida com um prefixo dist adicional falha em um bundler moderno.
Inclua as regras do acordeão
No pacote 9.1.0 inspecionado, o tema compilado não inclui os seletores do acordeão usados neste exemplo. Por isso, a página inclui regras compiladas a partir do próprio ontario-accordion.scss do pacote, fornecido em CSS. O script é copiado do diretório dist/scripts publicado, pois esse caminho interno JavaScript não é exportado. São requisitos concretos da compilação, não ajustes visuais opcionais.
Tipografia e hierarquia do Ontario sistema de design Ontario
Preserve a combinação tipográfica pretendida
O tema publicado fornece Raleway Modified para títulos e Open Sans para o texto comum. A prévia inclui as variantes normais 400 e 700 usadas na página. Isso mantém as formas características dos títulos sem depender de fontes remotas. A tipografia deve ser avaliada depois que as fontes forem carregadas: a renderização com fontes alternativas pode alterar tanto a quebra de linhas quanto o peso relativo dos títulos do acordeão.
Facilite a leitura rápida das etapas
O título apresenta uma tarefa, a introdução explica como usar o guia e os títulos das três etapas formam uma sequência clara. Os parágrafos e as listas complementares ficam dentro de cada painel. A observação ao lado permanece visível, pois as informações essenciais sobre participação e acesso não devem depender de alguém descobrir um painel oculto. A hierarquia faz parte do modelo de conteúdo; isso não significa que cada frase deva virar um título.
Funções das cores e recursos visuais dos componentes sistema de design Ontario
Diferencie as funções dos links e do foco
A cor de link exportada é #0066CC, com cores distintas para os estados de hover, ativo e visitado. O foco usa #009ADB. O acordeão combina um rótulo visível, um ícone direcional e o estado expandido; o texto azul, por si só, não explica seu comportamento. A borda cinza diferencia as etapas sem transformar cada parágrafo em um cartão separado.
Use a progressão de espaçamento publicada
A tabela de espaçamento vai de zero a cinco rem, com etapas intermediárias nomeadas. O exemplo aplica um layout de duas colunas definido especificamente para ele em torno das regras oficiais do componente. O ponto de colapso em 760px é uma escolha de composição para este guia incorporado, não um novo ponto de quebra do Ontario. Os pontos de quebra oficiais estão registrados separadamente na tabela de referência.
Estrutura e estado do acordeão sistema de design Ontario
Associe cada botão ao seu conteúdo
Cada etapa tem um título que contém um botão de verdade. O aria-controls aponta para uma única seção de conteúdo com ID exclusivo, e o aria-expanded indica se a seção está aberta. O conteúdo referencia o botão por meio de aria-labelledby. O script nativo coordena as classes do componente e o aria-hidden ao abrir e fechar o painel. IDs duplicados quebrariam essa relação, mesmo que o layout parecesse correto.
Use IDs exclusivos para os botões e o conteúdo.
Mantenha o título em torno de um botão interativo real.
Faça a marcação corresponder ao comportamento de visibilidade do script versionado.
Mantenha sincronizados os controles de todas as etapas
Sistema de design Ontario Abertura vinculada e conteúdo essencial
Abra uma etapa pelo botão correspondente
Os links da barra lateral identificam uma etapa e, se ela estiver fechada, acionam o botão nativo correspondente. Depois de abrir a etapa, eles movem o foco para o botão. Assim, o atributo expanded do botão, a classe do título e a visibilidade do conteúdo mudam na mesma transição. O manipulador adicional faz parte do código da aplicação; ele é incluído por inteiro para que seja possível reproduzir esse comportamento.
Escreva informações complementares que valha a pena expandir
As três etapas criadas abordam preparação, materiais e acompanhamento de uma pequena oficina. Cada uma contém ações específicas e um parágrafo que explica os limites do exemplo. Um convite real ainda precisa apresentar diretamente seu propósito, as condições de acessibilidade e as informações para participar. Esse padrão organiza um guia mais extenso; não deve ocultar informações essenciais só para deixar a página aparentemente mais curta.
Sistema de design Ontario Código-fonte completo e verificação
Recrie o exemplo versionado
Crie um projeto Vite vanilla, instale o pacote complete-styles fixado e copie o script de expandir/recolher para src. Salve os arquivos main.js e ontario.css fornecidos, preservando o elemento de montagem raiz. O CSS inclui as regras oficiais do acordeão compiladas para esta versão, além de regras originais de layout claramente identificadas. Esta implementação de HTML não requer registro de componentes nem serviço de back-end.
Instale o pacote complete-styles fixado.
Copie o script de expandir/recolher e salve o arquivo de entrada completo e o CSS.
Abra todos os painéis; em seguida, recolha-os e reabra uma etapa pelo link correspondente.
Confira o foco do teclado, os atributos expanded e o layout para celular.
Confira os comportamentos de navegação por links e em grupo
Teste a abertura de todas as etapas, recolha tudo e use um link da barra lateral para reabrir a etapa do meio. Confirme se o estado expanded do botão corresponde ao conteúdo visível. Repita o teste na largura de tela de um celular, onde a barra lateral fica abaixo do guia. A verificação local também confirma que os arquivos de fontes carregam, que a página não tem rolagem horizontal e que o script nativo não gera erros no navegador.
Sistema de design Ontario Exemplos de componentes do sistema de design
main.js — guia completo da oficina
Conteúdo original completo, importação do script publicado e comportamento de abertura por link.
javascript
import '@ongov/ontario-design-system-complete-styles/styles/css/compiled/ontario-theme.min.css';
import './ontario-expand-collapse.js';
import './ontario.css';
const topics=[['Plan the session','Make the purpose clear before people arrive.',['Publish the topic, duration and format in plain language.','Explain how participants can ask about access needs.','Tell people whether any preparation is optional or required.'],'In this sample workshop, participants discuss one familiar interface and identify one improvement. No personal information or application account is needed.'],['Prepare the materials','Offer content in a form people can use during and after the session.',['Use a meaningful heading structure in documents.','Give diagrams a concise written explanation.','Provide an accessible alternative to an activity that depends on dragging or precise pointer movement.'],'A simple agenda and an editable notes document are enough for this authored example. A real organizer should confirm the tools and formats with participants.'],['Follow up clearly','Make the next action explicit without overstating what has been agreed.',['Separate decisions from ideas that still need investigation.','State who owns any agreed follow-up.','Share notes through the channel agreed with participants.'],'This local example does not email participants or store a registration. It demonstrates the relationship between persistent guidance and expandable supporting content.']];
const icon=(dir)=>`<svg class="ontario-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="${dir==='up'?'M6 15l6-6 6 6':'M6 9l6 6 6-6'}" fill="none" stroke="currentColor" stroke-width="2.4"/></svg>`;
document.getElementById('root').innerHTML=`<main><p class="kicker">ONTARIO DESIGN SYSTEM / ORIGINAL CONTENT STUDY</p><h1>Run an inclusive workshop</h1><p class="ontario-lead-statement">Use this sample guide to prepare a small design discussion. Expand a stage for supporting details, or open all stages to read them together.</p><div class="layout"><section aria-labelledby="guide-heading"><h2 id="guide-heading">Workshop stages</h2><div class="ontario-accordions__container"><div class="ontario-accordion__controls"><button class="ontario-accordion__button--expand-all" aria-expanded="false"><span class="ontario-accordion--expand-open-all">Expand all</span><span class="ontario-accordion--expand-close-all">Collapse all</span></button></div>${topics.map(([title,intro,items,note],i)=>`<div class="ontario-accordion" id="stage-${i}"><h3 class="ontario-accordion-heading"><button class="ontario-accordion__button" id="stage-button-${i}" aria-controls="stage-content-${i}" aria-expanded="false" data-toggle="ontario-collapse"><span class="ontario-accordion__button-icon--close">${icon('up')}</span><span class="ontario-accordion__button-icon--open">${icon('down')}</span>${title}</button></h3><section class="ontario-accordion__content" id="stage-content-${i}" aria-labelledby="stage-button-${i}" aria-hidden="true" data-toggle="ontario-expander-content"><p>${intro}</p><ul>${items.map(x=>'<li>'+x+'</li>').join('')}</ul><p>${note}</p></section></div>`).join('')}</div></section><aside><h2>Keep the essentials visible</h2><p>Session purpose, access arrangements and joining instructions belong in the main invitation. Do not hide them inside a collapsed guide.</p><h3>Jump to a stage</h3><ul class="jump">${topics.map(([title],i)=>`<li><a class="stage-link" href="#stage-${i}">${title}</a></li>`).join('')}</ul><p class="note">Published Ontario 9.1.0 styles and expand/collapse script, with original content and composition. This is not an official service page.</p></aside></div></main>`;
// Drive linked opening through the native button so its ARIA state stays synchronized.
document.querySelectorAll(".stage-link").forEach(link=>link.addEventListener("click",()=>{const button=document.querySelector(link.hash+" .ontario-accordion__button");if(button.getAttribute("aria-expanded")!=="true")button.click();button.focus()}));
O tema compilado e a folha de estilos específica do componente acordeão são necessários para esta versão fixada.
04
Sistema de design Ontario Configuração do agente
Ponto de partida para implementação
A prévia executa o mesmo script publicado do acordeão com arquivos de fontes locais. O exemplo não carrega a biblioteca separada de componentes web.
sh
npm create vite@latest ontario-guide -- --template vanilla
cd ontario-guide
npm install
npm install @ongov/[email protected]
cp node_modules/@ongov/ontario-design-system-complete-styles/dist/scripts/ontario-expand-collapse.js src/ontario-expand-collapse.js
# Replace src/main.js and add src/ontario.css. Keep <div id="root"></div>.
npm run dev
Um prompt para seu projeto
Prompt para agente de IA
Crie o guia da oficina de Ontario com complete-styles 9.1.0 e o script de acordeão correspondente. Inclua o CSS específico do componente acordeão, as fontes genuínas Raleway Modified/Open Sans, IDs acessíveis para o conteúdo dos botões e o comportamento sincronizado de expandir/recolher. Mantenha visíveis as informações essenciais e encaminhe os links das etapas pelos botões nativos.
05
Sistema de design Ontario Fontes e escopo
Guia de oficina criado com OpenDesign, usando os estilos do Ontario 9.1.0 e o script publicado de expandir/recolher. O conteúdo e a composição da página são originais; esta não é uma página oficial de serviço.
