# Sistema de design GOV.UK ## 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. ## 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. ### Tipografia e texto responsivos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | govuk-heading-xl | 32px / 35px → 48px / 50px | Tamanho da fonte / altura da linha antes e depois do limite para tablet; título da página. | | govuk-heading-l | 27px / 30px → 36px / 40px | Tamanho da fonte / altura da linha antes e depois do limite para tablet; título da pergunta. | | govuk-heading-m | 21px / 25px → 24px / 30px | Tamanho da fonte / altura da linha antes e depois do limite para tablet; título da seção. | | govuk-body-l | 21px / 25px → 24px / 30px | Tamanho da fonte / altura da linha antes e depois do limite para tablet; texto introdutório. | | govuk-body | 19px / 25px → 19px / 25px | Tamanho da fonte / altura da linha antes e depois do limite para tablet; texto comum. | | govuk-body-s | 16px / 20px → 16px / 20px | Tamanho da fonte / altura da linha antes e depois do limite para tablet; texto de apoio. | ### Elegibilidade da fonte | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | GDS Transport | service.gov.uk services | A fonte oficial é obrigatória para serviços nesse subdomínio. | | Independent preview | Helvetica Neue, Helvetica, Arial, sans-serif | Conjunto alternativo recomendado pelas orientações do Frontend sem marca; nenhum arquivo Transport é carregado. | ### Espaçamento responsivo e estático | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | unit 0 | 0px → 0px; static 0px | Responsivo de pequeno → grande; govuk-spacing(unit) permanece estático. | | unit 1 | 5px → 5px; static 5px | Responsivo de pequeno → grande; govuk-spacing(unit) permanece estático. | | unit 2 | 10px → 10px; static 10px | Responsivo de pequeno → grande; govuk-spacing(unit) permanece estático. | | unit 3 | 15px → 15px; static 15px | Responsivo de pequeno → grande; govuk-spacing(unit) permanece estático. | | unit 4 | 15px → 20px; static 20px | Responsivo de pequeno → grande; govuk-spacing(unit) permanece estático. | | unit 5 | 15px → 25px; static 25px | Responsivo de pequeno → grande; govuk-spacing(unit) permanece estático. | | unit 6 | 20px → 30px; static 30px | Responsivo de pequeno → grande; govuk-spacing(unit) permanece estático. | | unit 7 | 25px → 40px; static 40px | Responsivo de pequeno → grande; govuk-spacing(unit) permanece estático. | | unit 8 | 30px → 50px; static 50px | Responsivo de pequeno → grande; govuk-spacing(unit) permanece estático. | | unit 9 | 40px → 60px; static 60px | Responsivo de pequeno → grande; govuk-spacing(unit) permanece estático. | ### Nomes funcionais das cores | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | govuk-functional-colour("text") | #0b0c0c | Conteúdo principal legível | | govuk-functional-colour("secondary-text") | #484949 | Dicas e informações de apoio | | govuk-functional-colour("link") | #1a65a6 | Links comuns | | govuk-functional-colour("link-hover") | #0f385c | Link ao passar o cursor | | govuk-functional-colour("link-visited") | #54319f | Destinos visitados | | govuk-functional-colour("border") | #cecece | Separadores estruturais | | govuk-functional-colour("input-border") | #0b0c0c | Contorno do campo | | govuk-functional-colour("focus") | #ffdd00 | Somente foco do teclado | | govuk-functional-colour("focus-text") | #0b0c0c | Texto amarelo no foco | | govuk-functional-colour("error") | #ca3535 | Feedback de validação | | govuk-functional-colour("success") | #0f7a52 | Feedback de sucesso | | govuk-functional-colour("body-background") | #ffffff | Superfície de leitura | ### Primitivas de layout | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | govuk-width-container | 1020px maximum | Largura externa padrão do conteúdo; pode ser substituída quando houver uma necessidade real de conteúdo. | | govuk-grid-row + govuk-grid-column-two-thirds | 2/3 at wider widths | Mantenha perguntas e textos em uma coluna legível; em larguras pequenas, empilhe o conteúdo. | | govuk-main-wrapper | Main content region | Use na região principal dentro do contêiner de largura. | ### Breakpoints e contornos dos controles | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | $govuk-breakpoints.mobile | 320px | Chave de breakpoint do Sass, não um layout adicional obrigatório. | | $govuk-breakpoints.tablet | 641px | Limite padrão para tipografia, espaçamento e grade responsivos; o guia de estilos o descreve como superior a 640px. | | $govuk-breakpoints.desktop | 769px | Breakpoint nomeado adicional. | | $govuk-focus-width | 3px | Largura do contorno de foco; combine-a com o tratamento de foco documentado. | ## Guia completo sistema de design GOV.UK 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. ## Versão e identidade sistema de design GOV.UK ### Uma referência da v6 com 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. Consulte a especificação de apoio ### Escolha a configuração de fonte correta 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. Consulte a especificação de apoio ## 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. ``` .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); } ``` Referência de código Consulte a especificação de apoio ## 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. ``` .app-question-group { @include govuk-responsive-margin(6, "bottom"); } .app-fixed-inset { padding: govuk-spacing(3); } ``` Referência de código Consulte a especificação de apoio ### Coloque uma coluna de leitura dentro do contêiner 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. ```

