Ціна
Найчастіший факт у магазині: дев'ять поверхонь, шістнадцять імен, одна цифра. Моноширинний шрифт і табличні цифри, щоб ціни в сітці стояли колонкою.
tabular-nums: ширина цифри стала, тому ціни в сітці стоять колонкою.uiv-cur, півкегля батька: повнорозмірний поруч з 36px цифрою читається як ще одна цифра:has(), не рукаКожен блок нижче - розмітка з продукту, не переписана. Ліва колонка зі знижкою, права без неї: помаранчевий з'являється і зникає сам, бо правило читає наявність закресленої ціни, а не клас, який хтось не забув поставити.
.pnew .pold.lprice .lold.hd-new .hd-old.new .old.retailref.tnew .told.mbp .mold.ci-sum .ci-old.li-sum .li-old.cprice - 13 у кольоріЕкрани коуч-сесії існують лише в wireframes/: кольорового близнюка в них ще немає. Ім'я стоїть у файлі наперед, щоб на Кроці 6 рядок прийшов уже з атомом, а не був виведений заново з того, що казав сірий файл.
Матриця осей, а не перелік входжень: кожен рядок це питання, на яке відповідає розмітка, і правило, за яким обирають.
| Вісь | Значення | Правило вибору |
|---|---|---|
| Роль | актуальна · стара · за порцію | «За порцію» - це не менша ціна, а інша одиниця. Вона стоїть під ціною, ніколи замість неї. |
| Колір | чорнило · акцент | Акцент бере лише ціна зі знижкою. Правило зафіксоване в DESIGN-artifacts.md 2026-07-29: помаранчевий тут означає «дешевше, ніж було». Якщо ним пофарбувати всі ціни, він перестане означати будь-що. Виняток один - коуч-режим PDP, де закреслена цифра це роздрібна ціна для довідки, а не знижка коучу. |
| Розмір | 20 · 24 · 30 · 36 | Розмір належить поверхні, не атому. 20 у рядку кошика і 36 у блоці покупки - два рішення про один факт, і обидва правильні. Поріг контрасту з того ж правила: #FF5A00 на білому це 3.13:1, тому акцент дозволений ціні лише від 19px жирним - усі чотири рунги його проходять. |
| Вага | 800 на 20-24 · 700 на 30 · 600 на 36 | На 20px вага одна: атом її і тримає. Вище 20 вагу лишено поверхні - жирне на дисплейному кеглі це не те саме оптичне рішення, що жирне на 20, і ранжувати дисплейні ваги це питання етапу 09. |
Ціна стоїть перед дією, не після: людина вирішує, а потім натискає. На мобільному повний факт ціни несе Смуга покупки, бо основна ціна на той момент уже прокручена.
Правило
Помаранчевий - лише на ціні зі знижкою, і це читає код. Факт лежить у розмітці: закреслена ціна або є, або її немає.:has() дивиться туди, тому екран не може показати помаранчеву цифру за повну ціну помилково.Антиправило
Не пиши це правило вдруге. Воно було написане вісім разів, по одному на файл, і сенс його в тому, що воно не може розійтися з фактом. Вісім копій правила, яке не може розійтися, - це і є розходження.Станів немає: ціна нічого не робить у відповідь на палець і не має :hover. Те, що виглядає як стан - помаранчевий колір - це не стан, а факт розмітки, і показаний він у сітці вище парою «зі знижкою / без».
Сторінка звіряє себе з файлом: 22 власних класів і 0 станів оголошено в price.css. Нижче - ті, яких на цій сторінці немає ні в демо, ні в розмітці. Чужий контекст не рахується: у селекторах .pcard, .bb, .pdp-tabs, .mbuybar, .hd-price компонент не є підметом, він лише стоїть усередині когось.
Прочитані з price.css, не переписані руками. Колір іде лише через роль, геометрія - напряму з примітива.
| Семантичні ролі (3) | Примітиви (3) |
|---|---|
--text-action --text-body --text-muted | --font-mono --fw-black --fw-regular |
--fw-regular заведено цим кроком. Система завжди вживала 400 і жодного разу його не назвала, бо 400 - це те, що виходить, коли не пишеш нічого. Стара ціна це те єдине місце, де його треба сказати вголос: .told стоїть усередині .tprice, який оголошує 600.
Токен, який атом не взяв. --text-price-was заведено саме під закреслену ціну, і атом його не читає: #AAAAAA на білому це 2.32:1, а скільки річ коштувала раніше - це факт, з яким людина звіряє знижку, а не оздоблення. Усі 40 закреслених цін у продукті і так малюються --text-muted (5.2:1). Коментар токена тепер це і каже.
Знак ₴ у розмітці не загорнутий: його загортає design/_nav.js, розрізаючи текстовий вузол. Тут він написаний руками, бо стенд показує результат, а не процес.
Якорі: .pnew .pold .lprice .lold .hd-new .hd-old .new .old .tnew .told .mbp .mold .ci-sum .ci-old .li-sum .li-old .cprice
Заміряно в браузері на 390 і 1280: .pnew 92 на 16 екранах · .pold 22 на 13 · .lprice 7 · .lold 2 · .hd-new / .hd-old по 4 на 4 · .new / .old по 2-3 на PDP · .tnew / .told по 2 · .mbp b / .mold по 3 · .ci-sum 6 на 2 · .li-sum 9 на 3. .cprice - 13 у кольорі з кроку 7.95: cart-coach 4, coach-session 5, coach-client 4. До 7.96 жива цифра стояла 16px, а закреслена теж 16px, тобто співвідношення 1,00 при 0,60 у кошику покупця.
Чого бракує
- Шістнадцять імен на одну цифру. Перейменування - Крок 6, бо ці ж імена носить заморожений сірий шар.
.new,.oldі.cutу голові тієї черги: це взагалі не імена - 36px написано літералом - токена
--fs-36немає, і блок покупки єдиний, хто його просить - Знак ₴ ставить JS, а не CSS - на екрані без скрипта він лишається повнорозмірним, і
design/_nav.jsперезапускає його в чотирьох місцях - Немає стану «ціна коуча» як окремого токена - вона зараз просто ще одна ціна, а
.retailrefзнімає з неї акцент - Чіп
-N%не тут - це атомdiscount.css, у нього теж вісім імен і розкол Mono/Inter 27 проти 13. Заміряно цим кроком, полагоджено буде наступним
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.