Design for AI

Estilo Tinta electrónica / calma de bajo contraste: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para tinta electrónica / calma de bajo contraste. También llamado UI e-ink, diseño de tecnología calmada, UI de bajo contraste, estilo de pantalla de papel, modo lectura, estilo Kindle. 2007 (Kindle), tendencia de diseño de 2020 en adelante (tecnología calmada, Readwise, apps Reader, ordenador Daylight).

Rasgos

  • grises sobre gris cálido, como una pantalla de papel electrónico: sin blanco puro, sin negro puro
  • contraste moderado (5-7:1), nunca duro; sin color saturado salvo un acento apagado
  • tipografía de lectura: cuerpo en serif a 18-20px, medida larga, interlineado generoso
  • sin sombras, sin gradientes, bordes mínimos en un gris ligeramente más oscuro
  • los controles son formas simples con contorno; los estados se muestran invirtiendo el relleno
  • animación deliberadamente lenta o inexistente, imitando el refresco del e-ink (cambios instantáneos o 0ms)
  • dithering o semitono sutil en las imágenes para imitar la pantalla

Paleta

#dedcd6 gris papel, #2f2f2d tinta, #7a7975 apagado, #b9b7b1 línea, #c9c7c0 superficie, #4a5d4f un acento verde apagado

Tipografía

Literata, la parecida a Bookerly "Source Serif 4", Newsreader o Charter (libre) para el cuerpo a 19px con line-height 1.7; Karla o Public Sans a 14px para la UI; títulos 500 a 28-36px

Haz

  • limita la paleta a 6 grises más un acento apagado y comprueba que cada par se sitúe entre 5:1 y 8:1 de contraste
  • haz las transiciones de 0ms (cambio instantáneo) o un único fundido de 200ms; sin curvas de easing, sin movimiento
  • convierte las imágenes a escala de grises y aplica un dither o semitono de 2px para que pertenezcan a la superficie

Evita

  • no uses blanco ni negro; el look de pantalla depende del papel gris medio
  • no añadas efectos hover más allá de un subrayado; el e-ink no tiene hover
  • no uses color para los estados; usa inversión (relleno oscuro, texto claro)

Conocido por: Kindle, Kobo, reMarkable, Readwise Reader (parcial), marketing del Daylight DC-1

Semilla CSS
:root {
  --bg: #dedcd6;
   --fg: #2f2f2d;
   --muted: #7a7975;
   --line: #b9b7b1;
   --surface: #c9c7c0;
   --accent: #4a5d4f;
   --radius: 2px;
   --font: 'Literata',serif;
   --font-ui: 'Public Sans',sans-serif
}
Prompt

Construye el sitio en estilo de tinta electrónica de bajo contraste y calma. Fondo #dedcd6, texto #2f2f2d, apagado #7a7975, líneas #b9b7b1, superficie elevada #c9c7c0, un acento apagado #4a5d4f para los enlaces. Sin blanco, sin negro, sin color saturado, sin gradientes, sin sombras. Fuentes: Literata 400 a 19px, line-height 1.7, max-width 68ch para el cuerpo; Literata 500 a 34/26px para títulos; Public Sans 400 a 14px para nav y controles. Layout: una sola columna centrada, padding 32px, 72px entre secciones, filetes 1px #b9b7b1. Botones: contorno 1px #2f2f2d, transparente, radio 2px, 40px de alto; el estado active o seleccionado se invierte a relleno #2f2f2d con texto #dedcd6; sin efecto hover salvo un subrayado de 1px en los enlaces. Inputs: el mismo contorno, sin resplandor de foco, el foco se muestra con un outline de 2px. Imágenes en escala de grises con un aspecto de dither ordenado (filtro CSS grayscale(1) contrast(1.1) más una capa de patrón de semitono de 2px al 30%). Transiciones: cambios de 0ms; la única animación es un fundido de 200ms al cargar. Iconos con trazo de 1px, 20px.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo de tinta electrónica de bajo contraste y calma. Fondo #dedcd6, texto #2f2f2d, apagado #7a7975, líneas #b9b7b1, superficie elevada #c9c7c0, un acento apagado #4a5d4f para los enlaces. Sin blanco, sin negro, sin color saturado, sin gradientes, sin sombras. Fuentes: Literata 400 a 19px, line-height 1.7, max-width 68ch para el cuerpo; Literata 500 a 34/26px para títulos; Public Sans 400 a 14px para nav y controles. Layout: una sola columna centrada, padding 32px, 72px entre secciones, filetes 1px #b9b7b1. Botones: contorno 1px #2f2f2d, transparente, radio 2px, 40px de alto; el estado active o seleccionado se invierte a relleno #2f2f2d con texto #dedcd6; sin efecto hover salvo un subrayado de 1px en los enlaces. Inputs: el mismo contorno, sin resplandor de foco, el foco se muestra con un outline de 2px. Imágenes en escala de grises con un aspecto de dither ordenado (filtro CSS grayscale(1) contrast(1.1) más una capa de patrón de semitono de 2px al 30%). Transiciones: cambios de 0ms; la única animación es un fundido de 200ms al cargar. Iconos con trazo de 1px, 20px.

## Tokens
:root { --bg:#dedcd6; --fg:#2f2f2d; --muted:#7a7975; --line:#b9b7b1; --surface:#c9c7c0; --accent:#4a5d4f; --radius:2px; --font:'Literata',serif; --font-ui:'Public Sans',sans-serif }

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