# Sistema de diseño Thumbtack Thumbprint ## Vista previa de la interfaz del sistema de diseño Thumbtack Thumbprint Filtra servicios de jardinería ficticios, guarda proveedores y revisa la lista breve local. ## Referencia de diseño del sistema de diseño Thumbtack Thumbprint Referencia de tokens públicos de Thumbprint v2 de JavaScript; valores consultados en octubre de 2026. Las dimensiones numéricas se convierten a píxeles de CSS en la muestra. ### Primitivas de color y roles de la aplicación | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | tpV2ColorGray50 | #f5f6f6 | Superficie discreta para la lista breve. | | tpV2ColorGray200 | #dddee1 | Límites de tarjetas y separadores. | | tpV2ColorGray600 | #595c61 | Detalles secundarios sobre blanco. | | tpV2ColorGray900 | #2b2d2f | Texto principal. | | tpV2ColorBlue50 | #f0faff | Superficie del control seleccionado. | | tpV2ColorBlue100 | #e0f4fe | Relleno original de la ilustración de la casa. | | tpV2ColorBlue600 | #009fd9 | Primitiva de referencia; no se usa para texto blanco pequeño. | | tpV2ColorBlue700 | #0175A3 | Color de acción de la aplicación con texto blanco. | | tpV2ColorBlue800 | #066286 | Contorno de foco y trazo de la ilustración. | | tpV2ColorGreen50 | #eefbf4 | Superficie de la etiqueta de disponibilidad. | | tpV2ColorGreen200 | #b0eacb | Ilustración decorativa de jardín. | | tpV2ColorGreen700 | #126a4b | Texto de disponibilidad. | ### Espaciado y esquinas | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | tpV2SpaceXxsmall | 4 | Valor numérico en píxeles; úsalo para el espaciado de la composición. | | tpV2SpaceXsmall | 8 | Valor numérico en píxeles; úsalo para el espaciado de la composición. | | tpV2SpaceSmall | 12 | Valor numérico en píxeles; úsalo para el espaciado de la composición. | | tpV2SpaceMedium | 16 | Valor numérico en píxeles; úsalo para el espaciado de la composición. | | tpV2SpaceLarge | 20 | Valor numérico en píxeles; úsalo para el espaciado de la composición. | | tpV2SpaceXlarge | 24 | Valor numérico en píxeles; úsalo para el espaciado de la composición. | | tpV2SpaceXxlarge | 32 | Valor numérico en píxeles; úsalo para el espaciado de la composición. | | tpV2CornerRadiusXsmall | 4 | Valor numérico en píxeles; la muestra usa Medium para los controles y Large para las tarjetas. | | tpV2CornerRadiusSmall | 6 | Valor numérico en píxeles; la muestra usa Medium para los controles y Large para las tarjetas. | | tpV2CornerRadiusMedium | 8 | Valor numérico en píxeles; la muestra usa Medium para los controles y Large para las tarjetas. | | tpV2CornerRadiusLarge | 12 | Valor numérico en píxeles; la muestra usa Medium para los controles y Large para las tarjetas. | | tpV2CornerRadiusXlarge | 16 | Valor numérico en píxeles; la muestra usa Medium para los controles y Large para las tarjetas. | | tpV2CornerRadiusSides | 9999 | Valor numérico en píxeles; la muestra usa Medium para los controles y Large para las tarjetas. | ### Tipografía y diseño adaptables | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | tpV2BreakpointSmall | 481px | Umbral para diseños pequeños. | | tpV2BreakpointMedium | 700px | La muestra pasa a dos columnas al alcanzar este umbral. | | tpV2BreakpointLarge | 1025px | Umbral para diseños grandes. | | tpV2BreakpointSplitViewSmall | 769px | Umbral específico para la vista dividida; no es sinónimo de Medium. | | tpV2BreakpointSplitViewMedium | 1060px | Umbral para vistas divididas más anchas. | | tpV2FontTitle2Size | 28 | Tamaño del título en píxeles para pantallas pequeñas. | | tpV2FontTitle2ResponsiveSize | 36 | Tamaño del título en píxeles para pantallas más grandes. | | tpV2FontTitle2LineHeight | 1.1 | Interlineado del título sin unidades; independiente del nivel semántico del encabezado. | | tpV2FontText1Size | 16 | Tamaño del texto del cuerpo. | | tpV2FontText1LineHeight | 1.4 | Multiplicador del interlineado del cuerpo. | | tpV2FontWeightRegular | 400 | Texto normal del cuerpo. | | tpV2FontWeightBold | 700 | Énfasis marcado al usar la fuente alternativa. | ## Guía completa del sistema de diseño Thumbtack Thumbprint Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## 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 El diseño cambia a 700px y coloca la lista de selección debajo de los resultados. En pantallas estrechas, la acción para guardar pasa debajo del texto y se oculta la ilustración decorativa de la casa. El encabezado sigue comunicando toda la información necesaria. Ningún panel de altura fija recorta las descripciones de los proveedores ni obliga a que la vista previa ocupe toda la altura de la ventana. ## 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 Revisa los resultados vacíos, la lista de selección vacía, varios proveedores guardados, la eliminación después de revisar, los nombres largos y las pantallas estrechas. Una captura con tres tarjetas atractivas no demuestra que ninguna de estas interacciones funcione. Antes de publicar un cambio en un tema compartido, compara la tabla de tokens con la fuente fijada. - 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 ### Lista de selección completa para proyectos domésticos Ejemplo original y autónomo de HTML/CSS/JavaScript, con filtros, estado de selección, recuperación de estados vacíos y revisión 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.

