01 — Méthode & craft design

Comment Songe conçoit un site, indépendamment du client. Les règles de marque (couleurs, typo, gestes) viennent toujours de la charte/réf du projet — ici, c’est la méthode, pas l’esthétique.

1. Principe fondateur : global vs projet

Erreur classique = ériger un pattern d’un projet en règle universelle. On sépare strictement :

⚠️ Les règles de design viennent de la réf DU projet, jamais d’un autre. Le stack technique se partage (Next + GSAP + Tailwind ; Lenis optionnel) ; le design non. Conteneur, grille, échelle typo, radius, gestes → mesurés sur le template/la charte du projet. (Leçon : un conteneur + radius importés du DS d’un autre client = « trop étalé, tu t’inspires trop de l’autre projet ».)

À chaque nouveau projet : consigner les patterns spécifiques extraits de la charte/des réfs dans un doc de marque dédié au projet.

2. Test plateforme — 3 niveaux

La liberté d’invention est inversement proportionnelle à la force de la plateforme de marque existante. Évaluation automatique dès qu’on voit la charte/brief/réfs.

⭐ Plateforme moyenne ou faible → demander au client des références d’interface + des inspirations, puis maquetter 3 versions d’UI différentes pour qu’il choisisse (cf. §7). On ne devine pas une DA quand le client peut pointer ce qu’il aime.

3. Les 13 anti-patterns (à NE JAMAIS reproduire)

À lire avant toute proposition, à vérifier avant chaque livraison.

1. Interlettrage positif (letter-spacing > 0). Par défaut négatif sur les titres (−0.02 à −0.04em). Jamais de tracking large sauf justification rare.
2. Eyebrow sans matière graphique. Pas de — texte posé au-dessus du H1. Un eyebrow n’existe que s’il a une vraie matière (pill, badge, scribble, soulignage SVG) — sinon le supprimer. Jamais de numéro romain dans l’eyebrow. (Et le triplet eyebrow + titre + sous-titre est indissociable : jamais l’eyebrow seul dans une colonne, le titre dans l’autre.)
3. Système de boutons incohérent. Un seul système sur tout le site : le bouton du header = même classe que le CTA du hero. Pas de bouton ad hoc.
4. Choisir une DA sur 3 mots. Un feeling de site ne se résume pas à 3 mots-clés. Toujours sourcer dans la banque de réfs (§9) et extraire 5-7 patterns visuels précis.
5. Palette utilisée abusivement. Sur charte multi-duos : un seul duo par section/contexte. Jamais toute la palette à l’écran.
6. Sous-utilisation des photos. Si le dossier source contient de vraies photos, elles entrent en V1 dès le hero. Pas de placeholder couleur.
7. Hiérarchie typo trouée. ≥ 5 niveaux fluides entre H1 monumental et micro, ratio ≥ 1.25. Pas de saut H1 → micro.
8. Em-dash — / -- en copy. Bannir. Virgules, points, deux-points, parenthèses.
9. Name-dropping esthétique. Citer Cereal/Apartamento sans les avoir disséqués au pixel = interdit. Citer une réf = l’avoir extraite (5+ patterns concrets).
10. Cards uniformes en grille. Hero + 3 cards identiques + bouton = SaaS générique. Viser asymétrie ou rythme intentionnel.
11. Glassmorphism / gradient mesh / blur par défaut. Rare et purposeful seulement.
12. Titres en noir par défaut. Sur charte à couleur brand forte, H1/H2 portent la couleur de marque. Le noir n’est pas le défaut.
13. Recevoir une URL de réf et ne pas la disséquer. Une URL partagée = dissection automatique dans le même tour, à deux niveaux :
    • Tokens : variables CSS (--color-*, --font-*, type scale, radius), font-family, easings/durées, libs JS.
    • Éléments à cloner : markup HTML littéral des boutons/badges/navs/hero/footers, textes exacts des CTAs, CSS des classes structurantes (hover/focus/active), SVG publics. Sur plateforme forte : cloner littéralement, pas adapter. Et ne jamais dire « fidèle » sans l’avoir mesuré.

4. Les 7 patterns offensifs (réflexes positifs par défaut)

