# Sistema de design gov.cz ## Prévia da interface sistema de design gov.cz Navegue por seis recursos originais em duas páginas, abra os detalhes de leitura e retorne à ação. ## Referência de design sistema de design gov.cz Primitivas de cor e aliases semânticos reais de tokens.css de @gov-design-system-ce/styles 4.7.1. A prévia usa os estilos publicados e o pacote Roboto. ### Primitivas primárias e neutras | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --color-primary-50 | rgb(242, 246, 252) | Valores publicados das primitivas da versão 4.7.1. Em geral, o aplicativo deve usar a função semântica correspondente. | | --color-primary-100 | rgb(226, 238, 248) | Valores publicados das primitivas da versão 4.7.1. Em geral, o aplicativo deve usar a função semântica correspondente. | | --color-primary-600 | rgb(0, 70, 155) | Valores publicados das primitivas da versão 4.7.1. Em geral, o aplicativo deve usar a função semântica correspondente. | | --color-primary-700 | rgb(14, 53, 120) | Valores publicados das primitivas da versão 4.7.1. Em geral, o aplicativo deve usar a função semântica correspondente. | | --color-primary-800 | rgb(16, 38, 87) | Valores publicados das primitivas da versão 4.7.1. Em geral, o aplicativo deve usar a função semântica correspondente. | | --color-secondary-600 | rgb(250, 180, 19) | Valores publicados das primitivas da versão 4.7.1. Em geral, o aplicativo deve usar a função semântica correspondente. | | --color-neutral-0 | rgb(255, 255, 255) | Valores publicados das primitivas da versão 4.7.1. Em geral, o aplicativo deve usar a função semântica correspondente. | | --color-neutral-50 | rgb(246, 246, 246) | Valores publicados das primitivas da versão 4.7.1. Em geral, o aplicativo deve usar a função semântica correspondente. | | --color-neutral-950 | rgb(38, 38, 38) | Valores publicados das primitivas da versão 4.7.1. Em geral, o aplicativo deve usar a função semântica correspondente. | ### Funções de leitura e feedback | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --text-primary | var(--color-neutral-950) | Os aliases semânticos são preservados para manter visível a função; não reduza todos os aliases a valores hexadecimais locais sem relação entre si. | | --text-secondary | var(--color-neutral-700) | Os aliases semânticos são preservados para manter visível a função; não reduza todos os aliases a valores hexadecimais locais sem relação entre si. | | --text-primary-color | var(--color-primary-600) | Os aliases semânticos são preservados para manter visível a função; não reduza todos os aliases a valores hexadecimais locais sem relação entre si. | | --text-white | var(--color-neutral-0) | Os aliases semânticos são preservados para manter visível a função; não reduza todos os aliases a valores hexadecimais locais sem relação entre si. | | --text-status-error | var(--color-error-700) | Os aliases semânticos são preservados para manter visível a função; não reduza todos os aliases a valores hexadecimais locais sem relação entre si. | | --text-status-success | var(--color-success-700) | Os aliases semânticos são preservados para manter visível a função; não reduza todos os aliases a valores hexadecimais locais sem relação entre si. | | --status-focus | var(--color-focus-600) | Os aliases semânticos são preservados para manter visível a função; não reduza todos os aliases a valores hexadecimais locais sem relação entre si. | | --status-warning | var(--color-warning-400) | Os aliases semânticos são preservados para manter visível a função; não reduza todos os aliases a valores hexadecimais locais sem relação entre si. | | --status-error | var(--color-error-600) | Os aliases semânticos são preservados para manter visível a função; não reduza todos os aliases a valores hexadecimais locais sem relação entre si. | ### Estados do botão primário | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --button-solid-primary | var(--color-primary-600) | Tokens de estado reais usados pelos estilos publicados do botão. Mantenha os estados desabilitado, hover e ativo distintos. | | --button-solid-primary-hover | var(--color-primary-700) | Tokens de estado reais usados pelos estilos publicados do botão. Mantenha os estados desabilitado, hover e ativo distintos. | | --button-solid-primary-active | var(--color-primary-800) | Tokens de estado reais usados pelos estilos publicados do botão. Mantenha os estados desabilitado, hover e ativo distintos. | | --button-solid-disabled | var(--color-neutral-200) | Tokens de estado reais usados pelos estilos publicados do botão. Mantenha os estados desabilitado, hover e ativo distintos. | | --button-outlined-primary | var(--color-primary-50) | Tokens de estado reais usados pelos estilos publicados do botão. Mantenha os estados desabilitado, hover e ativo distintos. | | --button-outlined-primary-hover | var(--color-primary-100) | Tokens de estado reais usados pelos estilos publicados do botão. Mantenha os estados desabilitado, hover e ativo distintos. | | --button-outlined-primary-active | var(--color-primary-200) | Tokens de estado reais usados pelos estilos publicados do botão. Mantenha os estados desabilitado, hover e ativo distintos. | ## Guia completo sistema de design gov.cz 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 do Gov CE e ordem dos assets sistema de design gov.cz ### Mantenha as versões dos pacotes alinhadas > Este exemplo fixa os componentes, estilos, ícones e fontes na versão 4.7.1. As cinco folhas de estilo fundamentais são carregadas na ordem publicada. Suas responsabilidades são diferentes: somente as variáveis não estilizam um card, e registrar um elemento personalizado não carrega o componente global CSS. A entrada completa inclui as cinco folhas antes da pequena camada de composição original. ### Inicialize a configuração antes de registrar os componentes O caminho dos ícones é configurado antes da execução dos módulos de entrada dos componentes importados dinamicamente. Essa ordem é importante porque a paginação renderiza ícones de seta como parte de suas próprias dependências. Copie o diretório completo de ícones para o caminho público configurado, mantendo seus subdiretórios. Uma importação JavaScript bem-sucedida não comprova que essas solicitações de ícones separadas também foram concluídas com sucesso. ## Referências a cores semânticas e estados sistema de design gov.cz ### Associe a cor a uma função A referência diferencia a primitiva primária azul dos aliases de texto, foco e estado do botão. Usar o mesmo tom de azul aparente em todos os lugares apagaria esses contratos. O toolkit usa os botões primários sólidos oficiais e deixa a folha de estilos do componente definir sua aparência nos estados ativo, de foco e desabilitado. Somente o layout ao redor da coleção é original CSS. ### Mantenha visíveis a tipografia e o contexto do conteúdo A Roboto vem do pacote de fontes correspondente. Os cards têm títulos curtos e acionáveis, uma linha de metadados e um resumo antes da ação de leitura. Os seis textos de recursos são material original de prática OpenDesign, não instruções oficiais do governo tcheco traduzidas. O objetivo é demonstrar hierarquia e uma interação local completa, sem dar a entender que se trata de um serviço governamental. ## Slots de cards e ações de leitura sistema de design gov.cz ### Coloque o título no slot compatível Cada gov-card recebe um título no slot headline. Os metadados, a descrição e o botão compõem o conteúdo. A ação tem um aria-label que inclui o título do recurso, distinguindo os botões repetidos “Ler recurso” para tecnologias assistivas. O componente transfere os atributos ARIA para seu elemento interativo interno; um atributo inventado de rótulo acessível não faria isso. ### Mantenha o layout fora do contrato do componente Uma grade CSS de três colunas passa a ter uma coluna em telas estreitas. A grade e seu breakpoint foram criados para este exemplo e não são propriedades oficiais adicionais do card. A prévia também remove a largura mínima global de 320px do body dentro de seu contêiner incorporado muito estreito. Esse ajuste limitado à composição preserva o estilo do componente e evita que a página pai transborde. ## Paginação nativa e estado da aplicação sistema de design gov.cz ### Leia o payload do evento nativo gov-pagination recebe total=6 e page-size=3. Seu evento gov-page fornece detail.pagination.currentPage, que seleciona os três registros correspondentes. O componente de paginação controla os controles da página atual; a aplicação controla o conjunto de dados e a parte visível. Todos os rótulos de navegação padrão em tcheco são substituídos explicitamente por rótulos em inglês neste estudo em inglês. - total é o número de registros, não o número de páginas. - page-size controla o tamanho da parte exibida. - gov-page expõe detail.pagination.currentPage. - Os rótulos de navegação devem corresponder ao idioma da interface. ### Evite detalhes desatualizados após mudar de página Ao mudar de página, o recurso que estiver aberto é fechado para que os detalhes não pareçam pertencer a um conjunto diferente de cards. A contagem informa “Recursos 1–3 ou 4–6 de 6”. Trata-se de paginação local sobre um conjunto de dados pequeno e conhecido, portanto não há um indicador de carregamento artificial nem a alegação de uma consulta ao servidor. Uma implementação conectada a um servidor precisaria de contratos separados para estados pendentes, de erro e de resultado. ## Foco de leitura e comportamento ao voltar sistema de design gov.cz ### Mova o foco para o recurso aberto A ação de leitura preenche uma área de detalhes local e move o foco para o título dessa área. Isso oferece aos usuários de teclado um destino claro depois de uma ação que adiciona conteúdo abaixo da coleção. O título focável usa tabindex=-1 para que a aplicação possa direcionar o foco a ele sem criar uma parada adicional na navegação normal com Tab. O conteúdo aberto continua sendo texto comum e legível. ### Volte à ação que abriu o recurso “Voltar aos recursos” oculta os detalhes e move o foco para o botão interno original. Este não é um modal: não prende o foco, não adiciona semântica de diálogo nem escurece a página. A coleção original continua disponível. Abrir e fechar repetidamente, além de navegar entre páginas, permite verificar se o estado da aplicação e o foco acompanham o mesmo recurso. ## Integração local completa sistema de design gov.cz ### Use os arquivos fornecidos em conjunto A entrada é código completo da aplicação, incluindo os seis registros, a criação dos cards, o tratamento da paginação e o foco nos detalhes. A folha de estilos contém somente a composição original. Instale os quatro pacotes com versões fixadas, copie os ícones e salve os dois arquivos em um projeto Vite sem framework. A prévia do navegador agrupa exatamente essas entradas de componentes e os assets locais de fontes. 1. Instale os quatro pacotes Gov CE na versão 4.7.1. 2. Copie os ícones para public/assets/gov-cz-icons, preservando os subdiretórios. 3. Salve a JavaScript completa e a composição CSS em src. 4. Execute o app e inspecione a paginação, o retorno do foco e as solicitações de ícones. ### Verifique a interação e o carregamento dos assets Abra o primeiro recurso, volte ao botão correspondente, avance para a segunda página e leia outro recurso. Verifique se os controles de primeira/anterior ficam desabilitados no início e se os controles de próxima/última ficam desabilitados no fim. Inspecione o mesmo fluxo em larguras de desktop e celular, incluindo uma largura incorporada mais estreita. Confira no painel de rede se há ícones ausentes, além de erros de JavaScript. ## Exemplos de componentes do sistema de design sistema de design gov.cz ### main.js — toolkit completo com paginação Dados completos, registro de componentes nativos, seleção de página e foco de leitura. ``` import '@gov-design-system-ce/styles/tokens.css'; import '@gov-design-system-ce/styles/styles.css'; import '@gov-design-system-ce/styles/layout.css'; import '@gov-design-system-ce/styles/components.css'; import '@gov-design-system-ce/styles/animations.css'; import '@gov-design-system-ce/fonts/lib/roboto.css'; import './gov-cz.css'; window.GOV_DS_CONFIG={iconsPath:'/assets/gov-cz-icons'}; const resources=[ {title:'Map the service journey',kind:'Workshop',time:'25 minutes',summary:'Connect the first question to a useful outcome.',body:'Start with the person’s goal. Record how they discover the service, what they need before starting and how they know the task has finished. Mark every hand-off where the person must repeat information.'}, {title:'Write a clear action label',kind:'Writing guide',time:'10 minutes',summary:'Name what will happen after a button is activated.',body:'Use a verb and the object of the action. Compare Save draft with Send application and make the distinction explicit. Keep destructive and reversible actions visually and verbally distinguishable.'}, {title:'Review keyboard access',kind:'Checklist',time:'20 minutes',summary:'Inspect focus order, visible focus and recovery.',body:'Work through the page using only the keyboard. Check the first useful control, the order through repeated items, the next-page action and return from a detail view. A selected page and keyboard focus are separate states.'}, {title:'Prepare an error message',kind:'Writing guide',time:'15 minutes',summary:'Explain the issue next to a recoverable action.',body:'State what needs changing and how to change it. Preserve the person’s input. Avoid a generic failure message when the application knows which field or prerequisite is causing the problem.'}, {title:'Test a narrow layout',kind:'Checklist',time:'20 minutes',summary:'Keep reading and actions available on a small screen.',body:'Inspect a long title, two lines of metadata and the pagination controls at a narrow width. Avoid hiding essential actions behind hover. Check that only a genuinely two-dimensional region scrolls sideways.'}, {title:'Record the decision',kind:'Template',time:'10 minutes',summary:'Give the next team enough context to continue.',body:'Record the decision, the evidence used, the person responsible and the condition that would make the team revisit it. A useful record explains the reasoning without presenting an experiment as a settled rule.'} ]; document.querySelector('#root').innerHTML=`