Tell us about the event

``` Referência de código Consulte a especificação de apoio ## Sistema de design GOV.UK Cor e foco ### 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. ``` .app-supporting-text { color: govuk-functional-colour("secondary-text"); } .app-custom-error { color: govuk-functional-colour("error"); } ``` Referência de código Consulte a especificação de apoio ## Sistema de design GOV.UK Componentes de perguntas ### Um campo é uma estrutura integrada 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. - Erro recuperável: Informe o nome do evento. Consulte a especificação de apoio ### 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ### Experimente o fluxo real de correção 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ### Encerre no limite do que é verdadeiro 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. 1. Preencha as duas respostas fictícias e continue até a revisão. 2. Selecione Alterar nome do evento e edite somente essa resposta. 3. Continue e verifique se o título corrigido e o e-mail informado foram mantidos. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ### Inicialize depois que a marcação do componente existir Em uma página estática, carregue o módulo copiado e chame initAll. Em uma aplicação renderizada no cliente, inicialize uma região recém-inserida com initAll({ scope: element }) depois que ela existir. Não inicialize uma amostra de erro oculta na inicialização e a confunda com um fluxo de validação ativo. 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. Consulte a especificação de apoio ## Sistema de design GOV.UK Exemplos de componentes do sistema de design ### Campo de texto: rótulo, dica e erro em linha No estado de exemplo, o modificador de erro é adicionado ao grupo e ao campo. A descrição do campo reúne, por ID, a dica persistente e o erro atual. ```
Use the name shown on your event information.

Error: Enter an event name

``` Referência de código - 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. ```

There is a problem

``` Referência de código - 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. ```
Event name
Riverside community picnic
Change event name
``` Referência de código - 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. ``` Event enquiry — OpenDesign component study Skip to main content

OpenDesign · Component studyGOV.UK Frontend 6.5.1 with an alternative font. Fictional enquiry; no information is sent.

Tell us about the event

Enter fictional details to try linked validation and the check-answers pattern.

