Design

Design analyse le système visuel d’une page ou d’un élément. Utilise le sélecteur de portée Page / Élément en haut. Quatre outils sont disponibles.

Couleurs#

• Palette de la page — chaque couleur utilisée, avec le nombre d’éléments qui l’utilisent, par catégorie : Texte, Fond, Bordure, SVG.
• Clique sur une pastille pour surligner les éléments qui l’utilisent (8 secondes, Échap pour arrêter).
• Copie une couleur en HEX, RGB, OKLCH ou variable CSS. Les variables CSS racine correspondantes sont affichées quand elles existent.
• Pipette — choisis n’importe quel pixel de la page (si le navigateur le permet), ou ajoute une couleur à la main.
• Contraste — vérifie une paire texte/fond selon les seuils WCAG : AA grand texte (3:1), AA normal (4,5:1), AAA normal (7:1). La paire peut être inversée et modifiée au clavier.
• Tokens — exporte la palette en variables CSS, SCSS, Tailwind ou JSON.

Les usages comptent les éléments par catégorie, pas les pixels. Dégradés, images et iframes sont exclus.

Figma apparaît dans le menu des formats de tokens avec la mention Bientôt. Il n’est pas encore disponible.

Typographie#

• Piles de polices de la page, avec police principale et polices de secours séparées, tailles × usages et graisses.
• Sources des polices, seulement quand elles sont confirmées : Google Fonts, @font-face, Locale, Système — ou Inconnue, sans deviner.
• Quelle est cette police ? — pointe n’importe quel texte pour lire sa typographie ; survole pour un aperçu temporaire ou clique pour le garder et le copier.
• Copie les variables ou les styles de texte observés, construits à partir des tokens atomiques.

Aucune police n’est téléchargée ni testée : les aperçus utilisent les polices disponibles sur ton appareil.

Mesure#

1. Clique sur Mesurer sur la page, puis sur un élément : il devient la référence.
2. Maintiens Alt et survole un autre élément pour voir l’écart. Dans un conteneur, tu obtiens les distances à ses bords.
3. Alt + clic enregistre cet écart dans le panneau.

Affiche la taille rendue, le padding, la bordure, la marge, la position relative au parent et l’échelle affichée des images. Unités : px ou rem. Appuie sur Échap pour arrêter.

Capture#

Quatre modes :

Mode	Ce qui est capturé
Élément	Un élément précis
Zone libre	Une zone cadrée à la souris (Maj garde les proportions, flèches : 1 px)
Écran visible	Ce que tu vois
Page entière	De l’en-tête au pied de page, défilée et assemblée

Formats : PNG, JPEG, WebP ou PDF. Options : délai (pour ouvrir un menu ou un survol), échelle, recadrage, hauteur maximale et chargement des images différées pour la page entière.

Les champs de formulaire, zones éditables et iframes sont masqués avant l’encodage. Les autres pixels ne sont pas analysés : vérifie l’image avant de la partager. Les captures restent sur ton appareil ; tu les enregistres ou les copies explicitement.