OPENDESIGN · ORIGINAL SERVICE TOOLKIT

Small steps toward a clearer service

Six practical resources for a team review. Explore two pages and open a resource without leaving the collection.

`; await import('@gov-design-system-ce/components/dist/components/gov-card.js'); await import('@gov-design-system-ce/components/dist/components/gov-pagination.js'); let page=1,opened=-1; const cards=document.querySelector('#cards'), detail=document.querySelector('#detail'); function render(){cards.replaceChildren();resources.slice((page-1)*3,page*3).forEach((r,i)=>{let id=(page-1)*3+i;let card=document.createElement('gov-card');card.innerHTML=`

${r.title}

${r.kind} · ${r.time}

${r.summary}

Read resource`;cards.append(card)});document.querySelector('#range').textContent=`Resources ${(page-1)*3+1}–${page*3} of ${resources.length}`;detail.hidden=true;opened=-1;} cards.addEventListener('gov-click',e=>{let b=e.target.closest('[data-resource]');if(!b)return;opened=Number(b.dataset.resource);let r=resources[opened];document.querySelector('#detail-meta').textContent=r.kind+' · '+r.time;document.querySelector('#detail-title').textContent=r.title;document.querySelector('#detail-body').textContent=r.body;detail.hidden=false;document.querySelector('#detail-title').focus();}); document.querySelector('gov-pagination').addEventListener('gov-page',e=>{page=e.detail.pagination.currentPage;render();}); document.querySelector('#close').addEventListener('gov-click',()=>{detail.hidden=true;const button=cards.querySelector(`[data-resource="${opened}"] button`);button?.focus();opened=-1;});render(); ``` Referência de código - A configuração é executada antes das importações das entradas dos componentes. Os nomes ARIA usam aria-label. ### gov-cz.css — composição original da coleção Grade responsiva e detalhes locais legíveis, preservando os estilos nativos dos componentes. ``` body{margin:0;color:var(--text-primary);font-family:Roboto,Arial,sans-serif}main{max-width:1160px;margin:auto;padding:32px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700;color:var(--color-primary-600)}h1{max-width:22ch;font-size:40px;line-height:1.15;margin:16px 0}.lead{max-width:66ch;font-size:18px;line-height:1.6}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:32px 0}.cards gov-card{height:100%}.cards h2{font-size:22px;line-height:1.3}.cards p{margin-bottom:20px;line-height:1.6}.meta{font-size:14px;color:#555}.pagination-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}#range{font-size:14px}#detail{padding:24px;border-left:4px solid var(--color-primary-600);background:var(--color-primary-50);margin-top:32px}#detail-body{max-width:66ch;line-height:1.7}aside{margin-top:32px;padding-top:24px;border-top:1px solid #ddd;font-size:14px;line-height:1.6}aside p{max-width:80ch}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.cards{grid-template-columns:1fr}h1{font-size:32px}.pagination-row{display:block}gov-pagination{max-width:100%;overflow:auto}} html,body{min-width:0}.eyebrow{overflow-wrap:anywhere} ``` Referência de código - O layout em grade e a substituição da largura mínima no contêiner incorporado são originais da aplicação CSS. ## Configuração do agente sistema de design gov.cz ### Ponto de partida para implementação Mantenha intactos os subdiretórios dos ícones. Este exemplo importa módulos de entrada de componentes diretamente; não requer uma cópia do runtime do carregador sob demanda. ``` npm create vite@latest gov-toolkit -- --template vanilla cd gov-toolkit npm install npm install @gov-design-system-ce/components@4.7.1 @gov-design-system-ce/styles@4.7.1 @gov-design-system-ce/icons@4.7.1 @gov-design-system-ce/fonts@4.7.1 mkdir -p public/assets/gov-cz-icons cp -R node_modules/@gov-design-system-ce/icons/lib/. public/assets/gov-cz-icons/ # Save the supplied files as src/main.js and src/gov-cz.css. # The root index.html must contain
and load /src/main.js. npm run dev ``` ### Um prompt para seu projeto ``` Crie o toolkit Gov CE 4.7.1 fornecido usando cartões, botões e paginação nativos. Mantenha a ordem real das folhas de estilo e a configuração dos caminhos dos ícones. Use gov-page detail.pagination.currentPage, rótulos ARIA significativos em inglês, feche os detalhes desatualizados ao mudar de página e devolva o foco após a leitura. Preserve a atribuição do conteúdo de exemplo original. ``` ## Sistema de design gov.cz Fontes e escopo Estudo original de um toolkit de serviços OpenDesign que usa componentes, estilos, ícones e fontes do Gov Design System CE 4.7.1. Os textos de exemplo e o comportamento da coleção são originais; este não é um serviço governamental oficial. - Integração HTML Ordem dos recursos, registro e composição de componentes. - Paginação Controles de página e semântica de navegação. - Cartão Conteúdo do cartão e espaço para o título. - Tokens de cor Papéis de cores primitivas e semânticas. - Tipografia Hierarquia de fontes e texto. ## Sistema de design gov.cz Recursos relacionados ### GOV.UK sistema de design Crie um fluxo de perguntas e conferência de respostas no estilo GOV.UK com a escala tipográfica atual v6, espaçamento responsivo, cores funcionais, validação vinculada e integração concreta com Frontend. ### HarvardSites sistema de design Entenda o HarvardSites como uma plataforma editorial: compare estilos de sites, escolha combinações de fontes documentadas e monte páginas universitárias com componentes de conteúdo desenvolvidos para esse fim. ### Helsinki Combine grupos de seleção nativos do HDS, cores semânticas de feedback e resumos de erros vinculados em um fluxo completo de revisão e correção local. - [Referência de implementação](https://designsystem.gov.cz/komponenty/pagination) - [Fonte](https://designsystem.gov.cz/principy/barevne-tokeny) - [Referência de código](https://designsystem.gov.cz/zaciname/developers/html) - [Referência de código](https://designsystem.gov.cz/komponenty/card) - [Integração HTML Ordem dos recursos, registro e composição de componentes.](https://designsystem.gov.cz/zaciname/developers/html) - [Paginação Controles de página e semântica de navegação.](https://designsystem.gov.cz/komponenty/pagination) - [Cartão Conteúdo do cartão e espaço para o título.](https://designsystem.gov.cz/komponenty/card) - [Tokens de cor Papéis de cores primitivas e semânticas.](https://designsystem.gov.cz/principy/barevne-tokeny) - [Tipografia Hierarquia de fontes e texto.](https://designsystem.gov.cz/principy/typografie)