# Thumbtack Thumbprint Tasarım Sistemi

## Thumbtack Thumbprint Tasarım Sistemi Arayüz Önizlemesi

Kurgusal bahçe hizmetlerini filtreleyin, hizmet sağlayıcıları kaydedin ve yerel kısa listenizi gözden geçirin.

## Thumbtack Thumbprint Tasarım Sistemi Tasarım Başvurusu

Thumbprint'in herkese açık v2 JavaScript belirteç başvurusu; değerler Ekim 2026'da okunmuştur. Örnekte sayısal boyutlar CSS piksele dönüştürülmüştür.

### Renk temel değerleri ve uygulama rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| tpV2ColorGray50 | #f5f6f6 | Kısa liste için sakin arka plan yüzeyi. |
| tpV2ColorGray200 | #dddee1 | Kart sınırları ve ayırıcılar. |
| tpV2ColorGray600 | #595c61 | Beyaz üzerindeki ikincil ayrıntılar. |
| tpV2ColorGray900 | #2b2d2f | Ana metin. |
| tpV2ColorBlue50 | #f0faff | Seçili denetim yüzeyi. |
| tpV2ColorBlue100 | #e0f4fe | Özgün ev çiziminin dolgu rengi. |
| tpV2ColorBlue600 | #009fd9 | Başvuru temel değeri; küçük beyaz metinlerde kullanılmaz. |
| tpV2ColorBlue700 | #0175A3 | Beyaz metinli uygulama eylem rengi. |
| tpV2ColorBlue800 | #066286 | Odak dış çizgisi ve çizim konturu. |
| tpV2ColorGreen50 | #eefbf4 | Uygunluk etiketi yüzeyi. |
| tpV2ColorGreen200 | #b0eacb | Dekoratif bahçe çizimi. |
| tpV2ColorGreen700 | #126a4b | Uygunluk metni. |
### Aralıklar ve köşeler

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| tpV2SpaceXxsmall | 4 | Sayısal piksel değeri; bileşim aralıklarında kullanılır. |
| tpV2SpaceXsmall | 8 | Sayısal piksel değeri; bileşim aralıklarında kullanılır. |
| tpV2SpaceSmall | 12 | Sayısal piksel değeri; bileşim aralıklarında kullanılır. |
| tpV2SpaceMedium | 16 | Sayısal piksel değeri; bileşim aralıklarında kullanılır. |
| tpV2SpaceLarge | 20 | Sayısal piksel değeri; bileşim aralıklarında kullanılır. |
| tpV2SpaceXlarge | 24 | Sayısal piksel değeri; bileşim aralıklarında kullanılır. |
| tpV2SpaceXxlarge | 32 | Sayısal piksel değeri; bileşim aralıklarında kullanılır. |
| tpV2CornerRadiusXsmall | 4 | Sayısal piksel değeri; örnekte denetimler için Medium, kartlar için Large kullanılır. |
| tpV2CornerRadiusSmall | 6 | Sayısal piksel değeri; örnekte denetimler için Medium, kartlar için Large kullanılır. |
| tpV2CornerRadiusMedium | 8 | Sayısal piksel değeri; örnekte denetimler için Medium, kartlar için Large kullanılır. |
| tpV2CornerRadiusLarge | 12 | Sayısal piksel değeri; örnekte denetimler için Medium, kartlar için Large kullanılır. |
| tpV2CornerRadiusXlarge | 16 | Sayısal piksel değeri; örnekte denetimler için Medium, kartlar için Large kullanılır. |
| tpV2CornerRadiusSides | 9999 | Sayısal piksel değeri; örnekte denetimler için Medium, kartlar için Large kullanılır. |
### Duyarlı tipografi ve düzen

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| tpV2BreakpointSmall | 481px | Küçük düzen eşiği. |
| tpV2BreakpointMedium | 700px | Örnek bu eşikte iki sütunlu düzene geçer. |
| tpV2BreakpointLarge | 1025px | Büyük düzen eşiği. |
| tpV2BreakpointSplitViewSmall | 769px | Yalnızca bölünmüş görünüme özgü eşik; Medium ile eş anlamlı değildir. |
| tpV2BreakpointSplitViewMedium | 1060px | Daha geniş bölünmüş görünüm eşiği. |
| tpV2FontTitle2Size | 28 | Küçük ekran başlık boyutu, piksel cinsinden. |
| tpV2FontTitle2ResponsiveSize | 36 | Büyük ekran başlık boyutu, piksel cinsinden. |
| tpV2FontTitle2LineHeight | 1.1 | Birim içermeyen başlık satır yüksekliği; anlamsal başlık düzeyinden bağımsızdır. |
| tpV2FontText1Size | 16 | Gövde metni boyutu. |
| tpV2FontText1LineHeight | 1.4 | Gövde satır yüksekliği çarpanı. |
| tpV2FontWeightRegular | 400 | Normal gövde metni. |
| tpV2FontWeightBold | 700 | Yedek yazı tipi kullanılırken güçlü vurgu. |
## Thumbtack Thumbprint Tasarım Sistemi Eksiksiz Kılavuz

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

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

