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.
Guia OpenDesign8 capítulos37 entradas de referênciaGuia de aplicação original
01
Prévia da interface sistema de design GOV.UK
Envie campos vazios, siga os links para os erros, corrija as respostas e edite um valor na tela de revisão. Nenhuma informação sai da página.
Consulta sobre evento: pergunta, validação e conferência das respostasAbrir exemplo completo
GOV.UK Frontend 6.5.1 CSS nativo, Button e ErrorSummary JavaScript, servidos localmente. Fonte alternativa Helvetica; validação local original do formulário e navegação de revisão. · Referência de implementação
02
Referência de design sistema de design GOV.UK
GOV.UK Frontend 6.5.1 e documentação atual da v6, consultados em 3 de outubro de 2026. Os valores hexadecimais são um retrato de referência; em produção, prefira as funções Sass nomeadas. A prévia carrega localmente o CSS e o JavaScript oficiais, com uma fonte alternativa e identidade independente.
Esta referência usa a documentação da v6, incluindo o texto maior em telas pequenas e as cores funcionais revisadas. Por isso, uma captura de tela antiga pode mostrar valores diferentes. A tabela acima registra os padrões documentados atuais, sem misturar versões silenciosamente.
O estudo ao vivo apresenta uma consulta fictícia sobre um evento comunitário. Não usa coroa, logotipo GOV.UK, fonte Transport nem um destino real de envio. O conteúdo da tarefa e as regras locais de validação são escolhas da aplicação; a estrutura dos componentes baseia-se nos exemplos oficiais vinculados.
Para um serviço elegível em service.gov.uk, o GDS Transport faz parte da implementação oficial. Serviços públicos em outros domínios devem usar outra fonte. Este estudo independente segue a alternativa recomendada Helvetica Neue, Helvetica, Arial, sans-serif; mudar a fonte não exige abandonar a hierarquia do sistema.
Tipografia e ritmo de leitura sistema de design GOV.UK
Use o par completo de tamanho e altura da linha
Use govuk-heading-l para a pergunta da consulta e govuk-body para o texto de apoio. Em telas pequenas, o título tem 27/30px; em telas maiores, passa a 36/40px. Na v6, o texto corrido permanece em 19/25px. Usar 16px para o texto corrido em telas pequenas reproduziria o comportamento antigo, não o desta referência.
A tabela de escala inclui os dois tamanhos, pois uma captura de tela em um único tamanho de janela não permite determinar a regra responsiva. O CSS de produção usa unidades relativas. Uma classe como govuk-heading-l controla a aparência, mas não determina se o elemento semântico deve ser h1 ou h2.
scss
.app-question-note {
@include govuk-font($size: 19);
}
// Size and line-height only, without changing the font family:
.app-existing-font { @include govuk-font-size($size: 19); }
Espaçamento e largura da página sistema de design GOV.UK
Unidades responsivas não são pixels fixos
A unidade 6 é útil entre grupos de perguntas: corresponde a 20px em telas estreitas e a 30px acima do limite para tablet. O auxiliar estático govuk-spacing(6) retorna 30px em qualquer largura. Escolher o auxiliar, portanto, altera o comportamento, mesmo quando as duas versões parecem idênticas no desktop.
O contêiner de largura padrão tem um limite máximo de 1020px. Dentro dele, uma coluna de grade com dois terços da largura restringe o fluxo das perguntas, enquanto mantém o alinhamento da estrutura externa da página. Em telas pequenas, o conteúdo se reorganiza naturalmente em uma única coluna. Nossa prévia mantém essa hierarquia de leitura, em vez de distribuir cada campo em um cartão de painel.
html
<div class="govuk-width-container">
<main class="govuk-main-wrapper" id="main-content">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Tell us about the event</h1>
<!-- Question form -->
</div>
</div>
</main>
</div>
Use funções, não tente reproduzir capturas de tela antigas
Na versão 6, a cor funcional dos links é #1a65a6 e a cor funcional dos erros é #ca3535. Em uma compilação Sass real, use govuk-functional-colour("link") e govuk-functional-colour("error") para que uma atualização possa incorporar a paleta da versão oficial. Essas funções são diferentes da escolha de um tom genérico de vermelho ou azul para ilustrações.
O amarelo é reservado para o foco. Ele não deve se tornar a cor padrão de seleção ou um destaque promocional. A prévia combina o amarelo com texto escuro e uma borda escura bem visível; os erros são identificados pelo texto e pela posição, não apenas pela cor vermelha.
O exemplo de entrada combina govuk-form-group, govuk-label, govuk-hint e govuk-input. O rótulo aponta para o ID do campo; aria-describedby aponta para a dica. Quando o campo é inválido, adicione o ID da mensagem de erro, além das classes de erro. Uma borda vermelha sem essa relação é uma reprodução incompleta.
Este formulário de consulta mantém juntos o nome do evento e o e-mail de contato. São valores separados, cada um com seu próprio rótulo, dentro de uma tarefa breve — não uma instrução para colocar cada campo em uma página diferente. Na prévia, ambos são obrigatórios apenas para demonstrar a validação; isso não estabelece nenhum requisito real de autorização.
Rótulo persistente: Nome do evento.
Dica persistente: Use o nome exibido nas informações do seu evento.
A marcação nativa e o comportamento da aplicação têm funções diferentes
O GOV.UK Frontend aplica estilos aos componentes e os aprimora. Ele não decide qual e-mail é aceito por esse serviço, não salva rascunhos nem recebe consultas. Na prévia, JavaScript valida os dois campos e armazena os valores somente na página atual. Ao recarregá-la, os dados de teste são apagados.
Sistema de design GOV.UK Recuperação por erros vinculados
Faça do resumo um caminho para corrigir as respostas
Após uma tentativa inválida de continuar, exiba o resumo de erros antes do formulário e mova o foco para ele. Cada link da lista aponta para a resposta correspondente. Para um campo de texto único, aponte para o ID do campo; para um grupo de opções, aponte para o primeiro controle adequado, conforme descrito na documentação oficial.
O resumo nativo usa data-module="govuk-error-summary" para ser aprimorado. A prévia insere o resumo somente quando a validação falha e, em seguida, instancia ErrorSummary a partir do módulo local 6.5.1. A biblioteca gerencia o foco e a navegação por links; a aplicação fornece as mensagens, mantém os valores e remove erros obsoletos.
Deixe os dois campos em branco e continue. Siga o link do erro no nome do evento, informe um título fictício e, em seguida, um e-mail inválido. Continue novamente: somente o erro que ainda existe deve aparecer, e o título deve ser mantido. Corrija o endereço para chegar à revisão. Assim, o comportamento do fluxo fica explícito, em vez de exibir um erro de exemplo permanente.
Sistema de design GOV.UK Conferir respostas e alterar
Use uma lista de definição, não uma tabela de dados
A tela de conferência de respostas contém um govuk-summary-list. Cada linha tem uma chave dt, um valor dd e uma área de ações dd. Um rótulo oculto após Alterar identifica a resposta específica. Nomes de eventos longos quebram linha no valor sem ocultar o caminho para editá-lo.
A ação de alteração restaura o formulário e move o foco para o campo selecionado. Ao continuar, a validação é executada novamente e a revisão atualizada é exibida. O fluxo de retorno é código da aplicação; o sistema de design fornece a estrutura de apresentação.
Este estudo termina na revisão porque nenhum serviço recebe os dados. Em um serviço real, a tela de conferência precede o envio efetivo e precisa mostrar as informações que serão enviadas. Uma aplicação com declarações ou confirmação do servidor precisa de lógica adicional; um painel verde não produz esse resultado.
Preencha as duas respostas fictícias e continue até a revisão.
Selecione Alterar nome do evento e edite somente essa resposta.
Continue e verifique se o título corrigido e o e-mail informado foram mantidos.
Sistema de design GOV.UK Integração com o frontend
Compile o ponto de entrada Sass sem identidade visual de marca
A configuração abaixo usa govuk-frontend@6 e Dart Sass com o importador de pacotes do Node. Ela compila a configuração de fontes sem identidade visual de marca, conforme documentada, e copia a distribuição JavaScript para o navegador. Inclua no repositório o arquivo de lockfile resolvido para que o projeto registre a versão exata.
O exemplo não carrega Transport nem usa recursos de imagem do governo. Um serviço com identidade visual de marca que atenda aos requisitos também precisa disponibilizar os recursos oficiais pelo caminho documentado. Aplicações que usam outra ferramenta de build podem manter o mesmo módulo Sass e a chamada initAll, adaptando o empacotamento.
Inicialize depois que a marcação do componente existir
A prévia independente executa os arquivos oficiais CSS e JavaScript, copiados localmente na versão 6.5.1. Uma substituição de fonte de escopo restrito troca Transport em todo o estudo. A validação do formulário e a tela de revisão são código da aplicação; o aprimoramento de Button e ErrorSummary vem da biblioteca. A receita separada de build Sass documenta a configuração configurável recomendada; essa compilação não foi executada aqui.
No estado válido, remova o parágrafo de erro, os modificadores de erro e o ID do erro de aria-describedby.
Mantenha o valor real quando a validação falhar; use saída do servidor com escape ou atribua o texto/valor pelo DOM.
Resumo de erros: navegação até a resposta
Coloque o resumo antes do conteúdo da pergunta. A mensagem corresponde ao erro em linha, e o link aponta para o campo de entrada, não para um contêiner sem relação.
html
<div class="govuk-error-summary" data-module="govuk-error-summary">
<div role="alert">
<h2 class="govuk-error-summary__title">There is a problem</h2>
<div class="govuk-error-summary__body">
<ul class="govuk-list govuk-error-summary__list">
<li><a href="#event-name">Enter an event name</a></li>
</ul>
</div>
</div>
</div>
A inicialização do Frontend fornece o comportamento de foco do resumo em uma implementação nativa.
O estudo em execução cria um novo ErrorSummary após inserir cada resumo de falha na validação; a validação da aplicação permanece separada.
Confira suas respostas: uma lista de resumo semântica
Uma lista de definições associa o rótulo da resposta ao seu valor e a um destino específico para edição. O sufixo oculto diferencia links «Alterar» repetidos.
O parâmetro returnTo é uma convenção da aplicação usada aqui, não um recurso do Frontend API.
Volte da edição para a revisão, mantendo intactas todas as demais respostas.
Exemplo completo independente
O documento completo inclui layout, controles e inicialização. Extraia o arquivo de exemplo indicado para obter os recursos do fornecedor no caminho relativo exato e, em seguida, disponibilize-o por HTTP.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Event enquiry — OpenDesign component study</title><link rel="stylesheet" href="vendor/govuk-6.5.1/govuk-frontend.min.css"><style>
body{margin:0;background:#fff}body,body *,body *::before,body *::after{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}[hidden]{display:none!important}.study-header{border-bottom:1px solid #cecece;padding:15px 0;background:#f3f3f3}.study-header p{margin:0}.study-header strong{display:block;margin-bottom:5px}.study-note{border-top:1px solid #cecece;padding-top:20px;margin-top:30px}.study-actions{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}.govuk-summary-list__value{overflow-wrap:anywhere}main:focus,h1:focus{outline:none}.govuk-width-container{max-width:1020px}.study-tools{margin:20px 0}.study-tools button{font:inherit;background:none;border:0;padding:0;color:#1a65a6;text-decoration:underline;cursor:pointer}.study-tools button:focus{outline:3px solid #ffdd00;background:#ffdd00;color:#0b0c0c}.study-header .govuk-body-s{max-width:75ch}
</style></head><body class="govuk-template__body"><script>document.body.className+=' js-enabled'+('noModule' in HTMLScriptElement.prototype?' govuk-frontend-supported':'');</script>
<a class="govuk-skip-link" href="#main-content">Skip to main content</a>
<header class="study-header"><div class="govuk-width-container"><p class="govuk-body-s"><strong>OpenDesign · Component study</strong>GOV.UK Frontend 6.5.1 with an alternative font. Fictional enquiry; no information is sent.</p></div></header>
<main class="govuk-width-container govuk-main-wrapper" id="main-content"><div class="govuk-grid-row"><div class="govuk-grid-column-two-thirds">
<section id="questions"><div id="errors"></div><h1 class="govuk-heading-l" id="question-title" tabindex="-1">Tell us about the event</h1><p class="govuk-body">Enter fictional details to try linked validation and the check-answers pattern.</p>
<form id="event-form" novalidate>
<div class="govuk-form-group" id="name-group"><label class="govuk-label" for="event-name">Event name</label><div class="govuk-hint" id="event-name-hint">Use the name shown on your event information.</div><input class="govuk-input" id="event-name" name="eventName" type="text" aria-describedby="event-name-hint"></div>
<div class="govuk-form-group" id="email-group"><label class="govuk-label" for="contact-email">Contact email</label><div class="govuk-hint" id="contact-email-hint">For example, [email protected]. Use a fictional address.</div><input class="govuk-input" id="contact-email" name="email" type="email" spellcheck="false" autocomplete="email" aria-describedby="contact-email-hint"></div>
<button class="govuk-button" data-module="govuk-button" type="submit">Continue to check answers</button>
</form><div class="study-tools govuk-body-s"><button id="fill" type="button">Use example details</button></div></section>
<section id="review" hidden><a class="govuk-back-link" href="#questions" id="back">Back</a><h1 class="govuk-heading-l govuk-!-margin-top-6" tabindex="-1" id="review-title">Check your answers</h1><dl class="govuk-summary-list"><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Event name</dt><dd class="govuk-summary-list__value" id="review-name"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#event-name" data-field="event-name">Change<span class="govuk-visually-hidden"> event name</span></a></dd></div><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Contact email</dt><dd class="govuk-summary-list__value" id="review-email"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#contact-email" data-field="contact-email">Change<span class="govuk-visually-hidden"> contact email</span></a></dd></div></dl><h2 class="govuk-heading-m">This example ends at review</h2><p class="govuk-body">Nothing has been submitted. Your answers stay in this page until it is reset or reloaded.</p><button class="govuk-button govuk-button--secondary" data-module="govuk-button" id="reset" type="button">Start again</button></section>
<aside class="study-note"><h2 class="govuk-heading-s">Try the recovery path</h2><ol class="govuk-list govuk-list--number"><li>Continue with empty fields to show the error summary.</li><li>Follow an error link, enter a title and an invalid email.</li><li>Correct the email, then change an answer from review.</li></ol><p class="govuk-body-s">Native component CSS and ErrorSummary behaviour. Local application logic only. No government logo, Transport font, external request or stored account.</p><p class="govuk-body-s"><a class="govuk-link" href="https://design-system.service.gov.uk/components/error-summary/" target="_blank" rel="noreferrer">Official error summary reference</a> · <a class="govuk-link" href="vendor/govuk-6.5.1/LICENSE.txt">Frontend licence</a></p></aside>
</div></div></main><script type="module">
import {initAll, ErrorSummary} from './vendor/govuk-6.5.1/govuk-frontend.min.js';
initAll();
const q=document.querySelector('#questions'),r=document.querySelector('#review'),form=document.querySelector('#event-form'),holder=document.querySelector('#errors');
const fields=[{id:'event-name',group:'name-group',empty:'Enter an event name'},{id:'contact-email',group:'email-group',empty:'Enter a contact email',invalid:'Enter an email address in the correct format, like [email protected]'}];
function clearErrors(){holder.replaceChildren();for(const f of fields){document.getElementById(f.group).classList.remove('govuk-form-group--error');const input=document.getElementById(f.id);input.classList.remove('govuk-input--error');input.removeAttribute('aria-invalid');input.setAttribute('aria-describedby',f.id+'-hint');document.getElementById(f.id+'-error')?.remove();}document.title='Event enquiry — OpenDesign component study';}
function edit(id='event-name'){r.hidden=true;q.hidden=false;document.getElementById(id).focus();}
form.addEventListener('submit',event=>{event.preventDefault();clearErrors();const errors=[];for(const f of fields){const input=document.getElementById(f.id);const value=input.value.trim();const message=!value?f.empty:(f.id==='contact-email'&&(!input.validity.valid||!value.includes('@'))?f.invalid:null);if(message){errors.push({id:f.id,message});document.getElementById(f.group).classList.add('govuk-form-group--error');input.classList.add('govuk-input--error');input.setAttribute('aria-invalid','true');input.setAttribute('aria-describedby',f.id+'-hint '+f.id+'-error');const p=document.createElement('p');p.id=f.id+'-error';p.className='govuk-error-message';const hidden=document.createElement('span');hidden.className='govuk-visually-hidden';hidden.textContent='Error: ';p.append(hidden,document.createTextNode(message));input.before(p);}}
if(errors.length){const summary=document.createElement('div');summary.className='govuk-error-summary';summary.dataset.module='govuk-error-summary';summary.innerHTML='<div role="alert"><h2 class="govuk-error-summary__title">There is a problem</h2><div class="govuk-error-summary__body"><ul class="govuk-list govuk-error-summary__list"></ul></div></div>';for(const err of errors){const li=document.createElement('li'),a=document.createElement('a');a.href='#'+err.id;a.textContent=err.message;li.append(a);summary.querySelector('ul').append(li);}holder.append(summary);new ErrorSummary(summary);document.title='Error: Event enquiry — OpenDesign component study';return;}
document.getElementById('review-name').textContent=document.getElementById('event-name').value;document.getElementById('review-email').textContent=document.getElementById('contact-email').value;q.hidden=true;r.hidden=false;document.getElementById('review-title').focus();document.title='Check your answers — OpenDesign component study';});
document.querySelectorAll('.change').forEach(a=>a.addEventListener('click',e=>{e.preventDefault();edit(a.dataset.field)}));document.getElementById('back').addEventListener('click',e=>{e.preventDefault();edit()});document.getElementById('fill').addEventListener('click',()=>{clearErrors();document.getElementById('event-name').value='Riverside community picnic';document.getElementById('contact-email').value='[email protected]';document.getElementById('event-name').focus()});document.getElementById('reset').addEventListener('click',()=>{form.reset();clearErrors();edit();document.getElementById('question-title').focus()});
</script></body></html>
Baixe o exemplo completo em Fontes. O README informa o comando exato para iniciá-lo localmente.
Mantenha os caminhos do fornecedor relativos a este documento; o arquivo inclui todos os recursos usados nesta prévia.
04
Configuração do agente de IA sistema de design GOV.UK
Ponto de partida para implementação
Separe os comandos do shell, o conteúdo de app.scss e os fragmentos HTML nos locais indicados. A pré-visualização é executada com cópias locais dos recursos oficiais da versão 6.5.1 e uma substituição de fonte; esta receita de compilação do Sass está documentada, mas ainda não foi compilada neste espaço de trabalho. O ZIP completo do exemplo funcional, em Sources, também fornece as dependências exatas da pré-visualização e o documento completo. Extraia os arquivos, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/gov-uk.html. Não abra exemplos baseados em módulos por meio de file://.
sh / scss / html
# Run in a project directory
npm install [email protected]
npm install --save-dev sass
mkdir -p public/assets
# Save the following as app.scss
@use "pkg:govuk-frontend" as * with (
$govuk-font-family: ("Helvetica Neue", Helvetica, Arial, sans-serif)
);
# Compile, then copy the browser module
npx sass --pkg-importer=node app.scss public/assets/app.css
cp node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js public/assets/
<!-- In the HTML head -->
<link rel="stylesheet" href="/assets/app.css">
<!-- At the start of body -->
<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
<!-- After the question / summary markup -->
<script type="module">
import { initAll } from '/assets/govuk-frontend.min.js';
initAll();
</script>
Um prompt para seu projeto
Prompt para agente de IA
Implemente a consulta sobre um evento com dois campos usando GOV.UK Frontend v6 e a configuração de fonte Helvetica sem identidade visual da GOV.UK descrita neste guia. Use as estruturas reais de form-group/input/error-summary e summary-list, erros em linha vinculados, respostas mantidas, links «Alterar» direcionados e conclusão apenas na etapa de revisão. Aplique a tipografia responsiva e o espaçamento documentados por meio das classes do Frontend. Mantenha a identidade real do projeto e não crie um envio oficial nem invente resultados de backend. Verifique os estados de campos vazios, e-mail inválido, correção, revisão e alteração de resposta.
05
Fontes e escopo de sistema de design GOV.UK
Estudo independente de uma aplicação OpenDesign, usando componentes CSS e JavaScript do GOV.UK Frontend 6.5.1. Não há logotipo do governo, fonte Transport, serviço oficial, envio real nem certificação de conformidade. As regras do formulário e a navegação de revisão são código original da aplicação.
