PPT de HTML — Minimalismo Editorial

Um deck 16:9 para os briefings que odeiam neon: atualizações para investidores, revisões de design, manifestos internos, decks de palestras. Lê como um suplemento impresso, não como uma página de destino de SaaS.

Fonte

Destilado de Leonxlnx/taste-skill — skills/minimalist-skill/SKILL.md. O sistema de deck segue a convenção de deck de projeto: cada .slide é uma seção 100vw × 100vh, o slide ativo carrega .active / .is-active, e o exemplo pronto possui navegação por teclado, roda, toque e pontos dentro do iframe da galeria. Fallbacks sem script e para impressão mantêm todos os slides visíveis. Veja example.html neste diretório.

Regras rígidas

• Substrato: off-white quente #FBFBFA / #F7F6F3. Primeiro plano off-black #1A1A19. Nunca branco puro ou preto puro.
• Combinação de fontes: display em serifa (Instrument Serif / Newsreader / Lyon), corpo em grotesca (Inter Tight / Switzer), meta em mono (JetBrains Mono).
• Escala de exibição por slide: título clamp(56px, 6.5vw, 96px) serifa com capacidade itálica, altura da linha 1.05, kerning -0.025em.
• Apenas hairline: 1px solid #EAEAEA — bordas, divisores, células de tabela. Sem sombras projetadas.
• Uma cor de destaque escolhida entre os pares pastel suaves (por exemplo, sálvia #346538 sobre #EDF3EC, ou vermelho #9F2F2D sobre #FDEBEC). Usada com moderação — ponto de sobrancelha, preenchimento de gráfico, chip de destaque. Nunca como fundo de slide.
• Preenchimento do slide: generoso (72px 96px no mínimo). Título com no máximo 14ch de largura.
• Sobrancelha: todo slide abre com uma sobrancelha mono em maiúsculas letter-spacing: 0.18em e um número de seção 01 / 09.
• Números de página: mono, canto inferior direito.

Banido

• Inter (use Inter Tight se precisar, mas prefira Switzer / SF Pro). Sem Roboto, Open Sans.
• Sombras projetadas pesadas. Brilho. Texto com gradiente.
• Linhas de recursos com 3 cards iguais. Use colunas divididas por hairline desiguais em vez disso.
• Emojis em texto ou como marcadores de lista — use — ou nenhum marcador.
• Fotografia em tela cheia em todos os slides. Use um ou dois slides de imagem; reserve-os.
• Copiar clichê de IA ("Elevar", "Desbloquear", "Perfeito", "Nova Geração").
• Transições de slide mais barulhentas que fade-in.

Arquétipos de slide obrigatórios (10–12 no total recomendados)

1. Capa — título em serifa, acento itálico no meio da frase, rodapé meta em mono.
2. Sobrancelha + tese — uma única frase de introdução do corpo à esquerda; sumário numerado em mono à direita.
3. Manifesto numerado — três ou quatro teses separadas por hairline.
4. Slide de dados Bento — grade de 6 colunas desiguais com espaços de hairline; uma estatística em serifa, suporte em mono.
5. Citação / destaque — uma única frase em serifa grande, atribuição em mono, hairline acima e abaixo.
6. Comparação — duas colunas separadas por uma hairline vertical; "Não / Sim" ou "Antes / Depois".
7. Tabela ou índice — display: grid; gap: 1px na cor hairline.
8. Gráfico ou detalhamento — gráfico de barras horizontal plano com rótulos em mono, preenchimento de destaque apenas na última barra.
9. Equipe / colofão — lista chave-valor em mono, sem avatares.
10. Encerramento — linha final em serifa itálica; CTA como botão fantasma; assinatura em mono.

Movimento

• Navegação em tempo de execução: teclado, roda / trackpad, deslize por toque e botões de ponto devem atualizar o mesmo estado de slide ativo. Mantenha o fade em aproximadamente 400ms cubic-bezier(0.16, 1, 0.3, 1).
• Fallback estático / impressão: mantenha todos os slides visíveis quando o tempo de execução não foi inicializado ou o documento é impresso.
• Sem translação, sem desfoque, sem avanço automático.

Pré-voo

• Substrato é off-white quente; primeiro plano é off-black; nunca preto/branco puro
• Serifa usada em títulos, grotesca em corpo, mono em meta — três famílias, três funções
• Uma cor de destaque, usada no máximo três vezes em todo o deck
• Todo slide tem sobrancelha + número de seção + número de página
• Pelo menos uma tabela de grade hairline ou módulo de comparação
• Sem sombras projetadas, sem gradientes, sem emojis, sem fontes banidas
• Navegação por teclado, roda / trackpad, deslize por toque e ponto movem um slide e mantêm o ponto ativo / slide ativo em sincronia