Aller au contenu
Démarrer un projet
Menu

Introduction

Le système tiré de l’accueil : ses principes, ses décisions, et où trouver chaque règle.

Six principes

Le système ne décrit pas une intention : il relève ce que l’accueil fait, et tranche ce que la page laissait ouvert. Chaque page montre des composants réels, lus dans le code du site.

  1. Tout est posé sur un plan : deux rails pointillés, des cellules au trait, une grille de 48 px. Rien ne flotte, rien n’a d’ombre, rien n’est arrondi.
  2. Deux polices : Outfit pour les titres et les montants, Inter pour tout le reste. La voix technique, étiquettes, boutons, annotations, c’est Inter en capitales espacées, jamais une police à chasse fixe.
  3. Les verts Grinn, du vert profond au vert pâle, et des neutres chauds. Le vert est un trait, une cellule allumée, un surlignage, ou un dégradé ramassé dans un angle : jamais la surface d’une section. Les cellules colorées restent claires (le pâle, et le vert clair du point fort d’une page de cas), sauf une, validée par JB : la cellule d’appel de la page Réalisations, sur l’encre ; le texte, les titres de section et le bouton principal restent à l’encre.
  4. Les illustrations font le geste de chaque offre : des schémas isométriques vectoriels, dans le gris « stone » de la charte, le vert seulement sur ce qui est actif, animés en CSS dans le SVG, sans vidéo. Elles sont décoratives : le texte dit tout ce qu’elles montrent.
  5. Le mouvement est une apparition, puis une vie lente : les lignes se tracent, le surlignage s’étend, des cellules s’allument, le bandeau des clients défile. Rien ne bouge au doigt ni en mouvement réduit, et la page se lit sans script.
  6. Rien n’est inventé. Une photo, une citation, un logo, un prénom qui manquent se marquent en réserve, en clair, jusqu’à ce qu’ils soient fournis.

RègleQuand une règle manque, on regarde d’abord ce que fait l’accueil ; s’il n’y a rien, on la tranche ici avant de dessiner.

Le sommaire

Les pages, en quatre groupes : les fondations, les composants, les gabarits de page, les marques et leurs fichiers.

Fondations

Composants

Gabarits

Marques et fichiers

Les décisions

