Pilar 8 · referência de uso

O que a sala vê, e o que você escreve para que ela veja.

Cada quadro abaixo é um slide de verdade, renderizado pelo mesmo componente que o guia de aula usa e na mesma proporção da projeção — um palco de 1000px é um projetor de 1920px em escala 1:1,9. Corpo de texto, quebras de linha e área segura estão onde vão estar na parede. Embaixo de cada um, a linha exata a escrever em site/src/lib/aulas.ts.

A regra que governa tudo isto: elemento visual dominante vence texto. Nenhuma sequência de três telas seguidas deve ser lista corrida — e número gigante conta como visual, lista numerada não.

01

A régua de projeção

Todo corpo de texto é medido em fração da tela, não em pixels. A unidade é --u: 1% da largura de um 16:9 que caiba no palco. Quando a tela é mais achatada que isso — projetor 4:3, ou o palco do guia, que perde altura para cabeçalho e rodapé — é a altura que passa a mandar, e nada estoura.

Antes disto o corpo do slide era 30px fixos acima de 768px de largura: 2,8% da altura de um 1080p, contra os 5%–6% que um slide de verdade usa. O material estava sendo projetado com um terço do corpo que a sala precisa.

tipo-eyebrow

tipo-titulo

tipo-corpo — o piso de leitura da última fileira

tipo-nota

tipo-credito · fonte · autor · licença

16:9 — o caso normal

A área segura reserva 5% da borda: projetor de sala corta canto.

4:3 — o projetor velho da sala

A mesma tela, sem estourar: a altura passa a mandar na escala.

02

Arquétipos de tela

A

Capa de bloco

4× por aula

Marca troca de modo. Sem ela o aluno não tem sinal nenhum de que um bloco acabou e outro começou. É a única tela que sangra até a borda — romper a moldura de todas as outras é o que faz ser lida como transição antes de ser lida como conteúdo.

Iluminura medieval: dois camponeses ceifam trigo com foices diante de um castelo de torres brancas; à direita, um casal tosquia ovelhas

Wikimedia Commons · Irmãos Limbourg (c. 1412–1416) · PD

02Bloco 1

Por que a humanidade passou quase toda a sua história sem crescer?

Wikimedia Commons · Irmãos Limbourg (c. 1412–1416) · PD

aulas.ts[CAPA: lavoura-medieval]

Imagem de atmosfera é o único uso decorativo legítimo do material, e vale aqui e na tela de pausa — porque não há argumento concorrendo.

B

Número que choca

todo número dito esperando reação

Um número que muda a visão de mundo do aluno não pode ter o mesmo peso visual de uma instrução administrativa. Um número por tela — dois já é o arquétipo C.

49,1por mil nascidos vivos

Mortalidade infantil na Guiné Equatorial. No Sri Lanka, 12% mais pobre: 5,3.

World Development Indicators, Banco Mundial, 2023

aulas.ts[NUMERO: 49,1 | por mil nascidos vivos | Mortalidade infantil, Guiné Equatorial, 2023 | WDI]
C

Confronto A | B

o arquétipo mais recorrente do curso

A tese central da Aula 1 — renda não é bem-estar — só existe como comparação. A leitura que interessa é a horizontal, por isso o rótulo da métrica fica no meio e os números se aproximam dele pelas bordas internas.

País A

Guiné Equatorial

exportador de petróleo

País B

Sri Lanka

US$ 17.567

PIB per capita (PPP), 2024

US$ 15.633

63,7 anos

Expectativa de vida, 2023

77,5 anos

49,1

Mortalidade infantil, 2023 — por mil nascidos vivos

5,3

O país 12% mais rico vive 13,8 anos a menos e enterra nove vezes mais bebês.

Banco Mundial (WDI) e PNUD (HDR 2025) — recorte em dados/renda-x-bem-estar-paises/

aulas.ts[CONFRONTO: guine-equatorial-x-sri-lanka]

