youssef-110/apple-web

Apple Web

Créez des pages de marketing produit qui ressemblent à apple.com : sobres, confiantes, centrées sur la typographie, avec une animation qui sert le produit. Chaque valeur de cette compétence a été mesurée sur une page produit live d'apple.com (novembre 2026) et se trouve dans reference/measured-tokens.md.

Ceci est un système de style, pas un clone. Ne copiez jamais les textes, noms de produits, logos, photographies ou fichiers de polices d'Apple. Rédigez un contenu original pour le produit de l'utilisateur.

Fichiers

Chemin	Utilisation
library/apple-web.css	Tokens, classes de type, mise en page, composants. Liez-le en premier.
library/apple-web.js	Révélations au scroll, état de la navigation collante, scrub au scroll, galeries, compteurs. Aucune dépendance.
demo/index.html	Page complète fonctionnelle utilisant tous les composants. Copiez-la comme point de départ.
reference/measured-tokens.md	Mesures brutes : échelle typographique, couleurs, rayons, easing, points de rupture.
reference/page-anatomy.md	Comment une page produit Apple est séquencée, section par section.
reference/anti-slop.md	Ce qui rend une page d'aspect IA, et la correction de style Apple pour chaque problème.

Workflow

1. Copiez library/ dans le projet. Liez apple-web.css dans <head> et apple-web.js avec defer.
2. Partez de demo/index.html. Gardez l'ordre des sections de reference/page-anatomy.md.
3. Rédigez le texte d'abord. Les titres font 2 à 5 mots avec un point final (« Rapide. Vraiment rapide. »). Le corps de texte est gris avec une phrase surlignée en blanc.
4. Choisissez un thème par section : theme-dark (noir) ou theme-light (#f5f5f7) ou theme-white. Alternez dans les longues séquences, jamais plus de trois du même thème à la suite.
5. Exécutez la checklist ci-dessous avant de considérer le travail terminé.

Règles qui font le style Apple

Typographie

• Une seule famille. Police système SF Pro sur les appareils Apple, Inter ailleurs (la pile dans le CSS gère cela). Pas de seconde police d'affichage, pas d'accentuation sérif.
• Poids 600 pour chaque titre. 400 pour le corps. Jamais 700–900, jamais 300.
• Le tracking varie avec la taille : négatif pour le corps (17px → -0.022em) et le héros (64px+ → -0.009em), légèrement positif entre 19 et 32px. Utilisez les classes de type ; ne définissez jamais un seul letter-spacing partout.
• Les titres sont courts et centrés sur les sections marketing ; alignés à gauche dans les blocs juxtaposés à des médias.
• Le corps de texte sur les sections sombres est #86868b ; mettez en avant une phrase avec <strong> (rendu #f5f5f7, même poids). Pas de corps en gras.

Couleur

• Page en niveaux de gris. Un seul accent : bleu de lien/action #0071e3 (les sections sombres utilisent #2997ff pour les liens). La couleur provient de l'imagerie produit, pas de l'interface.
• Pas de dégradés sur l'interface ou le texte, pas de lueurs, pas d'ombres colorées.

Mise en page

• Largeur de contenu 980px pour le texte, 1260px pour les rangées de médias, 1440px de zone d'affichage maximale. Points de rupture 1068px / 734px.
• Padding de section 120px en haut / 120–176px en bas sur desktop. Généreux, jamais à l'étroit.
• Tuiles arrondies : rayon 28px pour les grandes tuiles, 18px pour les petites cartes. Les boutons sont des pilules (rayon 980px).

Animation

• Easing cubic-bezier(0.4, 0, 0.6, 1) pour l'état de l'interface ; durées 100ms (hover), 240ms (opacité), 320ms (couleur/nav), jusqu'à 1s pour les révélations au scroll.
• Les révélations sont une opacité + un déplacement vertical de 30–40px, une fois, lorsque l'élément est à environ 15% dans la vue. Décalez les éléments frères de 80 à 120ms.
• Les moments produit utilisent le scrub au scroll (progression liée à la position de défilement), pas la lecture automatique.
• Hover sur les tuiles : échelle subtile 1.02 sur le média à l'intérieur, jamais l'ombre de la carte.
• prefers-reduced-motion : tout devient un fondu instantané. La bibliothèque gère cela.

Navigation

• Navigation globale de 44px, puis une navigation locale collante de 52px avec le nom du produit à gauche, les liens + une petite pilule bleue « Acheter » à droite. Elle devient translucide (blur(20px) saturate(180%)) une fois qu'elle colle.

Checklist (pas de slop IA)

• Pas d'émoji, pas de grilles de fonctionnalités avec icône dans un cercle, pas de « ✨ », pas de dégradés violet/cyan.
• Les titres sont des affirmations, pas des questions ou des « Libérez / Élevez / Sans couture / Révolutionnez ».
• Chaque nombre dans une statistique a une unité et un marqueur de note de bas de page s'il s'agit d'une affirmation.
• Maximum un style d'appel à l'action par section (pilule bleue ou lien texte bleu avec ›), jamais les deux en grand.
• Les médias dominent ; le texte ne se trouve jamais dans une carte qui flotte au-dessus d'un dégradé chargé.
• Le tracking est défini par classe sur chaque élément de texte ; pas de gras par défaut du navigateur.
• Section de notes de bas de page en bas en 12px #86868b.
• Vérifié aux largeurs 1440, 1068, 734 et 375px, et avec réduction de mouvement activée.

Voir reference/anti-slop.md pour la liste complète avec les corrections.