frangkli/design-rules

Règles de conception

Appliquez-les partout où le brief, le DESIGN.md du projet et la compétence de conception utilisée (généralement impeccable) laissent le choix libre. Là où l'un d'eux s'exprime, il prévaut. Lisez-les avant la première édition UI et avant de rédiger une critique ou un audit.

Contenu (Copy)

• Le libellé d'un contrôle nomme son résultat, et le même mot se poursuit dans le flux : un bouton "Publier" produit une confirmation "Publié".
• Le texte d'erreur indique ce qui a échoué et comment le réparer, dans la voix du produit, sans s'excuser.
• Un seul libellé par intention dans la navigation, le hero et le pied de page (choisissez "Contacter les ventes" ou "Discuter avec nous", pas les deux). Un libellé de bouton principal tient sur une ligne en trois mots ou moins.
• Les titres et les boutons suivent la casse déjà utilisée par le projet ; un nouveau projet utilise la casse de phrase (première lettre majuscule, reste en minuscules sauf noms propres).
• Un seul registre par page : le battage publicitaire et le texte produit concis ne partagent pas un écran.
• Guillemets courbes et apostrophes courbes, une vraie ellipse (…), pas de tirets longs (utilisez un point, une virgule ou deux-points), au plus un point médian par ligne.
• Les témoignages font trois lignes ou moins et portent le nom et le rôle de la personne.
• Avant de livrer, lisez chaque chaîne visible sur la page rendue une fois, y compris le texte alternatif, les états vides et le pied de page, et supprimez le happy talk : les phrases qui disent seulement à quel point quelque chose est bien.

Indices à laisser de côté lorsque l'axe est libre

• Palette : un fond crème chaud près de #F4F1EA avec un accent terre cuite près de #D97757 (les couleurs de l'interface de Claude lui-même) ; l'ensemble premium-consommateur #F5F1EA, #EFEAE0, #B08947, #B6553A, #9A2436, #1A1714 ; un quasi-noir teinté (#0B0B0B, #111) remplaçant le noir.
• Typographie : un mot d'un titre mis en valeur par l'italique, le poids ou la couleur ; des étiquettes en capitales espacées ; "→" ajouté au texte des liens et boutons ; des étiquettes construites comme "MOT — fragment".
• Chrome : badges de version dans le hero (V0.6, BETA) ou un pied de page de version ; indicateurs de défilement ; bandeaux de localisation, d'horloge ou de météo ; points ou pastilles de statut décoratifs sur des images ; crédits photo décoratifs ; banderoles de slogan comme "MARQUE. MOUVEMENT. SPATIAL." ; "Silencieusement adopté par".
• Données : listes de plus de cinq éléments dessinés sous forme de lignes encadrées en haut et en bas ; barres de progression remplies utilisées pour comparer des valeurs.

Pages de persuasion (Landing pages)

• Hero : titre sur deux lignes ou moins à la largeur du bureau, texte de support sur 20 mots ou moins, l'action principale visible sans défilement, quatre éléments de texte ou moins, remplissage supérieur de 6rem ou moins, et rien sous les boutons d'action (pas de tagline, bandeau de confiance ou teaser de prix).
• Placez le titre dans un conteneur large avec une taille fluide (environ clamp(3rem, 5vw, 5.5rem)) afin qu'il tienne sur deux à trois lignes à toutes les largeurs.
• La navigation tient sur une ligne, 64–72px de haut, jamais au-dessus de 80px.
• Au plus un marquee par page et au plus deux alternances image/texte à la suite.
• Une grille bento de N éléments a exactement N cellules et aucune cellule vide ; avec un remplissage dense, vérifiez que les étendues s'emboîtent à chaque point de rupture.
• Nommez la chose unique qu'un visiteur doit retenir après le premier regard, et faites en sorte que les choix ultérieurs la servent.

Composants et détails

