Компонент · рівень 2

Мініатюра сертифіката

Аркуш паперу завбільшки з візитку, за яким лежить сертифікат відповідності на партію. Робота 4 в одному елементі: показати, що документ існує, ще до того, як його відкрили. І тут знайшлось те, чого перепис у спокої знайти не міг - таблиця стилів писала слово, яке хтось чує.

рівень 2design/system/components/cert-thumb.css173 рядки16 селекторів85 оголошень5 екранів

Анатомія

Розмітка звідси - та сама, що на product.html, усередині розкритого блока довіри.

переглянути сертифікат (PDF)

Сертифікат відповідності на партію + лабораторні тести чистоти. Натисніть, щоб відкрити документ.

1Аркуш 104 x 138 - пропорція A4 з точністю до пікселя (104 x 1.414 = 147, узято 138: трохи присадкуватіше, щоб стояти в один ряд із текстом). Один із небагатьох компонентів, де числа це малюнок, а не шкала

2Рядки тексту ::before - repeating-linear-gradient, смуга --bg-rule кожні 11px. Не картинка й не шрифт: сім рядків, намальованих одним градієнтом

3Мітка типу ::after - «PDF» моноширинним 10, у рамці, унизу зліва. З 7.79 вона намальована й не озвучена

4Печатка .uiv-seal - щит із набору, який ставить uivPdp(). Живе не тут, а в trust-strip.css: це знак довіри, а не частина аркуша

5Текст поруч - звичайний абзац у .certbox, крок 16. Мініатюра каже «документ є», абзац каже, який саме

Принцип 1 у чистому вигляді. Початківець боїться підробки й не знає, що таке «сертифікат відповідності». Побачити аркуш і печатку - швидше, ніж прочитати про них: спершу зняти сумнів, потім продавати.

Таблиця стилів писала слово, яке чують

Згенерований вміст потрапляє в дерево доступності. Тому посилання мініатюри називалось так:

link: "переглянути сертифікат (PDF) PDF"

Прочитано з дерева Chrome, а не виведено з css. Розмітка вже каже «(PDF)» у реченні, яке написав voice; мітка внизу аркуша - частина малюнка, така сама, як сім рядків над нею. Слово прозвучало двічі, і друге - з файлу, куди voice не заглядає.

.certthumb::after { content: "PDF" / "" }

Друга половина - це те, що дістається дереву, і порожній рядок тримає коробку поза ним. Перевірено до того, як це потрапило у файл: кожна обчислена властивість збігається (10px, IBM Plex Mono, зліва 14, знизу 14, край 1px, відступ 4/8, --text-body), а посилання знову зветься «переглянути сертифікат (PDF)».

І та сама перевірка по всій системі

Вісім таблиць стилів малюють рядок через content. Двоє з восьми чути. Спосіб перевірки один на всіх: узяти найближчого предка з іменем, прочитати ім'я, вимкнути згенеровану коробку, прочитати ще раз.

Файл	Рядок	Що виходило
`cert-thumb.css`	«PDF»	«переглянути сертифікат (PDF) PDF»	чути
`badge.css:69`	`★`	«фото ★ ПОПУЛЯРНЕ», двічі на екрані	чути
`badge.css:70`	`✦`	-	мовчить
`order-row.css:108`	«Детальніше»	-	мовчить
`breadcrumb.css:36`	`/`	-	мовчить
`buy-box.css:80`	`·`	-	мовчить
`gallery.css:40`	`★`	-	мовчить
`header.css:27`	`✓`	-	мовчить

Правила, яке розділяє ці два стовпці, з коду не видно. Обидва почуті сидять усередині посилання - але ✦ сидить у тому самому посиланні, що й ★, і мовчить. А ★ у галереї мовчить, бо там над ним не посилання. Позначено [?]: заміряно поекземплярно, не виведено, і перезаміряти можна тим самим способом.

Правило

Малюнок мовчить, слово говорить розмітка. Якщо content малює фігуру - у неї порожній альтернативний текст. Якщо content малює слово, якого людина мусить дізнатись, воно взагалі не має бути в таблиці стилів.

Не виправлено, і чому саме так

«Детальніше» в order-row.css мовчить, і це не робить його правильним. Це повне українське слово інтерфейсу, яке живе в css і з'являється тільки до 639px. За правилом проєкту рядки інтерфейсу належать voice/docs/microcopy.md, і жодна редакція рядка не існує у двох місцях. Перенести його в розмітку - зміна структури в двох шарах; записано в перейменування, крок 6.

Числа тут - це малюнок

Число	Що це
`104 x 138`	аркуш. Не зі шкали розмірів і не мусить бути: це пропорція паперу
`14 / 18 / 64`	де починаються рядки тексту і скільки їх заввишки
`2px / 11px`	смуга й крок градієнта - товщина рядка й міжрядковий інтервал намальованого тексту
`1px`	край аркуша і край мітки

Вісім чисел, написаних рукою, - найбільше серед малих файлів системи. І це не борг. Шкала відступів каже, як розставляти елементи; вона не каже, як намалювати аркуш паперу. Той самий довід уже записаний у tokens.css для інших разових значень: значення, вжите один раз, є значення, а не токен.

Стани

Стан	Що робить	Чому так
спокій	аркуш із рядками, міткою й печаткою	документ видно раніше, ніж прочитано підпис
наведення	край бере акцент, аркуш підіймається на 2px	той самий підйом, що в картки товару й плитки цілі: це те, що можна відкрити
фокус	кільце браузера, синє `rgb(0, 95, 204)`	заміряно натисканням Tab, `:focus-visible` справді збігся. Своє кільце система оголошує й тут не використовує - відкрите питання