``` Referencia de código - Guárdalo como index.html. No se usa el entorno de ejecución de componentes nativos de Thumbprint. ## Configuración del agente para el sistema de diseño Thumbtack Thumbprint ### Punto de partida para la implementación No se necesitan paquetes ni credenciales de API. El ejemplo es un estudio de aplicación local. ``` # Save the complete HTML example as index.html python3 -m http.server 8080 # Open http://localhost:8080 ``` ### Una instrucción para tu proyecto ``` Crea una pantalla para comparar servicios usando los valores de Thumbprint v2 de esta guía. Conserva una lista de selección local al aplicar filtros, incluye un estado de recuperación cuando no haya resultados y mantén los mensajes de revisión sincronizados con la selección. Usa registros ficticios y HTML semánticos nativos, salvo que se elija explícitamente un paquete de React de Thumbprint verificado. No combines supuestos sobre componentes de v1 con nombres de tokens de v2. ``` ## Fuentes y alcance del sistema de diseño Thumbtack Thumbprint Una guía de aplicación de OpenDesign para Thumbprint. El ejemplo funcional es una pieza original HTML que usa valores seleccionados de v2, no la biblioteca nativa React de Thumbtack. La guía tipográfica pública describe una escala anterior; esta página la mantiene separada de la referencia de tokens de v2. Todos los proveedores son ficticios. - Referencia de tokens de v2 Valores concretos y nombres de exportación específicos de cada generación. - Guía tipográfica Rise y la escala tipográfica anterior documentada por separado. - Documentación de Service Card Referencia de componentes nativos; la ruta de v1 no implica compatibilidad con v2. ## Recursos relacionados con el sistema de diseño Thumbtack Thumbprint ### Twilio Paste Redacta una notificación con el tema y los contratos de botones de Paste, una escala de espaciado verificada y una distinción clara entre editar, revisar y enviar un mensaje. ### Visa Product sistema de diseño Usa Nova CSS de Visa para crear una preferencia clara de formato de extracto, con controles de opción nativos, un encabezado de color alternativo y un resumen para revisar. Examina los valores exactos del tema 1.6.5, el espaciado escalable y la integración completa de la hoja de estilos. ### Volvo Cars Web sistema de diseño Examina la base web de Volvo Cars, centrada en HTML, sus tokens reales del modo claro y el estilo nativo de las tarjetas seleccionables mediante un ejemplo completo de plan de equipaje, con opciones independientes, cambio de tema y restablecimiento. - [Referencia de implementación](https://thumbprint.design/tokens/v2/javascript) - [Fuente](https://thumbprint.design/tokens/v2/javascript) - [Referencia de código](https://thumbprint.design/tokens/v2/javascript) - [Referencia de tokens de v2 Valores concretos y nombres de exportación específicos de cada generación.](https://thumbprint.design/tokens/v2/javascript) - [Guía tipográfica Rise y la escala tipográfica anterior documentada por separado.](https://thumbprint.design/guidelines/typography) - [Documentación de Service Card Referencia de componentes nativos; la ruta de v1 no implica compatibilidad con v2.](https://thumbprint.design/components/service-card/v1/usage)