# Sistema di progettazione Thumbtack Thumbprint ## Anteprima dell’interfaccia del sistema di progettazione sistema di design Thumbtack Thumbprint Filtra servizi di giardinaggio fittizi, salva i fornitori e rivedi la selezione locale. ## Riferimento di progettazione del sistema di progettazione sistema di design Thumbtack Thumbprint Riferimento ai token pubblici v2 di Thumbprint JavaScript; valori consultati nell’ottobre 2026. Le dimensioni numeriche sono convertite in pixel CSS nell’esempio. ### Primitive cromatiche e ruoli dell’applicazione | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | tpV2ColorGray50 | #f5f6f6 | Superficie discreta per la selezione. | | tpV2ColorGray200 | #dddee1 | Bordi delle schede e divisori. | | tpV2ColorGray600 | #595c61 | Dettagli secondari su sfondo bianco. | | tpV2ColorGray900 | #2b2d2f | Testo principale. | | tpV2ColorBlue50 | #f0faff | Superficie del controllo selezionato. | | tpV2ColorBlue100 | #e0f4fe | Riempimento dell’illustrazione originale della casa. | | tpV2ColorBlue600 | #009fd9 | Primitiva di riferimento; non usare per testo bianco di piccole dimensioni. | | tpV2ColorBlue700 | #0175A3 | Colore delle azioni dell’applicazione con testo bianco. | | tpV2ColorBlue800 | #066286 | Contorno di focus e tratto dell’illustrazione. | | tpV2ColorGreen50 | #eefbf4 | Superficie dell’etichetta di disponibilità. | | tpV2ColorGreen200 | #b0eacb | Illustrazione decorativa del giardino. | | tpV2ColorGreen700 | #126a4b | Testo della disponibilità. | ### Spaziatura e angoli | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | tpV2SpaceXxsmall | 4 | Valore numerico in pixel; da usare per la spaziatura della composizione. | | tpV2SpaceXsmall | 8 | Valore numerico in pixel; da usare per la spaziatura della composizione. | | tpV2SpaceSmall | 12 | Valore numerico in pixel; da usare per la spaziatura della composizione. | | tpV2SpaceMedium | 16 | Valore numerico in pixel; da usare per la spaziatura della composizione. | | tpV2SpaceLarge | 20 | Valore numerico in pixel; da usare per la spaziatura della composizione. | | tpV2SpaceXlarge | 24 | Valore numerico in pixel; da usare per la spaziatura della composizione. | | tpV2SpaceXxlarge | 32 | Valore numerico in pixel; da usare per la spaziatura della composizione. | | tpV2CornerRadiusXsmall | 4 | Valore numerico in pixel; nell’esempio si usa Medium per i controlli e Large per le schede. | | tpV2CornerRadiusSmall | 6 | Valore numerico in pixel; nell’esempio si usa Medium per i controlli e Large per le schede. | | tpV2CornerRadiusMedium | 8 | Valore numerico in pixel; nell’esempio si usa Medium per i controlli e Large per le schede. | | tpV2CornerRadiusLarge | 12 | Valore numerico in pixel; nell’esempio si usa Medium per i controlli e Large per le schede. | | tpV2CornerRadiusXlarge | 16 | Valore numerico in pixel; nell’esempio si usa Medium per i controlli e Large per le schede. | | tpV2CornerRadiusSides | 9999 | Valore numerico in pixel; nell’esempio si usa Medium per i controlli e Large per le schede. | ### Tipografia e layout adattivi | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | tpV2BreakpointSmall | 481px | Soglia per layout ridotti. | | tpV2BreakpointMedium | 700px | A questa soglia l’esempio passa a due colonne. | | tpV2BreakpointLarge | 1025px | Soglia per layout ampi. | | tpV2BreakpointSplitViewSmall | 769px | Soglia specifica per la vista divisa, non sinonimo di Medium. | | tpV2BreakpointSplitViewMedium | 1060px | Soglia per viste divise più ampie. | | tpV2FontTitle2Size | 28 | Dimensione in pixel del titolo sugli schermi piccoli. | | tpV2FontTitle2ResponsiveSize | 36 | Dimensione in pixel del titolo sugli schermi più grandi. | | tpV2FontTitle2LineHeight | 1.1 | Interlinea senza unità del titolo, indipendente dal livello semantico dell’intestazione. | | tpV2FontText1Size | 16 | Dimensione del testo del corpo. | | tpV2FontText1LineHeight | 1.4 | Moltiplicatore dell’interlinea del corpo. | | tpV2FontWeightRegular | 400 | Testo regolare del corpo. | | tpV2FontWeightBold | 700 | Enfasi marcata con il font di riserva. | ## Guida completa al sistema di progettazione sistema di design Thumbtack Thumbprint Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## 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 Il layout cambia a 700px, spostando la selezione sotto i risultati. Alle larghezze ridotte, l’azione di salvataggio si sposta sotto il testo e l’illustrazione decorativa della casa viene nascosta. L’intestazione mantiene comunque tutte le informazioni. Nessun pannello ad altezza fissa taglia le descrizioni dei fornitori o forza un’anteprima vuota alta quanto la finestra. ## 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 Verifica i risultati vuoti, la selezione vuota, più fornitori salvati, la rimozione dopo il riepilogo, i nomi lunghi e le schermate strette. Uno screenshot con tre schede accattivanti non dimostra nessuna di queste interazioni. Prima di applicare una modifica a un tema condiviso, confronta la tabella dei token con la fonte fissata. - 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 ### Selezione completa per progetti domestici Esempio originale e autonomo con HTML/CSS/JavaScript, filtri, stato di selezione, recupero dai risultati vuoti e riepilogo locale. ``` Home project shortlist
HOME PROJECT / FICTIONAL DIRECTORY

