# Thumbtack Thumbprintデザインシステム ## Thumbtack Thumbprintデザインシステムのインターフェースプレビュー 架空の庭づくりサービスを絞り込み、提供者を保存して、ローカルの候補リストを確認できます。 ## Thumbtack 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 | 代替フォント使用時の強調表示。 | ## Thumbtack Thumbprintデザインシステム完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## 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の角丸を使用します。イニシャルは装飾要素で、隣接する見出しがアクセシブルネームになります。カード全体をリンクにせず、リンクが入れ子にならないようにします。保存操作は独立したボタンにすることで、今後プロフィールへのリンクを追加しても、選択操作が妨げられません。 ### 狭い画面では候補リストを縦に並べる 700pxでレイアウトを切り替え、候補リストを検索結果の下に配置します。画面幅が狭い場合は保存アクションをテキストの下に移し、装飾用の家のイラストを非表示にします。ヘッダーには引き続き意味のある情報をすべて含めます。パネルの高さを固定して提供者の説明を切り詰めたり、空のプレビューをビューポートの高さに合わせて表示したりすることはありません。 ## Thumbtack Thumbprintデザインシステムの絞り込みと候補リストの状態 ### フィルターと保存状態を分けて管理する カテゴリーの選択と提供状況のチェックボックスで、作成済みの3件を絞り込みます。「ガーデンケア」と「今週対応可能」を選ぶと、結果は空になり、リセット操作が表示されます。フィルターは削除ではないため、保存済みの記録はショートリストに残ります。このルールはソースで確認でき、バックエンドがなくても検証できます。 ### レビュー操作の結果を正確に伝える ショートリストが空のときにレビューすると、次の操作を案内します。リストに項目があるときは件数を伝え、処理がローカルで完結することを明示します。保存した項目を変更すると結果表示をクリアし、別のショートリストに古い確認メッセージが表示されないようにします。この例では、専門家への連絡を行うとは謳いません。 ## Thumbtack Thumbprint デザインシステムのキーボード操作とアクセシブルな選択 ### コントロールにはネイティブのセマンティクスを使う カテゴリーの選択にはラベル付きのセレクトを、真偽値の条件にはラベル付きのチェックボックスを使います。各保存ボタンには提供者ごとのアクセシブルな名前とaria-pressedを設定します。結果件数にはpoliteのライブリージョンを、レビュー結果にはstatusセマンティクスを使います。キーボードフォーカスはホバー状態に依存せず、常に視認できます。 ### 適切な見出しを使い、高さを柔軟にする 提供者名には、太字のspanではなく、サンプル内のh2要素を使います。イニシャルと元の装飾用SVGはアクセシビリティツリーから除外します。長い名前や説明文は折り返し、操作ボタンが画面外に押し出されないようにします。テキストを拡大しても表示が崩れないよう、テキストを省略せず、行の高さを柔軟にします。 ## Thumbtack Thumbprint デザインシステムの完全実装 ### 完成した例を実行して確認する HTMLの例をindex.htmlとして保存し、そのフォルダーを配信します。CSSとJavaScriptはインラインで含まれており、パッケージのインストールもネットワーク接続も不要です。3件の記録と選択用のSetを明示しているため、生成済みバンドルを解析しなくても動作を応用できます。 1. HTMLファイル一式を保存します。 2. ローカルで配信し、ブラウザーで開きます。 3. 結果が空になるように絞り込み、リセットします。 4. 提供者を2件保存してレビューし、次に1件を削除します。 ### ネイティブコンポーネントへの移行は慎重に行う Reactライブラリーに移行する場合は、使用中の世代に対応するServiceCard、Button、タイポグラフィの最新ドキュメントを確認してください。この例の状態モデルが製品に適している場合は維持しつつ、元のマークアップを検証済みのAPIに置き換えます。視覚面とキーボード操作の回帰テストを行わずに、v2の値をv1コンポーネントに貼り付けないでください。 ## Thumbtack Thumbprint デザインシステムのAIエージェント向け引き継ぎとレビュー ### AIエージェントに範囲を限定したタスクを依頼する 選択した世代のThumbprintを使い、出典URLを明記したローカル限定の架空の記録で、住宅サービスの比較画面を作成するよう依頼します。フィルターと選択状態を明確に区別してください。動作の参考として完成した例を渡し、ネイティブのReactコンポーネントを使うのか、独立したHTMLを使うのかを指定します。 ### 失敗するケースを確認する 検索結果が空の場合、ショートリストに何もない場合、複数の提供者を保存した場合、レビュー後に削除した場合、名前が長い場合、画面幅が狭い場合を確認します。魅力的なカードが3枚並んだスクリーンショットだけでは、こうした操作を検証できません。共有テーマを変更する前に、トークン表と固定したソースを照合してください。 - 保存した状態はフィルター後も保持されます。 - ショートリストを変更すると、古い確認メッセージがクリアされます。 - 評価や連絡結果を捏造しません。 ## Thumbtack Thumbprint デザインシステムのコンポーネント例 ### 住宅プロジェクトのショートリスト一式 フィルター、選択状態、検索結果がない場合の復帰、ローカルでのレビューを備えた、独自の自己完結型HTML/CSS/JavaScript。 ``` Home project shortlist
HOME PROJECT / FICTIONAL DIRECTORY

