Design for AI

Estilo Solo tipografía: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para solo tipografía. También llamado diseño guiado por la tipografía, tipografía primero, web solo de texto, diseño sin imágenes, tipografía como imagen. carteles de los años 60; web de 2010 en adelante (estudios, fundiciones tipográficas, manifiestos, sitios personales).

Rasgos

  • sin fotos, sin ilustración, sin iconos: la tipografía es el único material visual
  • contraste de escala extremo, de titulares de 200px a notas al pie de 12px
  • la retícula se ve solo a través de la alineación
  • una o dos tipografías, explotadas al máximo: pesos, cursivas, versalitas, cifras
  • color usado como un único campo o una única palabra, si acaso
  • el texto puede ser el layout: rotado, contorneado, solapado, en vertical
  • movimiento: ejes de fuente variable animándose, revelados de texto, marquesina

Paleta

#ffffff papel (o #111111 invertido), #111111 tinta, #ff3b00 un acento (opcional), #9a9a9a apagado

Tipografía

una familia expresiva con rango: Fraunces (tamaño óptico y peso variables), Geist o IBM Plex Sans variable, Space Grotesk, Playfair Display, o una mono como JetBrains Mono; titulares 96-240px, cuerpo 16-18px, notas al pie 12px

Haz

  • elige una fuente variable y usa sus ejes (peso, tamaño óptico, anchura) como sistema de diseño
  • fija una escala tipográfica estricta (12, 16, 24, 40, 72, 128, 240) y no te salgas nunca de ella
  • usa texto contorneado (-webkit-text-stroke 1px) y líneas solapadas para la jerarquía en lugar de imágenes

Evita

  • no cueles iconos ni formas decorativas; si no es un glifo, se sale del estilo
  • no uses más de dos familias
  • no hagas el texto del cuerpo difícil de leer para parecer ingenioso; solo el texto display se vuelve experimental

Conocido por: Pentagram (parcial), Klim Type Foundry, Dinamo, Bureau Borsche, escaparates de Readymag

Semilla CSS
:root {
  --bg: #ffffff;
   --fg: #111111;
   --accent: #ff3b00;
   --muted: #9a9a9a;
   --radius: 0;
   --scale: 1.6;
   --font: 'Fraunces',serif;
   --font-ui: 'Geist',sans-serif
}
Prompt

Construye el sitio como un diseño solo tipográfico. Sin imágenes, sin iconos, sin ilustraciones, sin formas decorativas. Fondo #ffffff, tinta #111111, apagado #9a9a9a, un acento #ff3b00 usado para una sola palabra por pantalla. Fuentes: Fraunces variable para display y cuerpo, Geist 400 a 13px para nav y notas al pie. Escala tipográfica fija en 12, 16, 24, 40, 72, 128 y 240px. Hero: un titular de 240px en Fraunces a peso 900 y tamaño óptico 144, line-height 0.85, tracking -0.04em, partido en tres líneas alineadas a la izquierda, con la segunda línea contorneada (-webkit-text-stroke 1px #111111, relleno transparente). Debajo, un párrafo de 24px a peso 300 con max-width 40ch. Los títulos de sección corren en vertical (writing-mode vertical-rl) en el margen izquierdo a 16px en mayúsculas 0.2em. Los filetes son 1px #111111. Movimiento: al cargar, el titular anima su eje de peso de 300 a 900 durante 1.2s; una marquesina de 16px en mayúsculas corre a 30s linear infinite. Sin radio, sin sombras.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio como un diseño solo tipográfico. Sin imágenes, sin iconos, sin ilustraciones, sin formas decorativas. Fondo #ffffff, tinta #111111, apagado #9a9a9a, un acento #ff3b00 usado para una sola palabra por pantalla. Fuentes: Fraunces variable para display y cuerpo, Geist 400 a 13px para nav y notas al pie. Escala tipográfica fija en 12, 16, 24, 40, 72, 128 y 240px. Hero: un titular de 240px en Fraunces a peso 900 y tamaño óptico 144, line-height 0.85, tracking -0.04em, partido en tres líneas alineadas a la izquierda, con la segunda línea contorneada (-webkit-text-stroke 1px #111111, relleno transparente). Debajo, un párrafo de 24px a peso 300 con max-width 40ch. Los títulos de sección corren en vertical (writing-mode vertical-rl) en el margen izquierdo a 16px en mayúsculas 0.2em. Los filetes son 1px #111111. Movimiento: al cargar, el titular anima su eje de peso de 300 a 900 durante 1.2s; una marquesina de 16px en mayúsculas corre a 30s linear infinite. Sin radio, sin sombras.

## Tokens
:root { --bg:#ffffff; --fg:#111111; --accent:#ff3b00; --muted:#9a9a9a; --radius:0; --scale:1.6; --font:'Fraunces',serif; --font-ui:'Geist',sans-serif }

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