Design for AI

Estilo Art Deco: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de art deco. Também chamado de Art Deco web, estilo Gatsby, luxo dos anos 1920, luxo geométrico, dourado deco. anos 1920-1930; revival na web para hotelaria, destilados, eventos, e a onda do filme Gatsby em 2013.

Traços

  • simetria, raios de sol, leques, chevrons, formas escalonadas (zigurates)
  • linhas metálicas em ouro ou latão sobre preto profundo, azul-marinho ou esmeralda
  • caixa alta geométrica condensada e alta com letter-spacing extremo
  • molduras ornamentais e colchetes de canto ao redor do conteúdo
  • bordas finas de linha dupla, padrões de linhas radiantes
  • composições luxuosas, formais, centralizadas
  • movimento contido: fades lentos, um brilho cintilante no dourado

Paleta

#0d0d0d preto, #c9a227 dourado, #f3e9d2 texto champanhe, #14343b verde-azulado profundo, #6e1423 bordô

Tipografia

Poiret One, Limelight, Josefin Sans (300, caixa alta, tracking 0.2-0.3em) para display; Cormorant Garamond ou Cinzel para títulos; Josefin Sans ou Lato para o corpo a 16px

Faça

  • construa um padrão de raios de sol ou leque em SVG e reuse-o como ornamento de cabeçalho de seção
  • use linhas douradas duplas de 1px com gap de 4px em molduras e divisores
  • centralize tudo; Deco é simétrico por natureza

Evite

  • não use dourado brilhante (#ffd700); use latão fosco #c9a227 para evitar cara de cassino
  • não adicione cantos arredondados; só degraus e pontas
  • não use mais de um metálico; ouro ou prata, não ambos

Conhecido por: Imagens do Chrysler Building e do Empire State, O Grande Gatsby (2013), hotéis Ritz, campanhas da Hendrick's e Bombay Sapphire

Semente CSS
:root {
  --bg: #0d0d0d;
   --fg: #f3e9d2;
   --accent: #c9a227;
   --accent2: #14343b;
   --radius: 0;
   --frame: 1px solid #c9a227;
   --font: 'Josefin Sans',sans-serif;
   --font-display: 'Poiret One',sans-serif
}
Prompt

Construa o site em estilo Art Deco. Fundo #0d0d0d, texto #f3e9d2, dourado #c9a227, superfície secundária #14343b. Tudo centralizado e simétrico. Fontes: Poiret One para o título do hero a 72px em caixa alta com letter-spacing 0.25em; Cinzel 600 para títulos de seção a 32px em caixa alta 0.15em; Josefin Sans 300 a 16px para o corpo, line-height 1.7. Molduras: linhas douradas duplas (1px #c9a227, gap 4px, 1px #c9a227) ao redor do hero e dos cards, com pequenos colchetes dourados nos cantos. Divisores de seção: um SVG inline de raios de sol com linhas douradas radiantes centralizado acima de cada título. Botões: transparentes com borda dourada de 1px e texto dourado em caixa alta, o hover preenche com dourado e texto #0d0d0d em 300ms. Use um padrão SVG de chevron ou zigurate escalonado como faixa de fundo sutil (opacity 0.08). Sem border-radius, sem sombras, sem dourado brilhante. Movimento: um fade lento de 1.2s no load e um cintilar de 3s (varredura de gradiente) nos filetes dourados.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo Art Deco. Fundo #0d0d0d, texto #f3e9d2, dourado #c9a227, superfície secundária #14343b. Tudo centralizado e simétrico. Fontes: Poiret One para o título do hero a 72px em caixa alta com letter-spacing 0.25em; Cinzel 600 para títulos de seção a 32px em caixa alta 0.15em; Josefin Sans 300 a 16px para o corpo, line-height 1.7. Molduras: linhas douradas duplas (1px #c9a227, gap 4px, 1px #c9a227) ao redor do hero e dos cards, com pequenos colchetes dourados nos cantos. Divisores de seção: um SVG inline de raios de sol com linhas douradas radiantes centralizado acima de cada título. Botões: transparentes com borda dourada de 1px e texto dourado em caixa alta, o hover preenche com dourado e texto #0d0d0d em 300ms. Use um padrão SVG de chevron ou zigurate escalonado como faixa de fundo sutil (opacity 0.08). Sem border-radius, sem sombras, sem dourado brilhante. Movimento: um fade lento de 1.2s no load e um cintilar de 3s (varredura de gradiente) nos filetes dourados.

## Tokens
:root { --bg:#0d0d0d; --fg:#f3e9d2; --accent:#c9a227; --accent2:#14343b; --radius:0; --frame:1px solid #c9a227; --font:'Josefin Sans',sans-serif; --font-display:'Poiret One',sans-serif }

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