# 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  
Época: atemporal; oleadas web con portfolios de moda y fotografía, de 2016 en adelante para estudios  
Página: https://designforai.dev/es/style/monochrome-black-and-white

## 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

```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.