Design for AI

Estilo Monocromo blanco y negro: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para monocromo blanco y negro. También llamado diseño web en blanco y negro, UI monocroma, diseño acromático, diseño sin color, sitio en escala de grises. atemporal; oleadas web con portfolios de moda y fotografía, de 2016 en adelante para estudios.

Rasgos

  • sin ningún matiz: negro, blanco y una rampa corta de grises
  • la jerarquía viene solo del peso, el tamaño, el espaciado y el contraste de valor
  • fotografía en blanco y negro o muy desaturada
  • filetes finísimos y barras negras gruesas como única decoración
  • a menudo tipografía grande y espacio en blanco generoso; a veces denso y periodístico
  • una excepción permitida: un único color de hover o foco, o ninguno
  • secciones invertidas (blanco sobre negro) para dar ritmo

Paleta

#ffffff blanco, #000000 negro, #1a1a1a casi negro, #666666 gris medio, #d9d9d9 gris claro, #f4f4f4 blanco roto

Tipografía

una familia en dos o tres pesos: Geist, la parecida a Neue Montreal "Space Grotesk", Archivo, o una serif como Newsreader; títulos 500-700 a 40-96px, cuerpo 400 a 16-18px

Haz

  • construye una rampa de grises de 5 pasos y úsala con el mismo rigor que una paleta de color
  • usa bloques invertidos (sección negra, texto blanco) para crear ritmo en vez de color
  • si permites un único acento, úsalo una vez, para anillos de foco o un estado de enlace

Evita

  • no uses colores "casi grises" con tinte; o saturación cero o nada
  • no añadas sombras para fingir profundidad; usa pasos de valor y líneas
  • no desatures las fotos con un filtro y lo des por hecho; elige imágenes que funcionen en blanco y negro

Conocido por: Ssense, Balenciaga, Studio Dumbar (parcial), referencias de Massimo Vignelli, Craig Mod

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

Construye el sitio en monocromo estricto. Solo #ffffff, #000000, #1a1a1a, #666666, #d9d9d9 y #f4f4f4; saturación cero en todas partes, imágenes incluidas (fuentes en escala de grises, no filtros, siempre que sea posible). Fuente Archivo: títulos 600 a 80/44/28px con tracking -0.02em, cuerpo 400 a 17px con line-height 1.6, etiquetas 12px en mayúsculas 0.1em en #666666. Layout sobre una retícula de 12 columnas, filetes 1px #d9d9d9 entre filas, barras negras gruesas de 8px como apertura de sección. Alterna secciones: blanca con texto negro, después negra con texto blanco (invierte todos los colores, filetes incluidos, a #333333). Botones: negro sólido, texto blanco, radio 0, 48px de alto; en las secciones negras se invierten. Enlaces: subrayado de 1px, el hover pasa el subrayado a 2px. Imágenes a sangre o alineadas a columna, sin radio, sin borde. Sin sombras, sin gradientes, sin iconos más allá de flechas. Movimiento: transiciones de color de 150ms y un fundido de imagen de 500ms al hacer scroll. El anillo de foco es 2px solid negro con offset 2px.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en monocromo estricto. Solo #ffffff, #000000, #1a1a1a, #666666, #d9d9d9 y #f4f4f4; saturación cero en todas partes, imágenes incluidas (fuentes en escala de grises, no filtros, siempre que sea posible). Fuente Archivo: títulos 600 a 80/44/28px con tracking -0.02em, cuerpo 400 a 17px con line-height 1.6, etiquetas 12px en mayúsculas 0.1em en #666666. Layout sobre una retícula de 12 columnas, filetes 1px #d9d9d9 entre filas, barras negras gruesas de 8px como apertura de sección. Alterna secciones: blanca con texto negro, después negra con texto blanco (invierte todos los colores, filetes incluidos, a #333333). Botones: negro sólido, texto blanco, radio 0, 48px de alto; en las secciones negras se invierten. Enlaces: subrayado de 1px, el hover pasa el subrayado a 2px. Imágenes a sangre o alineadas a columna, sin radio, sin borde. Sin sombras, sin gradientes, sin iconos más allá de flechas. Movimiento: transiciones de color de 150ms y un fundido de imagen de 500ms al hacer scroll. El anillo de foco es 2px solid negro con offset 2px.

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

Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.