As métricas entram escalonadas a 140ms, mais devagar que as listas: aqui a ordem é o argumento — a renda quase empata, a expectativa de vida abre 13,8 anos, a mortalidade abre nove vezes.

D

Evidência (gráfico)

quando o dado é o argumento

Título-afirmação em vez de título-tema, anotação no ponto que importa, crédito fixo no rodapé. Um gráfico sem título-afirmação obriga o aluno a descobrir sozinho o que deveria estar vendo, em 5 minutos de tela.

Em destaque, o par da abertura: a Guiné Equatorial é ~12% mais rica que o Sri Lanka e vive 13,8 anos a menos. Renda de 2024, expectativa de vida de 2023. Fontes: Banco Mundial (WDI) e PNUD (RDH 2025). Recorte em dados/renda-x-bem-estar-paises/.

aulas.ts[GRAFICO: renda-x-bem-estar-paises]
F

Retrato

toda pessoa citada pelo nome, 1× por curso

Economia do desenvolvimento é um campo com brigas reais entre pessoas reais. Mostrar o rosto de quem discorda transforma “crítica de Ravallion aos índices compostos” em conflito humano. Não é slide de biografia: nome, uma linha de quem é, uma citação.

Homem idoso de cabelos grisalhos e óculos de armação marrom, de terno escuro e gravata vermelha, sorrindo em plano três-quartos

Wikimedia Commons · Fronteiras do Pensamento · CC BY-SA 2.0

Quem está dizendo isso

Amartya Sen

Nobel de Economia, 1998. Viveu a fome de Bengala em 1943.

Desenvolvimento é a expansão das liberdades reais das pessoas.

aulas.ts[RETRATO: amartya-sen]

A citação entre aspas são as palavras da pessoa, e vem do registro da imagem. Um veredito do curso sobre ela entra pela marcação — [RETRATO: id | veredito] — e é impresso em romano, sem aspas: sem essa separação, o material atribui a alguém uma frase que não é dela.

G

Pergunta em tela cheia

toda linha terminada em “?” sozinha na tela

A inversão de cor não é enfeite: é o sinal de que o modo da sala mudou — o professor parou de falar, a turma fala. Legível do fundo mesmo com a luz acesa, e cria um ritmo de respiração ao longo da aula.

Qual desses dois países você diria que se desenvolveu mais?

aulas.tsQual desses dois países você diria que se desenvolveu mais?

Sem marcação: basta a linha terminar em “?” e estar sozinha na tela. O fundo escurece em 200ms e o texto entra 150ms depois — sem isso há um intervalo em que texto cor de papel está sobre papel, ou seja, invisível.

H

Modelo

Semana 3 (Solow) em diante

Escrever k^α como texto simples num material que se propõe a preparar para a ANPEC derruba a credibilidade do resto. Mas o que faz o arquétipo valer não é o KaTeX: é a coluna de nomes ENCOSTADA na equação. A turma lê a fórmula uma vez enquanto o professor fala e volta ao slide dois minutos depois procurando “o que era δ mesmo?” — com a legenda embaixo, essa segunda leitura não acontece.

A equação de movimento

Δk=sf(k)(δ+n)k\Delta k = s \cdot f(k) - (\delta + n) \cdot k
Δk\Delta k
variação do capital por trabalhador
kk
capital por trabalhadork = K / L
ss
taxa de investimento~20% da renda, no Brasil
f(k)f(k)
o que se produz por trabalhador
δ\delta
depreciação~4,8% ao ano na PWT
nn
crescimento da população2,7% ao ano no Brasil dos anos 1960; 0,84% hoje

Em uma frase

O capital por trabalhador cresce com o que se poupa e investe, e encolhe com o que se desgasta e com a gente nova que chega para dividir o mesmo capital.

O termo que soma tem retornos decrescentes; o que subtrai é uma linha reta. Duas curvas com esse formato se cruzam uma vez, e só uma.

