Je dessine et je planifie mes projets sur du papier pointé. Le site est posé sur le même support, et cette page en donne les règles avant qu'elles passent sur le reste du portfolio.Le système de pierre.gumi.ch
01
Voix
Direct, créatif, sans jargon. J'adapte le propos à qui le lit.
Être direct et utile
J'adapte mon discours à l'interlocuteur et expose clairement les caractéristiques du sujet.
« Boostez votre ROI de 20 % avec cette structure de campagne Google Ads ciblée. »
« Notre méthode magique va faire exploser vos ventes sur les moteurs de recherche ! »
Écrire comme un humain
L'IA peut aider à écrire, mais tout ce qui trahit un texte généré doit disparaître : tirets cadratins, structures en miroir (« ce n'est pas X, c'est Y »), superlatifs creux, emojis décoratifs, listes surformatées. Le texte final doit sonner comme quelqu'un qui parle.
« Un objectif clair : créer de l'impact, pour l'utilisateur et pour l'entreprise. »
« Un objectif clair — créer de l'impact — pour l'utilisateur et l'entreprise. »
Partager le processus
Je communique efficacement les enjeux et les délais afin d'avoir un contexte clair.
« La V1 sera livrée mardi. Nous aurons besoin de vos retours avant jeudi midi. »
« On gère ça très vite, promis, ne vous inquiétez pas pour la suite. »
02
Le papier
Une feuille de papier pointé, celle des carnets sur lesquels je dessine mes projets. Les titres s'écrivent sur ses rangées, et tout ce qu'on pose dessus est opaque.
Une seule trame
Un halftone d'imprimeur. Les bords de page portent une trame pleine qui rétrécit vers le centre ; ce qui reste forme la grille. L'encre ne varie jamais, c'est la taille des points qui porte le ton.
20 × 18 pxLa trame pleine, celle des bandes de dégradé.
80 × 72 pxLa grille du milieu, une colonne et une rangée sur quatre. C'est elle qui porte les titres.
3 pxLe rayon du point de grille. Il monte à 7 px au sommet de la page, et gagne encore 2,5 px vers les bords gauche et droit.
250 pxLa hauteur des bandes denses, en haut comme en bas.
0,04L'encre du champ, identique sur toute la page.
La rangée d'un titre
La ligne de base de chaque titre tombe sur une rangée de la grille, et cette rangée est retracée à une encre de 0,18. C'est la section qui se décale pour que le titre y arrive, jamais le titre seul.
03
Couleurs
Une encre, un papier. La hiérarchie se fait à l'opacité, jamais en changeant de teinte. Le violet est réservé aux états interactifs.
L'échelle d'encre
Dix valeurs, chacune avec un emploi. Cliquez sur une ligne pour copier sa valeur.
Titres et texte fort1
Paragraphes et citations0,78
Introductions de section0,7
Annotations manuscrites0,62
Dates et mentions0,5
Légendes et texte éteint0,45
Filets et bordures0,14
Bordures internes0,12
Fonds de bloc0,035
Fonds légers0,022
Les deux thèmes
Le sombre n'est pas une inversion. Le papier devient un gris violacé, l'encre passe à l'ivoire, et le violet s'éclaircit pour garder son contraste.
Clair
Papier#F9F4EF
Encre#1A1A1A
Interaction#6B45C9
Sombre
Papier#1B1A1F
Encre#F1ECE4
Interaction#B49BFF
Le violet ne se voit qu'en réponse
Sur pierre.gumi.ch, la couleur apparaît à quatre endroits : l'entrée courante du rail, le focus clavier, le survol d'un lien, et l'icône d'un projet ouvert. Partout ailleurs, l'encre suffit. Survolez ces liens pour voir la règle à l'œuvre.
Urbanist pour tout ce qui est imprimé, Cedarville Cursive pour tout ce qui est écrit à la main par-dessus. Un titre ne porte aucune ponctuation finale.
Urbanist Black 900 · H1
Direct et créatif
Urbanist Bold 700 · H2
Outils et expérimentations
Urbanist Medium 500 · Corps
La variante Medium garantit une lisibilité maximale pour les interfaces et les descriptions d'outils. Propre, technique et fonctionnel. Chaque mot a sa place et l'épaisseur soutient le regard.
Cedarville Cursive 400 · Annotations
Ça, c'est écrit à la main.
05
Annotations
Ce que j'ajoute dans la marge d'un carnet après coup. En absolu, hors du flux et hors de l'arbre d'accessibilité : retirez-les, la mise en page ne bouge pas. Elles sont centrées ici pour être comparées.
Elle pointe vers l'élément
La flèche
Entouré après coup
Le mot entouré
Soulignée d'un trait
La note en marge
Une précision
L'astérisque
C'est moi !
La flèche courbe
Relire la pageRetirer le grain
La tâche, cochée ou non
Ces trois-làvont ensemble
L'accolade
à insérer ici
Le signe d'insertion
À revoir celui-là
Le trait ondulé
Les règles
Encre0,62. La même encre que la page, juste plus légère. Une note écrite à la main n'a pas de couleur à elle.
TailleUne note tient sur une ligne et ne se coupe jamais. Sa taille suit la largeur de la fenêtre, et tout ce qui la compose est exprimé en em : elle grandit d'un bloc.
PlacementEn absolu contre l'élément annoté, avec un décalage exprimé en em : au-dessus du bord haut pour la flèche, dans la marge gauche pour la note en marge, sur la ligne du nom pour l'astérisque.
Interactionpointer-events: none, sans exception. Une note ne se clique pas et ne masque jamais un lien qu'elle recouvre.
06
Icônes
Lucide, sans retouche. Grille de 24, trait de 2, extrémités et jonctions arrondies. La géométrie reste celle de la bibliothèque, ce qui garantit qu’une icône ajoutée plus tard tombe juste à côté des dix qui sont déjà là.
Les dix du site
Téléchargement, envoi, fichier, image, réglages, code, QR code, palette, expérimentation, lien. L’encre vient de currentColor : l’icône prend celle du texte qu’elle accompagne et suit le thème sans être redessinée.
Les trois tailles
26 px dans une carte ou un bouton, 32 px pour une action isolée, 40 px pour une zone entière comme le dépôt de fichier. Le trait suit l’échelle du dessin : il pèse 2,2 px à 26 px et 3,3 px à 40 px. Au-delà, il fait masse, et un grand format se traite avec un visuel.
26 px
32 px
40 px
07
Mouvement
Ce qui n'a pas été atteint est transparent et posé un cheveu plus bas. Rien n'est caché sans JavaScript, ni quand le système demande moins de mouvement.
0,6 s · cubic-bezier(0.16, 1, 0.3, 1)La courbe d'entrée. Rapide au départ, longue à s'arrêter.
0,85 remLa montée d'un élément qui entre. Un titre posé sur sa rangée ne monte pas : il ne peut que se révéler sur place.
70 msLe décalage entre deux voisins qui entrent ensemble, jusqu'au sixième. Au-delà, le dernier attendrait trop.
0,35 sLe fondu du papier, en une seule couche plutôt que sur ses milliers de points.
1,1 sLa durée du défilement adouci (Lenis), sur molette et tactile.
prefers-reduced-motionTout ce qui précède disparaît. La page s'affiche dans son état final dès le premier rendu, sans exception.
08
UI Kit
Le neumorphisme est retiré : un relief simulé suppose une lumière, le papier n'en a pas. Une forme pleine, un contour, ou rien. L'état se dit par la couleur de la bordure et du texte.
Déposez votre fichier ici
ou cliquez pour parcourir
Carte de projet
Un visuel, un titre, deux lignes. La bordure prend la couleur au survol, rien d'autre ne bouge.
Carte d'outil
Sans visuel, la carte se réduit à son filet et à son fond léger.
ContexteÉtiquetteÉtiquette
09
Images
Des photographies brutes, cadrées serré, sans filtre. Même rayon et même filet que les blocs.
10
Applications
Le système hors du site. Chaque rendu est composé en direct, aux dimensions exactes du fichier final. Ce sont des maquettes à recomposer, pas des exports.
Je fais tenir ensemble le catalogue, les contenus et leur diffusion.
Des outils conçus par curiosité, pour donner vie à des idées.
Image de partage1200 × 630 px
Avatar400 × 400 px
Ce qui ne change jamais
La trameElle garde son pas de 20 × 18 px en pixels réels, quelle que soit la taille du visuel. Une trame mise à l'échelle avec le cadre n'est plus la même matière.
L'encreElle monte à 0,13 hors du site, contre 0,04 sur la page. Un visuel se regarde à distance et souvent compressé : à 0,04 la trame disparaît.
Le logotypeToujours le fichier fourni, jamais retapé. C'est le seul endroit où le point de la marque subsiste.
11
Ressources
Les logos et les matières du système, à télécharger pour les adaptations de visuels.
Mot-symbole
Le logo principal, pour la navigation et les fonds clairs.
Lucide, sous licence ISC. Les dix icônes de la page en viennent, et toute icône ajoutée doit en venir aussi : c'est ce qui garantit qu'elle tombe sur la même grille.
