Design for AI

Estilo Luxo / serifa de moda: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de luxo / serifa de moda. Também chamado de web design de luxo, editorial de moda, site de marca high-end, web de alta-costura, luxo discreto. herança da moda impressa; web de 2012 em diante (Net-a-Porter, Celine, Aesop, The Row).

Traços

  • serifa de alto contraste ou leve em tamanhos grandes com letter-spacing largo em caixa alta
  • espaço em branco enorme, texto de corpo minúsculo, pouquíssimas palavras por tela
  • fotografia e vídeo full-bleed, muitas vezes atenuados ou em preto e branco
  • quase nenhuma UI: filetes finos, links de texto, nenhum botão que pareça botão
  • paleta de preto, marfim e um tom atenuado (camelo, sangue de boi, sálvia)
  • composições centralizadas para campanhas, grades rígidas para listagens de produto
  • movimento lento e contido: fades de 1s, parallax sutil, o hover revela uma segunda imagem

Paleta

#f6f4f0 marfim, #0c0c0c preto, #8b7355 camelo, #5a1f22 sangue de boi, #9a9a9a atenuado, #e2dfd9 filete

Tipografia

Cormorant Garamond, Playfair Display, Bodoni Moda ou Italiana para display (300-400 a 48-120px, tracking 0.1-0.25em em caixa alta); Jost, Karla ou à la Helvetica a 12-14px para todo o resto

Faça

  • componha o display leve (300-400) e enorme; o peso vem do tamanho, não do bold
  • mantenha o texto de corpo e de UI a 12-14px com tracking 0.05-0.1em em caixa alta; lê como contenção
  • dê à fotografia a viewport inteira; o texto fica num canto ou no centro exato

Evite

  • não use botões coloridos; os links são texto sublinhado ou caixas de filete fino
  • não adicione sombras, raio nem ícones além de mais, menos e seta
  • não aperte; uma mensagem por tela

Conhecido por: Celine, The Row, Aesop, Bottega Veneta, editorial da Net-a-Porter

Semente CSS
:root {
  --bg: #f6f4f0;
   --fg: #0c0c0c;
   --muted: #9a9a9a;
   --accent: #8b7355;
   --line: #e2dfd9;
   --radius: 0;
   --tracking: 0.18em;
   --font: 'Karla',sans-serif;
   --font-display: 'Cormorant Garamond',serif
}
Prompt

Construa o site em estilo moda de luxo. Fundo #f6f4f0, texto #0c0c0c, atenuado #9a9a9a, filetes #e2dfd9, um acento #8b7355 usado só num label de promoção. Fontes: Cormorant Garamond 300 para display a 104px no desktop / 52px no mobile em caixa alta com letter-spacing 0.18em e line-height 1.0; Karla 400 a 13px com tracking 0.08em em caixa alta para nav, labels, botões e legendas; corpo 14px Karla, line-height 1.7, max-width 480px. Hero: fotografia de viewport inteira ou vídeo atenuado com o título centralizado e um único link de texto sublinhado abaixo. Grade de produtos: 3 colunas no desktop com gutters de 40px, imagens 4:5, sem raio, sem borda; o hover faz crossfade para uma segunda imagem ao longo de 700ms. Botões: caixa de filete 1px #0c0c0c, transparente, caixa alta 12px, 48px de altura, o hover preenche com preto e texto marfim ao longo de 400ms. Seções separadas por filetes e 160px de espaço. Movimento: fades de 1s no scroll, parallax de 5% no hero, nada mais.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo moda de luxo. Fundo #f6f4f0, texto #0c0c0c, atenuado #9a9a9a, filetes #e2dfd9, um acento #8b7355 usado só num label de promoção. Fontes: Cormorant Garamond 300 para display a 104px no desktop / 52px no mobile em caixa alta com letter-spacing 0.18em e line-height 1.0; Karla 400 a 13px com tracking 0.08em em caixa alta para nav, labels, botões e legendas; corpo 14px Karla, line-height 1.7, max-width 480px. Hero: fotografia de viewport inteira ou vídeo atenuado com o título centralizado e um único link de texto sublinhado abaixo. Grade de produtos: 3 colunas no desktop com gutters de 40px, imagens 4:5, sem raio, sem borda; o hover faz crossfade para uma segunda imagem ao longo de 700ms. Botões: caixa de filete 1px #0c0c0c, transparente, caixa alta 12px, 48px de altura, o hover preenche com preto e texto marfim ao longo de 400ms. Seções separadas por filetes e 160px de espaço. Movimento: fades de 1s no scroll, parallax de 5% no hero, nada mais.

## Tokens
:root { --bg:#f6f4f0; --fg:#0c0c0c; --muted:#9a9a9a; --accent:#8b7355; --line:#e2dfd9; --radius:0; --tracking:0.18em; --font:'Karla',sans-serif; --font-display:'Cormorant Garamond',serif }

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