# Sistema de design Thumbtack Thumbprint ## Prévia da interface do sistema de design Thumbtack Thumbprint Filtre serviços de jardinagem fictícios, salve prestadores e confira a lista local de selecionados. ## Referência de design do sistema de design Thumbtack Thumbprint Referência pública dos tokens Thumbprint v2 JavaScript; valores consultados em outubro de 2026. As dimensões numéricas são convertidas em pixels CSS no exemplo. ### Primitivas de cor e papéis na aplicação | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | tpV2ColorGray50 | #f5f6f6 | Superfície discreta para a lista de selecionados. | | tpV2ColorGray200 | #dddee1 | Limites de cartões e divisórias. | | tpV2ColorGray600 | #595c61 | Detalhes secundários sobre fundo branco. | | tpV2ColorGray900 | #2b2d2f | Texto principal. | | tpV2ColorBlue50 | #f0faff | Superfície do controle selecionado. | | tpV2ColorBlue100 | #e0f4fe | Preenchimento original da ilustração da casa. | | tpV2ColorBlue600 | #009fd9 | Primitiva de referência; não é usada em textos brancos pequenos. | | tpV2ColorBlue700 | #0175A3 | Cor de ação da aplicação com texto branco. | | tpV2ColorBlue800 | #066286 | Contorno de foco e traço da ilustração. | | tpV2ColorGreen50 | #eefbf4 | Superfície do rótulo de disponibilidade. | | tpV2ColorGreen200 | #b0eacb | Ilustração decorativa de jardim. | | tpV2ColorGreen700 | #126a4b | Texto de disponibilidade. | ### Espaçamento e cantos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | tpV2SpaceXxsmall | 4 | Valor numérico em pixels; use para espaçamento da composição. | | tpV2SpaceXsmall | 8 | Valor numérico em pixels; use para espaçamento da composição. | | tpV2SpaceSmall | 12 | Valor numérico em pixels; use para espaçamento da composição. | | tpV2SpaceMedium | 16 | Valor numérico em pixels; use para espaçamento da composição. | | tpV2SpaceLarge | 20 | Valor numérico em pixels; use para espaçamento da composição. | | tpV2SpaceXlarge | 24 | Valor numérico em pixels; use para espaçamento da composição. | | tpV2SpaceXxlarge | 32 | Valor numérico em pixels; use para espaçamento da composição. | | tpV2CornerRadiusXsmall | 4 | Valor numérico em pixels; o exemplo usa Medium nos controles e Large nos cartões. | | tpV2CornerRadiusSmall | 6 | Valor numérico em pixels; o exemplo usa Medium nos controles e Large nos cartões. | | tpV2CornerRadiusMedium | 8 | Valor numérico em pixels; o exemplo usa Medium nos controles e Large nos cartões. | | tpV2CornerRadiusLarge | 12 | Valor numérico em pixels; o exemplo usa Medium nos controles e Large nos cartões. | | tpV2CornerRadiusXlarge | 16 | Valor numérico em pixels; o exemplo usa Medium nos controles e Large nos cartões. | | tpV2CornerRadiusSides | 9999 | Valor numérico em pixels; o exemplo usa Medium nos controles e Large nos cartões. | ### Tipografia responsiva e layout | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | tpV2BreakpointSmall | 481px | Limite para layouts compactos. | | tpV2BreakpointMedium | 700px | O exemplo passa a ter duas colunas neste limite. | | tpV2BreakpointLarge | 1025px | Limite para layouts amplos. | | tpV2BreakpointSplitViewSmall | 769px | Limite específico da visualização dividida, não é sinônimo de Medium. | | tpV2BreakpointSplitViewMedium | 1060px | Limite mais amplo para a visualização dividida. | | tpV2FontTitle2Size | 28 | Tamanho do título, em pixels, para telas pequenas. | | tpV2FontTitle2ResponsiveSize | 36 | Tamanho do título, em pixels, para telas maiores. | | tpV2FontTitle2LineHeight | 1.1 | Altura de linha do título sem unidade, independente do nível semântico do cabeçalho. | | tpV2FontText1Size | 16 | Tamanho do texto do corpo. | | tpV2FontText1LineHeight | 1.4 | Multiplicador da altura de linha do corpo. | | tpV2FontWeightRegular | 400 | Texto regular do corpo. | | tpV2FontWeightBold | 700 | Ênfase forte ao usar a fonte alternativa. | ## Guia completo do sistema de design Thumbtack Thumbprint Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## 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 O layout muda em 700px, posicionando a lista de selecionados abaixo dos resultados. Em telas estreitas, a ação de salvar passa para baixo do texto e a ilustração decorativa da casa é ocultada. O cabeçalho continua transmitindo seu significado completo. Nenhum painel de altura fixa corta as descrições dos prestadores nem força uma prévia vazia do tamanho da janela de visualização. ## 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 Revise os resultados vazios, a ausência de itens na lista, vários prestadores salvos, a remoção após a revisão, nomes longos e telas estreitas. Uma captura de tela com três cartões atraentes não comprova nenhuma dessas interações. Antes de publicar uma alteração em um tema compartilhado, compare a tabela de tokens com a fonte fixada. - 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 ### Lista completa de prestadores para projetos residenciais Estudo original e autocontido de HTML/CSS/JavaScript, com filtros, estado selecionado, recuperação em caso de lista vazia e revisão 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.

