Design for AI

Estilo Escandinavo: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de escandinavo. Também chamado de design escandinavo, minimalismo nórdico, web hygge, nórdico limpo, moderno dinamarquês. herança dos móveis dos anos 1950; uso na web de 2014 em diante (móveis, moda, fintech dos países nórdicos).

Traços

  • layouts leves e arejados com brancos quentes e tons de madeira clara
  • simplicidade funcional: grade clara, materiais honestos, fotografia de produto à luz do dia
  • acentos naturais atenuados: sálvia, azul empoeirado, ocre, argila, carvão
  • sans geométrica ou humanista em peso médio, tamanhos confortáveis
  • raio suave (6-10px), bordas finas, quase nenhuma sombra
  • produto primeiro: fotos grandes com margens generosas, legendas curtas
  • movimento calmo, nada decorativo

Paleta

#faf8f5 branco quente, #2b2b2b carvão, #a8b5a0 sálvia, #c9a27e madeira, #6f8fa6 azul empoeirado, #e8e4de linha

Tipografia

Manrope, DM Sans ou Karla; títulos 500 a 32-56px com -0.01em, corpo 400 a 16-17px line-height 1.6; ocasionalmente uma serifa leve (Cormorant) para uma única palavra

Faça

  • fotografe ou selecione fotografia em luz do dia suave com materiais naturais; as imagens carregam o estilo
  • mantenha a cor em neutros quentes mais um acento atenuado que também apareça nas fotos
  • use muito espaço horizontal: layouts de produto em 2 colunas com gutters de 48-64px

Evite

  • não use azuis-acinzentados frios nem branco puro; o calor é a diferença para o minimalismo genérico
  • não adicione ilustração decorativa; só fotos e tipografia
  • não arredonde demais; 6-10px, não pílulas

Conhecido por: HAY, Muuto, Klarna (2019 parcial), Normann Copenhagen, adjacente à Aesop

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

Construa o site em estilo escandinavo. Fundo #faf8f5, texto #2b2b2b, atenuado #7a7570, filetes #e8e4de, acentos sálvia #a8b5a0 e madeira #c9a27e, um azul empoeirado #6f8fa6 para links. Fonte Manrope: títulos 500 a 52/34/24px com -0.01em, corpo 400 a 17px, line-height 1.6, legendas 13px em atenuado. Layout: grade de 12 colunas com gutters de 56px no desktop, blocos de produto como pares de duas colunas (imagem à esquerda, texto à direita, depois alternado), 128px entre seções. Imagens: fotografia à luz do dia de materiais naturais, border-radius 8px, sem borda, sem sombra, largura total da coluna. Cards, quando necessários, são transparentes com borda 1px #e8e4de e raio 8px. Botão primário: preenchimento #2b2b2b, texto #faf8f5, raio 8px, 46px de altura; o secundário é texto com uma seta. A nav é fina: logo, quatro links, 64px de altura, filete inferior de 1px. Sem ícones exceto uma seta de 20px e o carrinho. Movimento: 250ms ease no hover, fade de opacidade das imagens no scroll ao longo de 500ms.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo escandinavo. Fundo #faf8f5, texto #2b2b2b, atenuado #7a7570, filetes #e8e4de, acentos sálvia #a8b5a0 e madeira #c9a27e, um azul empoeirado #6f8fa6 para links. Fonte Manrope: títulos 500 a 52/34/24px com -0.01em, corpo 400 a 17px, line-height 1.6, legendas 13px em atenuado. Layout: grade de 12 colunas com gutters de 56px no desktop, blocos de produto como pares de duas colunas (imagem à esquerda, texto à direita, depois alternado), 128px entre seções. Imagens: fotografia à luz do dia de materiais naturais, border-radius 8px, sem borda, sem sombra, largura total da coluna. Cards, quando necessários, são transparentes com borda 1px #e8e4de e raio 8px. Botão primário: preenchimento #2b2b2b, texto #faf8f5, raio 8px, 46px de altura; o secundário é texto com uma seta. A nav é fina: logo, quatro links, 64px de altura, filete inferior de 1px. Sem ícones exceto uma seta de 20px e o carrinho. Movimento: 250ms ease no hover, fade de opacidade das imagens no scroll ao longo de 500ms.

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

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.