Design for AI

Estilo Minimal cálido en papel crema: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para minimal cálido en papel crema. También llamado minimalismo cálido, minimal crema, UI beige, minimal acogedor, diseño blanco papel, web de lujo silencioso. 2021 en adelante (Arc, herramientas cercanas a Notion, SaaS indie, sitios de newsletters).

Rasgos

  • base blanco roto cálida (crema, hueso, lino) en lugar de blanco puro
  • texto carbón o negro cálido, nunca un #000 frío
  • un acento terroso: terracota, oliva, ocre o azul empolvado
  • títulos en serif con cuerpo en sans humanista, o una única sans cálida
  • radio suave (10-14px), sombras casi inexistentes o bordes de 1px en gris cálido
  • espacio en blanco generoso, jerarquía tranquila, etiquetas píldora pequeñas
  • movimiento suave; nada rebota

Paleta

#f7f3ea crema, #1f1d1a negro cálido, #6b665e apagado, #e4ddd0 línea, #c2603e acento terracota, #ede7da superficie sutil

Tipografía

Fraunces, Newsreader o Instrument Serif para títulos (500-600 a 36-56px), DM Sans, Geist o Manrope para el cuerpo a 16-17px; o bien solo la parecida a Söhne "Instrument Sans"

Haz

  • elige la calidez una vez: cada gris debería llevar un toque de amarillo o rojo para que nada se vea frío
  • usa bordes de 1px en #e4ddd0 en lugar de sombras; una sombra suave como máximo para un elemento flotante
  • mantén el acento por debajo del 5% de la página (enlaces, un botón, una etiqueta)

Evita

  • no metas un acento azul frío en la paleta cálida
  • no añadas el modo oscuro como una ocurrencia tardía; si lo necesitas, construye un oscuro cálido (#1c1a17), no uno frío
  • no lo abarrotes; el estilo muere sin espacio

Conocido por: Sitio del navegador Arc, Cosmos, Read.cv, temas de Bearblog, Are.na (parcial)

Semilla CSS
:root {
  --bg: #f7f3ea;
   --surface: #ede7da;
   --fg: #1f1d1a;
   --muted: #6b665e;
   --line: #e4ddd0;
   --accent: #c2603e;
   --radius: 12px;
   --font: 'DM Sans',sans-serif;
   --font-display: 'Fraunces',serif
}
Prompt

Construye el sitio en estilo minimal cálido de papel crema. Fondo #f7f3ea, superficie secundaria #ede7da, texto #1f1d1a, apagado #6b665e, bordes #e4ddd0, un solo acento #c2603e. Fuentes: Fraunces 500 para títulos a 52/34/24px con tracking -0.015em y line-height 1.1, DM Sans 400 a 17px para el cuerpo con line-height 1.65, 13px 500 para etiquetas. Layout: max-width 720px para el texto y 1080px para las retículas, padding de página 24px, 112px entre secciones. Las tarjetas son superficie #ede7da con borde 1px #e4ddd0, border-radius 12px, padding 24px, sin sombra. Botón primario: fondo #1f1d1a, texto #f7f3ea, radio 10px, 44px de alto; el secundario es un enlace de texto en #c2603e con subrayado de 1px desplazado 4px. Etiquetas: píldora, #ede7da, 12px en mayúsculas 0.06em. Las imágenes reciben radio 12px y un borde de 1px. Iconos de 20px, trazo de 1.5px, #6b665e. Movimiento: 200ms ease en el color del hover y un fundido de 400ms solo al cargar la página. Sin blanco puro ni negro puro en ningún sitio.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo minimal cálido de papel crema. Fondo #f7f3ea, superficie secundaria #ede7da, texto #1f1d1a, apagado #6b665e, bordes #e4ddd0, un solo acento #c2603e. Fuentes: Fraunces 500 para títulos a 52/34/24px con tracking -0.015em y line-height 1.1, DM Sans 400 a 17px para el cuerpo con line-height 1.65, 13px 500 para etiquetas. Layout: max-width 720px para el texto y 1080px para las retículas, padding de página 24px, 112px entre secciones. Las tarjetas son superficie #ede7da con borde 1px #e4ddd0, border-radius 12px, padding 24px, sin sombra. Botón primario: fondo #1f1d1a, texto #f7f3ea, radio 10px, 44px de alto; el secundario es un enlace de texto en #c2603e con subrayado de 1px desplazado 4px. Etiquetas: píldora, #ede7da, 12px en mayúsculas 0.06em. Las imágenes reciben radio 12px y un borde de 1px. Iconos de 20px, trazo de 1.5px, #6b665e. Movimiento: 200ms ease en el color del hover y un fundido de 400ms solo al cargar la página. Sin blanco puro ni negro puro en ningún sitio.

## Tokens
:root { --bg:#f7f3ea; --surface:#ede7da; --fg:#1f1d1a; --muted:#6b665e; --line:#e4ddd0; --accent:#c2603e; --radius:12px; --font:'DM Sans',sans-serif; --font-display:'Fraunces',serif }

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