Find the right help for home

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

``` Riferimento del codice - Salva come index.html. Non viene usato il runtime dei componenti nativi Thumbprint. ## Configurazione degli agenti per il sistema di progettazione sistema di design Thumbtack Thumbprint ### Punto di partenza per l’implementazione Non servono pacchetti né credenziali API. L’esempio è uno studio applicativo locale. ``` # Save the complete HTML example as index.html python3 -m http.server 8080 # Open http://localhost:8080 ``` ### Un prompt per il tuo progetto ``` Crea una schermata per confrontare servizi usando i valori Thumbprint v2 riportati in questa guida. Mantieni una selezione locale durante il filtraggio, includi uno stato per recuperare dai risultati vuoti e tieni il feedback del riepilogo sincronizzato con la selezione. Usa profili fittizi e HTML semantici nativi, a meno che non venga scelto esplicitamente un pacchetto React Thumbprint verificato. Non mescolare le ipotesi sui componenti v1 con i nomi dei token v2. ``` ## Fonti e ambito del sistema di progettazione sistema di design Thumbtack Thumbprint Una guida applicativa OpenDesign a Thumbprint. L’esempio operativo è realizzato con HTML originali e alcuni valori v2 selezionati; non usa la libreria nativa React di Thumbtack. La guida pubblica sulla tipografia descrive una scala precedente, qui tenuta separata dal riferimento ai token v2. Tutti i fornitori sono fittizi. - Riferimento ai token v2 Valori concreti e nomi di esportazione specifici per versione. - Guida alla tipografia Rise e la scala tipografica precedente documentata separatamente. - Documentazione di Service Card Riferimento ai componenti nativi; il percorso v1 non implica compatibilità con v2. ## Risorse correlate al sistema di progettazione sistema di design Thumbtack Thumbprint ### Twilio Paste Componi una bozza di notifica con il tema e le convenzioni dei pulsanti di Paste, una scala di spaziatura verificata e una distinzione chiara tra la modifica, la revisione e l’invio effettivo di un messaggio. ### Visa Product sistema di design Usa Nova CSS di Visa per creare una preferenza chiara nel formato dell’estratto conto, con controlli radio nativi, intestazione di colore alternativo e riepilogo di revisione. Esamina i valori esatti del tema 1.6.5, la spaziatura scalabile e l’integrazione completa del foglio di stile. ### Volvo Cars Web sistema di design Esamina le fondamenta web di Volvo Cars, basate innanzitutto su HTML, i token effettivi della modalità chiara e lo stile nativo delle schede selezionabili attraverso un esempio completo di piano per fare i bagagli, con scelte indipendenti, cambio di tema e ripristino. - [Riferimento per l’implementazione](https://thumbprint.design/tokens/v2/javascript) - [Fonte](https://thumbprint.design/tokens/v2/javascript) - [Riferimento del codice](https://thumbprint.design/tokens/v2/javascript) - [Riferimento ai token v2 Valori concreti e nomi di esportazione specifici per versione.](https://thumbprint.design/tokens/v2/javascript) - [Guida alla tipografia Rise e la scala tipografica precedente documentata separatamente.](https://thumbprint.design/guidelines/typography) - [Documentazione di Service Card Riferimento ai componenti nativi; il percorso v1 non implica compatibilità con v2.](https://thumbprint.design/components/service-card/v1/usage)