Design for AI

Estilo Escandinavo: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para escandinavo. También llamado diseño escandinavo, minimalismo nórdico, web hygge, limpio nórdico, moderno danés. herencia del mobiliario de los años 50; uso web de 2014 en adelante (mobiliario, moda, fintech de los países nórdicos).

Rasgos

  • layouts claros y aireados con blancos cálidos y tonos de madera pálida
  • simplicidad funcional: retícula clara, materiales honestos, fotografía de producto a la luz del día
  • acentos naturales apagados: salvia, azul empolvado, ocre, arcilla, carbón
  • sans geométrica o humanista en peso medio, tamaños cómodos
  • radio suave (6-10px), bordes finísimos, casi sin sombra
  • el producto primero: fotos grandes con márgenes generosos, pies cortos
  • movimiento tranquilo, nada decorativo

Paleta

#faf8f5 blanco cálido, #2b2b2b carbón, #a8b5a0 salvia, #c9a27e madera, #6f8fa6 azul empolvado, #e8e4de línea

Tipografía

Manrope, DM Sans o Karla; títulos 500 a 32-56px con -0.01em, cuerpo 400 a 16-17px con line-height 1.6; de vez en cuando una serif ligera (Cormorant) para una sola palabra

Haz

  • fotografía o elige imágenes con luz de día suave y materiales naturales; las imágenes llevan el estilo
  • limita el color a neutros cálidos más un acento apagado que también aparezca en las fotos
  • usa mucho espacio horizontal: layouts de producto a 2 columnas con medianiles de 48-64px

Evita

  • no uses grises azulados fríos ni blanco puro; la calidez es lo que lo diferencia del minimalismo genérico
  • no añadas ilustración decorativa; solo fotos y tipografía
  • no redondees de más; 6-10px, no píldoras

Conocido por: HAY, Muuto, Klarna (2019, parcial), Normann Copenhagen, cercano a Aesop

Semilla CSS
:root {
  --bg: #faf8f5;
   --fg: #2b2b2b;
   --muted: #7a7570;
   --accent: #a8b5a0;
   --accent2: #c9a27e;
   --line: #e8e4de;
   --radius: 8px;
   --font: 'Manrope',sans-serif
}
Prompt

Construye el sitio en estilo escandinavo. Fondo #faf8f5, texto #2b2b2b, apagado #7a7570, filetes #e8e4de, acentos salvia #a8b5a0 y madera #c9a27e, un azul empolvado #6f8fa6 para los enlaces. Fuente Manrope: títulos 500 a 52/34/24px con -0.01em, cuerpo 400 a 17px, line-height 1.6, pies a 13px en apagado. Layout: retícula de 12 columnas con medianiles de 56px en escritorio, bloques de producto como pares a dos columnas (imagen a la izquierda, texto a la derecha, después alternados), 128px entre secciones. Imágenes: fotografía a la luz del día de materiales naturales, border-radius 8px, sin borde, sin sombra, a todo el ancho de la columna. Las tarjetas, cuando hagan falta, son transparentes con un borde 1px #e8e4de y radio 8px. Botón primario: relleno #2b2b2b, texto #faf8f5, radio 8px, 46px de alto; el secundario es texto con una flecha. La nav es fina: logo, cuatro enlaces, 64px de alto, filete inferior de 1px. Sin iconos salvo una flecha de 20px y el carrito. Movimiento: 250ms ease en hover, fundido de opacidad de imagen al hacer scroll durante 500ms.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo escandinavo. Fondo #faf8f5, texto #2b2b2b, apagado #7a7570, filetes #e8e4de, acentos salvia #a8b5a0 y madera #c9a27e, un azul empolvado #6f8fa6 para los enlaces. Fuente Manrope: títulos 500 a 52/34/24px con -0.01em, cuerpo 400 a 17px, line-height 1.6, pies a 13px en apagado. Layout: retícula de 12 columnas con medianiles de 56px en escritorio, bloques de producto como pares a dos columnas (imagen a la izquierda, texto a la derecha, después alternados), 128px entre secciones. Imágenes: fotografía a la luz del día de materiales naturales, border-radius 8px, sin borde, sin sombra, a todo el ancho de la columna. Las tarjetas, cuando hagan falta, son transparentes con un borde 1px #e8e4de y radio 8px. Botón primario: relleno #2b2b2b, texto #faf8f5, radio 8px, 46px de alto; el secundario es texto con una flecha. La nav es fina: logo, cuatro enlaces, 64px de alto, filete inferior de 1px. Sin iconos salvo una flecha de 20px y el carrito. Movimiento: 250ms ease en hover, fundido de opacidad de imagen al hacer scroll durante 500ms.

## Tokens
:root { --bg:#faf8f5; --fg:#2b2b2b; --muted:#7a7570; --accent:#a8b5a0; --accent2:#c9a27e; --line:#e8e4de; --radius:8px; --font:'Manrope',sans-serif }

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