shaunbent/govuk-proposal-pages

Páginas de proposta no estilo GOV.UK

Propósito

Produzir uma única página HTML autossuficiente que defenda uma direção, explique uma ideia ou apresente uma mudança, usando os estilos reais do GOV.UK Design System e uma pequena biblioteca de componentes reutilizáveis.

O princípio orientador: mostre o conteúdo, não o narre. Uma lista de coisas que uma equipe possui se torna uma grade de cartões. Um conjunto de etapas se torna um fluxo. Uma comparação se torna uma tabela com as diferenças destacadas. A prosa é o tecido conjuntivo entre os componentes, não a principal forma de transportar a informação.

Descreva o conteúdo; esta skill cuida da aparência.

A saída é um único arquivo HTML

As páginas criadas com esta skill são compartilhadas como arquivos, frequentemente enviados para o SharePoint ou uma biblioteca de documentos similar e vinculados a partir dali. Portanto:

• Tudo vive em um único arquivo .html. CSS, fontes e imagens são incorporados (fontes e imagens como data URIs base64). Sem folhas de estilo, scripts, fontes ou imagens externas.
• A página deve ser lida corretamente com o JavaScript desativado. Algumas bibliotecas de documentos removem ou bloqueiam scripts nas prévias. Componentes interativos (como o alternador de visualização) são melhorias: o estado padrão mostrado sem JavaScript deve fazer sentido por si só.
• Sem etapa de build para o leitor. O arquivo abre diretamente em um navegador.

Arquivos

• page-starter.html é uma página em branco: o CSS do GOV.UK Frontend, as fontes GDS Transport incorporadas como base64, o CSS completo dos componentes, um banner de status, um herói e um rodapé com um registro de alterações. Cada nova página começa como uma cópia deste arquivo. O GDS Transport é licenciado apenas para uso no GOV.UK; fora do GOV.UK, substitua por outra fonte tipográfica (veja NOTICE.md).
• docs/index.html é a página de documentação para esta skill, e foi construída com a própria skill. Sua seção "Componentes" é a referência visual: cada componente, nomeado e rotulado, com quando usar, quando evitar e um exemplo ao vivo. Copie o markup dos componentes dos blocos gx-specimen__demo lá. Não copie as classes gx-; elas apenas estilizam a página de documentação. Ela usa o mesmo CSS de componentes que o starter, então o markup copiado funciona sem alterações.

Estrutura do documento

Defina o argumento antes de escolher os componentes. A maioria das propostas segue esta ordem; remova as seções que o conteúdo não precisa.

Seção	O que faz	Componentes que geralmente encaixam
Status e herói	Diz o que é o documento e a única coisa a ser absorvida	Banner de status, herói
O que é	Explica a ideia, se o público pode não conhecê-la	Categorias, leque, camadas, par de código
O que nos dá	Os benefícios, cedo, para cada grupo na sala	Grade de benefícios, cartão largo
Por que agora	O problema como está, com evidências	Silos, estatísticas, tabela de comparação, muitos-para-um, citação de pesquisa
Como funciona	A abordagem proposta	Fluxo, antes e depois, hub e spoke, funil, exemplo prático
Quem faz o quê	Responsabilidades	Responsabilidades, painel
Por onde começamos	Escopo e ordem	Fases, linha do tempo
Riscos	O que pode dar errado	Risco
Perguntas em aberto	O que você precisa dos leitores	Perguntas em aberto
Sucesso	Como você saberá que funcionou	Medidas de sucesso, resultado
Rodapé	Versão e registro de alterações	Registro de alterações

Coloque "Por que agora" primeiro apenas quando os leitores já entendem o espaço da solução (veja "Princípios editoriais").

Catálogo de componentes

Cada componente tem um nome. As pessoas que usam esta skill podem pedir componentes pelo nome ("use um funil para mostrar de onde vêm as aplicações"), e você deve usar os mesmos nomes ao sugeri-los. A seção "Componentes" de docs/index.html mostra cada um ao vivo, com sua classe, quando usar e quando evitar. Copie o markup de lá.

Móveis da página

