# Governamental / institucional limpo

Também chamado de: design system governamental, estilo GOV.UK, USWDS, design cívico, UI de setor público, web institucional  
Era: 2012 (lançamento do GOV.UK), 2016 (USWDS), em curso  
Página: https://designforai.dev/pt/style/government-institutional-clean

## 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

```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.