1. Vraies photos dès la V1 — ≥ 8 photos dispatchées (hero, services, manifesto, témoignages…). Zéro placeholder.
2. Grille cohérente fixée tôt — 12 col / bento / autre, ancrée et respectée partout. Pas de freestyle entre sections.
3. Échelle typo ≥ 5 niveaux fluides — H1 → H2 → H3 → lead → body → micro, ratio ≥ 1.25.
4. Système de boutons unique — variantes primaire/secondaire/taille dérivées du même token. Hover intentionnel.
5. Fonds et textes non purs — jamais #000/#fff, teintés vers la hue brand (chroma 0.005-0.01).
6. « Presque finalisé » dès la V1 — pas de TODO visible, pas de Lorem, pas de bloc gris. Un élément pas prêt = retiré, pas mocké.
7. Hover signé sur les CTAs — pas un simple changement de teinte : une vraie animation (swap, sweep, scale, outline qui apparaît).

5. Grille & pièges techniques

• Vrai grid system, pas des max-widths improvisées section par section. Mesurer la grille de la réf (conteneur, nb colonnes, gutter, marges), coder UN système, y caler toutes les sections en spans. Une largeur différente par section = ce qui se sent comme « pas un grid system ».
• Échelle typo modulaire : ne pas surdimensionner (« trop gros ») ni laisser trop petit. Bumper le body/sous-titres sans gonfler les titres déjà grands. La .section-title (H2) est une classe séparée du H1 hero.
• Hero dans la ligne de flottaison : visible sans scroller (≤ 100svh − header). Médias en height:100%/vh ; sur mobile, masquer le grand média plutôt que l’écraser.
• Sections répétées = UN composant partagé réutilisé tel quel, jamais réinterprété localement. Avant de builder, vérifier si la section existe déjà.

Tailwind v4 (pièges qui cassent silencieusement) :

• @theme ≠ layout. N’y mettre que couleurs + fonts. Les vars de sizing (--container, gutter…) vont en :root plain — sinon le namespace --container-* réécrit les utilitaires de largeur (w-full cassé).
• CSS non-layered écrase Tailwind. Une classe avec margin:0/max-width/font-style non-layered bat les utilitaires (mx-auto, not-italic…) car ceux-ci sont en @layer utilities. Piège vécu : .hero-title{margin:0} tue mx-auto → bloc collé à gauche alors que text-center centre le texte dans le bloc (effet trompeur). Fix : !mx-auto, ou garder les classes de base minimales et piloter alignement/largeur par utilitaire. ⚠️ max-w-[Nch] se calcule sur la font-size de l’élément → le mettre sur un wrapper.
• Frontière server/client Next 16 : onClick/fonction en prop/opacity wrapper sur tooltip = pièges qui passent le build mais cassent au runtime.

6. Stack animation (ordre de priorité)

prefers-reduced-motion respecté partout, sans exception (gsap.matchMedia).

7. Mockups visuels (PAS d’ASCII)

Shaper = mini-pages HTML/CSS standalone, screenshotées. Une seule charte/fonte/palette par mockup pour comparer les structures, pas les détails. Même un brief riche ne dispense pas de shaper.

⭐ Sur plateforme moyenne/faible (ou dès qu’il faut laisser le client choisir) : produire 3 versions d’UI différentes à partir des réfs/inspirations qu’il a fournies (cf. §2), et lui laisser le choix.

8. Workflow en spirale (non linéaire)

Pas de phases successives 0→7 : chaque dimension progresse en parallèle. (La toute première étape, hors spirale, = l’arborescence validée client — cf. 03-stack-montage §5.)

• Design : mockups → fondation → polish → check anti-patterns.
• Copy : structure → headlines → body → CTAs (alignés sur les réfs si plateforme forte).
• SEO : slugs au shape → métas avec la copy → JSON-LD au build → Lighthouse en continu. (détail → 05-seo-croissance)
• QA : audit anti-patterns à chaque livraison + a11y/CWV/301 progressifs.

Cadence :

• Règle des 3 itérations : 3 tours sur le même élément sans converger → stop, changer d’angle.
• Pivot au 2e signal : 2 retours correctifs sur la même catégorie (couleur, typo, espacements) → refondation, pas patch.
• Auto-révision : une info nouvelle (CTA exact d’une réf, formulation validée) → révision immédiate de tous les livrables impactés.

9. Banque de réfs Songe

Screenshots + tokens dans Documents/Claude/References Songe/. À consulter avant toute proposition de DA. Banque vivante — s’enrichit à chaque projet (en ajouter dès qu’on croise une bonne réf). Une réf qu’on utilise = on la dissèque au browser MCP avant (les non caractérisées ci-dessous attendent leur première dissection).

Le détail outillage (kit de base, skills, MCP) et la stack vivent dans 03-stack-montage. Les patterns spécifiques à un client ne vont jamais ici.