riky-python/apple-style-design

Conception Style Apple

Un langage de conception complet, rétro-conçu à partir du tag apple-style de Dribbble (64 visuels, Oct 2026) et recoupé avec les conventions HIG d'Apple. Il couvre les tokens, composants, matériaux, animations, mise en page, copy et recettes par plateforme.

Le rendu en une phrase : toile neutre calme, un accent confiant, le contenu comme héros, une profondeur douce au lieu de lignes, et un mouvement qui semble physique.

Comment utiliser cette compétence

1. Identifiez le type de sortie (page web, écran d'application, widget, panneau de plugin, icône, affiche, animation). Choisissez la recette correspondante dans references/layouts.md.
2. Choisissez un mode : Clair (par défaut pour marketing, productivité, santé), Sombre (média, outils pro, finance, jeux, VFX), ou Verre sur image (visionOS, sections héros, lecteurs). Voir « Sélecteur de mode » ci-dessous.
3. Chargez les tokens. Pour le web, copiez assets/apple-style.css dans le projet (ou intégrez-le en ligne) et construisez avec ses variables et classes .as-*. Pour les autres plateformes, lisez references/platforms.md (Qt/PySide QSS pour Nuke, frontend ComfyUI, Tailwind, SwiftUI, Figma, slides, Remotion).
4. Composez avec les composants de references/components.md. N'inventez pas de nouveaux styles pour un bouton ou une ligne de liste ; les recettes encodent déjà les micro-détails.
5. Ajoutez les matériaux et l'animation en dernier : references/materials.md (Liquid Glass, givré, dégradés en mesh, grain) et references/motion.md (ressorts, révélations, états pressés).
6. Exécutez la checklist QA en bas avant de montrer le résultat.

Besoin d'une preuve de motif ou d'une référence visuelle ? references/shot-catalog.md liste chaque visuel analysé et ce qu'il enseigne. assets/demo.html est une galerie fonctionnelle de chaque composant construit avec la feuille de style : ouvrez-la pour voir la barre de qualité cible.

Les 12 lois (pourquoi ça ressemble à « Apple »)

Ce sont les motifs qui sont apparus dans presque tous les visuels forts. Chacun a une raison ; gardez la raison en tête lorsqu'un cas n'est pas couvert.

1. Toile neutre, contenu coloré. Les fonds sont blanc cassé #F5F5F7 / gris groupé #F2F2F7 ou quasi-noir #000/#1C1C1E. La couleur est réservée aux données, à l'état et à une action principale. Raison : la toile s'efface pour que le contenu et l'accent portent tout le sens.
2. Un seul accent par écran. Bleu système #007AFF par défaut ; violet #5E5CE6, rose, orange ou vert lorsque le produit a sa propre identité. Un second accent uniquement pour les séries de données (par exemple barres alternées orange/rose). Raison : un seul accent rend l'action principale évidente sans aucune étiquette.
3. Profondeur par élévation, pas par bordures. Les cartes flottent sur des ombres douces, larges et de faible opacité ; les séparateurs sont des filets de 0,5 px en retrait du bord gauche. Les bordures lourdes de 1 px en gris évoquent un « formulaire web », pas Apple.
4. Coins continus partout. Rayons de type squircle : 10 (contrôles), 14 (champs), 20 (groupes de listes, cartes), 28 (widgets, feuilles), 38+ (appareil/fenêtre), 999 (gélules). Rayon imbriqué = rayon extérieur moins le padding.
5. La typographie fait la hiérarchie. SF Pro / Inter, crénage négatif serré aux tailles d'affichage, titres grands et gras, texte secondaire gris au lieu de tailles plus petites. Les chiffres sont des héros : 12.203 grand et gras avec une petite unité grise à côté sur la même ligne de base.
6. Le gris est une échelle, pas une couleur. Opacités des étiquettes : primaire 100%, secondaire 74% clair / 60% sombre (Apple utilise 60% en clair, ce qui ne fait que 3,44:1 sur blanc), tertiaire 30%, quaternaire 18%. N'inventez jamais un #999 aléatoire.
7. Gélules et cercles pour les actions. Les boutons primaires sont des gélules pleines ; les actions sur icône sont des cercles de 44 px ; les FAB sont des cercles d'accent remplis avec un glyphe style SF blanc et une ombre colorée douce.
8. Matériaux plutôt que remplissages plats. Les superpositions, barres d'outils, docks, barres latérales et lecteurs utilisent un matériau translucide flouté (Liquid Glass) pour que le contexte transparaisse.
9. Espacement généreux et rythmé. Grille de 4 px ; padding intérieur de 16/20 ; les sections respirent (96-160 px sur desktop). Si cela semble un peu vide, c'est probablement correct.
10. Le mouvement est physique. Ressorts, pas d'interpolations linéaires. Appui = échelle 0,97, relâchement = retour élastique. Les révélations fondu + montée de 8 à 24 px + défocalisation. Rien ne rebondit plus d'une fois.
11. La copie est courte et confiante. Casse de phrase, points sur les accroches (« Sound. Refined. », « Coming Soon. »), titres bicolores avec une phrase grise ou d'accent, minuscules autorisées pour les titres de widgets (« steps walked »).
12. Le savoir-faire dans les micro-détails. Chevrons en gris tertiaire, chiffres tabulaires pour les données, indices de touches (esc, return), points de statut, filets de 0,5 px, reflets intérieurs supérieurs sur le verre, lueur colorée sous les graphiques. Ces détails font la différence entre « propre » et « Apple ».

Sélecteur de mode

Le produit ressemble à	Mode	Toile	Surface	Idée d'accent
Santé, productivité, commerce, docs, marketing SaaS	Clair	#F5F5F7 / #F2F2F7	#FFFFFF	Bleu #007AFF
Lecteur média, musique, tickers financiers, outils pro/VFX, jeux	Sombre	#000000	#1C1C1E / #2C2C2E	Rose #FF375F, vert #30D158, violet #5E5CE6
Héros sur photo/vidéo, visionOS, lecteurs, interrupteurs	Verre	image ou dégradé en mesh	Liquid Glass	Blanc primaire, accent secondaire
Marque/affiche/lancement	Dégradé	dégradé en mesh + grain	verre ou aucun	Couleur du produit

Tokens principaux (résumé)

Tableaux complets avec valeurs sombres et justification : references/tokens.md. Implémenté dans assets/apple-style.css.

• Pile de polices : -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif. Chargez Inter (400/500/600/700) depuis Google Fonts comme police de secours multiplateforme. Mono : "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace.
• Échelle typographique (application) : Large Titre 34/41 700 (-0,022em) · Titre1 28/34 700 · Titre2 22/28 700 · Titre3 20/25 600 · Titre 17/22 600 · Corps 17/22 400 · Appel 16/21 · Sous-titre 15/20 · Note de bas de page 13/18 · Légende 12/16 · Légende2 11/13.
• Échelle typographique (marketing) : Héros 64-96px 700, hauteur de ligne 1,04, crénage -0,035em · Section 40-56px 600 -0,028em · Lead 21-24px 400 couleur secondaire · Sourcil 14-17px 600 en accent.
• Espacement : 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160.
• Rayon : 6 (tags), 10 (boutons/contrôles), 14 (champs), 20 (cartes/listes), 28 (widgets/feuilles), 38 (fenêtres/appareils), 999 (gélules).
• Ombre (clair) : 0 1px 2px rgb(0 0 0/.04), 0 4px 12px rgb(0 0 0/.05), 0 16px 40px rgb(0 0 0/.08). Flottant : ajoutez 0 32px 80px rgb(0 0 0/.12).
• Assouplissement : standard cubic-bezier(.25,.1,.25,1), sortie accentuée cubic-bezier(.32,.72,0,1), courbe linear() ressort dans motion.md. Durées 150 (appui), 250 (état), 400 (entrée), 600-900 (révélations héros).

Anti-patrons (observés dans le scraping, à ne pas copier)

Le tag contenait également des visuels hors style. Ils enseignent ce qu'il faut éviter :

• Brillant skeuomorphe de 2012 : champs embossés, boutons « Connexion » biseautés, textures lin (capture d'écran de l'app store OTAir).
• Mascottes de dessin animé, contours d'autocollants et contours épais (Taco, Buzz Addiction).
• Pages « tech brutaliste » en monospace tout en majuscules (MEMBRAN) : un style valide, mais pas Apple.
• Boutons néon multicolores avec dégradé sur chaque élément, et plus d'un dégradé par carte.
• Ombres portées noires dures décalées d'un côté (les cadres d'appareils « Astro » utilisent une ombre décalée brutaliste : faux pour le style Apple).
• Bordures par défaut de 1 px #ddd sur chaque carte, texte #999, bleu Bootstrap #0d6efd.
• Animations rebondissantes avec dépassement, chargeurs tournants sur tout, parallaxe qui lutte contre le défilement.
• Utilisation du logo ou des marques d'Apple dans le produit de l'utilisateur. Utilisez le style, jamais la marque.

