Design for AI

Estilo Editorial / revista: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para editorial / revista. También llamado diseño editorial, maquetación de revista, periódico web, editorial de formato largo. herencia impresa; pico web de 2012 hasta hoy (Snow Fall del NYT en 2012 como hito).

Rasgos

  • titulares en serif display combinados con una sans limpia para UI y pies
  • artículos a varias columnas, letras capitulares, citas destacadas, firmas, fecha y lugar
  • medida generosa (60-75 caracteres), interlineado amplio, ritmo vertical claro
  • imagen hero a sangre con pie de foto y después una columna de lectura estrecha
  • filetes finísimos, etiquetas de sección en versalitas, secciones numeradas
  • paleta contenida: blanco papel, negro tinta, un acento editorial
  • el movimiento se limita a revelados lentos de imágenes al hacer scroll, nada más

Paleta

#fbfaf7 papel, #141414 tinta, #8a1c1c acento (sangre de toro), #6b6b6b gris de pie de foto, #e6e2da filetes

Tipografía

Playfair Display, Fraunces o Newsreader para titulares (700-900, 48-96px), Source Serif 4 o Lora para el cuerpo a 19-21px con line-height 1.7, IBM Plex Sans o Work Sans 12-13px en mayúsculas para etiquetas

Haz

  • compón el cuerpo a 19-21px en una columna de 680px; la comodidad de lectura es el producto
  • usa una jerarquía tipográfica de verdad: antetítulo, titular, entradilla, firma, cuerpo, cita destacada, pie
  • dale a cada imagen un pie y un crédito

Evita

  • no uses tarjetas para los artículos; sepáralos con filetes, espacio en blanco y tamaños de tipo
  • no centres el texto del cuerpo
  • no uses más de dos tipografías más una mono para datos

Conocido por: The New York Times, The Atlantic, Bloomberg Businessweek, Kinfolk

Semilla CSS
:root {
  --bg: #fbfaf7;
   --fg: #141414;
   --accent: #8a1c1c;
   --muted: #6b6b6b;
   --rule: #e6e2da;
   --radius: 0;
   --font: 'Fraunces',serif;
   --font-body: 'Source Serif 4',serif
}
Prompt

Construye el sitio como una maquetación editorial de revista. Fondo papel #fbfaf7, tinta #141414, acento #8a1c1c, gris de pie #6b6b6b, filetes finos #e6e2da a 1px. Titulares en Fraunces 800 a 88px en escritorio / 44px en móvil, line-height 1.02, letter-spacing -0.02em; entradillas en Fraunces 400 cursiva a 24px; cuerpo en Source Serif 4 a 20px, line-height 1.7, columna con max-width 680px; antetítulos y firmas en IBM Plex Sans 12px en mayúsculas con tracking 0.1em. Imagen hero a sangre en 16:9 con un pie debajo. Añade una letra capitular en el primer párrafo (3 líneas de alto), citas destacadas a 32px que sobresalgan 80px fuera de la columna en escritorio, y títulos de sección numerados. Sin tarjetas, sin sombras, sin radio; separa las secciones con filetes de 1px y 96px de espacio. Las imágenes aparecen con un fundido de 600ms al hacer scroll; nada más se mueve. Pie de página como una cabecera de tres columnas en versalitas.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio como una maquetación editorial de revista. Fondo papel #fbfaf7, tinta #141414, acento #8a1c1c, gris de pie #6b6b6b, filetes finos #e6e2da a 1px. Titulares en Fraunces 800 a 88px en escritorio / 44px en móvil, line-height 1.02, letter-spacing -0.02em; entradillas en Fraunces 400 cursiva a 24px; cuerpo en Source Serif 4 a 20px, line-height 1.7, columna con max-width 680px; antetítulos y firmas en IBM Plex Sans 12px en mayúsculas con tracking 0.1em. Imagen hero a sangre en 16:9 con un pie debajo. Añade una letra capitular en el primer párrafo (3 líneas de alto), citas destacadas a 32px que sobresalgan 80px fuera de la columna en escritorio, y títulos de sección numerados. Sin tarjetas, sin sombras, sin radio; separa las secciones con filetes de 1px y 96px de espacio. Las imágenes aparecen con un fundido de 600ms al hacer scroll; nada más se mueve. Pie de página como una cabecera de tres columnas en versalitas.

## Tokens
:root { --bg:#fbfaf7; --fg:#141414; --accent:#8a1c1c; --muted:#6b6b6b; --rule:#e6e2da; --radius:0; --font:'Fraunces',serif; --font-body:'Source Serif 4',serif }

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