apple-web-design

Conception web Apple

Un langage de conception pour les applications web qui doivent ressembler à une application iPhone native ou à une page produit Apple.com. Il a été construit, testé sur de vrais iPhones et affiné écran par écran dans une application de planification de repas livrée, dont le single index.html était l'implémentation de référence). Tout ici est CSS simple et JS vanilla, sans framework ni bibliothèque, donc il s'intègre dans n'importe quel projet.

L'objectif est un produit calme, de bout en bout : page gris clair, tuiles blanches, un accent bleu, une typographie grande et confiante, et chaque tap répond par un mouvement sur place. Rien ne saute, rien ne réaffiche tout l'écran, le texte tapé et la position de défilement ne sont jamais perdus.

Comment utiliser cette compétence

1. Nouvelle UI : collez d'abord references/tokens.css dans la page. Ensuite, construisez les écrans à partir des recettes de composants dans references/components.md. Ajoutez assets/morph.js et la couche de mouvement de references/motion.md si l'UI se réaffiche à partir de l'état.
2. UI existante : conservez la structure et les données du projet. Remplacez les couleurs, la typographie et les formes par les tokens, puis convertissez les composants un par un. Ne réécrivez pas la logique pour la restyler.
3. Verre : lisez references/liquid-glass.md uniquement lorsque l'utilisateur souhaite du Liquid Glass / iOS 26 glass (barre d'onglets, boutons flottants, toasts, boutons de feuille).
4. Écrans de démonstration sombres (un écran de lancement, un "mode" comme une fête ou un écran de concentration) : references/keynote.md.
5. Avant de déclarer terminé : exécutez references/checklist.md — captures d'écran en mode clair et sombre à 390×844.
6. Si l'application sera vendue (App Store ou commercialement) : lisez d'abord references/commercial.md. Certains des détails les plus Apple-like sont ceux auxquels Apple s'oppose.

Lisez uniquement les références dont vous avez besoin ; chacune est autonome.

Les règles de base (pourquoi elles sont importantes)

Couleur : un seul accent, utilisé avec parcimonie. Page #f5f5f7, tuiles #fff, encre #1d1d1f, secondaire #6e6e73, action bleue #0071e3 (sombre : #000 / #1d1d1f / #f5f5f7 / #86868b / #2997ff). Le bleu signifie "vous pouvez agir ici", donc il va sur les boutons principaux, les liens, l'onglet sélectionné et la progression — nulle part décoratif. Les couleurs de statut (--ok vert, --warn ambre, --bad rouge) ne portent jamais que du sens. Des teintes supplémentaires (cyan eau, orange étapes) sont autorisées lorsqu'elles étiquettent un type de données de manière cohérente partout où il apparaît. Un dégradé de marque, s'il y en a un, appartient à un seul écran spécial.

Le mode sombre suit le téléphone. Chaque couleur est une variable CSS redéfinie sous prefers-color-scheme: dark. Le sombre est pages noires réelles avec des tuiles #1d1d1f, et les ombres sont désactivées (--shadow:none) car elles ressemblent à de la saleté sur du noir.

La typographie fait la hiérarchie, pas les boîtes. Pile de polices système (-apple-system, BlinkMacSystemFont, system-ui, sans-serif, qui donne SF sur les appareils Apple), corps 17 px, espacement négatif serré des lettres sur tout ce qui est grand :

• Titres de page 40–48 px en gras, −0.035em, avec un point final final : "Recettes." — la voix des titres Apple.com.
• En-têtes de section bicolores, 24 px en gras : la première phrase en encre, le reste en gris : "Courses. Il manque 15 produits.". Les deux parties se terminent par un point final.
• Les grands nombres sont fins (poids 200–300) et énormes (38–72 px) avec font-variant-numeric: tabular-nums pour que les chiffres ne tremblent pas lorsqu'ils changent. Les nombres de statistiques plus petits (lignes de spécifications) sont en 600.
• Légendes 13–14 px en gris. Ne descendez pas en dessous de 12 px.