Contrat de sortie

Lorsque cette compétence produit un design :

• Livrez du code fonctionnel, pas une description. Web : HTML sémantique + le CSS des tokens (en ligne ou lié) + JS minimal pour l'animation. Autres cibles : la recette de la plateforme.
• Supportez toujours le clair et le sombre, sauf si le sélecteur de mode indique sombre uniquement, et respectez prefers-reduced-motion.
• L'accessibilité fait partie du rendu : contraste texte 4,5:1 (label-2 est ajusté pour passer sur blanc, toile et gris groupé ; label-3 est uniquement pour les espaces réservés, chevrons et états désactivés, jamais pour du texte que l'on doit lire), cibles tactiles de 44x44, anneau de focus visible (contour de 3px accent-text, décalage de 2px : un contour, jamais une box-shadow, pour que les ombres des composants ne puissent pas le masquer), étiquettes sur les boutons d'icônes.
• Les accents bruts du système échouent au contraste en tant que remplissages de boutons et en tant que petit texte (blanc sur #007AFF = 4,02:1, sur #0A84FF = 3,65:1). Remplissez les boutons avec accent-fill, coloriez le texte avec accent-text, conservez l'accent brut pour les lueurs, les interrupteurs, les icônes et les grandes formes. Teintes sûres par teinte : references/tokens.md 3a.
• Indiquez le mode, l'accent et les 2-3 détails caractéristiques utilisés en une courte ligne après la livraison, afin que l'utilisateur puisse orienter.

Checklist QA (à exécuter avant de montrer)

• La toile est neutre ; une seule couleur d'accent pilote les actions.
• L'accent passe le contraste : les remplissages de boutons utilisent accent-fill, le texte d'accent utilise accent-text (tokens.md 3a) ; une teinte personnalisée a eu ses ratios calculés.
• Pas de bordures dures sur les cartes ; les séparateurs sont des filets, en retrait et plus clairs à 1x DPR.
• Les groupes de radios avec des étiquettes longues ou des indices sont des listes à choix unique avec une coche, pas des contrôles segmentés à l'étroit.
• Les contrôles de bureau compacts passent à 44 px sous pointer: coarse.
• Les rayons suivent l'échelle et les rayons imbriqués sont concentriques.
• Le texte d'affichage a un crénage négatif ; le texte secondaire utilise l'échelle de gris, pas la taille.
• Les chiffres/titres héros sont grands ; les unités/étiquettes petites et grises sur la même ligne de base.
• L'action principale est une gélule (ou un FAB d'accent) ; les boutons d'icône sont des cercles de 44 px.
• Les superpositions/barres d'outils utilisent un flou de matériau avec un reflet intérieur, pas un gris plat.
• Les ombres sont douces et superposées ; rien ne semble collé.
• Les états d'appui, survol, focus existent ; l'animation utilise des ressorts / ease-out ; mouvement réduit respecté.
• Le mode sombre utilise des gris superposés (#1C1C1E / #2C2C2E / #3A3A3C), pas des surfaces noires pures sur noir.
• La copie est courte, en casse de phrase, confiante ; pas de lorem ipsum dans le travail livré.
• La largeur mobile fonctionne avec des marges de 16-20 px et aucun défilement horizontal.