Design 3: Editorial Contemporâneo / Bold Neobrutalism

Criador: Antigravity (Google DeepMind Coding Assistant)

Proposta de Design

Esta proposta explora um estilo de design editorial arrojado e de alto contraste, simulando uma revista digital de luxo ou um jornal cultural de vanguarda. O objetivo é transmitir autenticidade, firmeza e expressividade literária, ideal para uma ordem focada no estudo aprofundado, memória e produção intelectual.

Inspiração

Inspirado na tendência contemporânea do Neobrutalismo no web design, que resgata elementos crus, linhas pretas espessas, paletas de cores terrosas e tipografia dramática com fontes serifadas expressivas (estilo revista Pitchfork, New York Times Magazine, ou publicações de design europeias).

Elementos Chave

  1. Paleta de Cores (Alta Claridade e Contraste):
    • Fundo Creme Suave/Pergaminho (#FAF6EE): Substitui o branco por um tom de areia quente e aconchegante, evocando papel antigo de alta qualidade.
    • Preto Profundo (#111111): Usado para todas as fontes, bordas e sombras para garantir um contraste monumental.
    • Terracota/Laranja Queimado (#D95D39): Cor de destaque energética que evoca a argila, o tijolo e o trabalho dos construtores de pedra.
    • Verde Floresta Escuro (#1E3F20): Utilizado em botões de ação e rodapés para trazer estabilidade e um toque institucional nobre.
  2. Tipografia:
    • Fraunces (Serif): Uma fonte serifada de transição extremamente estilosa e expressiva, com itálicos marcantes e curvas orgânicas exuberantes nos títulos de seções.
    • Space Mono (Monospace): Fonte monoespaçada de estilo “máquina de escrever moderna” usada para datas, rótulos de seções, categorias e pequenos metadados.
    • DM Sans (Sans-Serif): Fonte de corpo de texto geométrica e limpa, balanceando o peso dramático das outras duas.
  3. Disposição e Estrutura:
    • Bordas Pretas Sólidas (2px): Todas as caixas e divisões do site são delimitadas por linhas pretas bem definidas, criando uma grade editorial rígida e organizada.
    • Sombras Sólidas sem Desfoque (box-shadow: 4px 4px 0px #111111): Elementos visuais que saltam da tela com profundidade cartunesca e física.
    • Letra Capitular Dramática: O primeiro caractere de cada bloco de texto principal é ampliado e colorido em terracota, simulando a abertura de capítulos de manuscritos impressos clássicos.
    • Interatividade Tátil: Botões que “afundam” ao passar o mouse ou clicar (deslocamento de sombra 3D), dando um feedback físico delicioso e responsivo.