Ce qui a été tranché en construisant l’accueil, dans l’ordre où c’est tombé. Celles qui viennent de JB sont signalées ; les autres sont des choix de dessin, qu’il peut rouvrir.

  1. La référenceChoix de JB

    La structure de la page vient de baseten.co, traduite dans la charte Grinn : la police à chasse fixe devient Inter en capitales, le noir devient l’encre chaude, le vert vif devient les trois verts, les illustrations deviennent nos scènes.

  2. Aucun aplat de couleurChoix de JB

    Pas de section sombre ni de bandeau vert. Le vert est un trait, une cellule allumée, un surlignage. La cellule pâle, dans une grille, est la seule surface colorée tolérée.

  3. Des photos plutôt que des dessins décoratifsChoix de JB

    Les réalisations et l’équipe appellent des photos. Tant qu’elles manquent, une réserve explicite prend la place : le format attendu, ce qu’il faut photographier, et la mention à fournir. Depuis le 12 octobre, les cas se montrent par les captures de leur produit, dans leur vitrine, et depuis le 13 sur les cartes de l’accueil aussi ; les cartes des pages d’offre gardent leur réserve de photo.

  4. Les scènes isométriques

    Jusqu’au 12 octobre : produites avec un modèle d’image (FLUX.2 sur Runware), recolorées dans les verts Grinn par luminance, animées en boucles de cinq secondes (Kling, première image égale à la dernière), fond blanc pur posé en multiply sur la cellule. Écartées par JB le 12 octobre (voir Les illustrations v2, plus bas) ; la section IA de l’accueil, la dernière à en garder une, reçoit son schéma le 13 octobre.

  5. L’ordre des sectionsChoix de JB

    Celui de l’accueil précédent : offres, équipe, engagements, réalisations, citations, IA, suivi, contact. Les faits passaient sous l’équipe, jusqu’au 12 octobre.

  6. Les citations en murChoix de JB

    Le mur de baseten, pas le carrousel de l’accueil précédent : trois colonnes, le titre au milieu de la grille, les cartes en quinconce, une réserve de logo et de portrait.

  7. La trame se trace

    Quand une grille entre dans le cadre, sa ligne du haut s’étire, puis chaque cellule trace son bas et sa droite, l’une après l’autre. Sans script, tout est tracé d’emblée.

  8. Le surlignage s’étend

    Un passage du titre est surligné en vert ; le surlignage s’étend quand le titre apparaît. Au plus un passage par titre, jamais sur un h1 de page intérieure sans raison.

  9. Les annotations

    Une annotation nomme ce qu’elle touche, par un trait d’attache qui se trace. Elle flotte lentement ; dans la section IA, c’est la boîte entière, dessin et annotations, qui flotte. Sous 700 px, elle disparaît : le texte suffit. Les trois temps de la section IA s’allument tour à tour. Depuis le 13 octobre, sur une illustration v2, elle est ancrée : le bout de son trait est posé sur l’objet nommé, à toutes les largeurs (trame/annotations.ts).

  10. À la souris seulement

    La parallaxe de l’en-tête des pages intérieures (et du premier écran de l’accueil, jusqu’au 12 octobre) et la lueur sous le pointeur n’existent qu’avec un pointeur fin et sans mouvement réduit. Rien au doigt.

  11. Le dôme

    Un champ de petits signes dessiné sur canevas, dans un demi-cercle, parcouru par une onde verte, avec la scène du suivi dedans. Il s’arrête hors écran et reste fixe en mouvement réduit.

  12. Les bandes

    Deux rangées de 48 px sur la grille, quelques cellules vertes, profondes ou pâles, décrites en données (colonne, rangée, largeur, ton), qui s’allument l’une après l’autre puis respirent.

  13. La carte d’offre

    Le nom en étiquette, le gain en titre, une phrase, le prix, le bouton, puis la scène de 300 px annotée de ses technologies. Les annotations techniques sur l’accueil restent à confirmer.

  14. Les rails

    Le contenu tient sur 1184 px entre deux rails pointillés. La ligne d’une section traverse toute la fenêtre ; les cellules vont jusqu’aux rails ; le texte seul garde une marge de 20 à 48 px.

  15. L’en-tête

    Sur papier blanc, un trait pointillé dessous, une barre de lecture qui avance, le menu Offres · Réalisations · Le suivi · L’équipe, un bouton. Pas de numéro de téléphone tant qu’il n’existe pas.

  16. Le pied

    Une cellule pâle entre les rails, trois cellules allumées dans le coin, cinq colonnes, la ligne légale. Le groupe s’y nomme, jamais dans l’en-tête.

  17. Les logos

    Tant que les fichiers des clients manquent, leur nom en Outfit tient lieu de logo, dans sa case du bandeau.

  18. Les mots

    La copie suit le référentiel sémantique v3. Un composant n’emploie jamais de texte provisoire qui le contredise : là où le texte n’existe pas, une réserve « à écrire ».

  19. Le formulaire

    Deux champs et un bouton qui nomme la conversation ; l’agenda est la seconde porte, de même rang. Plus de mention de lettre mensuelle tant qu’elle n’existe pas. Depuis le 12 octobre, il part par le relais du serveur, qui envoie la demande par e-mail avec Brevo, puis mène à /merci/ ; sans script, il passe par la messagerie du visiteur. La mesure du lead sur /merci/ reste à poser.

  20. L’accueil précédentChoix de JB

    Il reste consultable, non indexé, le temps de la refonte. Aucun composant n’est supprimé avant la validation de toutes les pages.

  21. Les styles

    Une seule feuille, grinn.css, avec le bloc de la trame à la fin ; aucun style dans un composant. Les composants vivent dans src/components/trame.

  22. Le contrôle

    Une boucle locale construit le site, le type, passe le contrôle de marque, ouvre chaque page à quatre largeurs et relève ce qu’un navigateur signalerait. Elle tourne jusqu’au vert avant toute mise en ligne.

  23. Les verts en reliefChoix de JB

    Le 12 octobre, aucune teinte nouvelle : toute la gamme des verts Grinn et le dégradé du site, ramassé dans un angle. Le trait de la trame passe au vert ; le texte, les titres de section et le bouton principal restent à l’encre. Toujours aucun aplat.

  24. Le bandeau des clients défileChoix de JB

    Le 12 octobre, le « rien ne défile » est levé pour ce seul bandeau : deux pistes identiques glissent de droite à gauche, 5 s par case, en boucle, sans script. Le survol l’arrête, et un bouton pause l’arrête au clavier et au doigt (trame.ts, partie 8) ; en mouvement réduit, il reste immobile et se fait défiler à la main. Les cas qui ont l’accord du client et un logo complètent la liste. La lumière qui passait d’une case à l’autre est retirée.

  25. Le point de contact refaitChoix de JB

    Une grille de la trame : la tête sur toute la largeur, dans une cellule pâle où des cases s’allument ; dessous, le formulaire et l’agenda côte à côte dès 900 px, les deux boutons alignés en bas. Sans agenda, la phrase revient sous le titre et le formulaire prend toute la largeur. Les carrés posés autour de la tête quittent ce bloc.

  26. L’accueil allégéChoix de JB

    La note du Crédit Impôt Innovation quitte le bas des offres ; elle reste sur la page Offres. Sous l’équipe, la rangée des faits, le bouton « Rencontrer l’équipe » et la phrase sur la publicité sont retirés ; les faits restent sur la page de l’équipe.

  27. Le surlignage, le mot seulChoix de JB

    Le fond vert couvre le mot, ni l’espace avant ni l’espace après. Il peut passer à la ligne avec le titre : chaque morceau garde son fond.

  28. Le grand titre centréChoix de JB

    Le 12 octobre, parmi quatre propositions, JB choisit le nouveau premier écran de l’accueil. L’affiche d’abord, tout au centre : l’étiquette, le titre sur deux lignes jusqu’à 100 px, le chapô et les deux boutons, sur une grille qui s’efface sous le titre. Puis la démonstration, sur toute la largeur : la scène hero au centre de sa cellule pâle, les six offres autour dans leurs cases, des liens vers leurs pages, chacune reliée par un trait d’attache à l’objet qu’elle nomme dans la scène. Les offres s’allument l’une après l’autre, deux tours, puis tout s’éteint ; rien ne tourne en mouvement réduit. Les annotations, la parallaxe et le recul de la scène quittent le premier écran de l’accueil ; ils restent à l’en-tête des pages intérieures.

  29. Les cas clientsChoix de JB

    Le 12 octobre, JB valide la maquette des cas. La page Réalisations suit la page des clients de baseten.co : le bandeau des clients, un badge sur ceux dont le cas a sa page, des cartes par deux, des cas en largeur avec trois faits, des petites cartes par trois, une cellule d’appel sur l’encre, le mur des clients. La page de cas met le visuel d’abord, puis le récit et sa fiche collante, le point fort dans une cellule allumée, la citation, le cas suivant. Chaque cas a sa vitrine : la matière du client, sa capture dans un cadre, des puces techniques. Aucun chiffre de résultat, et pas de page sans l’accord du client.

  30. Les illustrations v2Choix de JB

    Le 12 octobre, JB écarte les scènes peintes animées par Kling, « trop IA slop », et retient une nouvelle écriture : des schémas isométriques vectoriels à la manière de Baseten, dans le gris « stone » de la charte, avec quelques verts seulement, sur ce qui est actif, animés en CSS dans le SVG même, sans vidéo. Une illustration par offre, une par rôle, une pour le suivi. Pour le premier écran, il garde l’idée de la maquette : une scène au centre, chaque objet relié en pointillé à la case de son offre ; la scène hero qui la porte, le G Grinn sur son socle et six objets autour, est posée avec la série le 13 octobre. La section IA de l’accueil garde ce jour-là son ancienne scène, puis reçoit la sienne (voir La section IA sur fond clair).

  31. La cellule unie derrière un schéma

    Le 13 octobre, derrière une illustration v2, au premier écran de l’accueil et dans l’en-tête des pages intérieures, la cellule reste pâle et unie, comme dans la maquette du héros : ni le dégradé d’angle, ni le quadrillage, ni les cellules vivantes, qui posaient un fond vert autour du dessin. À valider par JB : retirer deux règles du bloc « Les illustrations v2 » de grinn.css rend le dégradé. La section IA, elle, est unie à la demande de JB (décision suivante).

  32. La section IA sur fond clairChoix de JB

    Le 13 octobre, JB demande de refaire la section IA de l’accueil « avec un fond clair ». Le dégradé vert de la cellule du dessin et le pâle de toute la grille s’en vont : le texte est posé sur le blanc, sans aplat, et le dessin dans une cellule pâle et unie. Le schéma v2 du cas Bosco Services (le mail, l’assistant, le logiciel métier, la fiche et le devis, la validation, reliés par un flux vert) y est posé entier ; ses trois étapes et ses deux repères sont ancrés sur ses objets, et la boîte flotte d’un bloc, dessin et annotations ensemble.

D’où tout vient

L’accueil est la page d’où le système est tiré, et tout le site en suit les règles. Ce que le site précédent portait et que la trame ne garde pas, et les pistes écartées en route, sont consignés dans la page Écarté.