# 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  
Era: herança da moda impressa; web de 2012 em diante (Net-a-Porter, Celine, Aesop, The Row)  
Página: https://designforai.dev/pt/style/luxury-fashion-serif

## 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

```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.