Formes : tuiles sans bordure, pilules, espace généreux. Rayons 8 / 14 / 22 / 28 px ; les tuiles n'ont pas de bordures et une ombre très douce (0 4px 18px rgba(0,0,0,.06)). Les lignes à l'intérieur d'une tuile sont séparées par un trait fin qui commence au texte, pas au bord (séparateur encastré iOS). Les boutons sont des pilules (border-radius: 999px) : primaire bleu uni avec texte blanc, secondaire remplissage gris avec texte bleu, destructif remplissage gris avec texte rouge. Les photos sont bord à bord à l'intérieur de leur tuile.

Mise en page : une colonne, d'abord le téléphone. max-width: 720px centré, gouttières latérales de 16 px, encarts de zone de sécurité sur chaque bord fixe (env(safe-area-inset-*)), marge intérieure basse de 110 px pour que le contenu dégage la barre d'onglets. Cibles tactiles ≥ 44 px.

Mouvement : tout bouge sur place. Réaffichez avec un morph DOM au lieu de innerHTML pour que les nœuds survivent ; les nouvelles lignes apparaissent, les lignes supprimées partent en fantôme qui s'estompe, les lignes déplacées glissent (FLIP), les nombres changés roulent, les pilules glissent, les feuilles apparaissent en ressort, les boutons s'enfoncent (échelle .96, courbe de ressort). Deux courbes couvrent presque tout : --spring: cubic-bezier(.3,1.4,.5,1) (pressions, petits pops) et --ease: cubic-bezier(.2,.8,.2,1) (fondu, barres) ; la propre courbe d'iOS cubic-bezier(.32,.72,0,1) (sans dépassement) pour les feuilles et les grands mouvements. Tout se désactive sous prefers-reduced-motion: reduce — vérifiez-le, ne présumez pas.

Copie : courte, humaine, voix Apple. Titres avec points finaux, verbes sur les boutons ("J'ai cuisiné", "Ajouter"), nombres formatés pour la locale (toLocaleString(lang) ; le lituanien utilise des espaces dans les milliers et une virgule décimale), pas de points d'exclamation, pas d'emoji dans le chrome (les emoji sont acceptables comme icônes de contenu, par ex. 🍸 pour une entrée de boisson). Le texte d'erreur dit quoi faire ensuite.

Décisions déjà prises (ne pas rouvrir)

Ces décisions sont issues de retours réels lors de la construction de l'application de référence :

• L'action bleue primaire reste bleu uni même dans les UI en verre — les boutons bleus en verre teinté ont été essayés et rejetés.
• Liquid Glass est activé par défaut mais désactivable par l'utilisateur, avec un curseur de force ; les cartes de contenu restent solides pour que le texte reste lisible. Le verre est réservé au chrome flottant uniquement.
• Les photos de recettes/produits sont l'imagerie ; pas d'illustrations ni de décorations de stock.
• Le comportement iOS 26 l'emporte en cas de doute : la barre d'onglets flotte comme une capsule et se replie en un petit bouton lors du défilement vers le bas ; le verre gonfle (agrandissement) sous le doigt au lieu de s'enfoncer.
• Chaque onglet se souvient de sa propre position de défilement ; taper sur l'onglet actif fait défiler vers le haut.
• Un toast peut être glissé vers le haut pour le rejeter et a une action Atšaukti / Annuler pour chaque tap destructeur ou modifiant les données.

Fichiers

• references/tokens.css — le bloc de tokens complet (clair + sombre, rayons, ombres, courbes). Collez-le tel quel.
• references/components.md — HTML + CSS copier-coller pour chaque composant, avec des notes sur le comportement.
• references/motion.md — l'assistant d'animation, les hooks de morph, FLIP, rotation de chiffres, changement d'onglet, feuilles, glissement et maintien des gestes, tick haptique, mouvement réduit.
• references/liquid-glass.md — le matériau en verre iOS 26, la lentille de réfraction Chromium, la barre d'onglets rétractable.
• references/keynote.md — le style "keynote" noir pour un écran spécial.
• references/checklist.md — liste de contrôle de révision et un script de capture d'écran.
• references/commercial.md — ce qu'il faut modifier avant de vendre une application dans ce style.
• assets/morph.js — le morph DOM de 70 lignes (lignes avec clé, sûr pour le focus et la saisie, se replie sur innerHTML).