Solow (1956)

aulas.ts[MODELO: equacao-de-movimento]

A frase sob régua grossa é obrigatória no registro, não opcional: o roteiro manda ler a equação como frase antes de lê-la como equação, e quem travou na notação precisa de algo na tela que não seja notação. O valor ao lado do símbolo (δ ≈ 4,8% ao ano na PWT) é o que transforma uma letra grega em medida.

I

Tarefa

segmentos com tarefa: true

Uma tela só pelo segmento inteiro: durante 25 minutos de trabalho em grupo esta é a única referência da sala, e quem levanta a cabeça no minuto 14 precisa reencontrar a tarefa inteira. Cada linha do roteiro vira um passo numerado — juntas num parágrafo, elas escondiam em que ponto a turma está. O cronômetro é o do segmento, e não avança nada no meio da oficina.

Tempo da atividade

18:24

  1. 01Cada grupo escolhe 3 a 5 indicadores que deveriam contar para medir desenvolvimento.
  2. 02Ao lado de cada um, escrevam o que ele deixa de fora.
  3. 03Fechem com os pesos: quanto vale cada indicador no placar de vocês?

Se travaremSe travarem: qual dos indicadores escolhidos é o mais fácil de defender? Comecem por ele.

O que entregar quando o tempo acabar

O placar dos seis países, com os pesos escritos e uma frase defendendo a dimensão que vocês acrescentaram.

aulas.tstarefa: true, promptTrabalho: “Se travarem: …”

Composição

índice apresentado como soma de escolhas

Substitui a frase corrida “nasce de um compromisso entre X + Y + Z” por algo que se lê num olhar. A escolha das partes é o argumento: mostrar as partes lado a lado é mostrar que houve escolha.

IDH — PNUD

Renda

RNB per capita

Saúde

Expectativa de vida

Educação

Anos de estudo

Três dimensões, não medida neutra — a escolha delas já é um valor.

aulas.ts[COMPOSICAO: idh]

Aposta

os 15 min de pré-abertura

Uma tela só, estática, pelos 15 minutos inteiros — as pessoas entram em momentos diferentes, e uma tela que já trocou obriga quem chegou no minuto 10 a perguntar ao vizinho o que perdeu. O relógio conta para o início do conteúdo, não para o fim de uma atividade.

Enquanto a turma chega

Quatro apostas. Sente com quem estiver do lado, anotem os palpites num papel — as respostas aparecem sozinhas ao longo da noite.

  1. 1Em que século a renda média de um inglês dobrou, pela primeira vez, em relação ao ano 1000?
  2. 2Em 1700, a Inglaterra era quantas vezes mais rica que a China?
  3. 3E em 1950: o Brasil ou a Coreia do Sul — e por quanto?
aulas.tsaposta: true

Nota de trilha

fim do conteúdo da tela, na última tela do segmento

Fala com um quarto da sala, então é a peça mais secundária do slide — e mesmo assim precisa continuar legível da última fileira. A discrição vem de tirar régua e itálico e trocar o rótulo embutido na frase por ícone mais nome em mono; o corpo do texto NÃO diminui, porque abaixo de tipo-nota ela chega à parede como rodapé ilegível.

Ser pobre em 1960 não previu crescer mais rápido depois: a correlação é −0,08.

ANPEC / mestradoesta aula é o item 5 do programa quase inteiro — estado estacionário, regra de ouro, convergência, contabilidade do crescimento e Solow aumentado.

aulas.tstrilha: { trilha: "anpec", nota: "…" }
03

Imagens

Imagem é argumento, não decoração. Toda imagem tem que ser evidência, pessoa real ou atmosfera assumidamente atmosférica. A régua é a mesma que já vale para dado: se não dá para citar a fonte, não entra. A convenção completa está em imagens/README.md.

Tratamento — o que faz doze imagens parecerem um sistema

