# Technical Specification: "Verified Seller" Badge Family 123machinery
A trust badge that a verified dealer places on their website. The image
is provided by our server; part of the text is inserted by the server **dynamically** (translation according to
the page language + the year of the dealer's business registration). Therefore, the text "Verified
Seller" and "since ..." **cannot be baked into the image** — these are live text areas.
**One asset = all 6 languages + any dealer.** The designer does NOT create language and
dealer-specific versions — this is done by our server. The designer creates 4 assets (below).
---
## 1. Format — strictly vector SVG
- All elements are vector. Metallic/chrome/gloss effects are created using SVG (gradients, filters).
- The logo `123 MACHINERY` and all decorations must be **in curves** (outline).
- Raster backgrounds PNG/JPG **are not accepted**.
- Transparent background around the rounded badge.
- The badge is self-sufficient: its own background + border, does not depend on the dealer's website background.
## 2. Both static and dynamic
- **STATIC** (drawn by the designer, always the same): logo, frame/badge, icon
(shield/checkmark), background, decoration, gloss effects.
- **DYNAMIC** (inserted by the server; the designer sets the area and style, text is NOT drawn):
- **LABEL** — "Verified Seller" (translated);
- **SINCE** — "since {YEAR}" (YEAR — 4 digits, unique to each dealer; surrounding words
are also translated).
## 3. Dynamic areas — mandatory in each of the 4 files
Two live `<text>` areas, centered:
| id | placeholder | content |
|---|---|---|
| `sb-label` | `{{LABEL}}` | text "Verified Seller" (on wide — in 2 lines via `<tspan>`) |
| `sb-since` | `{{SINCE}}` | "since {YEAR}" |
Requirements for the areas:
- `text-anchor="middle"`, fixed anchor point at the center of the area.
- Each area has a specified max-width box. The font size should be adjusted so that **the longest
line from the locales table (§5) fits centered without clipping or overlapping**.
- The designer specifies for each file: box (x, y, w, h), font size,
line-height, color, anchor for `sb-label` and `sb-since`.
## 4. Font for dynamic text
- **Noto Sans, weight 700** (for `sb-label`) and **600** (for `sb-since`). OFL license,
embedding allowed. Covers Latin + Cyrillic + Georgian + Lithuanian
diacritics (mandatory — our locales .de/.tr/.ge/.lt). Font subset to be attached.
- Logo/decor — in curves, logo font can be any.
- Style of live text — **flat solid fill** + light shadow (1px) is allowed.
**No 3D bevel/metal** on live text (it will not repeat upon substitution →
desynchronization). All volume/metal effects are only on static (logo, icon, frame).
## 5. Languages and strings (layout for the longest)
| | strings |
|---|---|
| **LABEL** | ru "Verified Seller" · de "Verifizierter Händler" · en "Verified seller" · tr "Onaylı satıcı" · ka "შემოწმებული გამყიდველი" · lt "Patikrintas pardavėjas" |
| **SINCE** | ru "since {YEAR}" · de "seit {YEAR}" · en "since {YEAR}" · tr "{YEAR}’dan beri" · ka "{YEAR} წლიდან" · lt "nuo {YEAR}" |
The widest: Georgian LABEL, Russian SINCE — reserve space for them.
## 6. Four variants (2 sizes × 2 themes)
| File | viewBox | Display, px (width) | Composition |
|---|---|---|---|
| `badge-wide-dark.svg` | `0 0 480 120` | 280–400 | logo + LABEL (2 lines) + SINCE + icon |
| `badge-wide-light.svg` | `0 0 480 120` | 280–400 | same |
| `badge-compact-dark.svg` | `0 0 260 120` | 150–220 | logo + LABEL (1 line) + SINCE (smaller) |
| `badge-compact-light.svg` | `0 0 260 120` | 150–220 | same |
**Dark** (`-dark`): chrome badge as in references; LABEL/SINCE — white/light gray,
blue accent on numbers/icon.
**Light** (`-light`): white/light gray background + light border/shadow. Logo — in
**dark-readable** version (silver on white is not suitable: keep blue "123",
"MACHINERY" — dark/navigation). LABEL/SINCE — dark (charcoal/navigation),
blue accent. Text contrast to background ≥ 4.5:1.
**Compact** (`-compact-*`): designed for readability from 150px → simplify small
gloss effects/bevels. LABEL — in one line, SINCE — smaller, but mandatory.
Blue accent — corporate blue 123machinery (take from the logo, specify
exact HEX in the submission).
## 7. What NOT to do
- Do not bake LABEL/SINCE into the image.
- Do not use a font in dynamic text that does not cover Cyrillic/Latin/Georgian.
- Do not make the background opaque to the edges of the canvas.
- Do not create raster backgrounds — only vector.
## 8. Submission (deliverables)
- 4 files: `badge-wide-dark.svg`, `badge-wide-light.svg`, `badge-compact-dark.svg`,
`badge-compact-light.svg` — optimized; logo/decor in curves; areas
`sb-label`/`sb-since` as live `<text>` with placeholders `{{LABEL}}`/`{{SINCE}}`.
- Font file (Noto Sans, required weights, subset) + link to the license.
- Source file (Figma/AI), palette (exact HEX).
- Preview: dark variants on light background, light ones on dark, in max. and min. size.
- For each file — table of areas (§3): box, font size, line-height, color, anchor.
## 9. Acceptance
The client provides the final strings for all locales → we check for each of the 4 files and
each language: LABEL/SINCE fit centered without clipping/overlapping and are readable at
minimum size; contrast on light backgrounds ≥ 4.5:1.
---
*Integration on the side of 123machinery is ready to accept these assets: the server selects
the template according to the variant (theme/size) and substitutes `{{LABEL}}` (translation according to locale) and
`{{SINCE}}` (year of dealer's establishment) in the areas `sb-label`/`sb-since`.*