``` Referência de código - Salve como index.html. Não é usado nenhum ambiente de execução de componentes nativos do Thumbprint. ## Configuração do agente de IA do sistema de design Thumbtack Thumbprint ### Ponto de partida para implementação Não é necessário pacote nem credenciais de API. O exemplo é um estudo de aplicação local. ``` # Save the complete HTML example as index.html python3 -m http.server 8080 # Open http://localhost:8080 ``` ### Um prompt para seu projeto ``` Crie uma tela de comparação de serviços usando os valores do Thumbprint v2 deste guia. Mantenha uma lista local de prestadores ao aplicar filtros, inclua um estado de recuperação quando a lista estiver vazia e sincronize o feedback da revisão com a seleção. Use registros fictícios e elementos semânticos nativos de HTML, a menos que um pacote verificado do Thumbprint React seja escolhido explicitamente. Não misture pressupostos sobre componentes da v1 com nomes de tokens da v2. ``` ## Fontes e escopo do sistema de design Thumbtack Thumbprint Um guia de aplicação de OpenDesign para o Thumbprint. O exemplo de trabalho é um HTML original que usa valores selecionados da v2, não a biblioteca nativa de React do Thumbtack. O guia público de tipografia descreve uma escala mais antiga; esta página a mantém separada da referência de tokens da v2. Todos os prestadores são fictícios. - Referência de tokens da v2 Valores concretos e nomes de exportação específicos de cada geração. - Guia de tipografia Rise e a escala tipográfica mais antiga, documentada separadamente. - Documentação do Service Card Referência de componentes nativos; a rota da v1 não é uma declaração de compatibilidade com a v2. ## Recursos relacionados ao sistema de design Thumbtack Thumbprint ### Twilio Paste Crie um rascunho de notificação com o tema e os contratos de botões do Paste, uma escala de espaçamento verificada e uma distinção clara entre editar, revisar e realmente enviar uma mensagem. ### Visa Product sistema de design Use o Nova CSS da Visa para criar uma opção clara de formato de extrato, com controles de opção nativos, cabeçalho em cor alternativa e resumo para revisão. Confira os valores exatos do tema 1.6.5, o espaçamento escalável e a integração completa da folha de estilos. ### Volvo Cars Web sistema de design Analise a base web da Volvo Cars, priorizada para HTML, os tokens reais do modo claro e o estilo nativo de cartões selecionáveis por meio de um exemplo completo de plano de bagagem, com escolhas independentes, alternância de tema e redefinição. - [Referência de implementação](https://thumbprint.design/tokens/v2/javascript) - [Fonte](https://thumbprint.design/tokens/v2/javascript) - [Referência de código](https://thumbprint.design/tokens/v2/javascript) - [Referência de tokens da v2 Valores concretos e nomes de exportação específicos de cada geração.](https://thumbprint.design/tokens/v2/javascript) - [Guia de tipografia Rise e a escala tipográfica mais antiga, documentada separadamente.](https://thumbprint.design/guidelines/typography) - [Documentação do Service Card Referência de componentes nativos; a rota da v1 não é uma declaração de compatibilidade com a v2.](https://thumbprint.design/components/service-card/v1/usage)