Doze imagens ótimas de origens diferentes, sem tratamento comum, parecem uma colagem. Doze medianas, todas em duotone papel/oxblood com o mesmo grão e o mesmo crédito no mesmo canto, parecem uma direção de arte. O tratamento acontece no navegador — o original fica intacto, o que preserva a licença e permite retratar o acervo inteiro mexendo numa variável.

Cartão de teste: rampa de dez tons de cinza com dois círculos, um branco e um preto
Original — cartão de teste, não é fotografia
O mesmo cartão de teste em duotone papel e oxblood
.figura-tratada .figura-grao — pretos viram oxblood, brancos viram papel

Duas exceções, e são absolutas: nunca em gráfico ou mapa com dado (a cor tem significado) e nunca em imagem com licença ND, que proíbe obra derivada.

Como a imagem entra no roteiro

Imagem inline

a imagem ilustra a linha ao lado

Pesa zero na divisão em telas e viaja junto da linha anterior. É o padrão, e é o que impede que ilustrar uma frase rebalanceie silenciosamente as durações da aula inteira.

  • 01Entre 1330 e 1400 a renda por pessoa na Inglaterra sobe 48% — e no meio desse intervalo a Peste Negra mata entre um terço e metade da população.
  • Iluminura medieval: procissão de flagelantes descalços e encapuzados chicoteando as próprias costas, seguidos de três figuras com cruz e estandarte

    Wikimedia Commons · Pierart dou Tielt (fl. 1340–1360) · PD

aulas.ts[IMAGEM: peste-negra-1348]

Imagem em tela própria

quando a imagem é o argumento

O sufixo explícito devolve o peso 1 à linha: a imagem passa a contar como uma tela, com a duração que qualquer outra teria.

Gravura do século XIX: salão de fábrica com fileiras de teares mecânicos ligados a eixos no teto, operárias de vestido longo trabalhando entre as máquinas

Wikimedia Commons · T. Allom (desenho) e J. Tingle (gravura), 1835 · PD

aulas.ts[IMAGEM: tear-mecanico-manchester | tela]

A fila de busca

Uma imagem que ainda não chegou nunca quebra a aula: a tela continua dizendo, em corpo legível da última fileira, o que deveria estar ali. Em sala isso é uma legenda a mais. Fora dela, é a ordem de serviço do agente buscador — o protocolo está em .claude/agents/buscador-imagens.md.

  1. banerjee-duflo

    Abhijit Banerjee e Esther Duflo juntos, preferencialmente na mesma foto — os dois dividem o mesmo argumento na aula, e uma foto do par economiza uma tela. Se não houver foto conjunta em licença aceitável, buscar retrato individual de cada um e abrir dois pedidos.

    retrato · Semana 1 · Contraponto · wikimedia-commons

  2. david-albouy

    Retrato de David Albouy, economista da University of Illinois Urbana-Champaign. A tela existe para dar rosto ao contraponto: a aula precisa que a crítica seja de uma pessoa, não de um parágrafo anônimo.

    retrato · Semana 4 · Contraponto · wikimedia-commons

04

O orçamento visual

Cinco regras verificáveis, para cobrar em toda aula nova. Elas existem para conter o único risco real do framework — não é ficar feio, é ficar bonito e mais raso, com imagem ocupando o lugar do argumento.

  1. 01Nenhuma sequência de 3 telas seguidas sem elemento visual dominante — número gigante conta, lista numerada não.
  2. 02Todo número dito em voz alta esperando reação vira arquétipo B ou C, nunca item de lista.
  3. 03Toda pessoa citada pelo nome tem retrato, uma vez por curso.
  4. 04Todo lugar citado que a turma não localiza de cabeça tem mapa, uma vez por lugar.
  5. 05Toda imagem e todo dado têm crédito visível na tela.

Framework completo em design-pedagogico/pilar-8-linguagem-visual-das-aulas.md. Para ver os arquétipos em operação, com cronômetro e navegação: guias de aula.