# Thumbtack Thumbprint-Designsystem ## Vorschau der Thumbtack Thumbprint-Designsystem-Oberfläche Durchsuche fiktive Gartendienstleistungen, speichere Anbieter und prüfe deine lokale Auswahlliste. ## Designreferenz für das Thumbtack Thumbprint-Designsystem Öffentliche Token-Referenz von Thumbprint v2 JavaScript; Werte abgerufen im Oktober 2026. Numerische Maße werden im Beispiel in CSS Pixel umgerechnet. ### Farbprimitive und Anwendungsrollen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | tpV2ColorGray50 | #f5f6f6 | Zurückhaltende Oberfläche der Auswahlliste. | | tpV2ColorGray200 | #dddee1 | Kartengrenzen und Trennlinien. | | tpV2ColorGray600 | #595c61 | Sekundäre Details auf Weiß. | | tpV2ColorGray900 | #2b2d2f | Haupttext. | | tpV2ColorBlue50 | #f0faff | Oberfläche des ausgewählten Steuerelements. | | tpV2ColorBlue100 | #e0f4fe | Füllfarbe der originalen Hausillustration. | | tpV2ColorBlue600 | #009fd9 | Referenzprimitive; nicht für kleine weiße Texte verwenden. | | tpV2ColorBlue700 | #0175A3 | Aktionsfarbe der Anwendung mit weißem Text. | | tpV2ColorBlue800 | #066286 | Fokusumrandung und Kontur der Illustration. | | tpV2ColorGreen50 | #eefbf4 | Oberfläche des Verfügbarkeitslabels. | | tpV2ColorGreen200 | #b0eacb | Dekorative Gartenillustration. | | tpV2ColorGreen700 | #126a4b | Verfügbarkeitstext. | ### Abstände und Ecken | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | tpV2SpaceXxsmall | 4 | Numerischer Pixelwert; für Abstände im Layout verwenden. | | tpV2SpaceXsmall | 8 | Numerischer Pixelwert; für Abstände im Layout verwenden. | | tpV2SpaceSmall | 12 | Numerischer Pixelwert; für Abstände im Layout verwenden. | | tpV2SpaceMedium | 16 | Numerischer Pixelwert; für Abstände im Layout verwenden. | | tpV2SpaceLarge | 20 | Numerischer Pixelwert; für Abstände im Layout verwenden. | | tpV2SpaceXlarge | 24 | Numerischer Pixelwert; für Abstände im Layout verwenden. | | tpV2SpaceXxlarge | 32 | Numerischer Pixelwert; für Abstände im Layout verwenden. | | tpV2CornerRadiusXsmall | 4 | Numerischer Pixelwert; das Beispiel verwendet Medium für Steuerelemente und Large für Karten. | | tpV2CornerRadiusSmall | 6 | Numerischer Pixelwert; das Beispiel verwendet Medium für Steuerelemente und Large für Karten. | | tpV2CornerRadiusMedium | 8 | Numerischer Pixelwert; das Beispiel verwendet Medium für Steuerelemente und Large für Karten. | | tpV2CornerRadiusLarge | 12 | Numerischer Pixelwert; das Beispiel verwendet Medium für Steuerelemente und Large für Karten. | | tpV2CornerRadiusXlarge | 16 | Numerischer Pixelwert; das Beispiel verwendet Medium für Steuerelemente und Large für Karten. | | tpV2CornerRadiusSides | 9999 | Numerischer Pixelwert; das Beispiel verwendet Medium für Steuerelemente und Large für Karten. | ### Responsive Typografie und Layout | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | tpV2BreakpointSmall | 481px | Schwellenwert für kleine Layouts. | | tpV2BreakpointMedium | 700px | Das Beispiel wechselt an diesem Schwellenwert zu zwei Spalten. | | tpV2BreakpointLarge | 1025px | Schwellenwert für große Layouts. | | tpV2BreakpointSplitViewSmall | 769px | Schwellenwert speziell für die geteilte Ansicht, nicht gleichbedeutend mit Medium. | | tpV2BreakpointSplitViewMedium | 1060px | Schwellenwert für eine breitere geteilte Ansicht. | | tpV2FontTitle2Size | 28 | Titelschriftgröße in Pixeln auf kleinen Bildschirmen. | | tpV2FontTitle2ResponsiveSize | 36 | Titelschriftgröße in Pixeln auf größeren Bildschirmen. | | tpV2FontTitle2LineHeight | 1.1 | Einheitenlose Zeilenhöhe des Titels, unabhängig von der semantischen Überschriftenebene. | | tpV2FontText1Size | 16 | Schriftgröße des Fließtexts. | | tpV2FontText1LineHeight | 1.4 | Multiplikator für die Zeilenhöhe des Fließtexts. | | tpV2FontWeightRegular | 400 | Normaler Fließtext. | | tpV2FontWeightBold | 700 | Starke Hervorhebung bei Verwendung der Ersatzschriftart. | ## Vollständiger Leitfaden zum Thumbtack Thumbprint-Designsystem Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Token-Generierung des Thumbtack Thumbprint-Designsystems auswählen ### v1 und v2 getrennt behandeln > Thumbprint stellt beide Token-Generationen bereit. Die Exporte für v2 beginnen mit tpV2 und enthalten eine neue Graustufenpalette, responsive Titelwerte und zusätzliche Schriftstärken. Eine native Komponente, die unter einer v1-Route dokumentiert ist, belegt nicht, dass sie diese v2-Werte nutzt. Halte fest, welches Paket und welche Generation dein Produkt bereits verwendet, bevor du gemeinsam genutzte Styles ersetzt. ### Dieses Beispiel als Kompositionsstudie verwenden Dieses Beispiel wendet öffentliche Primitive direkt auf ein originales HTML an. Es verpackt ServiceCard nicht und beansprucht keine Funktionsgleichheit mit der Thumbtack-Anwendung. Eine native Implementierung sollte mit dem dokumentierten Paket API beginnen und erst dann echte Servicedaten einsetzen, wenn die Verträge für Ladezustände, Fehler und Berechtigungen definiert sind. ## Farben, Rollen und Auswahl im Thumbtack Thumbprint-Designsystem ### Aktion, Auswahl und Verfügbarkeit unterscheiden Blue700 wird für die primäre lokale Aktion verwendet, Blue50 für gespeicherte Steuerelemente und Green700 auf Green50 für Verfügbarkeitstext. Gray900 kennzeichnet den Anbieternamen, Gray600 ergänzende Details. Diese Zuordnungen sind Anwendungsentscheidungen auf Grundlage dokumentierter Primitive, keine erfundenen semantischen Token-Namen. ### Die Auswahlliste nicht nur über Farbe kennzeichnen Bei einem gespeicherten Anbieter ändern sich sowohl die Schaltflächenbeschriftung als auch der aria-pressed-Zustand, zusätzlich zur Tönung. Die Verfügbarkeit wird weiterhin als Zeitangabe ausgeschrieben. Beim Filtern kann ein gespeicherter Anbieter ausgeblendet werden, ohne aus der Auswahlliste entfernt zu werden; die Liste bleibt sichtbar, damit dieser Unterschied verständlich ist. ## Typografie und Inhalte im Thumbtack Thumbprint-Designsystem ### Versionsunterschiede bei der Typografie beachten Der öffentliche Typografie-Leitfaden führt Rise in den Schriftstärken 400 und 700 sowie eine ältere responsive Titelskala auf. Die Token-Seite für v2 enthält andere Größen und gebrochene Schriftstärken. Fasse sie nicht zu einem vermeintlich einheitlichen Standard zusammen. Diese Vorschau verwendet eine Systemschrift als Ersatz und explizite Größen, die von der v2-Skala inspiriert sind; Rise wird nicht weiterverbreitet. ### Details angeben, die den Vergleich unterstützen Jeder Anbieter hat eine Servicekategorie, eine kurze Beschreibung und eine gut lesbare Verfügbarkeitskennzeichnung. Das Verzeichnis verzichtet bewusst auf erfundene Bewertungszahlen, Bewertungen und Preise. In einem echten Marktplatz müssen solche Angaben eine zuverlässige Herkunft und Einheiten haben; dekorative Sterne würden falsche Sicherheit vermitteln, statt hilfreiche Informationen zu bieten. ## Thumbtack Thumbprint-Designsystem: Karten, Abstände und responsives Layout ### Vergleichsdetails zusammenhalten Anbieterkarten haben ein Innenabstand von 24px, einen internen Abstand von 16px und einen Eckenradius von 12px. Die Initialen dienen der Dekoration; die danebenstehende Überschrift ist der barrierefreie Name. Die gesamte Kartenfläche wird nicht zu einem verschachtelten Link. Speichern bleibt eine separate Schaltfläche, damit ein später ergänzter Profil-Link nicht das Auswahlverhalten beeinträchtigt. ### Die Merkliste auf schmalen Bildschirmen untereinander anordnen Bei 700px wechselt das Layout, sodass die Merkliste unter den Ergebnissen erscheint. Auf schmalen Bildschirmen wandert die Speicheraktion unter den Text, und die dekorative Hausillustration wird ausgeblendet. Die Kopfzeile vermittelt weiterhin alle wesentlichen Informationen. Kein Bereich mit fester Höhe schneidet Anbieterbeschreibungen ab oder erzwingt eine leere Vorschau in Viewport-Größe. ## Thumbtack Thumbprint-Designsystem: Filter- und Merkliste-Zustände ### Filter und gespeicherte Auswahl unabhängig halten Das Kategorie-Auswahlfeld und das Kontrollkästchen für die Verfügbarkeit schränken die drei Beispieldatensätze ein. Mit „Gartenpflege“ und „Diese Woche verfügbar“ ergibt sich eine leere Ergebnisliste mit einer Zurücksetzen-Aktion. Bereits gespeicherte Anbieter bleiben in der Merkliste, da Filtern nicht gleich Löschen ist. Diese Regel ist im Quellcode sichtbar und lässt sich ohne Backend überprüfen. ### Der Prüfaktion ein eindeutiges Ergebnis geben Bei einer leeren Merkliste erklärt die Prüfung, was als Nächstes zu tun ist. Bei einer nicht leeren Merkliste wird ihre Größe angezeigt und ausdrücklich darauf hingewiesen, dass die Aktion nur lokal erfolgt. Wird ein gespeicherter Eintrag geändert, wird dieses Ergebnis zurückgesetzt, damit eine veraltete Bestätigung nicht eine andere Merkliste beschreibt. Das Beispiel behauptet niemals, einen Fachbetrieb zu kontaktieren. ## Thumbtack Thumbprint-Designsystem: Tastaturbedienung und barrierefreie Auswahl ### Für Steuerelemente native Semantik verwenden Ein beschriftetes Auswahlfeld ermöglicht die Wahl einer Kategorie, ein beschriftetes Kontrollkästchen legt eine boolesche Bedingung fest. Jede Speichern-Schaltfläche hat einen anbieterspezifischen barrierefreien Namen und das Attribut aria-pressed. Die Ergebnisanzahl wird in einer höflichen Live-Region ausgegeben; die Prüfmeldung verwendet Status-Semantik. Der Tastaturfokus ist auch ohne Hover sichtbar. ### Echte Überschriften und flexible Höhen verwenden Anbieternamen sind innerhalb des Beispiels h2-Elemente und keine fett formatierten Spans. Initialen und das ursprüngliche dekorative SVG sind vom Accessibility Tree ausgeschlossen. Lange Namen und Beschreibungen sollten umbrechen können, ohne die Aktion aus dem sichtbaren Bereich zu verdrängen; bei vergrößertem Text sind flexible Zeilen statt Textkürzungen erforderlich. ## Thumbtack Thumbprint-Designsystem: vollständige Implementierung ### Das vollständige Beispiel ausführen und prüfen Speichere das Beispiel HTML als index.html und stelle den übergeordneten Ordner bereit. Es enthält inline CSS und JavaScript, benötigt keine Paketinstallation und ist nicht vom Netzwerk abhängig. Die drei Datensätze und das Auswahl-Set sind explizit definiert, sodass sich das Verhalten anpassen lässt, ohne ein generiertes Bundle rückentwickeln zu müssen. 1. Die vollständige Datei HTML speichern. 2. Lokal bereitstellen und in einem Browser öffnen. 3. Eine leere Ergebnisliste filtern und zurücksetzen. 4. Zwei Anbieter speichern, die Liste prüfen und anschließend einen entfernen. ### Gezielt auf native Komponenten umstellen Prüfe beim Wechsel zur Bibliothek React die aktuelle Dokumentation zu ServiceCard, Button und Typografie für die konkret verwendete Generation. Behalte das Zustandsmodell aus diesem Beispiel bei, wenn es zum Produkt passt, und ersetze das ursprüngliche Markup durch verifizierte APIs. Übernimm keine v2-Werte in v1-Komponenten, ohne visuelle Regressionstests und Tastaturtests durchzuführen. ## Thumbtack Thumbprint-Designsystem: Übergabe an den Agenten und Prüfung ### Dem Agenten eine klar abgegrenzte Aufgabe geben Bitte um einen Vergleichsbildschirm für häusliche Dienstleistungen mit der ausgewählten Thumbprint-Generation, expliziten Quell-URLs und fiktiven, ausschließlich lokal gespeicherten Datensätzen. Die Unterscheidung zwischen Filtern und Auswahl muss erhalten bleiben. Stelle das vollständige Beispiel als Verhaltensreferenz bereit und gib an, ob native React-Komponenten oder unabhängige HTML erwartet werden. ### Fehlerfälle prüfen Prüfe leere Ergebnisse, eine leere Merkliste, mehrere gespeicherte Anbieter, das Entfernen eines Anbieters nach der Prüfung, lange Namen und schmale Bildschirme. Ein Screenshot mit drei ansprechenden Karten belegt keine dieser Interaktionen. Vergleiche die Token-Tabelle vor der Veröffentlichung einer Änderung an einem gemeinsamen Theme mit der festgelegten Quelle. - Der gespeicherte Zustand bleibt beim Filtern erhalten. - Änderungen an der Merkliste setzen alte Bestätigungen zurück. - Es werden keine Bewertungen oder Kontaktaufnahmen erfunden. ## Thumbtack Thumbprint-Designsystem: Komponentenbeispiele ### Vollständige Merkliste für Heimprojekte Eigenständiges, vollständiges HTML/CSS/JavaScript mit Filtern, ausgewähltem Zustand, Wiederherstellung bei leeren Ergebnissen und lokaler Prüfung. ``` Home project shortlist
HOME PROJECT / FICTIONAL DIRECTORY