Nome	Classe	Use quando
Banner de status	pt-topbanner	Toda página. Mostra a versão e uma linha sobre o que é o documento.
Herói	pt-hero	Toda página. Uma tag de sobrancelha, o título e a frase mais contundente do documento.
Nota de apoio	pt-note	Informações meta sob um diagrama, tabela ou conjunto de estatísticas: fontes, ressalvas, "ilustrativo".
Registro de alterações	pt-footer	O rodapé de toda página. Entrada mais recente primeiro.

Cartões

Nome	Classe	Use quando
Grade de benefícios	pt-owns-grid	Três ou quatro coisas entregues, possuídas ou ganhas.
Cartão largo	pt-owns-card--wide	Um item que precisa de mais espaço que seus irmãos, ou para evitar que um cartão fique sozinho em uma linha.
Princípios	pt-works-grid	Três princípios ou formas de trabalhar.
Categorias	pt-categories	Tipos de uma coisa, cada um com um pequeno visual que mostra a categoria.
Painel	pt-card	Um ponto que precisa de mais espaço que um cartão de grade, estilizado como todos os outros cartões.
Risco	govuk-inset-text pt-card pt-card--warning	Um risco a ser protegido, declarado de forma direta e baseado em experiência.
Resultado	pt-card pt-card--success	No que isso se torna se funcionar.

Números

Nome	Classe	Use quando
Estatísticas	pt-baseline-grid	Números de destaque. Cada número tem um rótulo simples, e o conjunto soma um total declarado quando possível.

Diagramas

Nome	Classe	Use quando
Leque	pt-fanout	Uma fonte alimentando várias saídas.
Funil	pt-fanin	Várias fontes que se juntam em uma coisa: entradas para uma decisão, dados alimentando um registro, equipes contribuindo para um serviço. Funciona melhor com três a cinco entradas. O exemplo desenha quatro curvas, começando em y 12.5, 37.5, 62.5 e 87.5; para um número diferente de entradas, inicie cada curva no centro de sua entrada (para três: 16.7, 50 e 83.3).
Hub e spoke	pt-hub	Uma coisa central com até quatro partes que se conectam a ela.
Silos	pt-silos	A mesma coisa mantida separadamente em vários lugares, sem nada conectando-os. Sinalize a cópia que difere.
Muitos-para-um	pt-many-to-one	Vários nomes ou rotas que levam à mesma coisa: duplicatas, aliases, trabalho sobreposto.
Antes e depois	pt-before-after	A mesma coisa hoje e como proposta, lado a lado.
Camadas	pt-layers	Níveis que se constroem uns sobre os outros, unidos por setas rotuladas. Os rótulos dos conectores são em peso regular.
Fluxo	pt-flow	Um processo com etapas numeradas e um estado final. Marque destinos não decididos como abertos com uma tag "Abordagem a acordar".
Fases	pt-phases	Etapas do trabalho em uma ordem real. A etapa atual é preenchida.
Linha do tempo	pt-timeline	Marcos datados. Marcos passados preenchidos, futuros vazados.
Espectro	pt-spectrum	Onde as coisas se situam em um intervalo entre dois extremos: maturidade, esforço, risco.
Equipes	pt-squads	Como as equipes se relacionam, especialmente em reestruturações. Marque uma equipe mudando de estado como tracejada.

Tabelas e listas

Nome	Classe	Use quando
Tabela de comparação	pt-compare	Várias opções ou lugares lado a lado. Agrupe linhas e destaque o valor ímpar em toda a célula.
Responsabilidades	pt-split	Quem é responsável pelo quê, dois grupos lado a lado.
Perguntas em aberto	pt-questions	Perguntas que você quer respondidas, cada uma marcada com para quem é.
Medidas de sucesso	pt-check-list	Cinco ou seis resultados verificáveis.

Exemplos e evidências

Nome	Classe	Use quando
Exemplo prático	pt-example	Um caso concreto: um visual, depois como cada lugar lida com ele hoje.
Citação de pesquisa	pt-quote	O que um usuário, colega ou parte interessada realmente disse, com quem disse.
Par de código	pt-code-pair	Dados, código ou configuração, sozinhos ou lado a lado. Rotule trechos simplificados como "Ilustrativo".
Ponto de cor	pt-swatch	Uma cor ou status mostrado inline, em uma tabela ou frase. Sempre emparelhado com um rótulo de texto.

