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

Рядок клієнта

Файл тримає дві речі, і одна з них не рендериться в кольорі жодного разу. Банер тренера стоїть на чотирьох екранах; шапка групи клієнтів і ціна тренерської сесії - на нулі з сорока. Це не дефект коду: це межа кольорового шару, і вона проходить рівно по primary-аудиторії.

рівень 2design/system/components/client-row.css145 рядків21 селектор77 оголошень6 екранів8 банерів

Анатомія: банер тренера

Розмітка звідси - та сама, що на home-buyer.html. Це єдина частина файлу, яку в кольорі можна побачити.

Ви тренер?

Замовляйте для своїх атлетів одним рахунком, зберігайте список клієнтів і платіть за тренерським тарифом.

Стати тренером

1Інверсна поверхня --bg-inverse - єдиний великий чорний блок на головній. Він не кричить кольором, він інвертує: за принципом 4 це спокійніше за помаранчеву плашку такого розміру

2Заголовок .ct - --font-display 24. Це друге за розміром гасло сторінки після H1

3Підзаголовок .cs - --text-oninverse-muted, не більше 560. Одна з двох мір тексту в системі, разом із 800 у блоці опису

4Дія - акцентна L з класом dark. Розмір L тут виправданий: для тренера це головна дія головної сторінки, і аудиторія primary вирішує

5Флекс із переносом - на вузькому кнопка йде під текст. Жодної точки перелому: flex-wrap ламається сам, коли перестає влазити

Кільце фокуса на кнопці біле, а не помаранчеве: заміряно натисканням Tab - 3px білого через box-shadow. Це та частина системи, яка про інверсну поверхню знає.

Друга половина файлу не рендериться ніде

Селектор	Що це	Екземплярів у кольорі
`.coachbn` `.ct` `.cs`	банер «ви тренер?»	8 на 4 екранах
`.cg-head` `.cg-who` `.cg-nm` `.cg-goal`	липка шапка групи клієнтів	0
`.cg-sub` `.cg-sub small`	підсумок по групі	0
`.cprice` `.cprice .old`	ціна тренерської сесії	0

Заміряно на всіх 40 кольорових екранах, на двох ширинах. Вісім селекторів із сімнадцяти - рівно нуль збігів, і це не сироти: їхні екрани існують, але тільки в сірому прототипі. coach-session.html, coach-clients.html, coach-orders.html - усе це wireframes/.

І ось що з цього видно

Первинна аудиторія Stack - тренер, і в кольорі з тренерського потоку є банер, тобто запрошення. Сам потік - список клієнтів, теґування замовлення на клієнта, історія на клієнта - у кольорі не намальований. 19 екранів MVP обрані так, і це рішення про обсяг, а не пропуск. Але поки воно не сказане вголос, дизайн-система виглядає готовою до потоку, якого в ній немає.

Тому файл не чистять. Мертвим оголошення робить не «ніде не рендериться», а «ніде не рендериться і ніколи не буде». Тут друге не так: правила чекають на свої екрани, і 7.36 уже записав це поруч із .cprice у самому файлі.

Ціна сесії - дев'ята поверхня грошей

.cprice { font-size: 16; white-space: nowrap; text-align: right } .cprice .old { display: block }

Крок 7.36 звів усі грошові поверхні в price.css: гарнітура, табличні цифри, від'ємний міжслівний - там. Сюди повернулось те, що справді рядкове: кегль, вирівнювання праворуч і заборона переносу.

І один рядок, який відрізняє цю поверхню від решти восьми: стара ціна стоїть під новою, а не над нею. Скрізь інде закреслена ціна вгорі; тут праворуч вузька колонка, і в неї влазить один рядок. display: block замість звичного inline - це і є вся різниця, і вона написана одним оголошенням.

`.pend` - ціна, яка ще не число, і вона зламала рядок раніше, ніж її написали

