Етап 09 · Design System

Чому саме так

Решта стенда каже що в системі є. Ця сторінка каже чому, і вона одна тут написана для людини, яка систему не будувала. Читається згори вниз: спершу де ми в маршруті, далі звідки взялася візуальна мова, далі як нею користуватись і як її ростити.

← Вся система · Патерни · Архітектура й правила

Спершу - де ми зараз

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

✓

Етапи 01-08 - дослідження, IA, прототип, голос, концепт, кольоровий шар, токени й компоненти

95 файлів компонентів, у кожного стендова сторінка й таблиця токенів; два рівні токенів і обидві теми в tokens.css

Етап 09 - дизайн-система

шість кроків: патерни й заборони з екранів · вітрина патернів · ця сторінка · правило внеску · наступний екран продукту, зібраний із системи · перевірка і фінал

Етап 10 - адаптив

брейкпойнти переїжджають у файли патернів: один медіазапит на патерн замість правки кожного екрана

Етап 11 - анімація

рух отримують ті самі патерни, і теж один раз на патерн

Етап 12 - розкотка

аж тут решта продукту стає кольоровою, і збирається вона з готової системи одним підключенням, а не малюється екран за екраном

Етап 13 - хендоф

ця сторінка, вітрина патернів і сторінки компонентів і є онбординг розробника

Чому розкотка аж на 12, а не «зафарбуймо все зараз»

Екран збирається один раз, коли система остаточно готова, а готова вона після 11, а не після 08. Компонент, якого розкотці забракне, мусить знайтись раніше: через чотири етапи він коштуватиме вдесятеро дорожче, бо тягтиме за собою стани, патерн, брейкпойнти й рух.

Тут стояв інший маршрут, і він був вигаданий

До 13.08.2026 ця сторінка малювала послідовність «тираж → темна тема → доступність». Це не з паку етапу, це було виведено з голови. Насправді темна тема - крок 7 етапу 08, і вона стоїть там саме тому, що є стрес-тестом системи, а не оздобленням у кінці. Знято й записано, а не стерто: маршрут, виправлений мовчки, повертається тими самими словами.

Чому система така

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

Атрибут	Що це означає в системі	Де це видно
A1. Спокійно і впевнено, не гучно й не терміново	Рівно один акцент на дію, багато повітря, жодних таймерів, спалахів знижок і зворотних відліків. Дисципліна SAPGOODENERGY: акцент лише в момент високої уваги	Колір · Кнопка
A2. Довіра доведена, не заявлена	Моноширинний шрифт для чисел - склад, дозування, ціна за порцію читаються як лабораторна специфікація, а не як маркетинг. Прийом Alpine Bio: щільний блок даних замість обіцянок	Типографіка · Таблиця складу · Ціна
A3. Характер і тепло, не стерильність	Теплий пісочний фон замість білого. Поверхні мають відтінок (`#F2F0ED`), а не чистий сірий - бо конкурентний каталог у дослідженні читався як казенний, а анти-референс «стерильна аптека» відхилено явно. Плюс маскот як спокійний провідник	Колір · Порожній стан
A4. Спортивна енергія, не агресія залу	Один яскравий акцент `#FF5A00` і впевнений вузький заголовок у героях. Енергія - це акцент, а не гучність сторінки: «beast mode» з неоном і вибуховими фото відхилено, бо він живить рівно той страх, який продукт має знімати	Типографіка · Головний блок
A5. Проста відповідь спершу, глибина під нею	Один рядок «для чого» на кожній картці товару; наука - у таблицях і акордеонах під простим вступом. Прийом Seed PDP плюс роздільник цілей ALO як вхідні двері новачка	Картка товару · Плитка цілі · Питання і відповідь

Референси названі поіменно, і взято з них не «вигляд», а прийом.

Джерело	Що взято	Що НЕ взято
Seed - база `seed.com`	Приглушена палітра однієї родини на теплому не-білому полотні; товарне фото як стримане предметне ательє; моношрифт лише для технічних даних; пласкі поверхні без важких тіней, радіус 16, бейдж-капсула	Зелений як бренд-колір: Stack - спорт, а не пробіотик
Alpine Bio - блок довіри `alpbio.com`	Правило «приглушений акцент ніколи не підвищується до головної дії»; моношрифт для цифр і щільна специфікація; макро-фото інгредієнта в закругленій картці	Увесь інший вигляд - узято рівно один прийом
SAPGOODENERGY - енергія `sapgoodenergy.com`	Один яскравий акцент виключно на головній дії й активній навігації, на просторому полотні. Саме це тримає Stack у регістрі спорту, лишаючись спокійним	Чорно-біле полотно й гучність решти сторінки

Два рефлекси відхилено ДО того, як щось малювалось

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