• Coins arrondis imbriqués : rayon intérieur = rayon extérieur − l'espace entre eux.
• Dans une rangée de cartes, épinglez l'action de chaque carte à son bord inférieur pour que les boutons soient alignés ; les listes de fonctionnalités de prix commencent à la même hauteur dans chaque colonne.
• Les polices d'affichage en italique avec des jambages ascendants/descendants obtiennent un line-height de 1,1 ou plus, plus un peu de remplissage inférieur, pour que rien ne soit coupé.
• Les paragraphes de corps utilisent text-wrap: pretty pour qu'aucun paragraphe ne se termine par un mot isolé.
• Les liens visités ont un aspect différent là où les gens reviennent au contenu (docs, listes d'articles). Aucun espace réservé href="#" n'est livré.
• Un rail de barre latérale pliable fait 56–72px de large, conserve ses étiquettes dans le DOM, a des cibles de 44×44px, définit aria-expanded sur le bouton de bascule et inert sur le contenu masqué.
• Les sections pleine hauteur utilisent dvh ou svh, jamais 100vh.
• Pas de défilement horizontal à aucune largeur. Coupez le débordement des éléments animés ou décalés avec overflow-x: clip ; hidden interrompt le positionnement collant.
• Les effets liés au défilement s'exécutent sur des animations CSS pilotées par le défilement ou un IntersectionObserver, pas sur l'état du framework écrit par événement de défilement ou par image.
• La balise meta viewport autorise le zoom (pas de user-scalable=no, pas de maximum-scale=1). Les transitions nomment leurs propriétés au lieu de transition: all.
• Un site public livre un lien d'accès direct au contenu, une page 404 personnalisée, un favicon, un titre, une méta-description et des balises Open Graph, ainsi que des liens légaux dans le pied de page.
• Gardez la spécificité CSS plate, et vérifiez que les règles de section (.section) et les règles de composant (.cta) ne s'annulent pas mutuellement le remplissage ou la marge.

Mode sombre

• color-scheme: dark sur la racine, afin que les contrôles de formulaire et les barres de défilement suivent le thème.
• Le texte du corps est blanc cassé (environ #E0E0E0, teinté à partir de la palette), pas blanc pur.
• Les accents perdent 10 à 20 % de saturation par rapport à leurs valeurs de thème clair.

Critique et audit

Signalez ces éléments comme des constatations dans la structure de critique ou d'audit de la compétence de conception ; ils n'ajoutent pas de nouvelles sections de rapport.

• Test de tronc (par page) : un visiteur pour la première fois pourrait-il dire de quel site il s'agit, sur quelle page il se trouve, quelles sont les sections principales, quelles sont ses options ici, où il se trouve dans la structure et comment chercher ? Trois réponses claires ou moins est une constatation de gravité élevée.
• Bienveillance : commencez à 70. Soustrayez 15 pour des prix ou coordonnées masqués, ou une visite guidée forcée ; 10 pour des formats de saisie punitifs (rejeter les espaces dans un numéro de carte) ou demander des informations dont la tâche n'a pas besoin ; 5 par choix ambigu. Signalez le score avec chaque déduction.
• Premier regard : nommez les trois premières choses sur lesquelles l'œil se pose, et si ce sont les trois qui comptent.
• Happy talk : indiquez le nombre de mots de la page et la part qui est du happy talk.

Refontes (Redesigns)

Avant de remplacer l'apparence d'un site en ligne, enregistrez une référence SEO (titres, méta-descriptions, titres, URL indexées). Conservez les slugs d'URL, les étiquettes de navigation, les noms et l'ordre des champs de formulaire, le logo, le texte juridique et de consentement, et les identifiants d'analyse, sauf si l'utilisateur approuve un changement.

Variantes, maquettes (comps) et polices

• Deux variantes sont trop proches si leurs titres pourraient être échangés sans que personne ne le remarque ; éloignez l'une d'elles.
• Pour lire les détails d'une maquette générée, régénérez cette section plus grande au lieu de recadrer le tableau.
• La série de captures d'écran groupée couvre les largeurs 375, 768 et 1440px.
• Corrigez une page construite avec des modifications ciblées sur les parties qui échouent ; régénérez des fichiers entiers uniquement pour une reconstruction.
• Confirmez chaque police sur sa fiche officielle (Google Fonts, Fontshare ou la fonderie) et prenez son URL de là ; marquez une police non confirmée comme en attente plutôt que de deviner un nom ou une URL.