coach-session-priceblock ставить у цю комірку речення - «Ціна уточнюється», - а все, що .cprice дає, написане для ЧИСЛА: моно-гарнітура, табличні цифри, кернінг, --fs-20 і - те, що вкусило - white-space: nowrap. Приватне правило екрана міняло лише чорнило і вагу, а його власні font-size: 15px ховали решту. Щойно застосувалась двадцятка компонента, зміряно на 390: .cl-right 205..392 у в'юпорті 390, scrollWidth 392 проти clientWidth 390. Два пікселі бічного скролу на екрані, який каже тренеру, що ціна ще не остаточна.

Ціна уточнюєтьсяроздріб 1 290 ₴

Три оголошення, і кожне відповідає на своє: воно переноситься, бо це фраза; падає на тілесний рунґ, бо 20 - це кегль ЦИФРИ, а речення на 20 кричить; і лишає моно, бо це слова. Чорнило й вага - власні того приватного правила, перенесені, а не виведені заново.

Стани

Стан	Що робить	Чому так
банер, спокій	чорний блок, радіус 16, `overflow: hidden`	`position: relative` і обрізка - слід від ілюстрації, якої в кольорі поки немає
банер вузький	кнопка переходить під текст	`flex-wrap`, без точки перелому
фокус на кнопці	біле кільце 3px	система знає про інверсну поверхню - помаранчеве кільце на чорному не читалось би
шапка групи	`position: sticky; top: 0`	оголошено й не перевірено: екрана в кольорі немає
тренер уже підключений	немає	банер «ви тренер?» показується всім, зокрема тому, хто вже тренер

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

Правило

Тренеру обіцяють роботу, а не знижку. «Одним рахунком, список клієнтів, тренерський тариф» - це операційна вигода, і саме вона рухає первинну аудиторію. Відсоток тарифу тут не названий: він [?], і вигадане число отруїло б усе нижче.

Антиправило

Не показуй запрошення тому, хто вже всередині. Банер «ви тренер?» на екрані підключеного тренера - це система, яка не пам'ятає, з ким говорить. Стан є в ролі акаунта і немає в коді.

Голова групи над рядками

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

Набір масиПротеїн · Гейнери · Креатин7клієнтів

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

Сторінка звіряє себе з файлом: 10 власних класів. Вісім із них у кольорі не рендеряться ніде, тож демо показує тільки те, що в кольорі є, а решта названа словами - і холостий контроль скаже про це чесно.

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

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

Токени

Прочитані з client-row.css: 12 семантичних ролей і 22 примітиви - найбільший набір серед молекул.

Семантичні ролі (12)	Примітиви (24)
`--bg-inverse` `--bg-surface` `--line-action` `--line-hair` `--line-inverse` `--line-oninverse-soft` `--text-body` `--text-muted` `--text-oninverse` `--text-oninverse-muted` `--text-primary` `--text-secondary`	`--font-body` `--font-display` `--font-mono` `--fs-12` `--fs-14` `--fs-16` `--fs-20` `--fs-24` `--fw-black` `--fw-bold` `--fw-medium` `--fw-semibold` `--lh-airy` `--lh-snug` `--ls-lead` `--radius-12` `--radius-16` `--space-2` `--space-4` `--space-8` `--space-12` `--space-16` `--space-24` `--space-32`

Повз шкалу два числа: 1px лінії й 560px міри підзаголовка. Друге - родич 800px з блока опису й 760px із SEO-лиду: три міри тексту в трьох файлах, жодна не токен. Кандидат на одне рішення, етап 09.

A/B

Цей файл не змінювався. Три проходи по 40 екранах: нульовий прохід 0, різниця 0.

Вирішувач: жодного мертвого оголошення. Вісім селекторів у графі «не збігається з жодним елементом», і всі вісім там за відомою причиною, записаною у файлі з кроку 7.36. Три рядки звідси зникли на 7.69 - колірний блок повторював те, що структура вже поставила.

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

Чого бракує

Тренерський потік у кольорі - список клієнтів, теґування замовлення, історія на клієнта. Первинна аудиторія, і в кольорі з неї тільки запрошення
Стан «ви вже тренер» - банер показується всім
Відсоток тренерського тарифу - [?], і банер обіцяє тариф, не називаючи його
Ілюстрація в банері - overflow: hidden і position: relative оголошені під щось, чого немає
Три міри тексту: 560 тут, 760 у лиді, 800 в описі. Жодна не токен

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