Thumbtack Thumbprint Tasarım Sistemi.

Thumbtack Thumbprint Tasarım Sistemi Belirteç Nesli Seçin

v1 ve v2'yi birbirinden ayrı tutun

Thumbprint, iki belirteç neslini de sunar. v2 dışa aktarma adları tpV2 ile başlar ve yeni bir gri ton skalası, duyarlı başlık değerleri ve ara yazı tipi kalınlıkları içerir. v1 yolunda belgelenmiş yerel bir bileşen, bu v2 değerlerini kullandığının kanıtı değildir. Paylaşılan stilleri değiştirmeden önce ürününüzün hangi paketi ve nesli kullandığını kaydedin.

Bu örneği bir bileşim çalışması olarak kullanın

Bu örnek, herkese açık temel değerleri doğrudan özgün HTML üzerinde uygular. ServiceCard bileşenini sarmalamaz ve Thumbtack uygulamasıyla özellik eşitliği iddiasında bulunmaz. Yerel bir uygulama, belgelenmiş API paketinden başlamalı; gerçek hizmet verilerini ise yalnızca yükleme, hata ve izin sözleşmeleri tanımlandıktan sonra kullanmalıdır.

Thumbtack Thumbprint Tasarım Sistemi Renk Rolleri ve Seçim

Eylemi, seçimi ve uygunluğu birbirinden ayırın

Yerel birincil eylem için Blue700, kaydedilmiş denetimler için Blue50; uygunluk metni içinse Green50 üzerinde Green700 kullanılır. Sağlayıcı adı Gray900, destekleyici ayrıntılar Gray600 rengindedir. Bu eşlemeler, belgelenmiş temel değerler üzerine kurulmuş uygulama tercihleridir; uydurulmuş anlamsal belirteç adları değildir.

Kısa listeyi yalnızca renkle belirtmeyin

Kaydedilmiş bir sağlayıcıda düğme etiketi ve aria-pressed durumu renk tonuyla birlikte değişir. Uygunluk bilgisi saat ifadesiyle metin olarak sunulmaya devam eder. Filtreleme, kaydedilmiş bir sağlayıcıyı kısa listeden silmeden gizleyebilir; kullanıcının bu ayrımı anlayabilmesi için liste görünür kalır.

Thumbtack Thumbprint Tasarım Sistemi Tipografi ve İçerik

Yazı tipinde sürüm farklılıklarını gözetin

Herkese açık tipografi kılavuzunda Rise, 400 ve 700 kalınlıklarında; başlıklar içinse daha eski bir duyarlı ölçekle listelenir. v2 belirteç sayfasında farklı boyutlar ve kesirli kalınlıklar bulunur. Bunları birleştirip hayalî bir varsayılan oluşturmayın. Bu önizleme, v2 ölçeğinden esinlenen açık boyutlarla sistem yazı tipi yedeğini kullanır ve Rise yazı tipini yeniden dağıtmaz.

Karşılaştırmaya yardımcı olacak ayrıntılar yazın

Her sağlayıcı için bir hizmet kategorisi, kısa açıklama ve okunabilir bir uygunluk etiketi bulunur. Rehberde uydurma yorum sayıları, puanlar ve fiyatlar bilerek kullanılmamıştır. Gerçek bir hizmet pazarında bu değerlerin güvenilir bir kaynağı ve ölçü birimi olmalıdır; dekoratif yıldızlar yararlı bilgi sunmak yerine asılsız bir güven duygusu yaratır.

Thumbtack Thumbprint Tasarım Sistemi Kartlar, Aralıklar ve Duyarlı Düzen

Karşılaştırma ayrıntılarını bir arada tutun

Hizmet sağlayıcı kartlarında 24px dolgu, 16px iç aralık ve 12px köşe yarıçapı kullanılır. Baş harfler dekoratiftir; yanındaki başlık erişilebilir addır. Kartın tüm yüzeyi iç içe geçmiş bir bağlantıya dönüştürülmez. Kaydetme ayrı bir düğme olarak kalır; böylece gelecekte eklenecek profil bağlantısı seçim davranışını yutmaz.

Dar ekranlarda kısa listeyi dikey olarak sıralayın

Thumbtack Thumbprint Tasarım Sistemi Filtreleme ve Kısa Liste Durumları

Filtreleri ve kaydedilmiş durumu birbirinden bağımsız tutun

