Diseño Premium

Habilidad basada en catálogo para construir interfaces premium, editoriales y de alta gama. Se distingue de la habilidad general design: ésta es dogmática sobre tipografía, movimiento y moderación.

---

Filosofía de diseño — las cinco reglas

1. La tipografía es la protagonista

El tipo de exhibición (titulares) utiliza una serifa o una sans-serif de exhibición distintiva. El cuerpo utiliza una sans-serif refinada (Inter, Geist, Satoshi). Los titulares son grandes — territorio text-[clamp(2.5rem,8vw,10rem)]. El espaciado entre letras se ajusta en exhibición (tracking-tight o más ajustado). La altura de línea es generosa en exhibición (leading-[0.9] o leading-none), más ajustada en cuerpo (leading-[1.45]).

Combinaciones de fuentes que funcionan:

• Fraunces (exhibición) + Inter (cuerpo) — sensación de revista editorial
• Canela (exhibición) + Geist (cuerpo) — contemporáneo de lujo
• Migra (exhibición) + Manrope (cuerpo) — editorial afilado
• Reckless (exhibición) + Inter (cuerpo) — calidez editorial suave

La fuente se carga mediante <link> en index.html o CSS @import. Nunca uses fuentes del sistema para exhibición.

2. El movimiento es intencional, nunca decorativo

Sin resortes rebotantes. Sin desvanecimientos rápidos ease-out-200ms. El movimiento premium utiliza:

• Duraciones largas: 800–1800ms para revelaciones
• Aceleración refinada: cubic-bezier(0.16, 1, 0.3, 1) (easeOutExpo), cubic-bezier(0.22, 1, 0.36, 1) (easeOutQuint), o curvas personalizadas
• Impulsado por desplazamiento sobre carga de página: usa useScroll + useTransform de framer-motion para que el movimiento esté vinculado a la acción del usuario
• Un movimiento característico por sección: no apiles 5 animaciones en un hero. Elige la que amplifica el contenido.

Si una animación no sirve al contenido, elimínala.

3. Profundidad mediante capas, no sombras

La profundidad premium se crea apilando capas sutiles:

• Base: superposición de textura de ruido (CSS o SVG)
• Debajo del contenido: lavado de gradiente cálido/frío (muy sutil, 5-15% de opacidad)
• Capa intermedia: elemento decorativo (un carácter de exhibición grande, una fotografía desvanecida, una cuadrícula)
• Primer plano: contenido

Evita shadow-lg / shadow-2xl — se ven genéricos. Usa shadow-[0_1px_0_rgba(255,255,255,0.05)] o bordes con degradado en su lugar.

4. Moderación en el color, confianza en la composición

La paleta suele ser:

• Fondo: un blanco roto o negro roto cálido o frío (nunca #000 o #fff puros). Ejemplos: #0A0908 (negro cálido), #F7F5F1 (blanco roto cálido), #0F1117 (negro frío).
• Texto: alto contraste con el fondo, pero suavizado. Ejemplos: #F7F5F1 sobre #0A0908, #1A1A1A sobre #F7F5F1.
• Acento: UN color, usado con moderación. Ejemplos: #C8522C (terracota), #4C3F2F (exprés), #B8A978 (latón), #D9C2A4 (champán).

Sin degradados de arcoíris. Sin vibraciones de startup tecnológica teal/púrpura.

5. La composición rompe la cuadrícula intencionalmente

Las cuadrículas estándar de 3 columnas se sienten genéricas. Los diseños premium utilizan:

• Asimetría: 2 columnas donde una columna es 2 veces la otra, o cuadrículas de 7 columnas con contenido que abarca 3+4
• Espacio en blanco intencional: una sección con 60% de espacio en blanco, contenido en una esquina
• Contraste de escala: etiqueta pequeña junto a titular masivo
• Superposición: elementos que se salen de los límites de su contenedor

En caso de duda, elimina una columna o añade más espacio en blanco.

---

Para qué NO sirve esta habilidad

Si el usuario quiere:

• Página de aterrizaje estándar de SaaS B2B (burbujas de chat, maquetas de producto, cuadrículas de características) → usa design
• Panel de administración / UI densa en datos → usa design
• Página de aterrizaje de aplicación móvil con maqueta de teléfono → usa design
• Sitio corporativo con héroe de foto de stock → usa design

Esta habilidad es para: marcas de moda, productos de lujo, agencias de diseño, portafolios creativos, firmas de arquitectura, publicaciones editoriales, SaaS premium posicionado como vanguardista en diseño.

---

Flujo de trabajo — PASO 0: LEE EL CATÁLOGO

Antes de escribir cualquier página, LEE:

1. references/design-tokens.md — colores, escala tipográfica, espaciado
2. references/motion-principles.md — aceleración, tiempo, filosofía de movimiento
3. El archivo .md de la categoría correspondiente en references/catalog/ — variantes disponibles

Luego elige una variante y lee su .tsx en references/catalog/components/.

Asignación página → archivo de catálogo:

Tipo de página	Archivo(s) de catálogo
Aterrizaje / Inicio	hero.md + features.md + testimonials.md + cta-sections.md + footers.md
Precios	pricing.md
Acerca de / Estudio / Manifiesto	about.md
Contacto	contact.md
Portafolio / Trabajo	gallery.md
FAQ / Comentarios	faq.md
Navegación (todas las páginas)	navigation.md

Inventario actual del catálogo — 11 componentes, todos genuinamente originales:

• navigation.md — 1 variante (Masthead Editorial)
• hero.md — 1 variante (Hero de Máscara Cinética)
• features.md — 1 variante (Índice Editorial)
• stats.md — 1 variante (Números Editoriales)
• logos.md — 1 variante (Registro de Clientes Editorial)
• gallery.md — 1 variante (Índice de Trabajo Editorial)
• about.md — 1 variante (Historia Editorial / Manifiesto)
• testimonials.md — 1 variante (Cita Destacada Editorial)
• pricing.md — 1 variante (Asimétrico Editorial)
• faq.md — 1 variante (FAQ Editorial / Comentarios)
• cta-sections.md — 1 variante (CTA de Momento)
• contact.md — 1 variante (Formulario de Contacto Editorial)
• footers.md — 1 variante (Pie de Página de Manifiesto Editorial)

---

Lista de verificación no negociable

Antes de reportar como terminado:

1. Lectura de fundamentos: se leyeron design-tokens.md + motion-principles.md ANTES de escribir cualquier código.
2. Catálogo consultado: se eligió una variante específica del catálogo. Menciónala.
3. Fuentes cargadas: las fuentes de exhibición y cuerpo requeridas se cargan mediante <link> en index.html O @import de CSS. Las fuentes del sistema rompen la sensación premium.
4. Color de acento único: el diseño utiliza UN color de acento (más neutros). Sin paletas de arcoíris.
5. Tiempo de movimiento: al menos una sección utiliza movimiento impulsado por desplazamiento (no solo desvanecimientos al cargar página). La aceleración es easeOutExpo o similar — no easeOut predeterminado.
6. Ruptura de composición: al menos una sección utiliza diseño asimétrico, espacio en blanco intencional o contraste de escala. No todas las cuadrículas de columnas iguales.
7. Móvil: probado a 375px. El tipo de exhibición se reduce pero conserva el carácter (más grande que el H1 móvil estándar).