Protótipo Web — Brutalista Industrial (Impressão Suíça)

Para briefs que pedem "editorial", "jornal", "portfólio de agência", "design suíço", "site manifesto", ou onde o objetivo é projetar rigor e fisicalidade em vez de simpatia. Esta habilidade se compromete com UM substrato (impressão suíça clara) — nunca misture com o modo CRT escuro no mesmo artefato.

Fonte

Destilado de Leonxlnx/taste-skill — skills/brutalist-skill/SKILL.md §2.1 (Impressão Industrial Suíça). Para decks que se inclinam para o modo CRT escuro, veja design-templates/html-ppt-taste-brutalist/.

Regras rígidas

• Substrato: papel jornal não branqueado #F4F4F0 ou #EAE8E3. Frente #050505 tinta carbono.
• Acento: UMA cor — vermelho aviação/perigo #E61919. Usado em linhas divisórias, traços, alertas. Nunca como preenchimento em grandes superfícies.
• Tipo de exibição: neo-grotesco pesado (Archivo Black / Inter ExtraBold/Black / Neue Haas Grotesk Black). Escala fluida clamp(4rem, 10vw, 15rem). Espaçamento -0.04em. Entrelinhamento 0.88. Apenas maiúsculas.
• Micro tipo: monoespaçado (JetBrains Mono / IBM Plex Mono). Fixo 10–13px. Espaçamento 0.1em. Maiúsculas. Usado para navegação, metadados, legendas, coordenadas.
• Geometria: border-radius: 0 em todos os lugares. Apenas cantos de 90°.
• Grade: grade CSS visível com gap: 1px sobre um fundo de cor de tinta para renderizar divisores matematicamente perfeitos de 1px.
• Espaço negativo: assimétrico — o herói tem um numeral ou letra que sangra na viewport; clusters de dados são compactados.
• Sintaxe ASCII: decore seções com [ LABEL ], >>>, ///, registro ® / marca registrada ™ como ornamento estrutural.

Banido

• border-radius acima de 0.
• Sombras projetadas, gradientes, glassmorphism, brilhos.
• Texto do corpo centralizado. Apenas justificado ou alinhado à esquerda.
• Cor diferente de tinta, papel e o vermelho de perigo.
• Fontes de corpo sem serifa diferentes de Inter/Archivo/Plex/Mono. Sem grotescos "premium" aqui — essa estética os precede.
• Iconografia curva ou "suave".
• Cópia clichê de IA. Use voz de revista impressa, concisa e declarativa.

Componentes obrigatórios

• Faixa de registro superior: banda de meta monoespaçada — edição, data, coordenadas — correndo de ponta a ponta com linhas finas acima e abaixo.
• Herói: numeral gigante ou palavra única em escala de sangramento de viewport à esquerda; coluna direita agrupa três ou quatro blocos de metadados monoespaçados.
• Seção de manifesto: teses numeradas (01. / 02.) com linha fina <hr> entre cada uma, alinhadas à esquerda.
• Tabela de dados ou índice renderizado com display: grid; gap: 1px em um fundo de tinta.
• Bloco de amostra: demonstração de tipografia — mostre a família/peso/caixa em três escalas.
• Colofão de encerramento: bloco monoespaçado declarando gráfica, tipo de papel, edição, tipografia definida.

Movimento

Esta estética é mecânica, não animada. Use movimento apenas como um mecanismo de precisão:

• Revelação IntersectionObserver: instantânea opacity 0 → 1, sem translação/desfoque.
• Opcional ticker/marquee para a faixa de registro superior em velocidade constante.
• :active em links: inverte tinta/papel instantaneamente. Sem transições sobre 120ms.
• Nunca anime propriedades de layout em nível de página.

Pré-voo

• Substrato é papel jornal, frente é tinta carbono, único acento é vermelho de perigo
• Todo border-radius é 0
• Exibição usa grotesco pesado em escala de sangramento de viewport (≥ 8vw)
• UI micro monoespaçado em maiúsculas em 10–13px fixo, letter-spacing: 0.1em
• Pelo menos um módulo de fundo de tinta display: grid; gap: 1px
• Decoração de sintaxe ASCII aparece pelo menos três vezes ([ ... ], >>>, ///)
• Dados numéricos usam números tabulares + monoespaçado — sem figuras proporcionais
• Sem emojis, sem curvas, sem gradientes, sem efeitos de sombra