Kategori seçimi ve uygunluk onay kutusu, oluşturulmuş üç kaydı filtreler. Bahçe bakımı ve Bu hafta müsait seçenekleri birlikte seçildiğinde sonuç boş kalır ve filtreleri sıfırlama eylemi görünür. Filtreleme silme işlemi olmadığından daha önce kaydedilmiş kayıtlar kısa listede kalır. Bu kural kaynakta görülebilir ve arka uç olmadan denetlenebilir.

İnceleme eyleminin sonucunu doğru ifade edin

Boş bir kısa listeyi incelemek, sonraki adımda ne yapılacağını açıklar. Boş olmayan bir listeyi incelemek, listedeki öğe sayısını bildirir ve işlemin yalnızca yerel olarak gerçekleştiğini açıkça belirtir. Kaydedilmiş bir öğe değiştiğinde bu sonuç temizlenir; böylece eski bir onay mesajının farklı bir kısa listeyi tanımlaması önlenir. Örnek, bir uzmanla iletişime geçtiğini asla iddia etmez.

Thumbtack Thumbprint Tasarım Sistemi Klavye ve Erişilebilir Seçim

Denetimler için yerel anlamlandırma kullanın

Kategori seçimi etiketli bir açılır menüyle, ikili bir koşul ise etiketli bir onay kutusuyla yapılır. Her kaydetme düğmesinin sağlayıcıya özel bir erişilebilir adı ve aria-pressed özelliği vardır. Sonuç sayacı nazik bir canlı bölge kullanır; inceleme geri bildirimi ise durum anlamlandırmasına sahiptir. Klavye odağı, üzerine gelme durumundan bağımsız olarak görünür.

Gerçek başlıklar ve esnek yükseklikler kullanın

Sağlayıcı adları, kalın yazılmış span öğeleri değil, örnek içindeki h2 öğeleridir. Baş harfler ve özgün dekoratif SVG, erişilebilirlik ağacının dışında tutulur. Uzun adlar ve açıklamalar, eylemi ekran dışına taşımadan satırlara bölünebilmelidir; metin yakınlaştırmasında kırpma yerine esnek satırlar kullanılmalıdır.

Thumbtack Thumbprint Tasarım Sistemi Eksiksiz Uygulama

Eksiksiz örneği çalıştırıp inceleyin

HTML örneğini index.html olarak kaydedin ve bulunduğu klasörü sunun. Örnek, satır içi CSS ve JavaScript içerir; paket kurulumu veya ağ bağlantısı gerektirmez. Üç kayıt ve seçim Set'i açıkça tanımlanmıştır; böylece oluşturulmuş bir paketi tersine mühendislikle çözmeden davranış uyarlanabilir.

1. Eksiksiz HTML dosyasını kaydedin.
2. Dosyayı yerel olarak sunun ve tarayıcıda açın.
3. Sonuçları boş kalacak şekilde filtreleyin ve filtreleri sıfırlayın.
4. İki sağlayıcıyı kaydedin, inceleyin ve ardından birini kaldırın.

Yerel bileşenlere bilinçli biçimde geçin

React kitaplığına geçerken, kullanılan tam sürüm için güncel ServiceCard, Button ve tipografi belgelerini inceleyin. Ürüne uygunsa bu örnekteki durum modelini koruyun, ancak özgün işaretlemeyi doğrulanmış API'lerle değiştirin. Görsel ve klavye regresyon kontrolleri yapmadan v2 değerlerini v1 bileşenlerine uygulamayın.

Thumbtack Thumbprint Tasarım Sistemi Ajan Devri ve İnceleme

Ajana kapsamı belirli bir görev verin

Ajandan, seçilen Thumbprint sürümünü kullanan, açık kaynak URL'lerine ve yalnızca yerel kullanım için oluşturulmuş kurgusal kayıtlara sahip bir ev hizmetleri karşılaştırma ekranı hazırlamasını isteyin. Filtreleme ile seçimin birbirinden ayrı olduğu kuralı koruyun. Eksiksiz örneği davranış referansı olarak verin ve yerel React bileşenlerinin mi yoksa bağımsız HTML öğelerinin mi beklendiğini belirtin.

Hata durumlarını inceleyin

• Kaydedilmiş durum filtreleme boyunca korunur.
• Kısa liste değiştiğinde eski onay temizlenir.
• Uydurma puan veya iletişim sonucu gösterilmez.

Thumbtack Thumbprint Tasarım Sistemi Bileşen Örnekleri

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