Readout

Un bookmarklet qui relève le design system de la page où vous êtes. Échelle typographique, palette, espacements, points de rupture déclarés, et les couples de couleurs qui échouent au contraste. Tout tourne dans votre navigateur, rien n’est envoyé nulle part.

À installer une fois

Glissez ceci dans votre barre de favoris :

Readout

Ouvrez ensuite n’importe quelle page et cliquez dessus. Le panneau s’ouvre à droite ; « Copier le JSON » met le relevé entier dans le presse-papiers, et le coller plus bas l’affiche en entier.

Si un site le bloque

Les sites stricts refusent les scripts qu’ils n’ont pas servis eux-mêmes. Ouvrez la console et collez ceci à la place :

Lire la source →

Coller un relevé

Collez le JSON ici. Rien n’est envoyé : le rapport est rendu dans cette page.

Ce qu’il relève

  • L’échelle typographique. Chaque taille qui rend réellement du texte, avec ses graisses, ses interlignes, son interlettrage en em, et un extrait du texte à cette taille. Pas les tailles déclarées dans la feuille de style : celles que la page utilise.
  • La palette. Couleurs de texte, de fond et de bordure, classées par fréquence : les trois vraies couleurs se détachent des quarante accidents.
  • Le contraste. Chaque couple tel qu’il est rendu, face à son vrai fond — le premier ancêtre qui peint quelque chose — avec le seuil AA correspondant à la taille du texte. C’est la section que les gens capturent.
  • La mise en page. La largeur de contenu la plus répétée, la marge de page, les valeurs d’espacement en usage, les arrondis et les gabarits de grille.
  • Les points de rupture déclarés. Lus dans les feuilles de style elles-mêmes, les `rem` convertis en px, comptés par le nombre de règles qui en dépendent.
  • Les fichiers de police. Ce que la page a réellement téléchargé, et ce que ça pesait.

Pourquoi ces chiffres sont fiables

Les animations d’apparition démarrent les éléments décalés et les posent en place. Mesurez pendant l’une d’elles et chaque position relevée inclut ce décalage — c’est ainsi qu’on obtient une reproduction fidèle de l’état *animé*, fausse partout, tenue par des constantes qui s’annulent par chance.

Le script neutralise donc transformations, transitions et animations avant toute mesure, puis les remet. Les éléments masqués à cet instant sont exclus et comptés, plutôt que fondus dans le total sans le dire. Les feuilles de style servies par un autre domaine sans CORS sont illisibles : le rapport dit combien, au lieu d’avoir l’air complet.

J’ai écrit cette méthode en reconstruisant ce site depuis son original Framer, où elle faisait la différence entre l’exactitude au pixel et le vraisemblable.

Lire l’article →

Où vont les données

Nulle part. Le script tourne dans votre navigateur, le panneau est dessiné dans un shadow root sur la page mesurée, et cette page analyse le JSON collé sans l’envoyer ailleurs. Pas de compte, pas d’endpoint, pas de journal. Le relevé contient en revanche de courts extraits de texte de la page mesurée : traitez-le comme une capture d’écran avant de le publier.

Si le relevé vous a montré quelque chose qui ne vous plaît pas

Reconstruire un site sorti d’un outil no-code, ou mettre un vrai design system dessous, c’est une bonne part de ce que je fais. Les mesures ci-dessus sont la première heure de ce travail.

Écrivez-moi

Contact

Envie de donner corps à un projet, ou simplement d’en parler ? Écrivez-moi, on fera quelque chose qui reste.

Je suis là pour écouter, travailler avec vous, et trouver des réponses de design qui tiennent.

simongaspar@pm.meVoir le CV