Design for AIEstilo Editorial / revista: prompt de design de UI
Paleta, regras de tipografia e um prompt pronto para colar de editorial / revista. Também chamado de design editorial, layout de revista, jornal na web, editorial long-form. herança do impresso; auge na web 2012-presente (Snow Fall do NYT em 2012 como marco).
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
: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.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
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.
## Tokens
:root { --bg:#fbfaf7; --fg:#141414; --accent:#8a1c1c; --muted:#6b6b6b; --rule:#e6e2da; --radius:0; --font:'Fraunces',serif; --font-body:'Source Serif 4',serif }
Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.