Обраний бренд-плейт: напрямок D (синтез), борд brand-plate-d-2.png. Пряма (не курсивна) насичена гротескна назва читається як довіра, а не як спортивна агресія; цифри IBM Plex Mono несуть прийом A2; тривимірний ведмідь дає характер усередині спокійної рами, і жоден український конкурент такого не пропонує. На полиці лишились курсивна версія плейта і плюшевий регістр маскота - обидва відкотні одним рухом.

Походження значень

Жодне значення в tokens.css не взяте зі стелі. Через усі етапи проходить одна лінія, і кожен крок додає рівень, ніколи не переписуючи попередній:

піксель бренд-плейта -> DESIGN-artifacts.md -> тема етапу 06 -> кіт етапу 07 -> system/tokens.css що намальовано чому саме це число як воно стало як воно стало два рівні: і з якого атрибута темою продукту компонентом примітив + роль

Практичний наслідок: значення змінюється лише свідомим рішенням, названим уголос як «змінна -> значення -> чому», і ніколи як побічний ефект рефакторингу. А геометричне відношення записується відношенням, а не числом, у яке воно сьогодні розв'язується. Уся палітра з походженням кожного відтінку - на сторінці Колір; сходи розмірів і радіусів - на Геометрії.

Сім рішень, на яких стоїть усе інше

Якщо одне з них хибне, хибне все, що на ньому стоїть - тому кожне названо разом із джерелом.

Рішення	Що з нього випливає на екрані	Звідки воно
1. Спершу довіра, потім продаж	Склад, дозування, походження й сертифікат - провідні, а не деталь під згином. Жодного таймера, жодної терміновості, жодного святкування. Конфлікти між принципами вирішуються на користь цього	`CLAUDE.md`, принцип 1. Підстава - вторинна аудиторія: новачок боїться побічних ефектів і неправильної дози
2. Один колір дії	`#FF5A00` - і тільки на дії. Рейтинг навмисно жовтий, помилка навмисно окремий червоний: ні те, ні те не має читатись як бренд-акцент	`DESIGN-artifacts.md`, A1 дисципліна одного акценту, A4 енергія
3. Тепла нейтраль, а не клінічна білизна	Поверхні мають відтінок (`#F2F0ED`), а не чистий сірий. Це ж рішення визначило й темний кінець шкали: темні поверхні теплі, бо довід був про нейтральні взагалі, а не про бліді	`DESIGN-artifacts.md`, A3 - «проти стерильної аптеки»
4. Компонент називає роль, а не значення	Колір компонент читає лише семантичним токеном, геометрію - примітивом напряму. Саме тому темна тема це перевизначення семантичного блоку й нічого більше: перемкніть її в панелі стенда на будь-якій сторінці	крок 5.9, `design/kit/docs/consolidation.md`
5. Значення рухаються, їх не переобчислюють	Один рядок від `DESIGN-artifacts.md` до `tokens.css`, і кожен крок додає рівень, ніколи не переписуючи те, що вже є	`CLAUDE.md`, розділ про власність значень
6. Сірий прототип заморожений, колір ніколи на нього не лягає	Структуру, текст і стани тримає `wireframes/`; кольорова копія володіє лише візуальним шаром. Тому дефект структури правиться там, а дефект вигляду - тут	`CLAUDE.md`, розділ про форму репозиторію
7. Кожне число має походження або є `[?]`	Відсоток тарифу тренера, пороги лояльності, нарахування бонусів, цикли споживання, тарифи доставки - усі досі `[?]`, і жоден екран не показує вигаданої цифри	`CLAUDE.md`: «вигадане число отруює кожен етап під собою»

Восьме правило - про роботу, а не про вигляд, і воно врятувало більше за решту

Правити правилом, а не рукою по одному файлу - і те саме стосується самого інструмента. Перевірка, зібрана з пам'яті на кожному кроці, - це та сама ручна правка. Тому в tools/ лежать ворота, які самі знаходять свій предмет, і біля кожного записано, якою хибною версією він був раніше.

Ціна цього правила видима. 13.08.2026 виявилось, що функція, яка дає воротам предмет, читала один рівень каталогів: гейт друкував «88 екранів, 0 помилок» над текою, у якій 203. Перший же прохід тим, що стало видно, знайшов три дефекти, опубліковані з етапу 06.

Три рішення власника, які видно на екрані просто зараз

Ці три не виводяться з принципів. Їх узяв власник, і кожне лишається відкотним одним рухом - саме тому наслідки перелічені поіменно, а не описані загально.

