Design system
Le système qui tient le site.
Tokens, composants, mouvement, accessibilité et règles d’écriture. Ce document décrit ce que grinn.css fait réellement, pas ce qu’on voudrait qu’il fasse. Quand un élément manque, il est marqué comme manquant plutôt qu’inventé.
Identité de marque
Grinn est une marque du groupe Hepix, anciennement The Project Company, avec Triptik et Panko. Dans le texte, on écrit Hepix ; HEP’X est réservé au logotype du groupe. Les valeurs de couleur et de typographie ci-dessous sont relevées sur la brand sheet du groupe, pas reconstituées.
Logo
Trois fichiers, fournis le 15 septembre 2026. Le wordmark est un lettrage en extrusion avec ombre portée : il lui faut du contraste autour, jamais un fond chargé. Chaque déclinaison se récupère ici, en PNG à fond transparent ou en SVG.
Wordmark, fond clair
assets/grinn-logo.svg
Wordmark, fond sombre
assets/grinn-logo-sur-noir.svg
Marque seule et favicon
assets/grinn-mark.svg
Le verrou groupe
Une quatrième déclinaison, qui n’en est pas une : elle ne se substitue jamais aux trois autres. Elle s’emploie uniquement quand on parle de Grinn dans le cadre d’Hepix, et pas ailleurs. Sur le site public, qui parle de Grinn pour elle-même, l’appartenance au groupe se dit en toutes lettres dans le pied de page, avec un lien vers hepixgroup.com ; ce verrou n’y a pas sa place.
Grinn, Hepix Group
assets/grinn-logo-hepix.svg
| Quand | Support du groupe, document commun aux quatre marques, présentation où Grinn apparaît à côté de Triptik ou de Panko, signature d’un document Hepix, annonce du groupe. |
| Jamais | Sur le site grinn.tech, sur la page LinkedIn Grinn, dans une signature de mail Grinn, sur un devis, une plaquette ou une fiche d’annuaire Grinn, ni nulle part où Grinn parle en son nom. Là, le logo vit seul, et le rattachement au groupe se dit en texte. |
| Taille minimale | 140 px de large, 36 mm à l’impression. En dessous, la ligne « Hepix Group » tombe sous 8 px et devient un gris. C’est près du double du minimum du wordmark seul, parce que cette ligne est la partie la plus fragile du fichier. |
| Version sombre | Il n’en existe pas. La ligne « Hepix Group » est dessinée en encre : sur fond sombre, elle disparaît.fichier à produire |
La réponse à Hepix
Grinn appartient au groupe sans en reprendre les signes. Chaque geste de la charte Hepix appelle une réponse Grinn : même intention, autre écriture. Si on ne peut pas dire en quoi la réponse diffère, c’est une copie, et elle n’a pas sa place ici.
| Intention | Hepix | Grinn |
|---|---|---|
| Le support | Papier crème à points. | Papier millimétré sur encre : un pas fin de 24 px, un pas fort tous les quatre. |
| La ponctuation du titre | Un point final orange. | Un curseur vert qui clignote : le titre est en train de s’écrire. Fixe en mouvement réduit. |
| La voix technique | Une police mono, en capitales, jusque dans la navigation et les boutons. | Inter, avec ses chiffres de tableau et son zéro barré, réservée aux métadonnées : index, prix, étiquettes. La navigation et les boutons restent en Inter courant. |
| L’ouverture de section | Le numéro entre crochets, au-dessus du titre. | Le folio sur un filet, « 01 / rubrique », puis le titre à gauche et le chapô à droite. |
| La preuve | Des objets 3D au trait, en rotation lente. | Un picto au trait fin, dans l’écriture Lucide, qui fait le geste de son métier : la pastille arrive sur le téléphone, la boîte tombe dans le sac, la courbe se redessine. Le vert porte le geste. Plus une fiche technique et un sommaire en tableau. Grinn montre ce que fait chaque métier, pas un objet. |
| La couleur | L’orange en touche, jamais en aplat. | Le vert en touche, jamais en aplat ; le dégradé est la seule grande surface. |
Zone de protection, taille minimale, usages interdits
Rien de tout cela n’est arrêté. Ce qui suit est une proposition, construite sur ce que le logo fait réellement dans les pages du site. à valider
Zone de protection
Une marge libre égale à la hauteur du G sur les quatre côtés. Rien n’y entre : ni texte, ni filet, ni bord de bloc. C’est la mesure la plus simple à vérifier à l’œil, et elle suit l’échelle du logo sans calcul.
Taille minimale
72 px
24 px
Wordmark : 72 px de large à l’écran, 20 mm à l’impression. En dessous, l’extrusion se referme et le mot devient une tache. Marque seule : 24 px, 8 mm. L’en-tête du site l’emploie à 79 px, juste au-dessus du seuil.
Usages interdits
| Le poser sur une photo ou un fond moyen | L’extrusion et l’ombre ont besoin de contraste. Sur un fond chargé, le mot se dissout. |
| Recolorer le lettrage ou l’ombre | Les deux fichiers existent déjà, un pour fond clair, un pour fond sombre. Il n’y a pas de troisième version. |
| Déformer, incliner, faire pivoter | Le rapport de forme ne change pas. Redimensionner, oui ; étirer, jamais. |
| Ajouter un effet | Ombre supplémentaire, contour, dégradé, lueur. Le logo porte déjà son relief. |
| Recomposer la signature | Le wordmark et la marque seule ne se combinent pas, ne se superposent pas, ne changent pas de place. |
| Employer le mauvais fichier | Le wordmark clair sur fond sombre, ou l’inverse : l’ombre disparaît et le lettrage se troue. |
Ce que la marque dit
| Promesse | Conçu pour être utile. Construit pour rapporter. Les deux moitiés vont ensemble. Ce n’est pas une signature : elle ne se pose ni sous le logo, ni en pied de page. |
|---|---|
| Registre | Chaleureux, sobre, factuel, professionnel. |
| Position | Production digitale. Grinn fabrique des produits, le groupe conduit des programmes. |
| Terrain refusé | Le prix. On ne sera jamais le moins cher, et on ne se bat pas là-dessus. |
Couleur
Dix jetons, contre quatorze auparavant. Chacun porte un rôle écrit et un contraste vérifié dans ce rôle : un jeton qu’on ne sait pas employer est un jeton qui dérive. Cliquez une référence pour la copier.
Les trois couleurs de marque
Arrêtées. Elles ne se dérivent pas, ne s’éclaircissent pas, ne se remplacent pas.
La règle du vert, en trois images
Elle ne vient pas d’un goût, elle vient de la mesure. Les trois cas ci-dessous ont été calculés sur les valeurs réelles.
Interdit · 1,70:1
Texte de marque · 5,08:1
La règle sur l’aplat · 10,26:1
Interdiction
Le vert numérique ne s’emploie jamais seul en grand aplat.
En grande surface, le #98D1CB vibre : l’œil ne le fixe pas, et le texte
posé dessus fatigue. Il s’emploie en trait, en cellule, en pastille, en petit bloc, ou
derrière un motif qui le rompt. Jamais en bande pleine largeur, jamais en fond
de section. Pour une ponctuation colorée qui tient sur toute la largeur,
c’est le vert lumineux #E9F4EA qui s’en charge.
La bande verte pleine qui portait les verbatims a été supprimée au titre de cette règle. Ce qui la remplace est ci-dessous.
Le dégradé, seule grande surface colorée
Ce que le vert plein ne peut pas faire, le dégradé le fait : il ne présente jamais deux fois la même valeur, donc l’œil s’y pose au lieu de vibrer. C’est le seul registre autorisé pour une bande pleine largeur ou un fond de section.
L’encre passe partout dessus.
| Ancre foncée | #60B8AF. N’existe que dans le dégradé : seule, en texte sur blanc,
elle tombe à 2,34:1. |
|---|---|
| Ancre claire | #F5FAF5 |
| Sens | 160°, du foncé en haut à gauche vers le clair en bas à droite. |
| Texte autorisé | L’encre, et elle seule. 7,47:1 au point le plus foncé, 16,55:1 au plus clair. Le vert profond y tombe à 2,17:1 et le blanc à 2,34:1 : les deux sont interdits. |
Le reste en une phrase : sur fond clair, le vert numérique est une surface et le vert profond est un texte. Sur un aplat vert, le texte est en encre, jamais en vert profond. Sur fond sombre, le vert numérique redevient un texte.
Le reste de la palette
Sept jetons pour l’encre, les surfaces et les filets. Quatre ont disparu au passage : deux blancs qui n’en faisaient qu’un, une graisse de filet en trop, et un gris de micro-étiquette qui échouait à 2,52:1 sur blanc. Son remplaçant passe AA sur les trois fonds clairs du système.
Typographie
Outfit pour la titraille, Inter pour le corps. Outfit tient mal sous 16 px, c’est ce qui fixe la frontière : titres, verbatims et afficheurs chiffrés d’un côté, tout le reste de l’autre, micro-étiquettes comprises.
clamp(38px, 6.4vw, 78px)Conçu pour être utileOutfit 800
Titre de page. Un seul par page.
clamp(28px, 3.9vw, 50px)Conçu pour être utileOutfit 700
Titre de section.
clamp(22px, 2.4vw, 30px)Conçu pour être utileOutfit 700
Titre de carte, sous-section.
clamp(18px, 1.45vw, 22px)Conçu pour être utileOutfit 700
Titre court, engagement, colonne de pied de page.
clamp(20px, 1.62vw, 25px)Conçu pour être utileInter 400
Chapeau. Classe .lead
clamp(16.5px, 0.35vw + 13px, 18.5px)Conçu pour être utileInter 400
Corps courant.
14.5pxConçu pour être utileInter 400
Description de carte. Classe .small
11pxConçu pour être utileInter 600, .18em
Micro-étiquette. Classe .lbl
Interdiction
Outfit ne s’emploie jamais sous 16 px.
En dessous, ses contreformes se ferment et les mots deviennent des taches. Tout ce qui descend sous 16 px est en Inter, sans exception : micro-étiquettes, mentions, pastilles, légendes, libellés de champ. La frontière n’est pas une préférence, c’est la limite de lisibilité de la police.
Ce qu’on fait
Interdit · Outfit à 11 px
Ce qu’on fait
Juste · Inter à 11 px
Interlettrage
Une seule valeur de resserrement, --tight: -.035em, appliquée à toute la titraille. Outfit est une géométrique : au serrage d’une grotesque, les titres se collent.
Signature graphique
Les six motifs géométriques sont abandonnés : ils dessinaient à côté de la marque au lieu de s’appuyer dessus. La signature tient maintenant en deux gestes, et les deux sont éditoriaux plutôt que décoratifs : un cadre qui dit le support, et la marque elle-même qui remplit. Les deux se posent sur une texture, et l’ensemble forme une composition à trois couches, décrite au dernier bloc de cette section.
Le cadre dit le support
Ce qui compte n’est pas ce qu’il y a dedans, c’est le cadre. Une fenêtre de navigateur, une icône d’application, un téléphone : trois formes qui se reconnaissent sans légende. Rien dedans ne fait semblant d’être une interface.
Fenêtre · site, contenu, back-office
Icône · produit, assistant, outil
Téléphone · application mobile
L’icône d’application porte le seul arrondi du système, et il est justifié : sans lui, elle n’est plus reconnaissable comme une icône. Partout ailleurs, l’angle reste vif.
La marque remplit
Dedans, ce n’est pas un motif inventé : c’est le logo, détouré dans le dégradé, débordé et recadré. Le signe est déjà là, il n’y avait pas à en dessiner un autre.
En attente
Ce remplissage n’est pas employé aujourd’hui.
Sur le site, les écrans restent vides. Le remplissage par la marque est arrêté et disponible, mais il attend son moment : il se rallume d’un seul réglage, le jour où on le décide. Ce qui suit montre ce qu’il donne.
Cadrage large
Gros plan, la marque déborde
En icône d’application
Sur surface sombre
En téléphone
Le remplissage suit le dégradé, donc il ne vibre pas et ne présente jamais deux fois la même valeur. Le recadrage change d’une carte à l’autre.
Les nappes d’expertise
Une nappe de couleur par expertise. Quatre dégradés radiaux qui se recouvrent : le fondu
est continu, sans bord ni grain. Chacune a sa propre teinte, et les cinq
teintes sont prises entre les deux ancres de la marque : 126° est
exactement celle de #E9F4EA, 174° exactement celle de #98D1CB,
#60B8AF et #367972. Rien n’est inventé au-delà de cet
intervalle : la variation est l’interpolation entre deux couleurs arrêtées.
Sur chaque teinte, quatre paliers de clarté : 95, 78, 62 et 46 %. Le palier profond n’est qu’un accent d’angle, jamais la masse : c’est ce qui garde l’ensemble clair. Ce qui distingue une nappe d’une autre est donc la teinte, la saturation, l’angle et la place des foyers.
Site web · 126°
La teinte exacte de #E9F4EA. La plus verte, la plus calme, balayage horizontal.
E-commerce · 141°
Un pas vers le teal. Foyer décentré à droite.
Application mobile · 156°
À mi-chemin des deux ancres. Flux vertical, cadrage haut.
Acquisition · 168°
La plus saturée des cinq, balayage diagonal franc.
IA · 174°
L’ancre exacte : #F5FAF5, #98D1CB, #60B8AF, #367972, sans un écart.
Les matières clientes
Là où la nappe dit l’expertise, la matière dit le métier du client : métal pour l’intervention technique, pierre pour le patrimoine, bois pour la table, feuillage pour le jardin, cave pour le vin, papier pour l’architecture. Le nom se pose dessus, comme un marquage.
Métal brossé
Intervention technique, maintenance, terrain.
Pierre
Patrimoine, édifice, lieu ancien.
Bois
La table, la salle, le service.
Feuillage
Le jardin, l’extérieur, l’entretien.
Cave
Le vin, la bouteille, le domaine.
Papier
L’architecture, le plan, le tracé.
Écran
Quand le métier est le numérique lui-même.
Ce sont des images de matière générées, pas des photographies du client. Elles évoquent un secteur et ne prétendent jamais montrer le produit du client. Un voile constant garantit que le nom reste lisible quelle que soit la matière. Le jour où une vraie image arrive, elle se pose au même endroit.
La composition
Tout ce qui précède se monte dans un seul objet, toujours dans le même ordre : la texture au fond, le cadre posé dessus, la capture dedans le jour où elle existe. C’est la composition standard du site : chaque carte d’expertise, chaque fiche client et chaque visuel de page en sort.
- 1La texture. Nappe d’expertise pour une offre, matière cliente pour une réalisation. Elle occupe toute la scène, bord à bord.
- 2Le cadre. Fenêtre, téléphone ou icône, posé au centre. Il garde son ombre portée : c’est elle qui le fait flotter au-dessus de la nappe au lieu d’y être collé.
- 3La capture. Absente à ce jour. Tant qu’elle l’est, l’écran reste vide : un cadre vide dit qu’il attend une image. Le jour où elle arrive, elle se pose dedans et rien d’autre ne bouge.
Fenêtre sur nappe · une expertise
Téléphone sur nappe · application mobile
Icône sur nappe · assistant, outil
Fenêtre sur matière · Clotilde Davenne
Fenêtre sur matière · Mes Jardiniers
Sans cadre, quand il n’y a pas d’écran
Une étape, un lien, un métier : rien de tout cela ne s’affiche dans une fenêtre. La scène se réduit alors à sa texture seule, bord à bord, sans rien posé dessus. Un cadre y annoncerait une capture qui n’arrivera jamais.
Texture seule · une étape, un lien
Cadre vide · une capture réellement attendue
Emplacement de photo · une image à fournir
Trois états, trois messages différents, et c’est le but. La texture seule ne promet rien. Le cadre vide dit qu’une capture est attendue. L’emplacement de photo dit laquelle, et le jour où le fichier est déposé, il s’affiche sans autre modification.
La règle
Le cadre ne touche jamais la texture.
L’air entre les deux est une seule valeur, --scene-air,
soit clamp(20px, 7%, 60px). C’est une distance minimale :
comme elle s’exprime en pourcentage, elle se résout toujours contre la largeur de la
scène, donc elle vaut le même nombre de pixels en haut, en bas et sur les côtés. Un
objet plus étroit que la scène, téléphone debout ou icône, se centre et respire
davantage sur les côtés, jamais moins.
Sans cet air, le cadre se lit comme une découpe dans la nappe. Avec, il se lit comme un objet posé dessus : c’est toute la différence entre un aplat et une photo.
Ce qu’on ne fait plus
Aucun faux produit dans un cadre.
Pas de barres grises qui imitent du texte, pas de fausses bulles de conversation, pas de graphique inventé. Un cadre vide dit honnêtement qu’il attend une image ; un cadre rempli de faux contenu prétend qu’elle existe. Le jour où une vraie capture arrive, elle se pose dans le même cadre.
Grille et espacement
Un conteneur, une gouttière, un rythme vertical. Rien d’autre.
| Jeton | Valeur | Emploi |
|---|---|---|
--wrap | 1240px | Largeur maximale du contenu. Classe .wrap. |
--gut | 28px, 20px sous 860px | Marge latérale et gouttière de grille. |
--sec | clamp(64px, 8vw, 104px) | Respiration verticale d’une section. Classe .sec. |
Deux points de rupture
1080px fait passer les grilles de trois à deux colonnes. 860px les passe à une, masque la navigation et les flèches de carrousel, et écrase les compositions en format large.
Aucun arrondi, aucune ombre portée décorative
Le système n’utilise pas de border-radius. La seule ombre existante est celle du survol de carte, et elle sert à indiquer l’élévation, pas à décorer.
Composants
Chaque composant est montré vivant, avec le balisage qui le produit. Aucune classe en dehors de cette liste n’existe dans la feuille de style.
Boutons
La flèche est toujours dans un <span class="ar"> : c’est elle qui bouge au survol. Sur fond sombre, le bouton plein passe en .btn--light.
<a class="btn btn--light" href="contact.html">Parlons de votre projet <span class="ar">↗</span></a> Les cinq expertises, quatre dispositions
Le contenu ne change jamais d’une disposition à l’autre : seule la façon de le poser change. Une seule sera retenue pour l’accueil. à choisir
A. La grille de cartes
Celle en place. Chaque expertise a son cadre, ses étiquettes et son prix. La plus complète, et la plus lourde : cinq cadres sur un seul écran.
Site internet
Trouvé sur Google, et simple à mettre à jour vous-même. Point de départ À partir de 5 000 € Lire l’expertise↗ Première boutiqueRefonte de boutiqueE-commerce
De la fiche produit au paiement, chaque étape travaillée pour vendre. Point de départ À partir de 10 000 € Lire l’expertise↗ Application grand publicOutil terrainApplication mobile
iOS et Android d’une seule base, en Flutter ou React Native. Point de départ À partir de 15 000 € Lire l’expertise↗ Développement completIntégration OdooLogiciel métier
Construit pour votre façon de travailler, en développement complet ou sur Odoo. Lire l’expertise↗ AutomatisationAgent métierIA et automatisation
Des agents reliés à vos outils préparent le travail, vous validez. Point de départ À partir de 8 000 € Lire l’expertise↗ Publicité en ligneRéférencementMarketing digital
SEO, visibilité dans les IA, publicité, réseaux sociaux et tableaux de bord. Point de départ À partir de 700 € par mois, budget publicitaire non compris Lire l’expertise↗B. Le sommaire
Une ligne par expertise, aucun visuel. On lit les cinq d’un seul regard, et le prix se compare immédiatement. Le plus éditorial, le plus dense.
C. En quinconce
Chaque expertise en pleine largeur, le cadre alternant d’un côté puis de l’autre. Beaucoup d’air, registre magazine. Long à parcourir.
01
Site internet
Un site qui transforme les visites en demandes.
Trouvé sur Google, et simple à mettre à jour vous-même.
Voir l’expertise À partir de 5 000 €
02
E-commerce
Une boutique Shopify pensée pour la conversion.
De la fiche produit au paiement, chaque étape travaillée pour vendre.
Voir l’expertise À partir de 10 000 €
03
Application mobile
Une application pour vos clients ou vos équipes.
iOS et Android d’une seule base, en Flutter ou React Native.
Voir l’expertise À partir de 15 000 €
04
Logiciel métier
Le logiciel qui remplace vos tableurs.
Construit pour votre façon de travailler, en développement complet ou sur Odoo.
05
IA et automatisation
Une IA branchée sur votre métier.
Des agents reliés à vos outils préparent le travail, vous validez.
Voir l’expertise À partir de 8 000 €
06
Marketing digital
Être trouvé, et savoir ce qui rapporte.
SEO, visibilité dans les IA, publicité, réseaux sociaux et tableaux de bord.
Voir l’expertise À partir de 700 € par mois, budget publicitaire non compris
D. Une en vedette
L’IA mise en avant avec son cadre, les quatre autres en rang serré dessous. Hiérarchie assumée : elle dit ce qui compte en premier.
01 · Site internet
Un site qui transforme les visites en demandes.
Trouvé sur Google, et simple à mettre à jour vous-même.
Voir l’expertise À partir de 5 000 €
E-commerce
De la fiche produit au paiement, chaque étape travaillée pour vendre.À partir de 10 000 €03Application mobile
iOS et Android d’une seule base, en Flutter ou React Native.À partir de 15 000 €04Logiciel métier
Construit pour votre façon de travailler, en développement complet ou sur Odoo.05IA et automatisation
Des agents reliés à vos outils préparent le travail, vous validez.À partir de 8 000 €06Marketing digital
SEO, visibilité dans les IA, publicité, réseaux sociaux et tableaux de bord.À partir de 700 € par mois, budget publicitaire non comprisLa carte
Le composant central du site. Visuel en haut, étiquettes, titre, description, pied avec le prix et la flèche. Au survol, la bordure fonce, la carte se soulève de 3 px et la composition grandit de 3,5 %. La variante sombre sert à marquer une carte dans une grille.
<a class="card" href="offre-site-web.html" data-reveal>
<span class="card__vis">MOCKUP</span>
<span class="card__body">
<span class="card__pills"><span class="pill">Site vitrine</span></span>
<h3 class="card__title">Site web</h3>
<span class="small">Description courte.</span>
<span class="card__px">Point de départ <b>dès 5 000 €</b></span>
<span class="card__foot"><span>Lire l’expertise</span><span class="ar">↗</span></span>
</span>
</a> | Variante | Effet |
|---|---|
.card--dark | Fond encre. Les pastilles passent en vert, la bordure de survol aussi. |
.card--wide | Occupe deux colonnes de la grille. |
.card--flat | Sans bordure ni fond. Pour une liste de cas où le visuel suffit. |
<article class="card"> | Carte sans lien. Le pied et la flèche sautent. |
Étiquettes et pastilles
Les crochets de .lbl sont ajoutés en CSS : on ne les écrit jamais dans le texte. .pend marque un élément en attente, et doit rester visible tant que la donnée manque.
Ce qu’on fait
Une description avec une mention en attente.à écrire
Carrousel
Un seul composant pour les réalisations, les verbatims et les offres. Défilement par accrochage natif, flèches, pastilles construites par le script, navigation au clavier par les flèches gauche et droite. Sous 860px, les flèches disparaissent et le doigt prend le relais.
Ce qu’ils en disent
Emplacement du verbatim client.à fournir
Emplacement du verbatim client.à fournir
Emplacement du verbatim client.à fournir
<div class="car car--2" data-car>
<div class="car__head">…<div class="car__nav">
<button class="car__btn" type="button" data-dir="prev">←</button>
<button class="car__btn" type="button" data-dir="next">→</button></div></div>
<div class="car__track">ÉLÉMENTS</div>
<div class="car__dots" role="tablist"></div>
</div> Engagements
Liste numérotée en deux colonnes. Les sept engagements sont un texte arrêté : ils se recopient, ils ne se reformulent pas.
Une seule personne à appeler
Votre chef de projet vous suit du premier échange au suivi. Vous n’avez rien à coordonner.
Un délai annoncé d’avance, et tenu
Vous connaissez le délai de mise en ligne avant qu’on commence. Vous pouvez caler votre lancement ou votre saison dessus.
Formulaire
Deux champs, jamais plus à l’étape 1. Le bouton ne parle jamais d’argent. Le focus fonce la bordure, et le contour de focus clavier est vert.
Bandes
Quatre surfaces, qui rythment la page. La bande sombre porte la conversion et la clôture. Le dégradé est la seule grande surface colorée : il remplace la bande verte pleine, supprimée parce que le vert numérique vibre en grand aplat.
.band
Conversion, clôture.
.band-light
Respiration douce.
.band-paper
Bandeau de logos, pied de page.
.band-degrade
Ponctuation colorée. Plus employé sur l’accueil.
.band-millim
Papier millimétré clair, sans couleur. Verbatims de l’accueil.
Mouvement
Une seule courbe, trois durées. L’animation sert à hiérarchiser la lecture, jamais à faire joli. Tout ce qui suit se déclenche ici : survolez, rejouez.
La courbe, et rien d’autre
cubic-bezier(.22,.7,.2,1) : départ franc, arrivée douce. Une seule courbe
pour tout le site, parce qu’un système qui en compte trois n’en a aucune.
Trois durées, trois emplois
| Jeton | Valeur | Emploi |
|---|---|---|
--fast | 200 ms | Survol, changement d’état, focus. |
--mid | 380 ms | Soulignement, flèche, bascule de l’en-tête. |
--slow | 640 ms | Révélation au défilement. |
--ease | cubic-bezier(.22,.7,.2,1) | La seule courbe du système. |
Ce qui bouge au survol
Trois gestes, trois durées. Passez la souris dessus.
380 ms · translation en diagonale
380 ms · depuis la gauche
La carte se soulève
380 ms · 3 px, et le cadre grandit de 3,5 %
Révélation au défilement
Un data-reveal apparaît quand il entre dans le cadre, une seule fois.
Un data-stagger sur le conteneur décale ses enfants directs.
01
Élément décalé de 0 ms.
02
Élément décalé de 90 ms.
03
Élément décalé de 180 ms.
04
Élément décalé de 270 ms.
| Variante | Effet |
|---|---|
data-reveal | Remontée de 16 px et apparition. |
data-reveal="left" | Glissement depuis la gauche de 22 px. |
data-reveal="scale" | Agrandissement depuis 97 %. |
data-reveal="fade" | Apparition seule, sans déplacement. |
data-stagger="80" | Sur un conteneur : décale ses enfants directs de 80 ms. |
Trois garde-fous
Une animation ne doit jamais coûter la lecture. Chacun a été mis là après un incident réel.
| Sans JavaScript, rien n’est masqué | La règle d’opacité est portée par .js, posée par un script en ligne avant
le rendu. Une page sans script reste entièrement lisible. |
| Un filet de sécurité | Au bout de 1,2 seconde, tout ce qui est resté caché est révélé. Si l’observateur échoue, la page s’affiche quand même. |
prefers-reduced-motion | Coupe toutes les transitions, le bandeau défilant et le défilement doux, et affiche tout immédiatement. Le bandeau redevient une liste qu’on fait défiler au doigt. |
Accessibilité
Les contrastes ci-dessous sont calculés sur les valeurs réelles de la feuille de style, pas estimés. Le seuil retenu est AA, soit 4,5:1 pour le texte courant.
| Combinaison | Valeurs | Rapport | Verdict |
|---|---|---|---|
| Vert numérique en texte sur blanc | #98D1CB sur #FFFFFF | 1.70:1 | échoue |
| Vert numérique en texte sur encre | #98D1CB sur #1C1917 | 10.26:1 | AAA |
| Encre en texte sur aplat vert | #1C1917 sur #98D1CB | 10.26:1 | AAA |
| Vert profond sur aplat vert | #367972 sur #98D1CB | 2.98:1 | échoue · non employé |
| Gris tertiaire sur aplat vert | #6F6862 sur #98D1CB | 3.21:1 | échoue · non employé |
| Vert profond sur blanc | #367972 sur #FFFFFF | 5.08:1 | AA |
| Vert profond sur vert lumineux | #367972 sur #E9F4EA | 4.50:1 | AA, à la limite |
| Encre sur fond de page | #1C1917 sur #F5F5F4 | 16.03:1 | AAA |
| Texte secondaire sur fond de page | #57534E sur #F5F5F4 | 6.99:1 | AA |
| Texte tertiaire et micro-étiquette sur carte | #6F6862 sur #FFFFFF | 5.48:1 | AA |
| Texte tertiaire et micro-étiquette sur fond de page | #6F6862 sur #F5F5F4 | 5.02:1 | AA |
| Texte tertiaire sur vert lumineux | #6F6862 sur #E9F4EA | 4.85:1 | AA |
| Texte clair sur bande sombre | #FFFFFF sur #1C1917 | 17.49:1 | AAA |
| Texte secondaire sur bande sombre | #D6D3D1 sur #1C1917 | 11.74:1 | AAA |
Ce qui est en place
| Focus clavier | Contour vert de 2 px avec 3 px de décalage, sur tous les liens, boutons et champs. |
|---|---|
| Carrousel | Piste focalisable, flèches gauche et droite au clavier, boutons désactivés en bout de course, pastilles en role="tab". |
| Mouvement réduit | Respecté partout, y compris le bandeau défilant qui redevient une liste défilable. |
| Images | Les logos portent un alt. Les compositions sans capture sont décoratives et n’en portent pas. |
| Cibles tactiles | Boutons à 46 px de haut minimum, champs à 48 px. |
Ce qui reste à faire
| Navigation mobile | La navigation disparaît sous 940px sans menu de remplacement.à construire |
|---|---|
| Lien d’évitement | Aucun lien « aller au contenu » en tête de page.à ajouter |
| Audit lecteur d’écran | Jamais passé.à faire |
Écriture
Le système d’écriture compte autant que le système visuel. Ces règles sont arrêtées et ne se rediscutent pas.
On dit
| contrat de TMA | Jamais « contrat mensuel », le terme fait peur. |
| expertise | Les offres se parlent en expertise, pas en périmètre écrit. |
| grinner | Une personne qui travaille chez Grinn. Le mot désigne les gens. |
| IA by design | Les produits embarquent l’IA. Et l’IA est aussi une offre à part entière. |
| Parlons de votre projet | Le seul libellé de bouton de conversion du site. |
On ne dit pas
Ajoutez à cette liste le demi-cadratin, banni de toute la copie visible, et toute comparaison publique à un concurrent, qu’il soit nommé ou désigné par sa catégorie.
Quatre règles de fond
| Le prix s’affiche, il n’argumente pas | Afficher un prix différencie. Le prix ne devient jamais un argument : ni dans un titre, ni dans une promesse, ni sur un bouton. |
|---|---|
| L’acquisition n’est jamais obligatoire | Jamais une condition, jamais une suite automatique. Toujours un choix du client, énoncé comme tel. |
| Le vocabulaire technique reste en corps de page | Agent, MCP, React Native, Storyblok sont des preuves de compétence. Jamais un titre, jamais une entrée de navigation. |
| Rien ne s’invente | Aucun résultat chiffré, aucun verbatim, aucune durée de projet. Ce qui manque porte une pastille .pend visible. |
Ce qui manque
L’inventaire honnête de ce que le système ne contient pas encore. Tout ce qui figure ici apparaît sur le site sous forme d’emplacement marqué, jamais sous forme inventée.
| Élément | État | Statut |
|---|---|---|
| Photographies | Aucune. Photo d’équipe pleine largeur, deux bureaux et huit portraits, tous en emplacement marqué. | à fournir |
| Verbatims clients | Aucun. Quatre emplacements dans le carrousel. | à fournir |
| Résultat client chiffré | Aucun. Bloquant : la promesse du héro annonce un rendement. | à obtenir |
| Téléphone | Non communiqué. Affiché en 02 XX XX XX XX partout. | à compléter |
| Descriptions de références | Cathédrale de Nantes, Peppsy, La Grande Table, IE Architecture. | à écrire |
| Zone de protection du logo | Non définie. Les trois fichiers sont là, pas les règles d’usage. | à définir |
| Icônes | Aucun jeu d’icônes. Le système n’en utilise pas aujourd’hui, seulement des flèches. | à arbitrer |
| Données légales | SIRET, capital, hébergeur, directeur de publication, DPO. | à compléter |
| Taux du CII | Aucun chiffre fiscal n’est écrit sur le site. | à vérifier |
| Durées types par offre | Annoncées dans le hub, pas arrêtées. | à arrêter |
| Couleurs | #98D1CB et #E9F4EA, relevées sur la brand sheet du groupe. | arrêté |
| Typographies | Outfit titraille, Inter corps. | arrêté |
| Logo | Trois fichiers : wordmark clair, wordmark sur noir, marque seule. | fourni |
| Prix d’appel | Les cinq expertises, plus le socle de TMA. | arrêté |
Ce document décrit le prototype, pas encore le site.
Le site sera construit en Astro, avec le contenu en markdown. Les classes de cette page s’y transposent telles quelles : elles ne dépendent d’aucun cadriciel.