Find the right help for home

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

``` Code-Referenz - Als index.html speichern. Es wird keine native Thumbprint-Komponentenlaufzeit verwendet. ## Thumbtack Thumbprint-Designsystem: Einrichtung des Agenten ### Ausgangspunkt für die Implementierung Keine Pakete oder API-Zugangsdaten erforderlich. Das Beispiel ist eine lokale Anwendungsstudie. ``` # Save the complete HTML example as index.html python3 -m http.server 8080 # Open http://localhost:8080 ``` ### Ein Prompt für dein Projekt ``` Erstelle einen Vergleichsbildschirm für Dienstleistungen mit den Thumbprint-v2-Werten aus diesem Leitfaden. Die lokale Merkliste soll Filter überdauern; füge einen Zustand zur Wiederherstellung bei leeren Ergebnissen hinzu und halte Prüfmeldungen mit der Auswahl synchron. Verwende fiktive Datensätze und native semantische HTML, sofern nicht ausdrücklich ein verifiziertes Thumbprint-React-Paket ausgewählt wird. Vermische keine Annahmen zu v1-Komponenten mit v2-Token-Namen. ``` ## Thumbtack Thumbprint-Designsystem: Quellen und Geltungsbereich Ein OpenDesign-Anwendungsleitfaden zu Thumbprint. Das Beispiel ist ein eigenständiges HTML mit ausgewählten v2-Werten und keine native Thumbtack-React-Bibliothek. Der öffentliche Typografieleitfaden beschreibt eine ältere Schriftskala, die hier getrennt von der v2-Token-Referenz behandelt wird. Alle Anbieter sind fiktiv. - v2-Token-Referenz Konkrete Werte und generationsspezifische Exportnamen. - Typografieleitfaden Rise und die separat dokumentierte ältere Schriftskala. - Dokumentation zu Service Card Referenz für native Komponenten; die v1-Route ist keine Aussage zur v2-Kompatibilität. ## Thumbtack Thumbprint-Designsystem: Verwandte Ressourcen ### Twilio Paste Erstelle einen Benachrichtigungsentwurf mit dem Theme und den Button-Vorgaben von Paste, einer überprüften Abstands-Skala und einer klaren Unterscheidung zwischen dem Bearbeiten, Prüfen und tatsächlichen Senden einer Nachricht. ### Visa Product Designsystem Verwende Visa Nova CSS, um eine übersichtliche Auswahl für das Abrechnungsformat mit nativen Optionsfeldern, einem Kopfbereich in alternativer Farbe und einer Zusammenfassung zur Überprüfung zu erstellen. Sieh dir die exakten Theme-Werte der Version 1.6.5, skalierbare Abstände und die vollständige Integration des Stylesheets an. ### Volvo Cars Web Designsystem Untersuche Volvos HTML-orientierte Web-Grundlage, die tatsächlichen Tokens für den hellen Modus und das native Styling auswählbarer Karten anhand eines vollständigen Beispiels zur Packungsplanung mit unabhängigen Auswahlmöglichkeiten, Theme-Wechsel und Zurücksetzen. - [Implementierungsreferenz](https://thumbprint.design/tokens/v2/javascript) - [Quelle](https://thumbprint.design/tokens/v2/javascript) - [Code-Referenz](https://thumbprint.design/tokens/v2/javascript) - [v2-Token-Referenz Konkrete Werte und generationsspezifische Exportnamen.](https://thumbprint.design/tokens/v2/javascript) - [Typografieleitfaden Rise und die separat dokumentierte ältere Schriftskala.](https://thumbprint.design/guidelines/typography) - [Dokumentation zu Service Card Referenz für native Komponenten; die v1-Route ist keine Aussage zur v2-Kompatibilität.](https://thumbprint.design/components/service-card/v1/usage)