Документа на цю партію ще немає. Ми запитали його у постачальника - щойно отримаємо, він з'явиться тут.

той самий .certbox, і рівно чотири відмінності. Аркуш це <span>, а не <a>: без href, без ролі, без табостопу. Мітка «PDF» і підйом на 2px не зникли - вони переїхали на a.certthumb, тобто на тег, який справді щось відкриває, тож сюди просто не дотягуються. Печатки немає, бо її ставить uivPdp(), а ця розмітка її не просить. Наведіть курсор на обидва аркуші на цій сторінці: верхній підіймається, цей ні

Це 7.72, дослівно. «Роль - це обіцянка про те, що робить контрол», і тоді дванадцять мініатюр галереї оголошували button клавіатурі, яка не могла до них дійти. Тут та сама помилка на поверх вище: аркуш із печаткою й міткою типу файлу - це обіцянка «є що відкрити», і зробити її там, де відкривати нічого, означає намалювати саме ту підробку, від якої початківець боронився. Заміряно перед тим, як вирішувати: .certthumb рендериться в кольорі 3 рази - product, product-coach, product-reviews - і всі 3 це <a href="content-guarantee.html">. Жодного голого блока, тому перенос на a.certthumb нічого не зачепив: коробка 104x138, мітка 10px IBM Plex Mono зліва 14 / знизу 14, край 1px - однаково до сотої.

Пунктир - не нова ідея, а власний знак системи: на стенді порожнього стану записано, що пунктир каже «тут МАЄ бути вміст», а суцільна казала б «це блок». Різниця між «документа ще немає» і «місця під документ немає» - рівно ця. Рядки паперу лишились: коробка мусить читатись як аркуш, а обведення без нічого всередині не каже нічого.

Правило і антиправило

Правило

Документ показують, а не описують. Аркуш із печаткою каже «є що відкрити» за півсекунди; речення поруч уточнює, що саме. Порядок такий, а не навпаки.

Антиправило

Не малюй печатку там, де документа немає. Знак довіри без файлу за ним - це рівно та підробка, від якої початківець і боронився. Стан «сертифіката на партію немає» у системи наразі немає: .certthumb--pending був написаний і жодним екраном не вдягнений, і крок 6 його видалив за рішенням власника 2026-08-14. Тобто антиправило тут поки що виконується тим, що плитку просто не малюють - і це запис у backlog.md, а не закрите питання.

Картка сертифіката 12, партія 8

Мініатюра відповідає за один документ у смузі довіри; на сторінці гарантій документів ціла сітка, і кожен несе назву, видавця й дату. Це вже КАРТКА, а не мініатюра: .cert-grid плинна, бо 620 і 960 сірого блока в реєстрі точок обидва не стоять, а рядок аудиту цього екрана каже «плинно».

PDFПереглянути

Сертифікат відповідностіOptimum Nutrition · до 12.2027

PDFПереглянути

Висновок державної санітарної експертизиOstroVit · до 03.2028

PDFПереглянути

Декларація виробникаBioTechUSA · до 07.2027

Холостий контроль

Сторінка звіряє себе з файлом: 3 власні класи і 2 стани.

ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4

Від якого порогу: жодного. Мініатюра сертифіката плинна: коробка задана своїм вмістом і їде з контейнером, який адаптується. Раунд молекул її не чіпав.

Рух

Робота: ВІДПОВІДЬ. Рухається: рамка і transform мініатюри сертифіката. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них, тобто числа у файлі немає. При prefers-reduced-motion рух зникає, а стан лишається.

Токени

Прочитані з cert-thumb.css: 12 семантичних ролей і 22 примітивів.

Семантичні ролі (12)	Примітиви (22)
`--bg-media` `--bg-page` `--bg-rule` `--line-action` `--line-hair` `--line-media` `--line-strong` `--text-body` `--text-muted` `--text-onmedia` `--text-primary` `--text-secondary`	`--container-text` `--dur-fast` `--ease-standard` `--font-mono` `--fs-10` `--fs-12` `--fs-14` `--fw-bold` `--fw-semibold` `--grid-col-fluid` `--grid-gap-fluid` `--lh-flat` `--ls-caps` `--radius-12` `--radius-4` `--radius-8` `--radius-pill` `--space-12` `--space-16` `--space-2` `--space-4` `--space-8`

Мітка «PDF» бере ту саму гарнітуру, що й ціна - --font-mono. Це не збіг: моноширинний у цій системі носить те, що є даними, а не мовою - сума, артикул, номер замовлення, тип файлу.

A/B

Три проходи по 40 екранах на чотирьох ширинах: HEAD, HEAD ще раз і робоче дерево. Нульовий прохід 0, різниця 0.

Перепис не дигестить content, тож нуль тут нічого не доводить сам по собі - і найголовніше, чого він не бачить, це ім'я. Тому замір окремий, з обох серверів: ім'я посилання «переглянути сертифікат (PDF) PDF» -> «переглянути сертифікат (PDF)», коробка 104x138 обабіч, кожна властивість мітки збігається. Те саме для зірки бейджа: «фото ★ ПОПУЛЯРНЕ» -> «фото ПОПУЛЯРНЕ», коробка 106x21, колір rgb(255, 90, 0), кегль 10 - однаково.

Немає в коді -> етап 09

Чого бракує

Кілька документів - .certbox це флекс із переносом, тобто на кілька аркушів розраховували, але другого в коді немає жодного разу
Своє кільце фокуса - мініатюра бере браузерне, як і .relbox та .brandbox. Питання відкрите
«Детальніше» в order-row.css - слово інтерфейсу в таблиці стилів. Крок 6
Дата й номер документа - аркуш намальований, але жодного реального реквізиту на ньому немає, і що там має стояти, не сказано

Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.