Sistema de diseño Thumbtack Thumbprint.

Elige una generación de tokens del sistema de diseño Thumbtack Thumbprint

Mantén v1 y v2 diferenciados

Thumbprint ofrece ambas generaciones de tokens. Los nombres de las exportaciones de v2 empiezan por tpV2 e incluyen una nueva escala de grises, valores adaptables para títulos y grosores de fuente intermedios. Que un componente nativo esté documentado en una ruta de v1 no demuestra que utilice los valores de v2. Registra qué paquete y generación usa ya tu producto antes de sustituir estilos compartidos.

Usa esta muestra como estudio de composición

Este ejemplo aplica primitivas públicas directamente a una composición original de HTML. No envuelve ServiceCard ni afirma ofrecer paridad funcional con la aplicación de Thumbtack. Una implementación nativa debe partir del paquete documentado API y sustituir los datos de servicio por datos reales solo después de definir sus contratos de carga, error y permisos.

Roles de color y selección del sistema de diseño Thumbtack Thumbprint

Distingue la acción, la selección y la disponibilidad

Blue700 se usa para la acción local principal, Blue50 para los controles guardados y Green700 sobre Green50 para el texto de disponibilidad. Gray900 contiene el nombre del proveedor y Gray600, los detalles complementarios. Estas asignaciones son decisiones de la aplicación basadas en primitivas documentadas, no nombres de tokens semánticos inventados.

No uses solo el color para indicar los elementos de la lista breve

Al guardar un proveedor, cambian tanto la etiqueta de su botón y el estado aria-pressed como su tono de color. La disponibilidad se expresa como una frase horaria. Los filtros pueden ocultar un proveedor guardado sin eliminarlo de la lista de selección; la lista permanece visible para que el usuario entienda la diferencia.

Tipografía y contenido del sistema de diseño Thumbtack Thumbprint

Respeta las diferencias entre versiones tipográficas

La guía pública de tipografía indica que Rise está disponible en los pesos 400 y 700, y presenta una escala anterior de títulos adaptables. La página de tokens v2 incluye otros tamaños y pesos fraccionarios. No los combines como si fueran un único valor predeterminado. Esta vista previa usa una fuente del sistema como alternativa, con tamaños explícitos inspirados en la escala v2, y no redistribuye Rise.

Redacta detalles que faciliten la comparación

Cada proveedor tiene una categoría de servicio, una descripción breve y una etiqueta de disponibilidad fácil de entender. El directorio omite deliberadamente recuentos de reseñas, puntuaciones y precios inventados. En un mercado real, esos datos necesitan una procedencia y unidades fiables; las estrellas decorativas darían una falsa sensación de confianza en vez de información útil.

Tarjetas, espaciado y diseño adaptable del sistema de diseño Thumbtack Thumbprint

Mantén juntos los detalles para comparar

Las tarjetas de proveedores tienen un relleno de 24px, un espacio interno de 16px y esquinas de 12px. Las iniciales son decorativas; el encabezado adyacente es el nombre accesible. Las tarjetas no convierten toda la superficie en un enlace anidado. Guardar es una acción independiente mediante un botón, lo que evita que un futuro enlace al perfil absorba el comportamiento de selección.

Apila la lista de selección en pantallas estrechas

Estados de filtros y lista de selección del sistema de diseño Thumbtack Thumbprint

Mantén independientes los filtros y el estado de guardado

El selector de categoría y la casilla de disponibilidad filtran los tres registros definidos en el ejemplo. Si se elige «Cuidado del jardín» y «Disponible esta semana», no se obtienen resultados y aparece una opción para restablecer los filtros. Los registros guardados previamente permanecen en la lista de selección porque filtrar no equivale a eliminar. Esta regla está visible en el código y se puede comprobar sin un backend.

Ofrece un resultado veraz para la acción de revisión

Al revisar una lista de selección vacía, se explica qué hacer a continuación. Si contiene elementos, se indica su cantidad y se aclara que la acción se realiza de forma local. Al cambiar un elemento guardado, se borra ese resultado para evitar que una confirmación desactualizada describa una lista distinta. El ejemplo nunca afirma que se haya contactado con un profesional.

Selección accesible y uso del teclado en el sistema de diseño Thumbtack Thumbprint

Usa semántica nativa para los controles

Un selector con etiqueta permite elegir la categoría y una casilla con etiqueta permite establecer una condición booleana. Cada botón para guardar tiene un nombre accesible específico para el proveedor y aria-pressed. El recuento de resultados usa una región dinámica con anuncios corteses; los mensajes de revisión usan la semántica de estado. El foco del teclado es visible, independientemente del estado de interacción al pasar el cursor.

Usa encabezados reales y alturas flexibles

Los nombres de los proveedores son elementos h2 dentro del ejemplo, no fragmentos de texto en negrita. Las iniciales y el SVG decorativo original se excluyen del árbol de accesibilidad. Los nombres y las descripciones largos deben ajustarse a varias líneas sin desplazar la acción fuera de la pantalla; al ampliar el texto se necesitan filas flexibles, no texto truncado.

Implementación completa del sistema de diseño Thumbtack Thumbprint

Ejecuta y revisa el ejemplo completo

Guarda el ejemplo HTML como index.html y sirve la carpeta que lo contiene. Incluye CSS y JavaScript en línea, no requiere instalar paquetes ni depende de la red. Los tres registros y el Set de selección están definidos explícitamente, para que se pueda adaptar el comportamiento sin tener que hacer ingeniería inversa de un paquete generado.

1. Guarda el archivo completo de HTML.
2. Sírvelo localmente y ábrelo en un navegador.
3. Aplica filtros para obtener resultados vacíos y luego restablécelos.
4. Guarda dos proveedores, revísalos y luego elimina uno.

Migra deliberadamente a componentes nativos

Al migrar a la biblioteca React, consulta la documentación actual de ServiceCard, Button y tipografía correspondiente a la versión que se usa. Conserva el modelo de estado de este ejemplo si encaja con el producto, pero sustituye el marcado original por APIs verificadas. No copies valores de v2 sobre componentes de v1 sin comprobar que no haya regresiones visuales ni en el uso del teclado.

Traspaso y revisión por un agente del sistema de diseño Thumbtack Thumbprint

Asigna al agente una tarea bien delimitada

Pide una pantalla para comparar servicios domésticos con la versión seleccionada de Thumbprint, URLs de origen explícitas y registros ficticios que solo se usan localmente. Conserva la distinción entre filtros y selección. Proporciona el ejemplo completo como referencia de comportamiento y especifica si se esperan componentes nativos de React o HTML independientes.

Revisa los casos de error

• El estado de guardado se mantiene al aplicar filtros.
• Al cambiar la lista de selección, se borra la confirmación anterior.
• No se inventan puntuaciones ni resultados de contacto.

Ejemplos de componentes del sistema de diseño 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>