Système de design Thumbtack Thumbprint.

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

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

• 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

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Home project shortlist</title><style>
:root{--ink:#2b2d2f;--muted:#595c61;--line:#dddee1;--soft:#f5f6f6;--action:#0175a3;--selected:#f0faff}*{box-sizing:border-box}body{margin:0;padding:32px;font:400 16px/1.4 system-ui,sans-serif;color:var(--ink);background:white}h1{font-size:36px;line-height:1.05;letter-spacing:-.02em;margin:12px 0}h2{font-size:22px;margin:0 0 8px}p{margin:8px 0 20px}.eyebrow,.meta{font-size:14px;color:var(--muted)}header{display:grid;grid-template-columns:1fr 180px;gap:32px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:24px}svg{width:180px;height:120px}.filters{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:24px 0}select,button{font:inherit;border:1px solid var(--line);border-radius:8px;min-height:44px;padding:10px 16px;background:white;color:var(--ink)}label{display:flex;align-items:center;gap:8px}input{accent-color:var(--action);width:18px;height:18px}main{display:grid;grid-template-columns:2fr 1fr;gap:24px}.cards{display:grid;gap:16px}.card{padding:24px;border:1px solid var(--line);border-radius:12px;display:grid;grid-template-columns:48px 1fr auto;gap:16px;align-items:start}.avatar{display:grid;place-items:center;border-radius:50%;height:48px;background:var(--selected);color:var(--action);font-weight:700}.card p{margin:4px 0 12px}.card button[aria-pressed=true]{background:var(--selected);border-color:var(--action);color:var(--action)}.badge{display:inline-block;background:#eefbf4;color:#126a4b;padding:4px 8px;border-radius:6px;font-size:14px}aside{align-self:start;border:1px solid var(--line);border-radius:12px;padding:24px;background:var(--soft)}aside ul{padding-left:20px}aside li{margin:12px 0}.primary{background:var(--action);color:white;border-color:var(--action)}button{cursor:pointer}button:hover{border-color:var(--action)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #066286;outline-offset:3px}#notice{font-size:14px;color:#126a4b}footer{font-size:12px;color:var(--muted);margin-top:24px}#empty{padding:24px;border:1px dashed var(--line);border-radius:12px}[hidden]{display:none!important}@media(max-width:699px){body{padding:20px}header{grid-template-columns:1fr}header svg{display:none}h1{font-size:28px}main{grid-template-columns:1fr}.card{grid-template-columns:40px 1fr;padding:16px}.avatar{height:40px}.card button{grid-column:2;justify-self:start}}
</style><body><header><div><span class="eyebrow">HOME PROJECT / FICTIONAL DIRECTORY</span><h1>Find the right help for home</h1><p>Compare the details, then build a shortlist for a garden project.</p></div><svg viewBox="0 0 180 120" aria-hidden="true"><path d="M20 66 84 16l64 50v45H20z" fill="#e0f4fe"/><path d="m9 68 75-58 75 58" fill="none" stroke="#0175a3" stroke-width="5"/><path d="M65 110V70h38v40" fill="#fff" stroke="#066286" stroke-width="3"/><circle cx="146" cy="80" r="24" fill="#b0eacb"/><path d="M146 80v35" stroke="#126a4b" stroke-width="4"/></svg></header><div class="filters"><label>Project type <select id="category"><option value="all">All garden services</option><option value="design">Garden design</option><option value="care">Garden care</option></select></label><label><input id="available" type="checkbox">Available this week</label><span id="count" class="meta" aria-live="polite"></span></div><main><section aria-label="Service providers"><div id="cards" class="cards"></div><div id="empty" hidden><h2>No matching services</h2><p>Try a different project type or include later availability.</p><button id="reset">Reset filters</button></div></section><aside><h2>Project shortlist</h2><p class="meta">Saved only while this preview is open.</p><ul id="saved"></ul><p id="savedEmpty">Save a provider to compare your options.</p><button class="primary" id="review">Review shortlist</button><p id="notice" role="status"></p></aside></main><footer>Original HTML study using documented Thumbprint v2 primitives. System font fallback; no Thumbtack service, ratings or contact request.</footer><script>
const providers=[{id:'fern',name:'Fern & Field',type:'design',description:'Planting plans for small outdoor spaces.',timing:'This week',available:true,initials:'FF'},{id:'grove',name:'Grove Garden Care',type:'care',description:'Seasonal pruning, planting and routine care.',timing:'Next week',available:false,initials:'GG'},{id:'yard',name:'Yard Workshop',type:'design',description:'Practical layouts for shared courtyards.',timing:'This week',available:true,initials:'YW'}];const chosen=new Set();const $=id=>document.getElementById(id);
function render(){const shown=providers.filter(p=>($('category').value==='all'||p.type===$('category').value)&&(!$('available').checked||p.available));$('cards').replaceChildren(...shown.map(p=>{const card=document.createElement('article');card.className='card';card.innerHTML=`<span class="avatar" aria-hidden="true">${p.initials}</span><div><h2>${p.name}</h2><p>${p.description}</p><span class="badge">${p.timing}</span></div><button aria-pressed="${chosen.has(p.id)}" aria-label="${chosen.has(p.id)?'Remove':'Save'} ${p.name}">${chosen.has(p.id)?'Saved':'Save'}</button>`;card.querySelector('button').onclick=()=>{chosen.has(p.id)?chosen.delete(p.id):chosen.add(p.id);$('notice').textContent='';render()};return card}));$('count').textContent=`${shown.length} of ${providers.length} sample providers`;$('empty').hidden=shown.length>0;$('saved').replaceChildren(...providers.filter(p=>chosen.has(p.id)).map(p=>{const li=document.createElement('li');li.textContent=p.name;return li}));$('savedEmpty').hidden=chosen.size>0;}
$('category').onchange=render;$('available').onchange=render;$('reset').onclick=()=>{$('category').value='all';$('available').checked=false;render()};$('review').onclick=()=>{$('notice').textContent=chosen.size?`Shortlist ready: ${chosen.size} provider${chosen.size===1?'':'s'}. No contact request has been sent.`:'Save at least one provider first.'};render();
</script></body></html>