# ТЗ: семейство бейджей «Проверенный продавец» 123machinery
Плашка доверия, которую верифицированный дилер ставит на свой сайт. Картинку
отдаёт наш сервер; часть текста сервер подставляет **динамически** (перевод под
язык страницы + год регистрации бизнеса дилера). Поэтому текст «Проверенный
продавец» и «с … года» **запекать в картинку нельзя** — это живые текстовые зоны.
**Один ассет = все 6 языков + любой дилер.** Дизайнер НЕ делает языковые и
пер-дилерские версии — это делает наш сервер. Дизайнер делает 4 ассета (ниже).
---
## 1. Формат — строго векторный SVG
- Все элементы — вектор. Металлик/хром/блики — средствами SVG (градиенты, фильтры).
- Логотип `123 MACHINERY` и весь декор — **в кривых** (outline).
- Растровые подложки PNG/JPG **не принимаются**.
- Прозрачный фон вокруг скруглённой плашки.
- Плашка самодостаточна: свой фон + рамка, не зависит от фона сайта дилера.
## 2. Что статика, что динамика
- **СТАТИКА** (рисует дизайнер, одинакова всегда): логотип, рамка/плашка, иконка
(щит/галка), фон, декор, блики.
- **ДИНАМИКА** (подставляет сервер; дизайнер задаёт зону и стиль, текст НЕ рисует):
- **LABEL** — «Проверенный продавец» (переводится);
- **SINCE** — «с {ГОД} года» (ГОД — 4 цифры, свой у каждого дилера; слова вокруг
тоже переводятся).
## 3. Динамические зоны — обязательны в каждом из 4 файлов
Две живые `<text>`-зоны, центрированные:
| id | плейсхолдер | содержимое |
|---|---|---|
| `sb-label` | `{{LABEL}}` | надпись «Проверенный продавец» (на wide — в 2 строки через `<tspan>`) |
| `sb-since` | `{{SINCE}}` | «с {ГОД} года» |
Требования к зонам:
- `text-anchor="middle"`, фиксированная опорная точка по центру зоны.
- У каждой зоны — заданный бокс макс-ширины. Кегль подобрать так, чтобы **самая
длинная строка из таблицы локалей (§5) вписалась по центру без обрезки и наезда**.
- Дизайнер в сдаче указывает по каждому файлу: бокс (x, y, w, h), кегль,
line-height, цвет, anchor для `sb-label` и `sb-since`.
## 4. Шрифт динамического текста
- **Noto Sans, вес 700** (для `sb-label`) и **600** (для `sb-since`). Лицензия OFL,
встраивание разрешено. Покрывает латиницу + кириллицу + грузинский + литовские
диакритики (обязательно — наши локали .de/.tr/.ge/.lt). Шрифт-сабсет приложить.
- Логотип/декор — в кривых, шрифт логотипа любой.
- Стиль живого текста — **плоская сплошная заливка** + допустима лёгкая тень (1px).
**Без 3D-бевела/металла** на живом тексте (он не повторится при подстановке →
рассинхрон). Весь объём/металл — только на статике (логотип, иконка, рамка).
## 5. Языки и строки (верстать под самые длинные)
| | строки |
|---|---|
| **LABEL** | ru «Проверенный продавец» · de «Verifizierter Händler» · en «Verified seller» · tr «Onaylı satıcı» · ka «შემოწმებული გამყიდველი» · lt «Patikrintas pardavėjas» |
| **SINCE** | ru «с {ГОД} года» · de «seit {ГОД}» · en «since {ГОД}» · tr «{ГОД}’dan beri» · ka «{ГОД} წლიდან» · lt «nuo {ГОД}» |
Самые широкие: грузинский LABEL, русский SINCE — закладывать запас под них.
## 6. Четыре варианта (2 размера × 2 темы)
| Файл | viewBox | Показ, px (ширина) | Состав |
|---|---|---|---|
| `badge-wide-dark.svg` | `0 0 480 120` | 280–400 | логотип + LABEL (2 строки) + SINCE + иконка |
| `badge-wide-light.svg` | `0 0 480 120` | 280–400 | то же |
| `badge-compact-dark.svg` | `0 0 260 120` | 150–220 | логотип + LABEL (1 строка) + SINCE (мельче) |
| `badge-compact-light.svg` | `0 0 260 120` | 150–220 | то же |
**Тёмные** (`-dark`): хром-плашка как в референсах; LABEL/SINCE — белые/светло-серые,
голубой акцент на цифрах/иконке.
**Светлые** (`-light`): фон белый/светло-серый + лёгкая рамка/тень. Логотип — в
**тёмно-читаемом** варианте (серебро на белом не годится: синий «123» оставить,
«MACHINERY» — тёмный/навигационный). LABEL/SINCE — тёмные (угольный/навигационный),
голубой акцент. Контраст текста к фону ≥ 4.5:1.
**Компактные** (`-compact-*`): рассчитаны на читаемость от 150px → упростить мелкие
блики/бевелы. LABEL — в одну строку, SINCE — мельче, но обязателен.
Голубой акцент — фирменный синий 123machinery (взять из логотипа, в сдаче указать
точный HEX).
## 7. Что НЕ делать
- Не запекать LABEL/SINCE в изображение.
- Не использовать в динамике шрифт без покрытия кириллицы/латиницы/грузинского.
- Не делать фон непрозрачным до краёв холста.
- Не делать растровые подложки — только вектор.
## 8. Сдача (deliverables)
- 4 файла: `badge-wide-dark.svg`, `badge-wide-light.svg`, `badge-compact-dark.svg`,
`badge-compact-light.svg` — оптимизированные; логотип/декор в кривых; зоны
`sb-label`/`sb-since` как живые `<text>` с плейсхолдерами `{{LABEL}}`/`{{SINCE}}`.
- Шрифт-файл (Noto Sans, нужные веса, сабсет) + ссылка на лицензию.
- Исходник (Figma/AI), палитра (точные HEX).
- Превью: тёмные варианты на светлом фоне, светлые — на тёмном, в макс. и мин. размере.
- По каждому файлу — таблица зон (§3): бокс, кегль, line-height, цвет, anchor.
## 9. Приёмка
Заказчик даёт финальные строки всех локалей → проверяем по каждому из 4 файлов и
каждому языку: LABEL/SINCE вписываются по центру без обрезки/наезда и читаются на
минимальном размере; контраст на светлых ≥ 4.5:1.
---
*Интеграция на стороне 123machinery готова принять эти ассеты: сервер выбирает
шаблон по варианту (тема/размер) и подставляет `{{LABEL}}` (перевод по локали) и
`{{SINCE}}` (год основания дилера) в зоны `sb-label`/`sb-since`.*