# Editorial / revista

Também chamado de: design editorial, layout de revista, jornal na web, editorial long-form  
Era: herança do impresso; auge na web 2012-presente (Snow Fall do NYT em 2012 como marco)  
Página: https://designforai.dev/pt/style/editorial-magazine

## Traços

- manchetes em serifa display combinadas com uma sans limpa para UI e legendas
- layout de artigo em múltiplas colunas, capitulares, citações destacadas, bylines, datas
- medida generosa (60-75 caracteres), entrelinha grande, ritmo vertical claro
- imagem hero full-bleed com legenda, depois uma coluna estreita de leitura
- filetes finos, labels de seção em versaletes, seções numeradas
- paleta contida: branco papel, preto tinta, um acento editorial
- o movimento se resume a revelações lentas de imagens no scroll, nada mais

Paleta: #fbfaf7 papel, #141414 tinta, #8a1c1c acento (sangue de boi), #6b6b6b cinza de legenda, #e6e2da filetes

Tipografia: Playfair Display, Fraunces ou Newsreader para manchetes (700-900, 48-96px), Source Serif 4 ou Lora para o corpo a 19-21px com line-height 1.7, IBM Plex Sans ou Work Sans 12-13px em caixa alta para labels

## Faça

- defina o corpo de texto a 19-21px numa coluna de 680px; o conforto de leitura é o produto
- use uma hierarquia tipográfica de verdade: chapéu, manchete, linha fina, byline, corpo, citação destacada, legenda
- dê a cada imagem uma legenda e um crédito

## Evite

- não use cards para artigos; use filetes, espaço em branco e tamanhos de tipo para separá-los
- não centralize o corpo de texto
- não use mais de duas famílias tipográficas mais uma mono para dados

Conhecido por: The New York Times, The Atlantic, Bloomberg Businessweek, Kinfolk

## Semente CSS

```css
:root{--bg:#fbfaf7; --fg:#141414; --accent:#8a1c1c; --muted:#6b6b6b; --rule:#e6e2da; --radius:0; --font:'Fraunces',serif; --font-body:'Source Serif 4',serif}
```

## Prompt

Construa o site como um layout editorial de revista. Fundo papel #fbfaf7, tinta #141414, acento #8a1c1c, cinza de legenda #6b6b6b, filetes finos #e6e2da a 1px. Manchetes em Fraunces 800 a 88px no desktop / 44px no mobile, line-height 1.02, letter-spacing -0.02em; linhas finas em Fraunces 400 itálico a 24px; corpo em Source Serif 4 a 20px, line-height 1.7, coluna com max-width 680px; chapéus e bylines em IBM Plex Sans 12px em caixa alta com tracking 0.1em. Imagem hero full-bleed 16:9 com legenda abaixo. Adicione uma capitular no primeiro parágrafo (3 linhas de altura), citações destacadas a 32px que se estendem 80px para fora da coluna no desktop, e títulos de seção numerados. Sem cards, sem sombras, sem raio; separe as seções com filetes de 1px e 96px de espaço. Imagens surgem com fade de 600ms no scroll; nada mais se move. Rodapé como um expediente em três colunas com versaletes.