Design for AI

Estilo Governamental / institucional limpo: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de governamental / institucional limpo. Também chamado de design system governamental, estilo GOV.UK, USWDS, design cívico, UI de setor público, web institucional. 2012 (lançamento do GOV.UK), 2016 (USWDS), em curso.

Traços

  • linguagem simples primeiro; o layout serve à leitura e aos formulários, não ao marketing
  • tipografia grande e de alto contraste, uma coluna, line-height generoso
  • texto preto sobre branco, um azul forte de link, um amarelo de foco, uma barra fina de marca no topo
  • formulários como padrão central: uma pergunta por página, inputs grandes, resumos de erro claros
  • sem imagem de hero, sem cards, sem ícones além de um brasão ou um chevron
  • acessível por padrão: skip links, foco visível, alvos de 44px, AA ou melhor
  • zero movimento decorativo

Paleta

#ffffff página, #0b0c0c texto, #1d70b8 link, #003078 hover de link, #ffdd00 foco, #d4351c erro, #00703c sucesso, #f3f2f1 superfície, #b1b4b6 borda

Tipografia

GDS Transport é restrita; gratuitas: Public Sans (USWDS), Source Sans 3 ou Atkinson Hyperlegible; corpo 19px line-height 1.3-1.5, títulos 700 a 48/36/27px, largura máxima 66ch

Faça

  • siga os padrões de um design system público existente (GOV.UK Design System ou USWDS) para formulários, erros, botões e navegação
  • mantenha as páginas em coluna única a 66ch e coloque uma tarefa por página
  • faça o estado de foco ser um fundo 3px #ffdd00 mais um outline 3px #0b0c0c para ser impossível de perder

Evite

  • não adicione seções de marketing, depoimentos, imagens de hero nem animação
  • não use texto cinza claro, labels só em placeholder nem bordas finas
  • não invente componentes novos quando o design system já tem um

Conhecido por: GOV.UK, USWDS (usa.gov), Canada.ca, Service NSW, Bundesregierung.de (parcial)

Semente CSS
:root {
  --bg: #ffffff;
   --fg: #0b0c0c;
   --accent: #1d70b8;
   --focus: #ffdd00;
   --error: #d4351c;
   --surface: #f3f2f1;
   --line: #b1b4b6;
   --radius: 0;
   --font: 'Public Sans',sans-serif
}
Prompt

Construa o site em estilo governamental institucional seguindo as convenções do GOV.UK Design System. Fundo #ffffff, texto #0b0c0c, links #1d70b8 sublinhados (hover #003078), foco #ffdd00, erro #d4351c, sucesso #00703c, superfície #f3f2f1, bordas #b1b4b6. Topo: uma barra de marca de 10px #1d70b8, depois um cabeçalho preto de 60px com um wordmark branco e uma nav de texto simples. Fonte Public Sans: corpo 19px line-height 1.5, títulos 700 a 48/36/27/24px com margem inferior de 30px, legendas 16px, max-width 66ch, coluna única com padding lateral de 30px. Formulários: uma pergunta por página, labels 19px 700 acima dos inputs, texto de dica 16px em #505a5f, inputs com 40px de altura, borda 2px #0b0c0c e raio 0, estado de erro com borda esquerda 4px #d4351c e uma caixa de resumo de erros no topo. Botões: preenchimento #00703c, texto branco 19px 700, borda inferior 2px mais escura, raio 0. Foco: fundo 3px #ffdd00 e outline 3px #0b0c0c. Skip link primeiro. Sem imagens, sem cards, sem animação.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo governamental institucional seguindo as convenções do GOV.UK Design System. Fundo #ffffff, texto #0b0c0c, links #1d70b8 sublinhados (hover #003078), foco #ffdd00, erro #d4351c, sucesso #00703c, superfície #f3f2f1, bordas #b1b4b6. Topo: uma barra de marca de 10px #1d70b8, depois um cabeçalho preto de 60px com um wordmark branco e uma nav de texto simples. Fonte Public Sans: corpo 19px line-height 1.5, títulos 700 a 48/36/27/24px com margem inferior de 30px, legendas 16px, max-width 66ch, coluna única com padding lateral de 30px. Formulários: uma pergunta por página, labels 19px 700 acima dos inputs, texto de dica 16px em #505a5f, inputs com 40px de altura, borda 2px #0b0c0c e raio 0, estado de erro com borda esquerda 4px #d4351c e uma caixa de resumo de erros no topo. Botões: preenchimento #00703c, texto branco 19px 700, borda inferior 2px mais escura, raio 0. Foco: fundo 3px #ffdd00 e outline 3px #0b0c0c. Skip link primeiro. Sem imagens, sem cards, sem animação.

## Tokens
:root { --bg:#ffffff; --fg:#0b0c0c; --accent:#1d70b8; --focus:#ffdd00; --error:#d4351c; --surface:#f3f2f1; --line:#b1b4b6; --radius:0; --font:'Public Sans',sans-serif }

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.