Design for AI

Estilo Monocromático preto e branco: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de monocromático preto e branco. Também chamado de web design preto e branco, UI monocromática, design acromático, design sem cor, site em escala de cinza. atemporal; ondas na web com portfólios de moda e fotografia, de 2016 em diante para estúdios.

Traços

  • nenhum matiz: preto, branco e uma rampa curta de cinzas
  • a hierarquia vem só de peso, tamanho, espaçamento e contraste de valor
  • fotografia em preto e branco ou fortemente dessaturada
  • filetes finos e barras pretas grossas como única decoração
  • muitas vezes tipografia grande e espaço em branco generoso; às vezes denso e com cara de jornal
  • uma exceção permitida: uma única cor de hover ou foco, ou nenhuma
  • seções invertidas (branco sobre preto) para dar ritmo

Paleta

#ffffff branco, #000000 preto, #1a1a1a quase preto, #666666 cinza médio, #d9d9d9 cinza claro, #f4f4f4 branco-sujo

Tipografia

uma família em dois ou três pesos: Geist, a "Space Grotesk" parecida com Neue Montreal, Archivo, ou uma serifa como Newsreader; títulos 500-700 a 40-96px, corpo 400 a 16-18px

Faça

  • construa uma rampa de 5 cinzas e use-a com o mesmo rigor de uma paleta de cores
  • use blocos invertidos (seção preta, texto branco) para criar ritmo em vez de cor
  • se permitir um único acento, use-o uma vez, em anéis de foco ou num estado de link

Evite

  • não use cores tingidas "quase cinza"; ou saturação zero ou nada
  • não adicione sombras para simular profundidade; use degraus de valor e linhas
  • não dessature fotos com um filtro e dê por encerrado; escolha imagens que funcionem em preto e branco

Conhecido por: Ssense, Balenciaga, Studio Dumbar (parcial), referências de Massimo Vignelli, Craig Mod

Semente CSS
:root {
  --bg: #ffffff;
   --fg: #000000;
   --muted: #666666;
   --line: #d9d9d9;
   --surface: #f4f4f4;
   --radius: 0;
   --shadow: none;
   --font: 'Archivo',sans-serif
}
Prompt

Construa o site em monocromático estrito. Apenas #ffffff, #000000, #1a1a1a, #666666, #d9d9d9 e #f4f4f4; saturação zero em tudo, incluindo imagens (fontes em escala de cinza, não filtros, sempre que possível). Fonte Archivo: títulos 600 a 80/44/28px com tracking -0.02em, corpo 400 a 17px line-height 1.6, labels 12px em caixa alta 0.1em em #666666. Layout numa grade de 12 colunas, filetes 1px #d9d9d9 entre as fileiras, barras pretas grossas de 8px abrindo as seções. Alterne as seções: branca com texto preto, depois preta com texto branco (inverta cada cor, incluindo os filetes para #333333). Botões: preto sólido, texto branco, raio 0, 48px de altura; nas seções pretas, inverta. Links: sublinhado de 1px, o hover engrossa o sublinhado para 2px. Imagens full-bleed ou alinhadas às colunas, sem raio, sem borda. Sem sombras, sem gradientes, sem ícones além de setas. Movimento: transições de cor de 150ms e um fade de imagem de 500ms no scroll. O anel de foco é 2px solid preto com offset de 2px.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em monocromático estrito. Apenas #ffffff, #000000, #1a1a1a, #666666, #d9d9d9 e #f4f4f4; saturação zero em tudo, incluindo imagens (fontes em escala de cinza, não filtros, sempre que possível). Fonte Archivo: títulos 600 a 80/44/28px com tracking -0.02em, corpo 400 a 17px line-height 1.6, labels 12px em caixa alta 0.1em em #666666. Layout numa grade de 12 colunas, filetes 1px #d9d9d9 entre as fileiras, barras pretas grossas de 8px abrindo as seções. Alterne as seções: branca com texto preto, depois preta com texto branco (inverta cada cor, incluindo os filetes para #333333). Botões: preto sólido, texto branco, raio 0, 48px de altura; nas seções pretas, inverta. Links: sublinhado de 1px, o hover engrossa o sublinhado para 2px. Imagens full-bleed ou alinhadas às colunas, sem raio, sem borda. Sem sombras, sem gradientes, sem ícones além de setas. Movimento: transições de cor de 150ms e um fade de imagem de 500ms no scroll. O anel de foco é 2px solid preto com offset de 2px.

## Tokens
:root { --bg:#ffffff; --fg:#000000; --muted:#666666; --line:#d9d9d9; --surface:#f4f4f4; --radius:0; --shadow:none; --font:'Archivo',sans-serif }

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.