Düzen 700px'te değişerek kısa listeyi sonuçların altına taşır. Dar genişliklerde kaydetme eylemi metnin altına geçer ve dekoratif ev illüstrasyonu gizlenir. Üstbilgi, anlamının tamamını korur. Sabit yükseklikteki hiçbir panel sağlayıcı açıklamalarını kırpmaz veya görünüm alanı boyutunda boş bir önizlemeye zorlamaz.

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

Boş sonuçları, kısa liste olmamasını, birden fazla sağlayıcının kaydedilmesini, inceleme sonrasında öğe kaldırılmasını, uzun adları ve dar ekranları gözden geçirin. Üç çekici kart içeren bir ekran görüntüsü bu etkileşimlerin hiçbirini kanıtlamaz. Paylaşılan bir temada değişiklik yayınlamadan önce belirteç tablosunu sabitlenmiş kaynakla karşılaştırın.

- 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

### Eksiksiz ev projesi kısa listesi

Özgün, kendi içinde çalışan HTML/CSS/JavaScript; filtreler, seçili durum, boş sonuçtan kurtarma ve yerel inceleme içerir.

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

Kod referansı

- index.html olarak kaydedin. Yerel Thumbprint bileşen çalışma zamanı kullanılmaz.

## Thumbtack Thumbprint Tasarım Sistemi Ajan Kurulumu

### Uygulamaya Başlangıç Noktası

Paket veya API kimlik bilgisi gerekmez. Örnek, yerel bir uygulama incelemesidir.

```
# Save the complete HTML example as index.html
python3 -m http.server 8080
# Open http://localhost:8080
```

### Projeniz İçin Bir İstem

```
Bu kılavuzdaki Thumbprint v2 değerlerini kullanarak bir hizmet karşılaştırma ekranı oluşturun. Filtreler boyunca yerel kısa listeyi koruyun, boş sonuçtan kurtarma durumu ekleyin ve inceleme geri bildirimini seçimle eşzamanlı tutun. Kurgusal kayıtlar ve anlamsal yerel HTML öğeleri kullanın; ancak doğrulanmış bir Thumbprint React paketi açıkça seçilmişse bu paketi kullanabilirsiniz. v1 bileşen varsayımlarını v2 belirteç adlarıyla karıştırmayın.
```

## Thumbtack Thumbprint Tasarım Sistemi Kaynakları ve Kapsamı

Thumbprint için hazırlanmış bir OpenDesign uygulama kılavuzu. Çalışma örneği, seçili v2 değerlerini kullanan özgün HTML öğelerinden oluşur; yerel Thumbtack React kitaplığı değildir. Herkese açık tipografi kılavuzu daha eski bir ölçeği açıklar; bu sayfa, bu ölçeği v2 belirteç referansından ayrı tutar. Tüm sağlayıcılar kurgusaldır.

- V2 belirteç referansı Somut değerler ve sürüme özgü dışa aktarma adları.

- Tipografi kılavuzu Rise ve ayrıca belgelenmiş eski tip ölçeği.

- Service Card belgeleri Yerel bileşen referansı; v1 rotası v2 uyumluluğu iddiası değildir.

## Thumbtack Thumbprint Tasarım Sistemi İlgili Kaynaklar

### Twilio Paste

Paste’in tema ve düğme kurallarını, doğrulanmış boşluk ölçeğini kullanarak bir bildirim taslağı oluşturun. Düzenleme, gözden geçirme ve mesajı gerçekten gönderme aşamalarını net biçimde ayırt edin.

### Visa Product tasarım sistemi

Yerel radyo denetimleri, alternatif renkli başlık ve inceleme özeti içeren anlaşılır bir ekstre biçimi tercihi oluşturmak için Visa Nova CSS kullanın. Tam 1.6.5 tema değerlerini, ölçeklenebilir boşlukları ve eksiksiz stil sayfası entegrasyonunu inceleyin.

### Volvo Cars Web tasarım sistemi

Volvo Cars’ın HTML öncelikli web temelini, gerçek açık tema belirteçlerini ve yerel seçilebilir kart stillerini; bağımsız seçimler, tema değiştirme ve sıfırlama içeren eksiksiz bir paketleme planı örneğinde inceleyin.


- [Uygulama başvurusu](https://thumbprint.design/tokens/v2/javascript)
- [Kaynak](https://thumbprint.design/tokens/v2/javascript)
- [Kod referansı](https://thumbprint.design/tokens/v2/javascript)
- [V2 belirteç referansı Somut değerler ve sürüme özgü dışa aktarma adları.](https://thumbprint.design/tokens/v2/javascript)
- [Tipografi kılavuzu Rise ve ayrıca belgelenmiş eski tip ölçeği.](https://thumbprint.design/guidelines/typography)
- [Service Card belgeleri Yerel bileşen referansı; v1 rotası v2 uyumluluğu iddiası değildir.](https://thumbprint.design/components/service-card/v1/usage)