# Système de design Thumbtack Thumbprint ## Aperçu de l’interface du système de design Thumbtack Thumbprint Filtrez des services de jardinage fictifs, enregistrez des prestataires et consultez votre sélection locale. ## Référence de conception du système de design Thumbtack Thumbprint Référence des jetons publics Thumbprint v2 JavaScript ; valeurs relevées en octobre 2026. Dans l’exemple, les dimensions numériques sont converties en pixels CSS. ### Primitives de couleur et rôles de l’application | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | tpV2ColorGray50 | #f5f6f6 | Surface discrète de la sélection. | | tpV2ColorGray200 | #dddee1 | Contours de cartes et séparateurs. | | tpV2ColorGray600 | #595c61 | Détails secondaires sur fond blanc. | | tpV2ColorGray900 | #2b2d2f | Texte principal. | | tpV2ColorBlue50 | #f0faff | Surface du contrôle sélectionné. | | tpV2ColorBlue100 | #e0f4fe | Remplissage de l’illustration originale de maison. | | tpV2ColorBlue600 | #009fd9 | Primitive de référence ; à ne pas utiliser pour du petit texte blanc. | | tpV2ColorBlue700 | #0175A3 | Couleur d’action de l’application avec texte blanc. | | tpV2ColorBlue800 | #066286 | Contour de focus et trait de l’illustration. | | tpV2ColorGreen50 | #eefbf4 | Surface du libellé de disponibilité. | | tpV2ColorGreen200 | #b0eacb | Illustration décorative de jardin. | | tpV2ColorGreen700 | #126a4b | Texte de disponibilité. | ### Espacements et arrondis | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | tpV2SpaceXxsmall | 4 | Valeur numérique en pixels ; à utiliser pour l’espacement de la composition. | | tpV2SpaceXsmall | 8 | Valeur numérique en pixels ; à utiliser pour l’espacement de la composition. | | tpV2SpaceSmall | 12 | Valeur numérique en pixels ; à utiliser pour l’espacement de la composition. | | tpV2SpaceMedium | 16 | Valeur numérique en pixels ; à utiliser pour l’espacement de la composition. | | tpV2SpaceLarge | 20 | Valeur numérique en pixels ; à utiliser pour l’espacement de la composition. | | tpV2SpaceXlarge | 24 | Valeur numérique en pixels ; à utiliser pour l’espacement de la composition. | | tpV2SpaceXxlarge | 32 | Valeur numérique en pixels ; à utiliser pour l’espacement de la composition. | | tpV2CornerRadiusXsmall | 4 | Valeur numérique en pixels ; l’exemple utilise Medium pour les contrôles et Large pour les cartes. | | tpV2CornerRadiusSmall | 6 | Valeur numérique en pixels ; l’exemple utilise Medium pour les contrôles et Large pour les cartes. | | tpV2CornerRadiusMedium | 8 | Valeur numérique en pixels ; l’exemple utilise Medium pour les contrôles et Large pour les cartes. | | tpV2CornerRadiusLarge | 12 | Valeur numérique en pixels ; l’exemple utilise Medium pour les contrôles et Large pour les cartes. | | tpV2CornerRadiusXlarge | 16 | Valeur numérique en pixels ; l’exemple utilise Medium pour les contrôles et Large pour les cartes. | | tpV2CornerRadiusSides | 9999 | Valeur numérique en pixels ; l’exemple utilise Medium pour les contrôles et Large pour les cartes. | ### Typographie et mise en page adaptatives | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | tpV2BreakpointSmall | 481px | Seuil pour les petites mises en page. | | tpV2BreakpointMedium | 700px | L’exemple passe à deux colonnes à partir de ce seuil. | | tpV2BreakpointLarge | 1025px | Seuil pour les grandes mises en page. | | tpV2BreakpointSplitViewSmall | 769px | Seuil propre à la vue fractionnée, qui n’est pas synonyme de Medium. | | tpV2BreakpointSplitViewMedium | 1060px | Seuil pour une vue fractionnée plus large. | | tpV2FontTitle2Size | 28 | Taille du titre en pixels sur petit écran. | | tpV2FontTitle2ResponsiveSize | 36 | Taille du titre en pixels sur grand écran. | | tpV2FontTitle2LineHeight | 1.1 | Hauteur de ligne du titre sans unité ; indépendante du niveau sémantique du titre. | | tpV2FontText1Size | 16 | Taille du texte courant. | | tpV2FontText1LineHeight | 1.4 | Multiplicateur de hauteur de ligne du texte courant. | | tpV2FontWeightRegular | 400 | Texte courant normal. | | tpV2FontWeightBold | 700 | Emphase marquée avec la police de remplacement. | ## Guide complet du système de design Thumbtack Thumbprint Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Système de design Thumbtack Thumbprint : choisir une génération de jetons ### Distinguer v1 de v2 > Thumbprint expose les deux générations de jetons. Les noms des exports v2 commencent par tpV2 et comprennent une nouvelle gamme de gris, des valeurs de titre adaptatives et des graisses intermédiaires. La présence d’un composant natif documenté sous une route v1 ne prouve pas qu’il utilise ces valeurs v2. Avant de remplacer des styles partagés, consignez le package et la génération déjà utilisés par votre produit. ### Utilisez cet exemple comme étude de composition Cet exemple applique directement les primitives publiques à HTML, une création originale. Il n’encapsule pas ServiceCard et ne prétend pas offrir les mêmes fonctionnalités que l’application Thumbtack. Une implémentation native doit partir du package documenté API et ne remplacer les données par celles de véritables services qu’une fois les contrats de chargement, d’erreur et d’autorisation définis. ## Rôles chromatiques et choix du système de design Thumbtack Thumbprint ### Distinguez les actions, la sélection et la disponibilité Blue700 sert à l’action principale locale, Blue50 aux commandes enregistrées, et Green700 sur Green50 au texte de disponibilité. Gray900 met en valeur le nom du prestataire, tandis que Gray600 sert aux détails complémentaires. Ces correspondances sont des choix propres à l’application, fondés sur des primitives documentées, et non des noms de jetons sémantiques inventés. ### Ne vous fiez pas uniquement à la couleur pour indiquer les éléments présélectionnés Lorsqu’un prestataire est enregistré, le libellé du bouton et son état aria-pressed changent aussi, en plus de sa teinte. La disponibilité reste formulée en toutes lettres. Un filtre peut masquer un prestataire enregistré sans le supprimer de la sélection ; celle-ci reste visible afin que l’utilisateur comprenne la différence. ## Typographie et contenu du système de design Thumbtack Thumbprint ### Tenez compte des différences entre les versions typographiques Le guide typographique public répertorie Rise en graisses 400 et 700, ainsi qu’une ancienne échelle de titres adaptative. La page des jetons v2 comprend des tailles différentes et des graisses fractionnaires. Ne fusionnez pas ces valeurs pour créer un prétendu réglage par défaut unique. Cet aperçu utilise une police système de remplacement et des tailles explicites inspirées de l’échelle v2 ; Rise n’est pas redistribuée. ### Rédigez des détails qui facilitent la comparaison Chaque prestataire possède une catégorie de service, une brève description et un libellé de disponibilité facile à lire. L’annuaire omet volontairement les nombres d’avis, les notes et les prix inventés. Dans une véritable place de marché, ces valeurs doivent avoir une provenance fiable et des unités clairement indiquées ; des étoiles décoratives inspireraient une confiance injustifiée au lieu d’apporter des informations utiles. ## Cartes, espacements et mise en page adaptative du système de design Thumbtack Thumbprint ### Regroupez les informations de comparaison Les cartes de prestataires utilisent un remplissage de 24px, un espacement interne de 16px et un rayon de coin de 12px. Les initiales sont décoratives ; le titre adjacent constitue le nom accessible. La carte entière n’est pas transformée en lien imbriqué. L’enregistrement reste une action distincte, ce qui évitera qu’un futur lien vers le profil n’absorbe le comportement de sélection. ### Empilez les éléments présélectionnés sur les petits écrans À 700px, la mise en page place la sélection sous les résultats. Sur les écrans étroits, l’action d’enregistrement passe sous le texte et l’illustration décorative de maison est masquée. L’en-tête conserve tout son sens. Aucun panneau à hauteur fixe ne tronque les descriptions des prestataires ni ne force l’aperçu à occuper la hauteur de la fenêtre. ## Filtres et états de sélection du système de design Thumbtack Thumbprint ### Gardez les filtres et les éléments enregistrés indépendants Le menu de catégorie et la case à cocher de disponibilité filtrent les trois entrées rédigées à l’avance. Le choix « Entretien du jardin » et « Disponible cette semaine » ne donne aucun résultat et propose une action de réinitialisation. Les entrées enregistrées auparavant restent dans la sélection, car filtrer ne signifie pas supprimer. Cette règle est visible dans le code source et peut être vérifiée sans backend. ### Présentez honnêtement le résultat de la vérification Si la sélection est vide, la vérification explique la marche à suivre. Sinon, elle indique le nombre d’éléments et précise que l’opération reste locale. La modification d’un élément enregistré efface ce résultat pour qu’une confirmation obsolète ne décrive pas une sélection différente. L’exemple ne prétend jamais contacter un professionnel. ## Navigation au clavier et sélection accessible du système de design Thumbtack Thumbprint ### Utilisez la sémantique native des commandes Un menu déroulant avec libellé permet de choisir une catégorie, et une case à cocher avec libellé gère un critère booléen. Chaque bouton d’enregistrement possède un nom accessible propre au prestataire et un attribut aria-pressed. Le nombre de résultats utilise une région dynamique avec annonce polie ; le message de vérification utilise la sémantique status. Le focus clavier reste visible, même en l’absence de survol. ### Utilisez de véritables titres et des hauteurs flexibles Dans l’exemple, les noms des prestataires sont des éléments h2, et non des plages en gras. Les initiales et le SVG décoratif original sont exclus de l’arbre d’accessibilité. Les noms et descriptions longs doivent revenir à la ligne sans repousser l’action hors écran ; le zoom du texte nécessite des rangées flexibles plutôt qu’une troncature. ## Implémentation complète du système de design Thumbtack Thumbprint ### Exécutez et examinez l’exemple complet Enregistrez l’exemple HTML sous le nom index.html et servez le dossier qui le contient. Il comprend CSS et JavaScript intégrés, ne nécessite aucune installation de package ni connexion réseau. Les trois entrées et l’objet Set de sélection sont explicites, ce qui permet d’adapter le comportement sans rétroconcevoir un bundle généré. 1. Enregistrez le fichier HTML complet. 2. Servez-le localement et ouvrez-le dans un navigateur. 3. Appliquez un filtre pour obtenir zéro résultat, puis réinitialisez-le. 4. Enregistrez deux prestataires, vérifiez la sélection, puis supprimez-en un. ### Passez délibérément aux composants natifs Lors de la migration vers la bibliothèque React, consultez la documentation à jour de ServiceCard, Button et des styles typographiques pour connaître la génération exacte utilisée. Conservez le modèle d’état de cet exemple s’il convient au produit, mais remplacez le balisage original par des API vérifiées. Ne copiez pas les valeurs v2 dans des composants v1 sans effectuer de vérifications de régression visuelle et clavier. ## Transmission à l’agent et revue du système de design Thumbtack Thumbprint ### Confiez à l’agent une tâche bien délimitée Demandez un écran de comparaison de services à domicile utilisant la génération Thumbprint sélectionnée, en indiquant explicitement les URL des sources et des entrées fictives locales uniquement. Préservez la distinction entre filtrage et sélection. Fournissez l’exemple complet comme référence comportementale et précisez si des composants natifs React ou des HTML indépendants sont attendus. ### Examinez les cas d’échec Vérifiez les résultats vides, l’absence de présélection, plusieurs prestataires enregistrés, la suppression après examen, les noms longs et les écrans étroits. Une capture d’écran de trois cartes attrayantes ne prouve rien sur ces interactions. Comparez le tableau des jetons à la source épinglée avant de déployer une modification dans un thème partagé. - La sélection est conservée pendant le filtrage. - Modifier la présélection efface l’ancienne confirmation. - Aucune note ni aucun résultat de contact n’est inventé. ## Exemples de composants du système de design Thumbtack Thumbprint ### Présélection complète pour un projet à domicile Exemple HTML/CSS/JavaScript original et autonome, avec filtres, état de sélection, récupération après un résultat vide et examen local. ``` Home project shortlist
HOME PROJECT / FICTIONAL DIRECTORY

