# Serif de lujo / moda

También llamado: diseño web de lujo, editorial de moda, sitio de marca de alta gama, web de alta costura, lujo silencioso  
Época: herencia de la moda impresa; web de 2012 en adelante (Net-a-Porter, Celine, Aesop, The Row)  
Página: https://designforai.dev/es/style/luxury-fashion-serif

## Rasgos

- serif de alto contraste o fina a tamaños grandes con letter-spacing amplio en mayúsculas
- espacio en blanco enorme, texto de cuerpo diminuto, muy pocas palabras por pantalla
- fotografía y vídeo a sangre, a menudo apagados o en blanco y negro
- casi sin UI: filetes finísimos, enlaces de texto, ningún botón que parezca un botón
- paleta de negro, marfil y un tono apagado (camel, sangre de toro, salvia)
- composiciones centradas para campañas, retículas estrictas para listados de producto
- movimiento lento y contenido: fundidos de 1s, parallax sutil, el hover revela una segunda imagen

Paleta: #f6f4f0 marfil, #0c0c0c negro, #8b7355 camel, #5a1f22 sangre de toro, #9a9a9a apagado, #e2dfd9 filete

Tipografía: Cormorant Garamond, Playfair Display, Bodoni Moda o Italiana para display (300-400 a 48-120px, tracking 0.1-0.25em en mayúsculas); Jost, Karla o tipo Helvetica a 12-14px para todo lo demás

## Haz

- compón el display fino (300-400) y enorme; el peso viene del tamaño, no de la negrita
- mantén el cuerpo y el texto de UI a 12-14px con tracking 0.05-0.1em en mayúsculas; se lee como contención
- dale a la fotografía todo el viewport; el texto se asienta en una esquina o en el centro exacto

## Evita

- no uses botones de color; los enlaces son texto subrayado o cajas con contorno finísimo
- no añadas sombras, radio ni iconos más allá de un más, un menos y una flecha
- no abarrotes; un mensaje por pantalla

Conocido por: Celine, The Row, Aesop, Bottega Veneta, editorial de Net-a-Porter

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

Construye el sitio en estilo de moda de lujo. Fondo #f6f4f0, texto #0c0c0c, apagado #9a9a9a, filetes #e2dfd9, un acento #8b7355 usado solo para una etiqueta de rebajas. Fuentes: Cormorant Garamond 300 para display a 104px en escritorio / 52px en móvil en mayúsculas con letter-spacing 0.18em y line-height 1.0; Karla 400 a 13px con tracking 0.08em en mayúsculas para nav, etiquetas, botones y pies; cuerpo 14px Karla, line-height 1.7, max-width 480px. Hero: fotografía a viewport completo o vídeo apagado con el título centrado y un único enlace de texto subrayado debajo. Retícula de producto: 3 columnas en escritorio con medianiles de 40px, imágenes 4:5, sin radio, sin borde; el hover hace un fundido cruzado a una segunda imagen durante 700ms. Botones: caja con filete 1px #0c0c0c, transparente, 12px en mayúsculas, 48px de alto, el hover rellena en negro con texto marfil durante 400ms. Secciones separadas por filetes finísimos y 160px de espacio. Movimiento: fundidos de 1s al hacer scroll, parallax del 5% en el hero, nada más.