# Дизайн-система Thumbtack Thumbprint

## Предпросмотр интерфейса дизайн-системы Thumbtack Thumbprint

Фильтруйте вымышленные услуги для сада, сохраняйте исполнителей и просматривайте локальный список.

## Справочник по дизайн-системе Thumbtack Thumbprint

Справочник публичных токенов Thumbprint v2 JavaScript; значения проверены в октябре 2026 года. Числовые размеры в примере переведены в пиксели 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. Типографика и контент

### Учитывайте различия в типографике между версиями

В публичном руководстве по типографике указаны шрифт Rise с насыщенностью 400 и 700 и устаревшая адаптивная шкала размеров заголовков. На странице токенов v2 представлены другие размеры и дробные значения насыщенности. Не объединяйте их в одну несуществующую настройку по умолчанию. В этом предпросмотре используется системный резервный шрифт и явно заданы размеры по мотивам шкалы v2; шрифт Rise не распространяется.

### Добавляйте детали, помогающие сравнивать

Для каждого исполнителя указаны категория услуги, краткое описание и понятная метка доступности. В каталоге намеренно отсутствуют вымышленные количества отзывов, рейтинги и цены. На реальном маркетплейсе для таких данных нужны надёжные источники и единицы измерения; декоративные звёзды лишь создают ложное ощущение достоверности, не добавляя полезной информации.

## Дизайн-система Thumbtack Thumbprint. Карточки, интервалы и адаптивный макет

### Размещайте детали для сравнения вместе

Для карточек исполнителей заданы внутренний отступ 24px, внутренний интервал 16px и скругление 12px. Инициалы декоративны; доступное имя задаёт расположенный рядом заголовок. Карточка целиком не превращается во вложенную ссылку. Кнопка выбора остаётся отдельной, поэтому будущая ссылка на профиль не перехватит поведение выбора.

### На узких экранах расположите список столбцом

При ширине 700px макет перестраивается: список сохранённых вариантов перемещается под результаты. На узких экранах действие сохранения располагается под текстом, а декоративная иллюстрация дома скрывается. Заголовок по-прежнему содержит всю необходимую информацию. Ни одна панель с фиксированной высотой не обрезает описания специалистов и не заставляет предварительный просмотр занимать пустое пространство окна.

## Thumbtack Thumbprint Состояния фильтрации и списка сохранённых вариантов в дизайн-системе

### Не связывайте фильтры с состоянием сохранения

Список выбора категории и флажок доступности отбирают три заданные записи. Если выбрать «Уход за садом» и «Доступно на этой неделе», результатов не будет и появится возможность сбросить фильтры. Ранее сохранённые записи остаются в списке: фильтрация не удаляет их. Это правило видно в исходном коде, и его можно проверить без серверной части.

### Покажите результат действия честно

Если список сохранённых вариантов пуст, сообщение после нажатия «Проверить список» подсказывает, что делать дальше. Если в списке есть варианты, сообщение показывает их количество и явно указывает, что данные остаются на устройстве. При изменении списка сообщение очищается, чтобы старое подтверждение не относилось к уже изменённому списку. В примере нет утверждений о связи со специалистом.

## Thumbtack Thumbprint Выбор с клавиатуры и доступность в дизайн-системе

### Используйте для элементов управления семантическую разметку

Для выбора категории используется подписанный список, а для условия «да/нет» — подписанный флажок. У каждой кнопки сохранения есть уникальное доступное имя с указанием специалиста и атрибут aria-pressed. Количество результатов объявляется в области с ненавязчивым обновлением, а сообщение о проверке списка использует семантику статуса. Индикатор клавиатурного фокуса виден независимо от наведения курсора.

### Используйте настоящие заголовки и гибкую высоту

Имена специалистов оформлены как элементы h2, а не как выделенные полужирным текстом фрагменты. Инициалы и исходный декоративный SVG исключены из дерева доступности. Длинные имена и описания должны переноситься, не уводя действие за пределы экрана; при увеличении текста нужны гибкие строки, а не обрезка.

## Thumbtack Thumbprint Полная реализация дизайн-системы

### Запустите и изучите пример целиком

Сохраните пример HTML как index.html и запустите сервер в содержащей его папке. В нём есть встроенные CSS и JavaScript, установка пакетов и подключение к сети не требуются. Три записи и Set для выбранных вариантов заданы явно, поэтому поведение можно адаптировать без анализа сгенерированного пакета.

1. Сохраните файл HTML целиком.

2. Запустите локальный сервер и откройте страницу в браузере.

3. Настройте фильтры так, чтобы результатов не было, затем сбросьте их.

4. Сохраните двух специалистов, проверьте список, затем удалите одного.

### Переходите на нативные компоненты осознанно

При переходе на библиотеку React изучите актуальную документацию по ServiceCard, Button и типографике для используемой версии. Если модель состояния из этого примера подходит продукту, сохраните её, но замените исходную разметку проверенными API. Не переносите значения v2 в компоненты v1 без визуальной и клавиатурной регрессионной проверки.

## Thumbtack Thumbprint Передача задачи AI-агенту и проверка дизайн-системы

### Чётко ограничьте задачу для агента

Попросите создать экран сравнения услуг для дома на основе выбранной версии Thumbprint, указав точные URL источников и локальные вымышленные записи. Сохраните различие между фильтрацией и выбором. Предоставьте полный пример в качестве образца поведения и уточните, нужны ли нативные компоненты 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-агента для дизайн-системы

### Отправная точка для реализации

Пакеты и учётные данные 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 Источники и область применения дизайн-системы

Руководство по созданию приложения OpenDesign на основе Thumbprint. В качестве рабочего примера используется оригинальная реализация на HTML с отдельными значениями v2, а не нативная библиотека React от Thumbtack. В общедоступном руководстве по типографике описана старая шкала; здесь она отделена от справочника токенов 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, фактические токены светлой темы и стили нативных карточек с возможностью выбора на примере полноценного плана упаковки: с независимым выбором, переключением темы и сбросом.


- [Справочник по реализации](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)