Find the right help for home

Compare the details, then build a shortlist for a garden project.

``` Référence du code - Enregistrez sous index.html. Aucun environnement d’exécution natif de Thumbprint n’est utilisé. ## Configuration de l’agent du système de design Thumbtack Thumbprint ### Point de départ de l’implémentation Aucun package ni identifiant API requis. Cet exemple est une étude d’application locale. ``` # Save the complete HTML example as index.html python3 -m http.server 8080 # Open http://localhost:8080 ``` ### Un prompt pour votre projet ``` Créez un écran de comparaison de services à l’aide des valeurs Thumbprint v2 de ce guide. Conservez une présélection locale pendant le filtrage, prévoyez un état de récupération quand aucun résultat ne correspond et synchronisez les commentaires de l’examen avec la sélection. Utilisez des fiches fictives et du HTML sémantique natif, sauf si un package Thumbprint React vérifié est explicitement choisi. Ne mélangez pas les hypothèses de composants de v1 avec les noms de jetons de v2. ``` ## Sources et périmètre du système de design Thumbtack Thumbprint Un guide d’application OpenDesign pour Thumbprint. L’exemple de référence est un HTML original qui utilise certaines valeurs de v2, et non la bibliothèque native React de Thumbtack. Le guide typographique public décrit une ancienne échelle, présentée séparément de la référence des jetons v2 sur cette page. Tous les prestataires sont fictifs. - Référence des jetons v2 Valeurs concrètes et noms d’exportation propres à chaque génération. - Guide typographique Rise et l’ancienne échelle typographique documentée séparément. - Documentation de Service Card Référence des composants natifs ; la route v1 ne garantit pas la compatibilité avec v2. ## Ressources associées au système de design Thumbtack Thumbprint ### Twilio Paste Rédigez une notification avec le thème et les conventions de boutons de Paste, une échelle d’espacement vérifiée et une distinction claire entre la modification, la révision et l’envoi effectif d’un message. ### Visa Product système de design Utilisez Visa Nova CSS pour créer un choix clair de format de relevé, avec des boutons radio natifs, un en-tête dans une couleur différente et un récapitulatif de révision. Examinez les valeurs exactes du thème 1.6.5, l’espacement évolutif et l’intégration complète de la feuille de style. ### Volvo Cars Web système de design Examinez la base web de Volvo Cars, axée sur HTML, ses véritables tokens en mode clair et le style natif de ses cartes sélectionnables dans un exemple complet de préparation de bagages, avec des choix indépendants, le changement de thème et la réinitialisation. - [Référence de mise en œuvre](https://thumbprint.design/tokens/v2/javascript) - [Source](https://thumbprint.design/tokens/v2/javascript) - [Référence du code](https://thumbprint.design/tokens/v2/javascript) - [Référence des jetons v2 Valeurs concrètes et noms d’exportation propres à chaque génération.](https://thumbprint.design/tokens/v2/javascript) - [Guide typographique Rise et l’ancienne échelle typographique documentée séparément.](https://thumbprint.design/guidelines/typography) - [Documentation de Service Card Référence des composants natifs ; la route v1 ne garantit pas la compatibilité avec v2.](https://thumbprint.design/components/service-card/v1/usage)