Chaque règle, écrite une fois.

Grammaire : point · trait · pointillé — trois signes, un sens chacun. Point = origine (--dot, 7 px : le départ du fil du logo, les points d'ancrage). Trait = parcours (--line 1,5 px au repos, --line-strong 3 px au survol). Pointillé = construction : fils dessinés (--dash : 8 / 6) et surpiqûres, perforations (--seam : 1 px pointillé). Le logo en est l'arrivée : le fil mène au nom.

parcoursconstructionsurpiqûre

.section-head — label numéroté + titre

.sketch — bouton principal, un seul par page. Bords nets (30/09 : l'ondulation du composant d'origine, uiverse.io, est retirée) ; ombre bleue décalée ; au survol / focus / toucher : il se penche légèrement, un trait ocre net le surligne, le fil bouge. Aucune animation en boucle.

.paint-band.is-static — information clé. Sur l'accueil, la bande est la barre du présentoir : elle porte les deux cartons

Disponible pour stage · février à avril 2027

.actions — libellé court + icône du geste dans un cercle bleu (aller, télécharger, écrire, LinkedIn), rempli au survol ; la précision reste pour les lecteurs d'écran. Même système pour le thème (lune / soleil, nom accessible constant + aria-pressed)

.ticket — liste des projets : encoches + découpe, le talon se déchire au survol ; disposés en éventail inversé (cartes suspendues à un même point : bords inclinés vers l'extérieur et plus hauts, centre droit et plus bas, 2e rangée centrée) ; au survol le ticket se redresse. Un seul fond pour tous les tickets (--ticket-ground : crème #EFE8DC, kraft plus soutenu en sombre) : le cadre crème garde l'ensemble homogène. La fenêtre montre le travail (30/09) : une capture réelle posée comme un tirage, au format réel (écran entier, rien de coupé) ; seule la photo carrée de Coach est recadrée ; BOD|am garde son logo codé (système d'identité). Deux contextes, deux états : sur Travaux, les projets sont le sujet → couleurs d'origine au repos (.works--lit) ; sur l'accueil (« 3 projets à la une »), un renvoi qui ne doit pas dominer la présentation → encre au repos, couleurs au survol / focus, en même temps que la déchirure. Limite connue : pas de survol sur téléphone, les vignettes de l'accueil y restent à l'encre.

.print — tirage papier d'une capture (case studies). Carte étroite (maquette mobile) : la légende (information) prend toute la largeur, l'action « Page complète » passe sur sa propre ligne, dessous, toujours alignée à droite. La photo est un autre objet : le .photo-tag (carton photo à œillet, surpiqûre ocre, commun dans v2.css), toujours le même sur le site : sur le présentoir (accueil) et tenu par le fil du parcours (À propos : le fil part du dernier mot du titre « Mon parcours n'est pas une ligne droite », point ocre ; un seul geste : un looping, comme un oiseau ou un avion (la trajectoire cabre, la boucle est plus haute que large et penchée vers l'avant, elle se croise en bas et repart dans le même élan ; vers le haut sur ordinateur, vers la droite sur téléphone, toujours à l'échelle de la place disponible), sans vagues (elles créaient des angles), sans jamais toucher le texte, entre dans l'œillet par le bord blanc du carton, passe derrière et s'arrête sur le point bleu, qui apparaît à l'arrivée ; dessiné une fois. Le fil montre ce que dit le titre. Téléphone : titre → carton → paragraphe). Aucun survol : c'est une photo, pas un bouton. Une seule photo partout (site + LinkedIn + CV), la plus professionnelle

.matieres — matières chromatiques : chaque couleur est un échantillon de matière (nom, rôle, sens) ; on démontre au lieu d'expliquer. Texte sur la couleur seulement si le contraste ≥ 4,5:1, sinon le nom passe dessous

• Tadelakt poliFond principal

  La chaux marocaine polie. Le fond de toute composition Dyly.

  #F9F6EE
• Bois de cèdre AtlasPilier structurel

  L'Atlas au fond du bois. Texte, contours, structure.

  #1A1208
• Cuir tanné safranAccent singulier

  Tannerie Chouara, Fès. Uniquement sur un nom d'artisan.

  #C8913A

.lessons — leçon illustrée : dessin technique (trait encre, cotes en pointillé ocre) + titre + une phrase + « En UX ». Pas un lien : inclinaison fixe, aucun survol

• Montrer plutôt qu'expliquer

  Un dessin clair était compris ; un long texte, rarement.

  En UXUne maquette doit se comprendre sans moi dans la pièce.

.chips — tags en ocre : des faits qu'on montre au lieu de les lister (outils, savoir-faire). Pas des liens. En fiche technique d'une étude de cas : les outils seulement (pas les polices, qui sont des choix de design), 7 au plus, et seulement ce qui a vraiment servi dans ce projet

• Figma
• Design system
• WCAG 2.2
• Parcours utilisateur
• React · notions

Copier l'adresse — un vrai service (pour qui n'a pas de logiciel de mail) ; le tampon « COPIÉ » frappe en confirmation, message annoncé aux lecteurs d'écran

.citation — « En une phrase » : le parti pris d'une page, dans la voix émotion (serif italique), tiré mot pour mot du texte ; une par page au plus

Vendre l'artisanat marocain sans vendre l'exotisme.

.proj-recog — parole extérieure (cliente, école). Règle (06/10) : 1 · mot pour mot (découper en paragraphes par idée est permis, sans changer un mot) ; un extrait = une phrase entière, avec lien vers le texte complet et l'accord de la personne. 2 · toujours attribuée : nom, rôle, date (sous la citation, figcaption). 3 · forme : courte (une phrase) en serif italique ; longue en Inter romain (guide BDA : l'italique long gêne la lecture). 4 · annoncée par une étiquette de 3 mots au plus (« Avis de cliente ») : un filet seul passe inaperçu (GOV.UK, inset text). 5 · une seule apparence pour l'avis de cliente, partout : une carte légère (.avis-carte) — le tampon de la cliente (son vrai logo en version monochrome, à une seule encre : celle du site, comme le guillemet ; incliné ; jamais une photo inventée), un guillemet fin, Inter (Medium pour l'accroche), sans contour ni fond. Sur l'accueil : l'extrait, le nom à gauche et « Lire l'avis complet → » en bas à droite. Dans « Résultat » : le texte complet, la 1re phrase en accroche puis des paragraphes courts, avec de l'air. La citation courte de l'école garde le filet ocre. Le .photo-tag reste réservé au portrait. 6 · placement : texte complet en dernier dans « Résultat » (le cadre d'abord, le mot de la fin à la cliente) ; accueil : 3 extraits au plus, juste après les projets, côte à côte, empilés à 900 px et moins. 7 · traduction validée par la personne. 8 · jamais de diaporama : un texte se lit, il ne bouge pas. Données : case_short.TEMOIGNAGES (un projet sans entrée n'affiche rien)

Étude de cas, format vitrine (29/09) — une vitrine, pas une thèse : les visuels démontrent, le texte oriente, chaque détail retiré devient un sujet d'entretien. Environ 150 à 250 mots.

1. En une phrase (.citation + .hl) : le besoin ou la tension de design, jamais la solution ni une promesse. Mots courants ; la phrase doit être expliquée par la page.
2. En bref (pause kraft) : Mon rôle (seule, en groupe, et ce que le brief couvrait ou non) · Ce que j'ai fait · Ce que j'en retiens (une erreur assumée, avec le recul).
3. Les choix qui comptent : 3, sur le fil numéroté ocre (.fil) ; les visuels démonstratifs suivent (matières, palette, animations).
4. Résultat : ce qui est livré, et la mention d'honnêteté (fictif, proposition non retenue, projet de groupe). Aucun score qui varie d'un test à l'autre.
5. Fiche technique (.chips) : une ligne d'outils, pour les pros.
6. Une information n'est dite qu'une fois ; le jargon passe derrière le bénéfice (« Référencement… (Yoast) »).

.kraft — une pause de lecture par page, sur une section de texte

Étiquettes + fil — le parcours (À propos) : papier, œillet, surpiqûre ; le fil arrive devant, entre dans l'œillet, repart derrière

.care-tag + .photo-tag — le présentoir (l'étiquette est un groupe nommé « Étiquette de composition d'Amandine », pas un aside : c'est le contenu de la page, pas un complément — 05/10) de l'accueil (la vitrine) : deux cartons qui pendent chacun de son fil sous la bande « Disponible pour stage », qui sert de barre (elle recouvre les ancrages ; même angle, −1,5°). Ordre du récit (aussi l'ordre du code et de lecture) : « Bonjour, je suis Amandine. » → la barre et ses cartons → le texte et les boutons ; on se présente avant de dire qu'on est disponible. Séquence : la bande se peint, puis les fils descendent, puis l'étiquette flotte, une fois. Surpiqûres en ocre, comme sur un jean (contraste ; le bleu reste réservé au cliquable). Carton photo (œillet, bord blanc mat, surpiqûre ; .print donc crème en sombre) à gauche et plus haut, fil court, légèrement incliné (4°), visage droit. Étiquette de composition à droite et plus bas, fil long (−2°) : elle ne touche que le bord blanc du carton photo, jamais l'image (téléphone : elle pend plus bas que le visage). Composition = ce que chaque ingrédient apporte (« Faire passer une idée du dessin à l'usine », « Je sais construire ce que je dessine », « Je conçois pour les gens, sur Figma ») ; les noms d'écoles et le jargon restent sur À propos. Le fil de présentoir : il part de sous la barre (point d'ancrage caché), pointillé ocre jusqu'à l'œillet, dessiné une fois. Jamais de balancement en boucle. Règle : un objet qui imite le monde respecte sa physique (pas d'agrafe ni de trombone : un poids dans un coin ferait pencher le carton)

.next-key — la chute de « La suite » (accueil) : dernière phrase dans la voix émotion (serif italique), sur sa ligne. Elle s'écrit (encre, pas peinture : le rouleau reste réservé à l'info clé), puis une surpiqûre ocre se coud dessous et déborde de la colonne, jusqu'à s'effacer : elle montre ce que dit la phrase (« Mon envie d'apprendre, beaucoup moins [tient sur une page] »). Une fois ; visible par défaut sans JS ou en mouvement réduit

Mes projets sont en ligne, mon CV tient sur une page. Mon envie d'apprendre, beaucoup moins.

.hl — le surlignage bleu chemise (#B8CBF0, prélevé sur la photo) : au Stabilo, sur une phrase par page au plus, celle qui porte la voix d'Amandine (chute de l'accueil, conclusion de « Ce qui me guide », « En une phrase » des études de cas ; rien sur Travaux ni Contact). Jaune = l'information clé (Disponible) ; bleu = la voix. Bords irréguliers (jamais « texte sélectionné »), une bande par ligne, elle dépasse un peu et revient, une fois ; texte noir sur le bleu (12:1), en clair comme en sombre

On ne montre pas un score avant qu'il existe.

Le titre se prolonge en geste (sur 2 pages seulement, sinon ça devient un tic) : le trait part du dernier mot du titre. À propos : le fil du parcours (« … pas une ligne droite »), un looping, jusqu'à l'œillet du portrait. Travaux : un pointillé à couper (« … menés jusqu'au bout. »), une sinusoïde ample jusqu'au coin supérieur droit ; des ciseaux (symbole universel ✂ - - -, compris sans connaître le textile) la suivent une fois en coupant, et s'arrêtent ouverts aux 2/3 : le travail continue. Ciseaux grands et bien visibles (comme l'étiquette). Tracés calculés dans le navigateur ; mouvement réduit : état final. Écartés : le patron de couture (faisait « styliste »), le GIF (boucle infinie, invisible en sombre)

Pied de page — UNE clôture : « La suite » (propre à la page) + ligne fine identique partout, le tout dans <footer> (repère « contentinfo »)

.link / .link-arrow — bleu + souligné, trait épaissi au survol ; la flèche mime le geste (→ ↓ ↗ ↑) ; « étape suivante » alignée à droite

Liens et boutons : 6 familles, une par objectif (audit du 25/09). Chacune a son visage et sa place ; la couleur seule ne distingue jamais. Le cercle = un geste (aller, télécharger, écrire, monter, ouvrir) : il est partagé par « Agir » et « Outil », et c'est la mise en page qui dit la famille. Une ligne pleine largeur avec filet = une action ; une pastille à côté de ce qu'elle touche = un outil.

1. 1 · NaviguerChanger de page principale. Ordinateur : toujours visible, capitales grises, actif souligné bleu (NN/g : jamais de menu caché sur ordinateur). Mobile : logo · bouton « Menu » écrit en toutes lettres, qui déplie un panneau non modal (pages ≥ 48 px, page actuelle marquée, « Mode sombre »). Échap ferme ; sans JS, la navigation reste visible. Version anglaise En préparation : un sélecteur « EN » s'ajoutera à côté du logo (pages sous /en/).
2. 2 · RevenirRemonter d'un niveau. Un seul lien, à gauche : ←Tous les projets (case studies). Pas de fil d'Ariane : le site n'a que 2 niveaux. Entre projets voisins : « ← Précédent » à gauche, « Suivant → » à droite, le nom du projet en dessous (fin de chaque case study).
3. 3 · AgirL'action voulue. Principal : le bouton dessiné, un seul par écran. Secondaire : « La suite », libellé + icône du geste dans un cercle.
4. 4 · LireAller plus loin dans le contenu. Bleu souligné, la flèche mime le geste. Lien externe : ↗ + « (nouvel onglet) » annoncé, sur sa propre ligne sur mobile. Ouvrir un projet : le ticket (objet papier entier cliquable, flèche dans le cercle).
5. 5 · OutilAgir sur la page (haut de page, thème, copier, agrandir). Libellé + icône dans le cercle, jamais souligné au repos. Haut de page en bas à droite, sur chaque page (parti pris du 28/09 : l'utilisateur l'a vu partout, il le cherche aussi sur la page courte ; la cohérence prime sur la règle « seulement au-delà de ~4 écrans »). Exception assumée : le thème sur ordinateur est une icône seule (lune / soleil), car « Mode sombre » écrit dans la navigation se lirait comme une 5e page ; nom accessible « Mode sombre » + état annoncé ; sur mobile, le libellé est visible dans le menu.
6. 6 · S'informerLégal, coulisses. Discret : casse normale, petite taille, mais toujours bleu et souligné. Pied de page, à gauche.