Sistema de design Thumbtack Thumbprint.

Escolha uma geração de tokens do sistema de design Thumbtack Thumbprint

Mantenha v1 e v2 separados

O Thumbprint oferece duas gerações de tokens. Os nomes das exportações v2 começam com tpV2 e incluem uma nova escala de cinzas, valores responsivos para títulos e pesos intermediários de fonte. Um componente nativo documentado em uma rota v1 não comprova que ele usa esses valores v2. Antes de substituir estilos compartilhados, registre qual pacote e geração seu produto já utiliza.

Use este exemplo como estudo de composição

Este exemplo aplica primitivas públicas diretamente a HTML original. Ele não encapsula ServiceCard nem alega paridade de recursos com o aplicativo Thumbtack. Uma implementação nativa deve começar pelo pacote documentado API e só substituir os dados por serviços reais depois que os contratos de carregamento, erro e permissão estiverem definidos.

Papéis de cor e seleção no sistema de design Thumbtack Thumbprint

Separe ação, seleção e disponibilidade

Blue700 é usado na ação local principal, Blue50 nos controles salvos e Green700 sobre Green50 no texto de disponibilidade. Gray900 identifica o nome do prestador, enquanto Gray600 exibe detalhes complementares. Esses mapeamentos são escolhas da aplicação com base em primitivas documentadas, não nomes de tokens semânticos inventados.

Não dependa apenas da cor para indicar itens selecionados

Quando um prestador é salvo, o rótulo do botão e o estado aria-pressed também mudam, além da tonalidade. A disponibilidade continua expressa como um período. A filtragem pode ocultar um prestador salvo sem removê-lo da lista de selecionados; a lista permanece visível para que o usuário entenda essa diferença.

Tipografia e conteúdo do sistema de design Thumbtack Thumbprint

Respeite as diferenças tipográficas entre versões

O guia público de tipografia lista Rise nos pesos 400 e 700 e uma escala responsiva de títulos mais antiga. A página de tokens v2 inclui tamanhos e pesos fracionários diferentes. Não combine essas especificações como se fossem um único padrão. Esta prévia usa uma fonte de sistema alternativa, com tamanhos explícitos inspirados na escala v2, e não redistribui Rise.

Escreva detalhes que ajudem na comparação

Cada prestador tem uma categoria de serviço, uma descrição breve e um rótulo de disponibilidade legível. O diretório omite intencionalmente quantidades de avaliações, notas e preços fictícios. Em um marketplace real, esses valores precisam ter origem confiável e unidades definidas; estrelas decorativas transmitiriam uma confiança indevida em vez de informações úteis.

Cartões, espaçamento e layout responsivo do sistema de design Thumbtack Thumbprint

Mantenha juntos os detalhes usados na comparação

Os cartões dos prestadores usam preenchimento de 24px, espaçamento interno de 16px e canto de 12px. As iniciais são decorativas; o título adjacente é o nome acessível. O cartão inteiro não se transforma em um link aninhado. Salvar continua sendo uma ação separada, evitando que um futuro link para o perfil interfira na seleção.

Empilhe a lista de selecionados em telas estreitas

Estados de filtragem e lista de selecionados no sistema de design Thumbtack Thumbprint

Mantenha os filtros e o estado dos itens salvos independentes

O seletor de categoria e a caixa de seleção de disponibilidade filtram os três registros criados para o exemplo. Selecionar Garden care e Available this week resulta em uma lista vazia e oferece uma ação para limpar os filtros. Os registros salvos anteriormente permanecem na lista de selecionados, pois filtrar não significa excluir. Essa regra está visível no código-fonte e pode ser verificada sem um backend.

Apresente um resultado claro para a ação de revisão

Ao revisar uma lista vazia, explique o que fazer em seguida. Para uma lista com itens, informe a quantidade e deixe explícito que a ação permanece local. Alterar um item salvo limpa esse resultado, evitando que uma confirmação desatualizada descreva uma lista diferente. O exemplo nunca afirma que entrará em contato com um profissional.

Teclado e seleção acessível no sistema de design Thumbtack Thumbprint

Use semântica nativa nos controles

Um seletor identificado por rótulo permite escolher a categoria, e uma caixa de seleção identificada por rótulo controla uma condição booleana. Cada botão de salvar tem um nome acessível específico para o prestador e aria-pressed. A quantidade de resultados usa uma região dinâmica com anúncio educado; o feedback da revisão usa a semântica status. O foco do teclado permanece visível independentemente do estado de foco do ponteiro.

Use títulos reais e alturas flexíveis

Os nomes dos prestadores são elementos h2 no exemplo, não trechos em negrito. As iniciais e o SVG decorativo original ficam fora da árvore de acessibilidade. Nomes e descrições longos devem quebrar linha sem deslocar a ação para fora da tela; o zoom de texto exige linhas flexíveis, não texto truncado.

Implementação completa do sistema de design Thumbtack Thumbprint

Execute e inspecione o exemplo completo

Salve o exemplo HTML como index.html e disponibilize a pasta que o contém. Ele inclui CSS e JavaScript em linha, não requer instalação de pacotes nem depende da rede. Os três registros e o Set de seleção são explícitos, para que o comportamento possa ser adaptado sem engenharia reversa de um bundle gerado.

1. Salve o arquivo completo de HTML.
2. Disponibilize-o localmente e abra-o em um navegador.
3. Filtre até obter uma lista vazia e limpe os filtros.
4. Salve dois prestadores, revise a lista e remova um deles.

Adote componentes nativos de forma deliberada

Ao migrar para a biblioteca React, consulte a documentação atual de ServiceCard, Button e tipografia para confirmar exatamente qual geração está em uso. Mantenha o modelo de estado deste exemplo se ele atender ao produto, mas substitua a marcação original por APIs verificadas. Não aplique valores v2 sobre componentes v1 sem testes de regressão visual e de teclado.

Transferência para agente de IA e revisão do sistema de design Thumbtack Thumbprint

Defina uma tarefa com escopo claro para o agente

Peça uma tela de comparação de serviços domésticos usando a geração selecionada do Thumbprint, com URLs de origem explícitas e registros fictícios apenas locais. Preserve a distinção entre filtro e seleção. Forneça o exemplo completo como referência de comportamento e especifique se são esperados componentes nativos de React ou HTML independentes.

Inspecione os caminhos de falha

• O estado salvo é mantido ao filtrar.
• Alterar a lista apaga a confirmação anterior.
• Nenhuma avaliação ou informação de contato é inventada.

Exemplos de componentes do sistema 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>