Коли	Рішення	Що це коштує і що дає
27.07.2026	Підпис на помаранчевій заливці - білий, за будь-якого кегля	Одна дія має виглядати як одна дія. Білий на `#FF5A00` дає 3.1:1 - бере планку 3:1 для великого тексту й не бере 4.5:1 для дрібного. Чорнило дало б 5.4, але розділило б одну дію на два вигляди
12.08.2026	Недобір за AA на акцентному дрібному тексті прийнятний (питання A10)	Шість класів, названих поіменно. Перед тим, як записати рішення, перепис перебудували - і він знайшов запис хибним у чотирьох місцях. У темній темі цього компромісу немає: той самий акцент дає там 5.1-5.8
13.08.2026	Темна тема входить в обсяг MVP	До того дня її не було ні в списку In, ні в Out - тобто вона була неухвалена, а не відкладена. Тепер вона в обсязі, і зроблена вона кроком 7 етапу 08, як стрес-тест системи

Як користуватись

Чотири входи на чотири питання. Четвертий названий окремо навмисно: людина, яка збирає екран уперше, шукає дозвіл, а не заборону, і на заборону натрапляє вже після того, як зробила по-своєму.

Який компонент узяти

overview.html

Усі 95 компонентів картками, згруповані драбиною: атоми, молекули, організми. У кожного своя сторінка з варіантами, станами й межами.

84 компоненти

Яка композиція вже є

patterns.html

Сталі композиції, які продукт уже повторює, плюс 51 кандидат, що чекає третього входження. І правило, коли патерн НЕ береться.

1 патерн

Які правила

architecture.html

Лист рішень: що вирішено, що відкрито, що заміряно й здорове. Кожен запис із джерелом і статусом.

A1-A19

ЧОГО НЕ МОЖНА

architecture.html, розділ I

Дев'ять правил вживання, виведених лічильником по 142 екранах: скільки чого на екрані і де компонент не з'являється взагалі. Кожне з «звідки взято».

9 правил

Правило вибору, у три кроки

1. Дивишся, чи є патерн - тобто чи цю композицію вже названо. 2. Немає патерна - збираєш із компонентів. 3. Немає компонента - це замовлення для системи, а не виняток для екрана: рядок у беклозі, а не локальний стиль у розмітці. Третій крок і є вся різниця між системою і текою зі стилями.

Як ростити

Нове з'являється спершу в системі, потім на екрані. Ніколи навпаки. Компонент - у design/system/components/, зі сторінкою, станами, рядком інвентаря і @import у свою групу рівня. Композиція - у design/system/patterns/, і лише коли можна назвати три екрани. Значення - у tokens.css, своїм рівнем.

Повний розділ «Внесок у систему» - на architecture.html, і він же лежить у коді, у design/system/CLAUDE.md, щоб читатись звідти, а не перепитуватись у розмові. Розділ пишеться кроком 4 цього етапу.

Беклог системи

Чого система не змогла і що знайдено, але навмисно не полагоджено. Це видиме місце файла design/kit/docs/backlog.md, який інакше лишився б файлом, що його ніхто не відкриє.

Список	Про що	Хто читає
1-3 - звід системи з продуктом	Контрол, якого немає в системі; клас, який є, а екран малює те саме локально; клас, якого не носить ніхто	етапи 10-13
4 - врожай кроку 9.1	П'ять відступів на одну роботу; два ряди дій, не переведені навмисно; продуктова колонка сторінки поза системою; відсутній клас «головна дія екрана»; `.acc-main`, якого не оголошує жоден компонент	власник, далі 12

Тест самодостатності пройдено на кроці 5, і його врожай - список 5. Наступна реальна сторінка продукту, вузол 2.2 Ціль-колекція з трьома станами, зібрана з готової системи: жодного стилю на екрані, ні елемента <style>, ні атрибута style. Екран накриває 38 із 84 компонентів.

Чого система не змогла	Рівень	Пріоритет
`.gnote` - примітка про порядок карток не має компонента	компонент	середній
`.actions` не має inline-варіанта для ряду дій порожнього стану	варіант патерна	середній
`.ctrl` не оголошений жодною таблицею стилів	компонент або видалення	низький

Плюс одна діра не системи, а IA: комірка «Списком» у перемикачі вигляду мертва, бо goal-list.html не існує. Беклог не порожній - це та відповідь, яку крок був винен: порожній означав би, що тест зробили формально.

Відкрити беклог цілком

Чого на цій сторінці навмисно немає

Статус

Скільки чого зроблено - у README.md і в реєстрі /_nav.js, і більше ніде. Третя копія лише розсинхронізується з двома першими. Ця сторінка каже чому, а не скільки.

Історія кроків

Чому кожна окрема правка зроблена саме так - у docs/decisions.md. Там же лишаються зняті знахідки з причиною зняття: знахідка, стерта без пояснення, повертається наступного разу тими самими словами.

Приклади зібраних екранів

Теки examples/ тут немає взагалі. Екран, зібраний із системи, - це сторінка продукту, і лежить вона в design/, а читають її етапи 10-13. Музей зібраних екранів ніхто не відкриє наступного дня.