Лендинг тренера
Публічні вхідні двері первинної бізнес-моделі: вузол 5.0 «Для тренерів». Єдина сторінка продукту, яку індексує пошук і яка продає, а не обслуговує. Чотири блоки, яких немає більше ніде, - шапка, стрічка переваг, пояснення в чотири кроки і таблиця Free / Pro.
Розмітка тут не переписана від руки. Її знято з design/coach-landing.html у цій же сесії інструментом tools/demo.mjs: обробники зняті, посилання підняті на два рівні, клас coach на <body> перенесено разом із розміткою. Останнє тут не дрібниця - усі 38 селекторів файлу починаються з .coach, тож у рамці без цього класу не намалювалося б нічого.
Рамки шириною 1180, бо медіа-умова читає в'юпорт, а не контейнер: розкладку від 860 і чотири колонки від 980 видно тільки в справжньому в'юпорті, а він є лише в рамки.
.clh - єдиний блок сторінки з ґрунтом, і саме тому читається як заява, а не як картка.kicker - п'ятнадцятий eyebrow системи і єдиний, що обводить себе рамкою. Решта чотирнадцять - це 12px --fw-black з --ls-caps, підпис НАД блоком; цей має пігулку з --line-inverse, тож він мітка на сторінці, а не підпис.clh h1 - --font-display / --fw-semibold / --ls-lead, 26px, від 860 --fs-34.clh-cta - тільки ряд і проміжок. Розмір кнопок належить button.css: локальні padding: 13px 24px видалено, вони будували руками контрол 46px, а драбина кнопки це 40 / 52 / 64.clh-art - на 12.15 штрихування пішло, у слоті стоїть картинка visuals/coach-hero.jpg. Чотири етапи сперечались, ЯКЕ штрихування (7.96 узяв домашню редакцію байт у байт із auth-dialog.css і coach-verify.css, три проти одного) і жоден не спитав, чи має сторінка, що продає первинну бізнес-модель, відкриватись малюнком відсутньої картинки. overflow: hidden + object-fit: cover - пара, без якої радіус рамки не дістає до самої картинки. На телефоні рамку тримає aspect-ratio: 4/3, від 860 - height: 100% у розтягнутому рядку.clv - на 12.16 більше не пігулки. Сітка 2 / 3 / 5 і бокс зі знаком та підписом, цілком у цьому файлі: chip.css тут більше нічого не малює. Знак приходить з uivLeadMark за емодзі в розмітці, чорнилом, а не помаранчевим - «один помаранчевий на ділянку» це те, де натискають, а тут не натискають ніде.cl-shot - 12.17. Не малюнок і не генерація: tools/crop.mjs 1440 coach-session .cs-grid, зрізано до верхніх 2:1. Кожне число в ньому - власне число екрана. Лежить на килимку --bg-sunken, а не в рамці: волосяна грань навколо картинки, у якої всередині волосяні картки, дала б дві однакові грані за 12px одна від одної, і око не читає жодної. height: auto плюс intrinsic width/height у тегу, без aspect-ratio: у файлу одна пропорція, і коробку тут визначає картинка, а не рядок сітки.steps - 1 колонка · від 620 дві · від 980 чотири. Цифра .step .n - диск --bg-inverse, чорнило --text-oninverse, 17.0:1overflow: hidden - те, що зрізає перший і останній рядок по зовнішньому радіусу.finalcta - єдина коробка сторінки в чорнильній рамці й без ґрунту. Вага йде з краю, і на це не витрачено жодного кольоруПитання чесне: сторінка з шапкою, стрічкою, картками і таблицею схожа на набір молекул. Відповідь - замір, а не смак. Чотири родини класів цього файлу - clh, clv, cmp- і finalcta - зустрічаються рівно в одному файлі на весь wireframes/ і весь design/, і це та сама сторінка. Компонент, який ніде не повторюється, не молекула: він оболонка одного екрана, а це стеля драбини.
38 селекторів і 38 правил - тобто в цьому файлі немає жодного правила, яке зібрало б кілька селекторів під одні оголошення. Для порівняння: chip.css тримає десять імен в одному правилі саме тому, що збирає форму, яку носять десятеро.
Організм тим і вимірюється, чого він не малює. Тут це видно точно, бо блок прийшов зі сторінки етапу 04 і ніколи не проходив через kit.css: усе, що нижче, було локальним правилом і пішло до власника.
| Що було локальним | Кому віддано | Що з цього вийшло |
|---|---|---|
.clv span - пігулка переваги | chip.css, до 12.16 | Друга редакція атома під приватним іменем: та сама рамка, той самий радіус, той самий ґрунт - і 38.4 проти 40.4 у висоту та 700 проти 600 у вазі. 7.96 склеїв її з атомом і мав рацію; 12.16 роз'єднав, бо власник відповів на питання, яке 7.96 записав і лишив: п'ять підписів, які ніхто не натискає, не мусять мати форму контрола. Список форми chip.css має тепер дев'ять імен, і ординал у тому файлі рухається разом із цим |
.badge - пігулка біля назви тарифу | badge.css | Перепис 8.10 знайшов чотири редакції цієї пігулки в чотирьох файлах, і ця не була найстаршою. Тут лишилось те, що справді про це місце: колір рамки й лівий відступ |
.clh-cta .btn і .finalcta .btn | button.css | Двічі надрукований намір, що дав дві різні коробки: 13px 24px і 13px 26px. Обидві будували контрол 46px, якого немає на драбині 40 / 52 / 64 |
.cmp-head .price b - число ціни | price.css | Ціна рендерилась Inter 16/700, без tabular-nums і без кернінгу ₴, тоді як price.css тримає 21 ім'я, що слухається моно. Закрито двома половинами, друга - рішення власника |
вся сім'я .acard (у сусіда по кроку) | account-shell.css | Названо тут як міра: приватні блоки цього кроку переписували чужі правила байт у байт заради одного пікселя |
Те, що лишилось після цього, - розкладка і ґрунт: де стоїть ряд, скільки в ньому колонок на якій ширині, який блок має поверхню, а який лише край. Це і є визначення організму в цій системі.
Блок намальовано на етапі 04, до того як з'явилась шкала, тож він приїхав з вісьмома розмірами поза драбиною, двома з них у півпікселя. Жодне число тут не вигадано: обидва ходи належать власникові й були взяті на всьому продукті за два етапи до того, як цей екран узагалі торкнулись.
| Клас | Сірий | Стало | Яке правило |
|---|---|---|---|
.clh .kicker | 11 | --fs-12 | крок 5.6, нічия вгору |
.clh .sub | 15 | --fs-16 | крок 5.6, нічия вгору |
.clv li | 12.5 | --fs-14 | 5.5 → 13, далі 5.6 вгору (12.16 повернув розмір у цей файл разом із боксом) |
.step h3 | 15 | --fs-16 | крок 5.6 |
.step p | 13 | --fs-14 | крок 5.6 |
.cmp-cell | 13 | --fs-14 | крок 5.6 |
.cmp-head .plan | 17 | --fs-18 | крок 5.6 |
.cmp-head .price | 13 | --fs-14 | крок 5.6 |
.cmp-head .price b | 15 | --fs-16 | крок 5.6 |
.cmp-cell.feat @559 | 13.5 | --fs-14 | 5.5 → 13, далі 5.6 вгору |
.finalcta h2 | 22 | --fs-24 | крок 5.6 |
Півпіксель знімається таблицею, а не арифметикою. Крок 5.5 сказав це вголос: половина - це завжди нічия, а нічию бере більш читаний сусід, тож 13.5 іде вниз до 13, а 12.5 - до 13, і лише потім 5.6 підіймає обидва до 14. Одноходове читання «до найближчого щабля» дало б тут двадцять помилок на всю п'ятірку файлів кроку 7.95.
Один розмір лишився літералом навмисно
.clh h1 - 26px. Драбина не має інструкції для цілого числа, якого немає в її власному списку: 24 і 30 - сусіди, а 5.6 називає тільки нічиї. Перенести 26 на --fs-30 - це рішення про значення, і воно за власником.А ось геометрія лишилась уся, і це правильна асиметрія
У файлі 28 позначок[?]: 5, 6, 9, 10, 11, 14, 15, 18, 20, 22, 26, 30, 34. Типографіка - єдина з трьох драбин, чия відповідь записана однозначно. Відступи мають два правила, що суперечать одне одному на тих самих числах (5.5 «нічия вгору», 7.67 «округляй униз»), а радіус бере нічию вниз - тому 14 на .cmp лишається 14.Це був єдиний заголовок сторінки в усьому кольоровому продукті, лишений у тілесному шрифті - і це перший рядок публічних вхідних дверей первинної бізнес-моделі. Заміряно на 390: Inter 26 / 700, коробка 312 x 59.8. При цьому наступний заголовок нижче на цій же сторінці, .sech h2 «Як це працює», рендерився Oswald 24 / 600.
Тобто заголовок другого рівня був брендованіший за перший, на кожній ширині: 766px між ними на 390, 422 на 860 і 346 на 1280. Виправлено сім'ю і вагу, не розмір: відсутній font-family - це недогляд, ніхто ніколи не вирішував ставити H1 в Inter, він просто не сказав, який шрифт. Розмір - це значення.
coach-verify, coach-clients (двічі), coach-cabinet і coach-sessionДо кроку 7.96 таблиця Free / Pro носила карту акцентів. Заміряно на 390:
| Клас | Скільки клітинок | Як малювався |
|---|---|---|
.yes | 3 з 5 клітинок Pro | --fw-black + --text-primary |
| без класу | інші 2 клітинки Pro | успадкований, 400 |
| без класу | 4 з 5 клітинок Free | успадкований, 400 |
.lim | 1 клітинка Free | --text-secondary, 400 |
Тобто єдина клітинка, яка називає справжню межу Free - «до 3 клієнтів у сесії» - була найсвітлішим текстом у таблиці, а три її сусіди по тій самій колонці стояли на цілу роль темніше. Межа, намальована пригніченим чорнилом, читається як закреслена спроможність, а не як факт. Водночас два рядки, де тарифи рівні («Так» / «Так»), не мали позначки взагалі - отже жирний не означав і «це краща відповідь».
Рішення сказано вголос: .yes іде, а не росте до п'яти
Колонка Pro уже несе весь візуальний аргумент таблиці ґрунтом. Жирний поверх ґрунту - це той самий аргумент, сказаний двічі, тепер ще й словами. Розширити його до п'яти означало б зробити колонку рівномірно гучнішою за Free, тобто ту саму переконливість, тільки прибрану.Принцип 4, і він тут коштує грошей
«Спокійно і впевнено: жодних таймерів, жодного святкування». Таблицю читає тренер, який приймає рішення, і палець на терезах коштує рівно тієї довіри, заради якої вся сторінка написана. Після правки кожне значення в таблиці ---text-body 400, а єдина вага, що лишилась, - це підпис рядка, тобто структура..yes лишився в замороженій розмітці як ненамальований гачок: Крок 6 або зніме клас, або дасть йому роботуЗаміряно обчисленим стилем на обох ширинах, по всіх семи рядках таблиці. Клітинка Free - rgba(0,0,0,0), тобто просто сторінка; підпис рядка і клітинка Pro - rgb(250,249,247), тобто --bg-surface. Виняток один: підпис підвалу, який навмисно падає назад на --bg-page.
На 1180 це три вертикальні смуги, і аргумент читається так, як його описано: дві колонки підняті над сторінкою, одна ні. На 390 підпис розтягується на всю ширину всередині того самого рядка, без лінії під собою, - тож його бежевий стикається з бежевим Pro під ним. Разом вони дають суцільну літеру Г, а клітинка Free стає білим прорізом у ній.
.yes, тільки зроблений ґрунтом, і на телефоні він сильніший, ніж на десктопі. Не правлено тут: ґрунт таблиці - рішення власника, і воно вже стоїть відкритим у coach-landing.cssДо 12.19 це була єдина коробка сторінки, обведена чорнилом, і аргумент був хороший: «вага йде від самої грані - один гучний блок без витрати кольору». Він писався для сторінки без жодної картинки. Тепер їх чотири, і порожній обведений прямокутник унизу читається не як стриманість, а як останнє, чого ніхто не доробив.
Нового кольору не витрачено й тут. Смуга бере --bg-inverse - те саме чорнило, яким цей файл заливає диски номерів кроків. А рецепт узятий у .coachbn з client-row.css, який стоїть темною смугою з етапу 07: та сама заливка, той самий --radius-16, заголовок у --text-oninverse, підпис у --text-oninverse-muted. Крок 8.16 написав там речення, другою половиною якого є цей крок: «btn--oninverse заслужить своє ім'я, коли ДРУГА темна поверхня його попросить». Це вона - і вона не просить: btn--accent несе власний ґрунт і власний білий підпис.
Готові замовляти для всіх клієнтів одразу?
Активуйте роль тренера поверх свого акаунта - підтвердження за посиланням на профіль, і гуртові ціни ваші.
Стати тренером
design/visuals/README.md вимагає одного теплого світла; темна сцена його порушила б. Виріз стоїть на будь-якому ґрунті й лишає рецепт цілим. І він не був вирізом, коли приїхав: генератор прозорості не малює - він намалював зелений екран, а знімання ключа взяло 0x00FF00 проти справжніх #17E923, тож файл повернувся RGBA і цілком непрозорим. Канал альфа був; він не означав нічогоЧотири кроки кажуть словами, що робить сесія. До 12.17 це було все: сторінка, яка продає первинну бізнес-модель, не показувала продукт ніде. Знімок не намальований і не згенерований - це tools/crop.mjs 1440 coach-session .cs-grid, зрізаний до верхніх 2:1, тож 2 320, 1 160 і «Разом (2 клієнти) 3 480 ₴» - власні числа екрана.
design/visuals/README.md лежить команда, якою його перезняти, а не порада, чим його підретушуватиУ файлі три межі - і всі три тепер із реєстру. До етапу 10 їх було чотири, з них дві власні.
| Умова | Що змінює | Стан |
|---|---|---|
(max-width: 619px) | таблиця стає двоколонковою, підпис на всю ширину, порожня клітинка підвалу ховається | Було 559 - блок був п'ятим і єдиним, що перекривався; на рівно 560 сторінка раніше вмикала телефонну й широку розкладку одночасно. Етап 10 склав його на дзеркало --bp-grid-2col |
(min-width: 620px) | кроки в дві колонки | справжня межа, на неї спирається 9 файлів |
(min-width: 860px) | шапка в дві колонки, H1 на --fs-34, кроки в чотири колонки | Кроки в чотири колонки були на 980 - одинак за 20px від 960. Етап 10 склав його сюди: кількість колонок може стрибати на точці, і 980 не називала нічого, чого не називає 860 |
Порожня смуга, якої не бачив жоден замір чисел
Підвал таблиці має порожній підпис -<div class="cmp-cell feat"></div>. У широкій розкладці це справжня колонка сітки; у вузькій те саме правило дає йому grid-column: 1 / -1, і на 390 він ставав смугою 358 x 22 кольору сторінки з волосяною лінією над нею - рівно там, де мав би стояти шостий рядок переваги. .cmp-foot був 95 у висоту: 22 порожнього поля плюс 72 пари клітинок. Заховано тільки у вузькій умові: вище 560 це справжня колонка, і двом діям потрібно, щоб вона тримала їх під своїми тарифами. Стало 72, бежевий Pro сходиться з лінією.Ніколи вдруге. Це оболонка одного вузла - 5.0 «Для тренерів», єдиної публічної та індексованої сторінки тренерського потоку. Усе інше в потоці стоїть за входом.
Практичне питання, на яке ця сторінка відповідає замість себе: де взяти шматок цієї сторінки для іншого екрана. Стрічку переваг дає chip.css, пігулку тарифу - badge.css, кнопки - button.css, ціну - price.css. Із власного тут немає нічого, що варто позичити: чотири блоки, які ніде не повторюються.
Правило
Організм тримає розкладку і ґрунт, атом тримає форму. Ряд, колонки, межі й поверхні - тут. Пігулка, кнопка, бейдж і ціна - у своїх файлах, навіть коли цей екран був єдиним, хто їх носить.chip.css формулює це з іншого боку: контейнер належить тому, хто ставить ряд.Антиправило
Не малюй тут вагу заради переконливості. Ґрунт колонки Pro - це вже весь аргумент таблиці. Другий шар - жирний, третій - колір - не додають інформації, вони додають тиску, а тиск на сторінці, яка просить довіри, коштує саме довіри. Те саме про рамку:.finalcta гучний без жодного кольору.Правила вживання, які називають саме цей компонент: U9. Автор правил один, і це architecture.html, розділ I; тут - витяг.
Ряд дій шапки лендінгу береться патерном .actions.
Станів немає жодного, і це записано як рішення, а не як пропуск. У файлі нуль :hover, нуль :active і нуль :focus-visible. Усе інтерактивне на цій сторінці - це .btn або посилання, і за них уже відповідають button.css і base.css.
Таблиця порівняння не інтерактивна взагалі: її рядки не відповідають на палець. Для таблиці, яку читають, а не якою керують, це правильно - і сказано вголос, щоб відсутність була рішенням.
.clv span діставали від атома cursor: pointer і на десктопі обіцяли натиск, якого немає. Обидві чесні відповіді були названі ще на 7.96 - власний клас або взагалі не пігулка - і власник обрав другу, дивлячись на зібрану сторінку. Тепер це бокси, і cursor у них не заходить нізвідкиУ порівняльній таблиці Free / Pro колонка Pro носить .yes на кожній позиції, яку тариф дає. Сірий шар мав це правило, і кольорова копія його загубила: галочка стояла тим самим чорнилом, що й підпис, тож таблиця читалась як два однакові стовпці. Повернуто на 12.10.
| До 3 клієнтів | Без обмежень |
| - | Ціна тренера |
Сторінка звіряє себе з файлом: 21 клас і 0 станів оголошено в coach-landing.css. Нижче - ті, яких на цій сторінці немає ні в рамці, ні в розмітці. .coach не рахується: це скоуп, а не частина компонента, і його носять ще сім файлів.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від яких порогів: обох. Що саме міняється: від широкої точки чотири кроки стають рядом; нижче вузької таблиця порівняння складається у дві колонки з назвою ознаки на всю ширину. Було 980 і 559, обидва поза реєстром. Чотири кроки в ряд це твердження про ширину оболонки, а не про 980.Прочитані з coach-landing.css, не переписані руками. Колір іде лише через роль, геометрія - напряму з примітива. Жодного сирого кольору у файлі немає, хоча блок ніколи не проходив через kit.css: він приїхав просто зі сторінки етапу 04, і переклад сірих імен у ролі - це і є вся колірна робота кроку.
| Семантичні ролі (12) | Примітиви (28) |
|---|---|
--bg-inverse --bg-page --bg-surface --line-hair --bg-sunken --line-inverse --text-body --text-muted --text-oninverse --text-oninverse-muted --text-primary --text-secondary | --container-text --font-display --fs-12 --fs-14 --fs-16 --fs-18 --fs-24 --fs-34 --fw-black --fw-bold --fw-semibold --lh-airy --lh-snug --ls-caps --ls-lead --radius-12 --radius-16 --radius-circle --radius-pill --size-24 --size-30 --space-12 --space-16 --space-24 --space-32 --space-4 --space-40 --space-8 |
Одна роль на два ґрунти, і це навмисно. --bg-surface несе шапку І дві підняті колонки таблиці. У сірому обидва були --fill2 і не знали одне про одного; у кольорі це одна й та сама заява - «це зона, а не картка», - тож вони лишаються однією роллю і розійдуться лише тоді, коли таблиці знадобиться власна плита.
--bg-hatch малював смугу, --mark-faint - напис усередині заповнювача, і 7.96 узяв його за роботою, а не за значенням, цілком правильно. Роботи більше немає: у слоті стоїть картинка, а вона за рецептом design/visuals/README.md не несе всередині жодного тексту. Замість них --bg-sunken - тло під картинкою на ту мить, поки файл їде, і на випадок, коли він не доїдеFree<span class="badge"> написано без пробілу, і саме тому пігулка тут несе margin-left, а її двійник на екрані тарифу - ні: там у розмітці пробіл є. Відступ - це те, де річ стоїть, а де річ стоїть, завжди належало файлу екрана; атом його ніколи не мав видавати.
Якорі: .clh .clv .cl-shot .cmp .finalcta. На 12.18 смуга довіри пішла з цього файлу зовсім: .tband видалено з banner.css, а рядок довіри на екрані - це .tbanners, той самий компонент, що на головній. Причина не в картинках: три з п'яти його тверджень уже стояли на цій самій сторінці як бокси .clv, за 1400px вище, а перше з них було до-голосовою редакцією рядка, який етап 05 переписав на головній
1 кольоровий екран: design/coach-landing.html. У wireframes/ - той самий coach-landing.html. Це найменше число серед восьми тренерських організмів і найбільша сторінка з них за вагою рішення: за нею стоїть увесь потік.
Чого бракує
- 26px на H1 - розмір, якого драбина не називає. 24 і 30 - сусіди, інструкції для цілого числа поза списком немає. Рішення про значення
- Ґрунт таблиці на 390 - бежева літера Г вище. Або підпис рядка втрачає поверхню у вузькій розкладці, або Pro її втрачає, або так і лишається. Це рішення про візуальний аргумент, тож власникове
- 980 - межа-одинак за 20px від 960. Згорнути можна, але згортання межі - замір, і його треба зробити на всьому наборі, а не на одному файлі
- П'ятнадцятий eyebrow - єдиний на 11px і єдиний з рамкою. Один піксель - це не рішення, це дрейф з часів до шкали; рамка ж може виявитись потрібною саме тут
- Штрихування header.css - 8/8 з періодом 16 проти домашніх 10/10. Одне число, один файл, і згортання його - етапу 09
Пігулки без натиску -ЗАКРИТО на 12.16: не пігулка, а бокс зі знаком.clv spanноситьcursor: pointerвід атома- Ненамальований
.yesу замороженій розмітці. Крок 6 знімає клас або дає йому роботу
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.