Sistema di progettazione Thumbtack Thumbprint.

Scegli una generazione di token per il sistema di progettazione sistema di design Thumbtack Thumbprint

Mantieni distinte v1 e v2

Thumbprint espone entrambe le generazioni di token. I nomi delle esportazioni v2 iniziano con tpV2 e includono una nuova scala di grigi, valori adattivi per i titoli e pesi intermedi dei font. Un componente nativo documentato in una sezione v1 non dimostra che utilizzi quei valori v2. Prima di sostituire gli stili condivisi, annota quale pacchetto e quale generazione usa già il tuo prodotto.

Usa questo esempio per studiare la composizione

Questo esempio applica direttamente a HTML primitive pubbliche. Non incorpora ServiceCard e non dichiara di offrire le stesse funzionalità dell’applicazione Thumbtack. Un’implementazione nativa dovrebbe partire dal pacchetto documentato API e sostituire i dati di esempio con dati reali dei servizi solo dopo aver definito i contratti di caricamento, errore e autorizzazione.

Ruoli cromatici e selezione nel sistema di progettazione sistema di design Thumbtack Thumbprint

Distingui azione, selezione e disponibilità

Blue700 è usato per l’azione locale principale, Blue50 per i controlli salvati e Green700 su Green50 per il testo della disponibilità. Gray900 ospita il nome del fornitore, mentre Gray600 è riservato ai dettagli di supporto. Sono scelte dell’applicazione basate su primitive documentate, non nomi di token semantici inventati.

Non affidare la selezione ai soli colori

Quando un fornitore viene salvato, cambiano l’etichetta del pulsante e lo stato aria-pressed, oltre alla tonalità. La disponibilità resta espressa con una fascia oraria. Il filtro può nascondere un fornitore salvato senza rimuoverlo dalla selezione; l’elenco rimane visibile, così l’utente può capire la differenza.

Tipografia e contenuti nel sistema di progettazione sistema di design Thumbtack Thumbprint

Considera le differenze tipografiche tra le versioni

La guida tipografica pubblica indica Rise nei pesi 400 e 700 e una scala adattiva dei titoli meno recente. La pagina dei token v2 include dimensioni diverse e pesi frazionari. Non combinarli creando un unico valore predefinito inesistente. Questa anteprima usa un font di sistema di riserva, con dimensioni esplicite ispirate alla scala v2, e non ridistribuisce Rise.

Descrivi i dettagli utili al confronto

Ogni fornitore ha una categoria di servizio, una breve descrizione e un’indicazione leggibile della disponibilità. La directory omette intenzionalmente conteggi di recensioni, valutazioni e prezzi inventati. In un vero mercato, questi valori richiedono una provenienza e unità di misura affidabili; stelle decorative darebbero un’impressione ingannevole di affidabilità anziché informazioni utili.

Schede, spaziatura e layout adattivo nel sistema di progettazione sistema di design Thumbtack Thumbprint

Mantieni vicini i dettagli utili al confronto

Le schede dei fornitori usano una spaziatura interna di 24px, una distanza interna di 16px e un raggio degli angoli di 12px. Le iniziali sono decorative; l’intestazione accanto costituisce il nome accessibile. Le schede non trasformano l’intera superficie in un collegamento annidato. Il salvataggio resta un pulsante distinto, evitando che un futuro collegamento al profilo inglobi il comportamento di selezione.

Disponi la selezione in colonna sugli schermi stretti

Stati di filtro e selezione del sistema di progettazione sistema di design Thumbtack Thumbprint

Mantieni indipendenti i filtri e lo stato degli elementi salvati

Il menu a discesa delle categorie e la casella di controllo della disponibilità filtrano i tre profili creati. Selezionando Cura del giardino e Disponibile questa settimana non si ottiene alcun risultato e viene mostrata un’azione per ripristinare i filtri. I profili salvati in precedenza restano nella selezione, perché filtrare non significa eliminare. Questa regola è visibile nel codice sorgente e verificabile senza backend.

Fai in modo che l’azione di riepilogo dia un riscontro veritiero

Se la selezione è vuota, il riepilogo spiega cosa fare. Se contiene elementi, ne indica il numero e specifica che l’operazione resta locale. Quando si modifica un elemento salvato, il messaggio viene cancellato, così una conferma non più aggiornata non descrive una selezione diversa. L’esempio non afferma mai di contattare un professionista.

Selezione accessibile da tastiera nel sistema di progettazione sistema di design Thumbtack Thumbprint

Usa semantiche native per i controlli

Un menu a discesa con etichetta consente di scegliere la categoria e una casella di controllo con etichetta gestisce il vincolo booleano. Ogni pulsante di salvataggio ha un nome accessibile specifico per il fornitore e l’attributo aria-pressed. Il conteggio dei risultati usa un’area live con annuncio cortese; il feedback del riepilogo usa la semantica status. Il focus da tastiera è visibile anche senza passare il puntatore.

Usa intestazioni effettive e altezze flessibili

I nomi dei fornitori sono elementi h2 all’interno dell’esempio, non span in grassetto. Le iniziali e l’SVG decorativo originale sono esclususi dall’albero di accessibilità. I nomi e le descrizioni lunghi devono andare a capo senza spingere l’azione fuori dallo schermo; con lo zoom del testo servono righe flessibili, non testo troncato.

Implementazione completa del sistema di progettazione sistema di design Thumbtack Thumbprint

Esegui e verifica l’esempio completo

Salva l’esempio HTML come index.html e servi la cartella che lo contiene. Include CSS e JavaScript inline, senza installazione di pacchetti né dipendenze di rete. I tre profili e l’insieme Set per la selezione sono espliciti, così puoi adattare il comportamento senza dover decodificare un bundle generato.

1. Salva il file HTML completo.
2. Servilo in locale e aprilo in un browser.
3. Filtra fino a non ottenere risultati, quindi ripristina i filtri.
4. Salva due fornitori, consulta il riepilogo e poi rimuovine uno.

Passa ai componenti nativi in modo consapevole

Quando passi alla libreria React, consulta la documentazione aggiornata di ServiceCard, Button e della tipografia per la versione esatta in uso. Se è adatto al prodotto, mantieni il modello di stato di questo esempio, ma sostituisci il markup originale con API verificate. Non applicare i valori v2 ai componenti v1 senza verifiche di regressione visive e da tastiera.

Passaggio di consegne e revisione per agenti del sistema di progettazione sistema di design Thumbtack Thumbprint

Assegna all’agente un’attività ben delimitata

Chiedi di creare una schermata per confrontare servizi domestici usando la versione selezionata di Thumbprint, con URL delle fonti espliciti e profili fittizi salvati solo in locale. Mantieni distinta la logica dei filtri da quella della selezione. Fornisci l’esempio completo come riferimento per il comportamento e specifica se sono previsti componenti nativi React o HTML indipendenti.

Esamina i casi di errore

• Gli elementi salvati restano tali anche dopo il filtraggio.
• Modificare la selezione cancella le conferme precedenti.
• Non vengono inventate valutazioni né esiti di contatti.

Esempi di componenti del sistema di progettazione sistema di 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>