# 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 | 示例在此断点切换为两栏布局。 |
| 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 提供两个令牌代际。v2 导出项以 tpV2 开头，并包含新的灰色色阶、响应式标题值和更多中间字重。组件若在 v1 路径下记录，并不能证明它使用了这些 v2 数值。在替换共享样式之前，请记录产品当前使用的软件包和令牌代际。

### 将此示例用作布局构成参考

此示例直接将公开的基础组件应用于原创的 HTML。它不会封装 ServiceCard，也不声称功能与 Thumbtack 应用完全一致。原生实现应从文档中说明的软件包 API 入手，并且只有在定义好加载、错误和权限约定后，才替换为真实服务数据。

## Thumbtack Thumbprint 设计系统颜色角色与选择状态

### 区分操作、选择与可用状态

主要操作使用 Blue700，已保存控件使用 Blue50，可用时间文本使用 Green700 搭配 Green50。服务提供者名称使用 Gray900，辅助详情使用 Gray600。这些映射是基于文档所述基础组件做出的应用层选择，并非虚构的语义令牌名称。

### 避免仅用颜色表示候选清单状态

已保存的服务提供者不仅会改变按钮色调，还会更新按钮标签和 aria-pressed 状态。可用时间始终以文字描述。筛选可以隐藏已保存的服务提供者，但不会将其从候选清单中删除；清单仍保持可见，让用户了解二者的区别。

## Thumbtack Thumbprint 设计系统排版与内容

### 注意不同版本的字体差异

公开的排版指南列出了 400 和 700 两种字重的 Rise，以及较早的响应式标题字号阶梯。v2 令牌页面则包含不同的字号和非整数权重。不要将两者混合，臆造出一个统一的默认规范。此预览使用系统字体回退，字号明确参考 v2 阶梯，并且不会重新分发 Rise。

### 撰写有助于比较的详情

每位服务提供者都包含服务类别、简短描述和易读的可用时间标签。目录有意省略了虚构的评价数量、评分和价格。在真实的交易平台中，这些数据必须有可靠的来源和单位；装饰性星级只会带来虚假的信任感，而非有用的信息。

## Thumbtack Thumbprint 设计系统卡片、间距与响应式布局

### 将比较信息放在一起

服务提供者卡片使用 24px 内边距、16px 内部间距和 12px 圆角。姓名首字母仅作装饰；相邻的标题才是无障碍名称。卡片不会将整个界面表面变成嵌套链接。保存操作保留为独立按钮，避免将来添加个人资料链接时吞并选择行为。

### 在窄屏上将候选清单移至下方

布局在 700px 处切换，候选清单移到结果列表下方。在窄屏上，保存操作移至文本下方，并隐藏装饰性的房屋插图。页眉仍会完整传达其含义。没有固定高度的面板会截断服务提供者的描述，也不会强行生成占满视口高度的预览。

## Thumbtack Thumbprint 设计系统筛选与候选清单状态

### 让筛选条件与已保存状态彼此独立

类别选择框和可用时间复选框会筛选三条预设记录。选择“园艺养护”和“本周有空”会得到空结果，并显示重置操作。先前保存的记录仍保留在候选清单中，因为筛选不等于删除。此规则在源码中清晰可见，无需后端即可验证。

### 让确认操作给出真实反馈

候选清单为空时，查看操作会说明接下来该怎么做。清单非空时，会报告其中的条目数，并明确说明操作仅在本地进行。更改已保存的项目会清除该反馈，避免过时的确认信息与当前清单不符。此示例不会声称已联系专业人士。

## Thumbtack Thumbprint 设计系统键盘操作与无障碍选择

### 使用原生语义实现控件

带标签的选择框用于选择类别，带标签的复选框用于设置布尔条件。每个保存按钮都有针对具体服务提供者的无障碍名称和 aria-pressed 属性。结果数量使用礼貌式实时区域；查看反馈使用状态语义。键盘焦点无论是否悬停都清晰可见。

### 使用实际标题并保持高度灵活

示例中的服务提供者名称使用 h2 元素，而非加粗的 span。姓名首字母和原创装饰性 SVG 不会出现在无障碍树中。长名称和长描述应当自动换行，且不能将操作挤出屏幕；放大文本时应使用高度灵活的行布局，而不是截断文本。

## Thumbtack Thumbprint 设计系统完整实现

### 运行并检查完整示例

将 HTML 示例保存为 index.html，并通过服务器提供该文件所在文件夹。示例内含 CSS 和 JavaScript，无需安装软件包，也不依赖网络。三条记录和选择 Set 均明确写出，因此可以直接调整行为，无需逆向分析生成的构建包。

1. 保存完整的 HTML 文件。

2. 在本地运行并在浏览器中打开。

3. 筛选出空结果，然后重置。

4. 保存两家服务商，查看候选清单，然后移除一家。

### 有意升级到原生组件

迁移到 React 库时，请查看当前使用版本对应的 ServiceCard、Button 和字体文档，确认准确的版本。若符合产品需求，可保留此示例中的状态模型，但要用经过验证的 API 替换原始标记。不要将 v2 的取值直接套用到 v1 组件上，除非已完成视觉和键盘回归检查。

## Thumbtack Thumbprint 设计系统 AI Agent 交接与评审

### 为 AI Agent 设定明确的任务范围

请使用选定版本的 Thumbprint，设计一个家居服务对比页面，并明确标注来源网址及仅供本地使用的虚构记录。保留筛选与选择之间的区别。将完整示例作为行为参考，并说明预期使用原生 React 组件还是独立的 HTML。

### 检查异常路径

检查空结果、没有加入候选清单的项目、保存多家服务商、查看后移除项目、名称过长及窄屏等情况。三张精美卡片的截图无法证明这些交互都正常。更改共享主题并发布前，请将令牌表与固定版本的来源进行对照。

- 筛选时，已保存的状态仍会保留。

- 更改候选清单后，旧的确认状态会清除。

- 不会虚构评分或联系结果。

## Thumbtack Thumbprint 设计系统组件示例

### 完整的家居项目候选清单

独立且完整的 HTML/CSS/JavaScript 示例，包含筛选、选中状态、空状态恢复和本地查看功能。

```
<!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 组件运行时。

## Thumbtack Thumbprint 设计系统 AI Agent 设置

### 实现起点

无需软件包或 API 凭据。此示例是本地应用研究。

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

### 适用于你项目的提示词

```
使用本指南中的 Thumbprint v2 取值构建服务对比页面。筛选时保留本地候选清单，包含空状态恢复界面，并确保查看反馈与所选项目同步。使用虚构记录和原生语义化 HTML，除非明确选择经过验证的 Thumbprint React 软件包。不要混用 v1 组件假设与 v2 令牌名称。
```

## Thumbtack Thumbprint 设计系统来源与范围

一份关于 Thumbprint 的 OpenDesign 应用指南。此处的工作示例是原创的 HTML，使用选定的 v2 取值，并非原生 Thumbtack React 库。公开的字体指南描述的是旧版比例；本页将其与 v2 令牌参考分开说明。所有服务商均为虚构。

- v2 令牌参考 具体取值及对应版本的导出名称。

- 字体指南 递增，以及单独记录的旧版字体比例。

- 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)
- [字体指南 递增，以及单独记录的旧版字体比例。](https://thumbprint.design/guidelines/typography)
- [Service Card 文档 原生组件参考；v1 路径不代表与 v2 兼容。](https://thumbprint.design/components/service-card/v1/usage)