youssef-110/apple-web

Apple Web

Crea páginas de marketing de producto que se lean como apple.com: tranquilas, seguras, lideradas por la tipografía, con un movimiento que sirve al producto. Cada valor de este skill se ha medido directamente de una página de producto en vivo de apple.com (nov. 2026) y está en reference/measured-tokens.md.

Esto es un sistema de estilo, no un clon. Nunca copies el texto, nombres de producto, logotipos, fotografías, iconos ni archivos de fuente de Apple. Escribe contenido original para el producto del usuario.

Archivos

Ruta	Uso
library/apple-web.css	Tokens, clases tipográficas, diseño, componentes. Enlázalo primero.
library/apple-web.js	Revelaciones por scroll, estado de navegación pegajosa, scrub por scroll, galerías, contador ascendente. Sin dependencias.
demo/index.html	Página completa en funcionamiento con todos los componentes. Cópiala como punto de partida.
reference/measured-tokens.md	Mediciones en bruto: escala tipográfica, colores, radios, easing, breakpoints.
reference/page-anatomy.md	Cómo se secuencia una página de producto de Apple, sección por sección.
reference/anti-slop.md	Qué hace que una página se vea hecha por IA y la solución al estilo Apple para cada caso.

Flujo de trabajo

1. Copia library/ en el proyecto. Enlaza apple-web.css en <head> y apple-web.js con defer.
2. Empieza desde demo/index.html. Mantén el orden de las secciones de reference/page-anatomy.md.
3. Escribe primero el texto. Los titulares son de 2 a 5 palabras con punto final («Rápido. Muy rápido.»). El cuerpo del texto es gris con una frase resaltada en blanco.
4. Elige un tema por sección: theme-dark (negro), theme-light (#f5f5f7) o theme-white. Alterna en secuencias largas; nunca más de tres iguales seguidas.
5. Ejecuta la lista de verificación que aparece debajo antes de dar por terminado el trabajo.

Reglas que lo hacen parecer Apple

Tipografía

• Una sola familia. SF Pro del sistema en dispositivos Apple, Inter en otros (la pila en el CSS lo maneja). Sin segunda fuente decorativa, sin acentos serifa.
• Peso 600 para todos los titulares. 400 para el cuerpo. Nunca 700–900, nunca 300.
• El tracking cambia con el tamaño: negativo en el cuerpo (17px → -0.022em) y en hero (64px+ → -0.009em), ligeramente positivo entre 19–32px. Usa las clases de tipo; nunca establezcas un único letter-spacing para todo.
• Los titulares son cortos y centrados en las secciones de marketing; alineados a la izquierda en lockups junto a medios.
• El texto del cuerpo en secciones oscuras es #86868b; enfatiza una frase con <strong> (se renderiza #f5f5f7, mismo peso). Sin negrita en el cuerpo.

Color

• Página en escala de grises. Un acento: azul de enlace/acción #0071e3 (las secciones oscuras usan #2997ff para los enlaces). El color proviene de las imágenes del producto, no de la interfaz.
• Sin degradados en la interfaz ni en el texto, sin brillos, sin sombras coloreadas.

Diseño

• Ancho de contenido 980px para texto, 1260px para filas de medios, viewport máximo 1440px. Breakpoints 1068px / 734px.
• Relleno de sección: 120px superior / 120–176px inferior en escritorio. Generoso, nunca apretado.
• Mosaicos redondeados: radio 28px en mosaicos grandes, 18px en tarjetas pequeñas. Los botones son píldoras (radio 980px).

Movimiento

• Easing cubic-bezier(0.4, 0, 0.6, 1) para estados de interfaz; duraciones 100ms (hover), 240ms (opacidad), 320ms (color/navegación), hasta 1s para revelaciones por scroll.
• Las revelaciones son opacidad + un ascenso de 30–40px, una vez, cuando el elemento está aproximadamente al 15% dentro de la vista. Escalona los hermanos con 80–120ms de diferencia.
• Los momentos del producto usan scrub por scroll (progreso vinculado a la posición de desplazamiento), no reproducción automática.
• Hover en mosaicos: escala sutil 1.02 en el medio interior, nunca en la sombra de la tarjeta.
• prefers-reduced-motion: todo se convierte en un desvanecimiento instantáneo. La biblioteca lo maneja.

Navegación

• Navegación global de 44px, luego una navegación local pegajosa de 52px con el nombre del producto a la izquierda, enlaces + pequeña píldora azul «Comprar» a la derecha. Se vuelve translúcida (blur(20px) saturate(180%)) una vez que se fija.

Lista de verificación (sin relleno de IA)

• Sin emojis, sin cuadrículas de características con icono-en-círculo, sin «✨», sin degradados púrpura/verde azulado.
• Los titulares son afirmaciones, no preguntas ni «Desbloquea / Eleva / Sin fisuras / Revoluciona».
• Cada número en una estadística tiene una unidad y un marcador de nota al pie si es una afirmación.
• Máximo un estilo de CTA por sección (píldora azul o enlace de texto azul con ›), nunca ambos grandes.
• Los medios dominan; el texto nunca se sitúa en una tarjeta que flote sobre un degradado recargado.
• Tracking establecido con clase en cada elemento de texto; sin negrita predeterminada del navegador.
• Sección de notas al pie al final, en 12px #86868b.
• Comprobado en anchos de 1440, 1068, 734 y 375px, y con movimiento reducido activado.

Consulta reference/anti-slop.md para la lista completa con soluciones.