Interativos

Nome	Classe	Use quando
Alternador de visualização	pt-views	Alternar um diagrama entre dois estados, como "Hoje" e "Proposto". Opcional, precisa de JavaScript.

Se o conteúdo não se encaixar em nenhum destes, escreva um parágrafo curto (tudo bem, com moderação) ou adicione um componente (veja "Estendendo a biblioteca").

Princípios editoriais

Estrutura

• Um documento, uma linha condutora. Cada componente deve servir ao argumento central. Se algo é interessante mas não essencial, corte.
• Explique a ideia antes de defender quando o público pode não conhecê-la. Problema-primeiro funciona quando as pessoas já entendem o espaço da solução. Quando não entendem, uma seção de problemas parece uma lista de reclamações sem saída. Veja "Estrutura do documento" para a ordem padrão.
• Coloque os benefícios no início. Os leitores decidem se se importam na primeira ou segunda tela.
• Mostre todo o escopo com o primeiro exemplo. Se o primeiro exemplo é restrito, os leitores assumem que toda a proposta é restrita. Quando a ideia se aplica amplamente, comece com um exemplo que sugira a abrangência, depois use o caso restrito como evidência.
• Corte seções que não precisam estar lá. Se uma seção é sobre uma decisão para uma conversa diferente, deixe-a de fora.

Linguagem

• Introduza um termo antes de usá-lo. Isso inclui cabeçalhos, rótulos e grupos de tabela. Se o termo aparece antes de ser explicado, use uma descrição simples.
• Dê a cada termo um trabalho. Se duas palavras semelhantes aparecem (por exemplo "decisão" para uma escolha única e "abordagem" para o método todo), mantenha cada uma em seu próprio significado ao longo do texto.
• Descreva uma abordagem como "uma forma comum", não "a forma", a menos que realmente seja a única forma. É mais preciso e convida à discussão.
• Use palavras que descrevem, não culpam. "Definido em alguns lugares, em outros não" descreve uma situação. "Lacunas" ou "faltando" implica que alguém falhou.
• Quando o autor fornece o texto, use-o como está. Corrija apenas a gramática e diga o que mudou.

Evidências

• Use dados reais da fonte (o sistema, a planilha, a exportação), não números lembrados ou estimados. Diga de onde vêm os números.
• Sinalize qualquer coisa lida de uma captura de tela ou resumo para que possa ser verificada antes de a página ser compartilhada.
• Não superestime o status. Se algo foi bem recebido mas não formalmente acordado, diga isso precisamente, ou deixe o status de fora.
• Marque escolhas não decididas como não decididas. Uma tag "Abordagem a acordar" em uma opção é melhor do que apresentar um palpite como uma decisão.

Tom com públicos mistos

• Seja equilibrado. Ao mostrar um problema que envolve várias equipes ou lugares, mostre a parte de cada um. Uma página que destaca um único grupo é lida defensivamente por esse grupo.
• Enquadre benefícios compartilhados para cada grupo na sala. Descreva o que cada grupo ganha em seus próprios termos. Não mencione o atrito entre grupos no documento, mesmo que seja a real motivação. Os benefícios podem abordá-lo sem descrevê-lo.

Estilo da casa

O estilo padrão da casa, mude conforme necessário:

• Inglês do Reino Unido, cabeçalhos em letra minúscula (exceto primeira palavra e nomes próprios), vírgula Oxford
• Sem travessões; reestruture com vírgula, dois pontos, ponto e vírgula ou ponto final
• Sem construções "não é X, é Y"
• Sem metáforas militares ou de combate
• "governo" em minúsculo, a menos que faça parte de um nome
• Simples, direto, confiante; cada palavra ganha seu lugar, e linhas de introdução não repetem linhas de destaque

Regras visuais