Find the right help for home

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

``` コードリファレンス - index.htmlとして保存します。ネイティブのThumbprintコンポーネントランタイムは使用しません。 ## Thumbtack Thumbprint デザインシステムのAIエージェント設定 ### 実装の出発点 パッケージもAPIの認証情報も不要です。この例はローカルで動作するアプリケーションの検証用です。 ``` # Save the complete HTML example as index.html python3 -m http.server 8080 # Open http://localhost:8080 ``` ### あなたのプロジェクト向けプロンプト ``` このガイドに記載されたThumbprint v2の値を使って、サービス比較画面を作成してください。フィルターを適用してもローカルのショートリストを保持し、検索結果がない場合の復帰状態を用意して、レビュー結果が選択状態と同期するようにしてください。架空の記録を使い、検証済みのThumbprint Reactパッケージを明示的に選択しない限り、ネイティブのセマンティクスを備えたHTMLを使用してください。v1コンポーネントの前提とv2のトークン名を混在させないでください。 ``` ## Thumbtack Thumbprint デザインシステムの出典と対象範囲 Thumbprintを使用するためのOpenDesignアプリケーションガイドです。動作サンプルは、選択したv2の値を使った独自のHTMLであり、ThumbtackのネイティブなReactライブラリーではありません。公開されているタイポグラフィガイドには旧スケールが記載されているため、このページではv2のトークンリファレンスと分けて扱います。提供者はすべて架空です。 - v2のトークンリファレンス 具体的な値と世代ごとのエクスポート名。 - タイポグラフィガイド Riseと、別途ドキュメント化された旧タイプスケール。 - Service Cardのドキュメント ネイティブコンポーネントのリファレンス。v1のパスはv2との互換性を示すものではありません。 ## Thumbtack Thumbprint デザインシステムの関連リソース ### Twilio Paste Pasteのテーマとボタンの仕様、検証済みのスペーシングスケールを使って通知の下書きを作成し、編集、レビュー、実際の送信を明確に区別してください。 ### Visa Product デザインシステム VisaのNova CSSを使って、ネイティブのラジオボタン、色違いのヘッダー、確認用サマリーを備えた、見やすい明細形式の選択画面を作成します。正確な1.6.5のテーマ値、拡張可能なスペーシング、スタイルシート全体の組み込み方法を確認できます。 ### Volvo Cars Web デザインシステム Volvo CarsのHTMLを優先したWeb基盤、実際のライトモードのトークン、ネイティブの選択可能なカードのスタイルを、個別の選択、テーマ切り替え、リセットを備えた完成版のパッキングプランの例で確認できます。 - [実装リファレンス](https://thumbprint.design/tokens/v2/javascript) - [ソース](https://thumbprint.design/tokens/v2/javascript) - [コードリファレンス](https://thumbprint.design/tokens/v2/javascript) - [v2のトークンリファレンス 具体的な値と世代ごとのエクスポート名。](https://thumbprint.design/tokens/v2/javascript) - [タイポグラフィガイド Riseと、別途ドキュメント化された旧タイプスケール。](https://thumbprint.design/guidelines/typography) - [Service Cardのドキュメント ネイティブコンポーネントのリファレンス。v1のパスはv2との互換性を示すものではありません。](https://thumbprint.design/components/service-card/v1/usage)