Use the name shown on your event information.
For example, organiser@example.com. Use a fictional address.
``` Referência de código - 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. ## 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://. ``` # Run in a project directory npm install govuk-frontend@6.5.1 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/ ``` ### Um prompt para seu projeto ``` 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. ``` ## 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. - Escala tipográfica da v6 Pares de tamanho e altura da linha para telas pequenas e grandes. - Espaçamento responsivo Unidades fixas e responsivas e funções auxiliares do Sass. - Cores funcionais Funções atuais e acessores do Sass. - Layout Composição de contêineres e grade. - Campo de texto Estrutura de rótulo, dica e erro. - Resumo de erros Comportamento de foco e correção por link. - Lista de resumo Chaves, valores e ações contextuais de alteração. - Sem a identidade visual da GOV.UK Fonte, identidade e configuração do Sass. - Incluir CSS Integração com Dart Sass e o pacote. - Importar JavaScript Módulos do navegador e initAll. - Baixar o exemplo completo funcional ZIP com HTML completo, dependências locais CSS/JavaScript, licenças incluídas e instruções exatas de inicialização. Não é necessário executar uma etapa de compilação. ## Recursos relacionados de sistema de design GOV.UK ### 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. ### Rivet Crie páginas universitárias com a escala real de tokens de Rivet, a anatomia de componentes de HTML e as interações nativas pelo teclado. Explore uma página compacta de detalhes de oficina com abas acessíveis sobre informações de visita. - [Referência de implementação](https://design-system.service.gov.uk/components/error-summary/) - [Fonte](https://design-system.service.gov.uk/styles/type-scale/) - [Fonte](https://design-system.service.gov.uk/styles/typeface/) - [Fonte](https://design-system.service.gov.uk/styles/spacing/) - [Fonte](https://design-system.service.gov.uk/styles/colour/) - [Fonte](https://design-system.service.gov.uk/styles/layout/) - [Fonte](https://frontend.design-system.service.gov.uk/sass-api-reference/) - [Consulte a especificação de apoio](https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/) - [Consulte a especificação de apoio](https://design-system.service.gov.uk/styles/typeface/) - [Referência de código](https://design-system.service.gov.uk/styles/type-scale/) - [Consulte a especificação de apoio](https://design-system.service.gov.uk/styles/type-scale/) - [Referência de código](https://design-system.service.gov.uk/styles/spacing/) - [Consulte a especificação de apoio](https://design-system.service.gov.uk/styles/spacing/) - [Referência de código](https://design-system.service.gov.uk/styles/layout/) - [Consulte a especificação de apoio](https://design-system.service.gov.uk/styles/layout/) - [Referência de código](https://design-system.service.gov.uk/styles/colour/) - [Consulte a especificação de apoio](https://design-system.service.gov.uk/styles/colour/) - [Consulte a especificação de apoio](https://design-system.service.gov.uk/components/text-input/) - [Consulte a especificação de apoio](https://design-system.service.gov.uk/patterns/question-pages/) - [Consulte a especificação de apoio](https://design-system.service.gov.uk/components/error-summary/) - [Consulte a especificação de apoio](https://design-system.service.gov.uk/components/summary-list/) - [Consulte a especificação de apoio](https://design-system.service.gov.uk/patterns/check-answers/) - [Consulte a especificação de apoio](https://frontend.design-system.service.gov.uk/include-css/) - [Consulte a especificação de apoio](https://frontend.design-system.service.gov.uk/import-javascript/) - [Referência de código](https://design-system.service.gov.uk/components/text-input/) - [Referência de código](https://design-system.service.gov.uk/components/error-summary/) - [Referência de código](https://design-system.service.gov.uk/components/summary-list/) - [Escala tipográfica da v6 Pares de tamanho e altura da linha para telas pequenas e grandes.](https://design-system.service.gov.uk/styles/type-scale/) - [Espaçamento responsivo Unidades fixas e responsivas e funções auxiliares do Sass.](https://design-system.service.gov.uk/styles/spacing/) - [Cores funcionais Funções atuais e acessores do Sass.](https://design-system.service.gov.uk/styles/colour/) - [Layout Composição de contêineres e grade.](https://design-system.service.gov.uk/styles/layout/) - [Campo de texto Estrutura de rótulo, dica e erro.](https://design-system.service.gov.uk/components/text-input/) - [Resumo de erros Comportamento de foco e correção por link.](https://design-system.service.gov.uk/components/error-summary/) - [Lista de resumo Chaves, valores e ações contextuais de alteração.](https://design-system.service.gov.uk/components/summary-list/) - [Sem a identidade visual da GOV.UK Fonte, identidade e configuração do Sass.](https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/) - [Incluir CSS Integração com Dart Sass e o pacote.](https://frontend.design-system.service.gov.uk/include-css/) - [Importar JavaScript Módulos do navegador e initAll.](https://frontend.design-system.service.gov.uk/import-javascript/)