• Um tratamento de cartão para todos. Os cartões são brancos, com borda cinza de 1px, borda superior azul de 4px, um ícone opcional, um cabeçalho pequeno (govuk-heading-s) e texto do corpo pequeno (govuk-body-s). Não invente estilos de cartão únicos; reformate o novo conteúdo para corresponder.
• Sem órfãos nas grades. Se uma grade deixar um cartão sozinho em uma linha, torne esse cartão largo ou altere o número de colunas.
• Amostras de cor são círculos, combinando com as páginas de cores do GOV.UK Design System.
• Tabelas de comparação destacam a célula inteira, não um fundo inline atrás do texto, para que os valores permaneçam alinhados em cada coluna. Cada célula e cabeçalho de grupo compartilham a mesma borda esquerda.
• Rótulos de conectores em diagramas são peso regular. Negrito é para cabeçalhos e para a coisa sendo apontada.
• Notas de apoio (pt-note): texto do corpo pequeno de 16px na cor de texto secundária (#505a5f). Use para informações meta sob um diagrama, tabela ou conjunto de estatísticas: ressalvas, fontes, rótulos "ilustrativo".
• Blocos de código lado a lado têm a mesma altura.
• Diagramas usam box-sizing: border-box (definido no CSS do componente) para que padding e bordas nunca empurrem um componente para fora de sua caixa.
• A tag do herói fica em uma linha. Tags do GOV.UK têm uma largura máxima de 160px por padrão; o CSS do componente a levanta para o herói e banner.
• Fontes ou imagens personalizadas devem ser incorporadas, e apenas se sua licença permitir. Verifique a licença primeiro. Fontes tipográficas personalizadas geralmente precisam de centralização vertical manual: meça o texto renderizado e ajuste o padding.
• Acessibilidade: dê aos diagramas uma alternativa de texto (role="img" com um aria-label que declare o que o diagrama mostra), mantenha estados de foco visíveis em controles interativos e não confie apenas na cor para mostrar uma diferença (as células destacadas também estão em negrito).

Componentes interativos

O alternador de visualização (pt-views) permite que um leitor alterne um diagrama entre estados, por exemplo "hoje" e "proposto", ou "claro" e "escuro". É opcional:

• O estado padrão deve ser aquele que faz sentido sem JavaScript.
• Use elementos <button> reais com aria-pressed.
• Mantenha o script inline e pequeno; o starter inclui um que você pode reutilizar.

Fluxo de construção

1. Reúna o conteúdo primeiro: o argumento, as evidências, para quem é e o que você quer que eles façam. Escolher componentes antes de o conteúdo estar claro produz uma página polida com substância fina.
2. Planeje as seções usando "Estrutura do documento", e escolha os componentes pelo nome do catálogo. Se a pessoa pediu componentes específicos, use-os.
3. Copie page-starter.html para um novo arquivo. Preencha o banner, herói e rodapé.
4. Copie o markup de cada componente da seção "Componentes" de docs/index.html e substitua o conteúdo placeholder. Nunca deixe texto placeholder na página.
5. Se a página usar um alternador de visualização, mantenha o script no final do starter; caso contrário, exclua-o.
6. Verifique a página em um navegador, certificando-se de que os dados são reais, os links estão atualizados e os componentes estão completos. Remova comentários HTML não utilizados.
7. Se uma decisão importante estiver faltando, adicione uma pergunta aberta.
8. Adicione uma entrada ao registro de alterações. Entrada mais recente primeiro.
9. Compartilhe o arquivo, muitas vezes enviando-o para uma biblioteca de documentos.

Estendendo a biblioteca

Se o conteúdo não se encaixar em nenhum componente existente:

• Um parágrafo curto de prosa é aceitável, em vez de forçar um componente que não se encaixa. A prosa é o tecido conjuntivo entre os componentes, não o condutor principal.
• Para um novo componente, modele-o a partir de um existente. Dê a ele uma classe descritiva, documente-o no docs/index.html com quando usar e quando evitar, e certifique-se de que corresponda visualmente à família de componentes existente.

Manutenção e upstream

• O CSS, fontes e markup dos componentes em page-starter.html e docs/index.html são atualizados periodicamente para refletir as alterações do GOV.UK Frontend.
• Os arquivos de origem para a construção da página estão em src/. Veja package.json para scripts.
• Para relatar problemas ou sugerir melhorias, use o rastreador de problemas. Pull requests são bem-vindos.

Consulte o arquivo NOTICE.md para informações de licenciamento de terceiros.