01Thumbtack Thumbprintデザインシステムのインターフェースプレビュー
架空の庭づくりサービスを絞り込み、提供者を保存して、ローカルの候補リストを確認できます。
選択したThumbprint v2プリミティブをHTMLが独自に解釈したもの。·
実装リファレンス 02Thumbtack Thumbprintデザインシステムのデザインリファレンス
Thumbprint公開版v2のJavaScriptトークンリファレンス。値は2026年10月時点のものです。数値の寸法は、このサンプルではCSSピクセルに変換しています。
カラーのプリミティブとアプリケーションでの役割
ソース | 名前 / ルール | 値 / 設定 | 用途 |
|---|
tpV2ColorGray50 | #f5f6f6 | 候補リストに使う控えめな背景。 |
tpV2ColorGray200 | #dddee1 | カードの境界線と区切り線。 |
tpV2ColorGray600 | #595c61 | 白地で使う補足情報。 |
tpV2ColorGray900 | #2b2d2f | 本文テキスト。 |
tpV2ColorBlue50 | #f0faff | 選択中のコントロールの背景。 |
tpV2ColorBlue100 | #e0f4fe | オリジナルの家のイラストに使う塗り色。 |
tpV2ColorBlue600 | #009fd9 | リファレンス用のプリミティブ。小さな白文字には使用しません。 |
tpV2ColorBlue700 | #0175A3 | 白文字を載せるアプリケーションのアクションカラー。 |
tpV2ColorBlue800 | #066286 | フォーカスのアウトラインとイラストの線。 |
tpV2ColorGreen50 | #eefbf4 | 利用可能状況を示すラベルの背景。 |
tpV2ColorGreen200 | #b0eacb | 装飾用の庭のイラスト。 |
tpV2ColorGreen700 | #126a4b | 利用可能状況を示すテキスト。 |
| 名前 / ルール | 値 / 設定 | 用途 |
|---|
tpV2SpaceXxsmall | 4 | 数値はピクセル単位。レイアウトの余白に使用します。 |
tpV2SpaceXsmall | 8 | 数値はピクセル単位。レイアウトの余白に使用します。 |
tpV2SpaceSmall | 12 | 数値はピクセル単位。レイアウトの余白に使用します。 |
tpV2SpaceMedium | 16 | 数値はピクセル単位。レイアウトの余白に使用します。 |
tpV2SpaceLarge | 20 | 数値はピクセル単位。レイアウトの余白に使用します。 |
tpV2SpaceXlarge | 24 | 数値はピクセル単位。レイアウトの余白に使用します。 |
tpV2SpaceXxlarge | 32 | 数値はピクセル単位。レイアウトの余白に使用します。 |
tpV2CornerRadiusXsmall | 4 | 数値はピクセル単位。このサンプルでは、コントロールにMedium、カードにLargeを使用します。 |
tpV2CornerRadiusSmall | 6 | 数値はピクセル単位。このサンプルでは、コントロールにMedium、カードにLargeを使用します。 |
tpV2CornerRadiusMedium | 8 | 数値はピクセル単位。このサンプルでは、コントロールにMedium、カードにLargeを使用します。 |
tpV2CornerRadiusLarge | 12 | 数値はピクセル単位。このサンプルでは、コントロールにMedium、カードにLargeを使用します。 |
tpV2CornerRadiusXlarge | 16 | 数値はピクセル単位。このサンプルでは、コントロールにMedium、カードにLargeを使用します。 |
tpV2CornerRadiusSides | 9999 | 数値はピクセル単位。このサンプルでは、コントロールにMedium、カードにLargeを使用します。 |
| 名前 / ルール | 値 / 設定 | 用途 |
|---|
tpV2BreakpointSmall | 481px | 小画面向けレイアウトのブレークポイント。 |
tpV2BreakpointMedium | 700px | このブレークポイントで、サンプルは2カラムになります。 |
tpV2BreakpointLarge | 1025px | 大画面向けレイアウトのブレークポイント。 |
tpV2BreakpointSplitViewSmall | 769px | 分割ビュー専用のブレークポイント。Mediumと同義ではありません。 |
tpV2BreakpointSplitViewMedium | 1060px | より幅の広い分割ビュー向けのブレークポイント。 |
tpV2FontTitle2Size | 28 | 小画面でのタイトルサイズ（ピクセル単位）。 |
tpV2FontTitle2ResponsiveSize | 36 | 大画面でのタイトルサイズ（ピクセル単位）。 |
tpV2FontTitle2LineHeight | 1.1 | 単位のないタイトルの行高。見出しのセマンティックレベルとは独立しています。 |
tpV2FontText1Size | 16 | 本文の文字サイズ。 |
tpV2FontText1LineHeight | 1.4 | 本文の行高の倍率。 |
tpV2FontWeightRegular | 400 | 標準の本文テキスト。 |
tpV2FontWeightBold | 700 | 代替フォント使用時の強調表示。 |
03Thumbtack Thumbprintデザインシステム完全ガイド
実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。
DESIGN-thumbtack-thumbprint.md詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。
ガイドをダウンロードThumbtack Thumbprintデザインシステム：トークンの世代を選択
v1とv2を区別する
Thumbprintには2つの世代のトークンがあります。v2のエクスポート名はtpV2で始まり、新しいグレースケール、レスポンシブなタイトル値、中間のフォントウェイトが含まれます。v1のルートで説明されているネイティブコンポーネントが、それらのv2の値を使用しているとは限りません。共有スタイルを置き換える前に、製品で使用しているパッケージと世代を確認してください。
このサンプルをレイアウトの検討に活用する
この例では、公開されているプリミティブをオリジナルのHTMLに直接適用しています。ServiceCardをラップしたものではなく、Thumbtackアプリケーションとの機能的な同等性をうたうものでもありません。ネイティブ実装では、まずドキュメントに記載されたパッケージAPIを基にし、読み込み、エラー、権限に関する仕様を定義してから実際のサービスデータに置き換えてください。
Thumbtack Thumbprintデザインシステムのカラーの役割と選択状態
アクション、選択状態、利用可能状況を分ける
メインのローカルアクションにはBlue700、保存済みのコントロールにはBlue50を使用します。利用可能状況を示すテキストにはGreen50上のGreen700を使います。提供者名にはGray900、補足情報にはGray600を使用します。これらはドキュメントに記載されたプリミティブを基にしたアプリケーション上の選択であり、独自のセマンティックトークン名ではありません。
色だけに頼らず候補リストを示す
提供者を保存すると、ボタンのラベルとaria-pressedの状態も変わり、色合いだけの変化にとどまりません。利用可能状況は時間帯を文章で表示します。絞り込みで保存済みの提供者が非表示になっても、候補リストからは削除されません。この違いがユーザーに伝わるよう、リストは引き続き表示されます。
Thumbtack Thumbprintデザインシステムのタイポグラフィとコンテンツ
文字スタイルのバージョンの違いを尊重する
公開されているタイポグラフィガイドでは、Riseのウェイトとして400と700、旧式のレスポンシブなタイトルスケールが案内されています。一方、v2のトークンページには異なるサイズと小数のウェイトが記載されています。これらをまとめて、実在しない単一のデフォルトとして扱わないでください。このプレビューではシステムフォントを代替フォントとして使用し、v2のスケールを参考にした明示的なサイズを指定しています。Riseの再配布は行っていません。
比較に役立つ詳細を記載する
各提供者には、サービスカテゴリ、短い説明、読みやすい利用可能状況のラベルがあります。このディレクトリでは、根拠のないレビュー件数、評価、価格を意図的に省いています。実際のマーケットプレイスでこうした値を掲載する場合は、信頼できる出典と単位が必要です。飾りの星印は役立つ情報ではなく、根拠のない信頼感を与えてしまいます。
Thumbtack Thumbprintデザインシステムのカード、スペーシング、レスポンシブレイアウト
比較に必要な情報をひとまとまりにする
提供者カードには、24pxのパディング、内部の間隔として16px、12pxの角丸を使用します。イニシャルは装飾要素で、隣接する見出しがアクセシブルネームになります。カード全体をリンクにせず、リンクが入れ子にならないようにします。保存操作は独立したボタンにすることで、今後プロフィールへのリンクを追加しても、選択操作が妨げられません。
狭い画面では候補リストを縦に並べる
Thumbtack Thumbprintデザインシステムの絞り込みと候補リストの状態
フィルターと保存状態を分けて管理する
カテゴリーの選択と提供状況のチェックボックスで、作成済みの3件を絞り込みます。「ガーデンケア」と「今週対応可能」を選ぶと、結果は空になり、リセット操作が表示されます。フィルターは削除ではないため、保存済みの記録はショートリストに残ります。このルールはソースで確認でき、バックエンドがなくても検証できます。
レビュー操作の結果を正確に伝える
ショートリストが空のときにレビューすると、次の操作を案内します。リストに項目があるときは件数を伝え、処理がローカルで完結することを明示します。保存した項目を変更すると結果表示をクリアし、別のショートリストに古い確認メッセージが表示されないようにします。この例では、専門家への連絡を行うとは謳いません。
Thumbtack Thumbprint デザインシステムのキーボード操作とアクセシブルな選択
コントロールにはネイティブのセマンティクスを使う
カテゴリーの選択にはラベル付きのセレクトを、真偽値の条件にはラベル付きのチェックボックスを使います。各保存ボタンには提供者ごとのアクセシブルな名前とaria-pressedを設定します。結果件数にはpoliteのライブリージョンを、レビュー結果にはstatusセマンティクスを使います。キーボードフォーカスはホバー状態に依存せず、常に視認できます。
適切な見出しを使い、高さを柔軟にする
提供者名には、太字のspanではなく、サンプル内のh2要素を使います。イニシャルと元の装飾用SVGはアクセシビリティツリーから除外します。長い名前や説明文は折り返し、操作ボタンが画面外に押し出されないようにします。テキストを拡大しても表示が崩れないよう、テキストを省略せず、行の高さを柔軟にします。
Thumbtack Thumbprint デザインシステムの完全実装
完成した例を実行して確認する
HTMLの例をindex.htmlとして保存し、そのフォルダーを配信します。CSSとJavaScriptはインラインで含まれており、パッケージのインストールもネットワーク接続も不要です。3件の記録と選択用のSetを明示しているため、生成済みバンドルを解析しなくても動作を応用できます。
- HTMLファイル一式を保存します。
- ローカルで配信し、ブラウザーで開きます。
- 結果が空になるように絞り込み、リセットします。
- 提供者を2件保存してレビューし、次に1件を削除します。
ネイティブコンポーネントへの移行は慎重に行う
Reactライブラリーに移行する場合は、使用中の世代に対応するServiceCard、Button、タイポグラフィの最新ドキュメントを確認してください。この例の状態モデルが製品に適している場合は維持しつつ、元のマークアップを検証済みのAPIに置き換えます。視覚面とキーボード操作の回帰テストを行わずに、v2の値をv1コンポーネントに貼り付けないでください。
Thumbtack Thumbprint デザインシステムのAIエージェント向け引き継ぎとレビュー
AIエージェントに範囲を限定したタスクを依頼する
選択した世代のThumbprintを使い、出典URLを明記したローカル限定の架空の記録で、住宅サービスの比較画面を作成するよう依頼します。フィルターと選択状態を明確に区別してください。動作の参考として完成した例を渡し、ネイティブのReactコンポーネントを使うのか、独立したHTMLを使うのかを指定します。
失敗するケースを確認する
- 保存した状態はフィルター後も保持されます。
- ショートリストを変更すると、古い確認メッセージがクリアされます。
- 評価や連絡結果を捏造しません。
Thumbtack Thumbprint デザインシステムのコンポーネント例
住宅プロジェクトのショートリスト一式
フィルター、選択状態、検索結果がない場合の復帰、ローカルでのレビューを備えた、独自の自己完結型HTML/CSS/JavaScript。
html
<!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>
コードリファレンス
- index.htmlとして保存します。ネイティブのThumbprintコンポーネントランタイムは使用しません。
04Thumbtack Thumbprint デザインシステムのAIエージェント設定
実装の出発点
パッケージもAPIの認証情報も不要です。この例はローカルで動作するアプリケーションの検証用です。
シェル
# Save the complete HTML example as index.html
python3 -m http.server 8080
# Open http://localhost:8080
あなたのプロジェクト向けプロンプト
AI エージェント用プロンプト
このガイドに記載されたThumbprint v2の値を使って、サービス比較画面を作成してください。フィルターを適用してもローカルのショートリストを保持し、検索結果がない場合の復帰状態を用意して、レビュー結果が選択状態と同期するようにしてください。架空の記録を使い、検証済みのThumbprint Reactパッケージを明示的に選択しない限り、ネイティブのセマンティクスを備えたHTMLを使用してください。v1コンポーネントの前提とv2のトークン名を混在させないでください。
05Thumbtack Thumbprint デザインシステムの出典と対象範囲
Thumbprintを使用するためのOpenDesignアプリケーションガイドです。動作サンプルは、選択したv2の値を使った独自のHTMLであり、ThumbtackのネイティブなReactライブラリーではありません。公開されているタイポグラフィガイドには旧スケールが記載されているため、このページではv2のトークンリファレンスと分けて扱います。提供者はすべて架空です。
