Thumbtack Thumbprint-Designsystem.

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

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

• 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

<!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>