{
 "grupo": "design",
 "descricao": "Design visual e de produto",
 "itens": [
  {
   "id": "design-escala-tipografica",
   "nome": "Escala tipográfica",
   "receita": "escolha uma razão (1,25) e derive de 5 a 7 tamanhos; corpo 16 a 18 px",
   "prova": "tela com hierarquia legível usando só esses tamanhos"
  },
  {
   "id": "design-par-de-fontes",
   "nome": "Par de fontes",
   "receita": "uma de título e uma de texto com contraste de estrutura, ou uma família em pesos diferentes",
   "prova": "o texto de 10 linhas lê confortável nas duas"
  },
  {
   "id": "design-entrelinha-e-medida",
   "nome": "Entrelinha e medida",
   "receita": "corpo com entrelinha de 1,5 e linhas de 45 a 75 caracteres",
   "prova": "parágrafo longo sem cansaço visual em 360 e 1280 px"
  },
  {
   "id": "design-grade-de-8-pontos",
   "nome": "Grade de 8 pontos",
   "receita": "espaços e tamanhos múltiplos de 4 e 8; margens e gaps da mesma escala",
   "prova": "inspeção mostra só valores da escala"
  },
  {
   "id": "design-hierarquia-visual",
   "nome": "Hierarquia visual",
   "receita": "um ponto focal por tela por tamanho, peso, cor e espaço; o resto recua",
   "prova": "a regra dos olhos meio fechados mostra o foco certo"
  },
  {
   "id": "design-alinhamento-e-ritmo",
   "nome": "Alinhamento e ritmo",
   "receita": "alinhe a poucas linhas verticais e repita os espaçamentos entre blocos",
   "prova": "sobrepor uma grade mostra os elementos alinhados"
  },
  {
   "id": "design-espaco-em-branco",
   "nome": "Espaço em branco",
   "receita": "aumente o espaço entre grupos e reduza dentro dos grupos (proximidade)",
   "prova": "os grupos se leem sem precisar de linhas"
  },
  {
   "id": "design-paleta-a-partir-de-uma-cor",
   "nome": "Paleta a partir de uma cor",
   "receita": "gere tons em OKLCH, neutros levemente tintados e uma cor de destaque rara",
   "prova": "a paleta tem 1 destaque e neutros coerentes"
  },
  {
   "id": "design-contraste-wcag",
   "nome": "Contraste WCAG",
   "receita": "texto normal 4,5:1, grande 3:1; confira cada par com um verificador",
   "prova": "tabela de razões com todos os pares aprovados"
  },
  {
   "id": "design-cor-semantica",
   "nome": "Cor semântica",
   "receita": "verde, âmbar, vermelho e azul para estados, sempre com ícone ou texto junto",
   "prova": "a informação continua clara em escala de cinza"
  },
  {
   "id": "design-modo-escuro-bem-feito",
   "nome": "Modo escuro bem feito",
   "receita": "superfícies em níveis de cinza escuro, saturação reduzida, sem preto puro e sem branco puro",
   "prova": "texto legível e sem \"brilho\" nas duas versões"
  },
  {
   "id": "design-sombras-e-elevacao",
   "nome": "Sombras e elevação",
   "receita": "2 a 4 níveis, sombras suaves e em camadas, com cor do ambiente",
   "prova": "os cartões têm profundidade sem parecer sujos"
  },
  {
   "id": "design-raio-e-bordas-consistentes",
   "nome": "Raio e bordas consistentes",
   "receita": "um conjunto de raios (4, 8, 16) e bordas de 1 px de baixo contraste",
   "prova": "a interface parece da mesma família"
  },
  {
   "id": "design-icones-coerentes",
   "nome": "Ícones coerentes",
   "receita": "uma biblioteca só, traço e tamanho iguais, alinhados ao texto",
   "prova": "o conjunto na tela não mistura estilos"
  },
  {
   "id": "design-botoes-e-hierarquia-de-acao",
   "nome": "Botões e hierarquia de ação",
   "receita": "um primário por tela, secundário em contorno, terciário em texto; rótulo com verbo",
   "prova": "a ação principal salta aos olhos"
  },
  {
   "id": "design-estados-de-componente",
   "nome": "Estados de componente",
   "receita": "desenhe padrão, hover, foco, ativo, desabilitado, carregando e erro",
   "prova": "todos os estados em uma folha de estados"
  },
  {
   "id": "design-formularios-bem-desenhados",
   "nome": "Formulários bem desenhados",
   "receita": "rótulo acima do campo, ajuda embaixo, erro explícito perto do campo, campos em coluna única",
   "prova": "preencher o formulário sem hesitar (teste com 3 pessoas)"
  },
  {
   "id": "design-tabelas-legiveis",
   "nome": "Tabelas legíveis",
   "receita": "alinhe números à direita, cabeçalho fixo, linhas com espaço, ordenação clara",
   "prova": "achar um valor em segundos"
  },
  {
   "id": "design-estados-vazios-e-de-erro",
   "nome": "Estados vazios e de erro",
   "receita": "explique o porquê, ofereça a próxima ação e mantenha o tom da marca",
   "prova": "nenhuma tela termina sem caminho"
  },
  {
   "id": "design-microcopy",
   "nome": "Microcopy",
   "receita": "verbos claros, sem jargão, mensagem de erro que diz o que fazer, tom constante",
   "prova": "um leitor novo entende cada rótulo sem ajuda"
  },
  {
   "id": "design-onboarding-enxuto",
   "nome": "Onboarding enxuto",
   "receita": "leve ao primeiro valor em poucos passos, mostre no contexto e permita pular",
   "prova": "o usuário novo conclui a primeira ação em menos de 2 minutos"
  },
  {
   "id": "design-navegacao-clara",
   "nome": "Navegação clara",
   "receita": "no máximo 5 a 7 itens principais, estado atual visível, rótulos de usuário",
   "prova": "o usuário acha 5 funções sem instrução"
  },
  {
   "id": "design-design-responsivo",
   "nome": "Design responsivo",
   "receita": "projete de 360 px para cima, ajuste por conteúdo e não por aparelho",
   "prova": "sem rolagem horizontal nem corte entre 360 e 1440"
  },
  {
   "id": "design-movimento-com-proposito",
   "nome": "Movimento com propósito",
   "receita": "200 a 300 ms, ease-out na entrada, animação que explica causa e efeito",
   "prova": "retirar a animação piora a compreensão (se não, remova)"
  },
  {
   "id": "design-design-tokens",
   "nome": "Design tokens",
   "receita": "nomeie por papel (color.surface.raised) e exporte para CSS e código",
   "prova": "trocar o token muda todos os usos"
  },
  {
   "id": "design-biblioteca-de-componentes",
   "nome": "Biblioteca de componentes",
   "receita": "componentes com variantes limitadas, documentação de uso e do que evitar",
   "prova": "dois designers montam a mesma tela igual"
  },
  {
   "id": "design-acessibilidade-no-design",
   "nome": "Acessibilidade no design",
   "receita": "contraste, alvo de 44 px, foco visível, texto redimensionável, sem depender de cor",
   "prova": "checklist de acessibilidade aprovado na revisão"
  },
  {
   "id": "design-prototipar-rapido",
   "nome": "Prototipar rápido",
   "receita": "fluxo clicável de baixa fidelidade antes do visual, testado com 3 pessoas",
   "prova": "as 3 pessoas completam a tarefa principal"
  },
  {
   "id": "design-revisao-critica-de-design",
   "nome": "Revisão crítica de design",
   "receita": "critique contra o objetivo do usuário, não contra gosto, com evidência (print, métrica)",
   "prova": "a lista de problemas tem gravidade e proposta"
  },
  {
   "id": "design-entrega-para-desenvolvimento",
   "nome": "Entrega para desenvolvimento",
   "receita": "especifique espaços, tokens, estados e comportamento responsivo; exporte ativos otimizados",
   "prova": "o código final bate com o design em uma sobreposição"
  },
  {
   "id": "design-imagens-e-fotografia",
   "nome": "Imagens e fotografia",
   "receita": "fotos reais com direção consistente, recorte com foco, compressão e texto alternativo",
   "prova": "nenhuma imagem pesada nem genérica na página"
  },
  {
   "id": "design-graficos-na-interface",
   "nome": "Gráficos na interface",
   "receita": "barras para comparar, linha para tendência, cor de destaque em uma série",
   "prova": "o gráfico responde a uma pergunta clara"
  },
  {
   "id": "design-cartoes-e-listas",
   "nome": "Cartões e listas",
   "receita": "organize por prioridade de leitura, ações no mesmo lugar, densidade ajustada ao uso",
   "prova": "a lista escaneia rápido"
  },
  {
   "id": "design-hero-e-primeira-dobra",
   "nome": "Hero e primeira dobra",
   "receita": "promessa, prova e ação visíveis sem rolar, imagem que reforça a mensagem",
   "prova": "um teste de 5 segundos revela do que se trata"
  },
  {
   "id": "design-dashboard-legivel",
   "nome": "Dashboard legível",
   "receita": "métrica principal em destaque, comparação com período anterior, poucos gráficos",
   "prova": "um gestor entende a situação em 10 segundos"
  },
  {
   "id": "design-design-para-tela-grande",
   "nome": "Design para tela grande",
   "receita": "limite a largura de leitura, use colunas e não estique conteúdo",
   "prova": "nada flutua em um monitor de 2560 px"
  },
  {
   "id": "design-design-de-e-mail",
   "nome": "Design de e-mail",
   "receita": "600 px, uma coluna, botão grande, texto real e imagem opcional",
   "prova": "legível sem imagens e no celular"
  },
  {
   "id": "design-design-de-impressao",
   "nome": "Design de impressão",
   "receita": "CSS @media print, margens, tipografia em pt e quebras de página",
   "prova": "a pré-visualização de impressão sai limpa"
  },
  {
   "id": "design-direcao-de-arte-de-uma-marca",
   "nome": "Direção de arte de uma marca",
   "receita": "defina princípios visuais (3 palavras), regras de imagem, cor e tom, com exemplos certos e errados",
   "prova": "dois materiais novos parecem da mesma marca"
  },
  {
   "id": "design-cores-de-dado-acessiveis",
   "nome": "Cores de dado acessíveis",
   "receita": "paleta categórica de até 6 cores distinguíveis por daltônicos e com rótulos diretos",
   "prova": "gráfico legível em simulador de daltonismo"
  }
 ]
}