Концепт · крок 5 · мова продукту

Мова Stack

Знайдена й перевірена візуальна мова: палітра, типографіка, форма, фото та іконки з DESIGN.md, кожне рішення підписане атрибутом. Спершу - мова живцем на компонентах; специфікація нижче. Одна мова, три щільності за контекстом.

Мова живцем

Та сама мова у трьох щільностях (рішення кроку 4): фокус на товарі, щільний тайл для лістингу, гід для новачка. Однакові колір, шрифт, іконки - різна композиція. A1 спокійA4 темпA3 характер

Фокус на товарі

Популярне

Stack · Україна

Сироватковий протеїн, шоколад, 900 г

В наявності

1 090 ₴925 ₴−15%

28 ₴ / порція+9 ₴ бонус

Щільний тайл

Stack

Креатин моногідрат, 300 г

5 г креатину8 ₴/порція

В наявності

490 ₴

★ 4.8 · 96

Гід для новачка

З чого почати?

Обери ціль - покажу зрозумілий набір.

Набір маси Схуднення Енергія

Палітра

Core з DESIGN.md. Оранж - єдиний акцент на дії, ніколи не розсіяний. Нейтраль тепла (нахил до бренду), не чисто-сіра. A1 спокійA4 енергія-акцент

Ink

#1C1C1C

Текст, темні поверхні, база продукту. М'який near-black, не чистий чорний.

A1 · таст: м'якший чорний

Canvas

#FFFFFF

Тло сторінки. Фото товару лежить на білому.

таст: товар на білому

Signal Orange

#FF5A00

Єдиний акцент дії: кнопка, активний стан, один ключовий хайлайт. Плюс знижена ціна - єдиний текст-не-дія, якому дозволено акцент (від 19px bold): оранжева цифра означає рівно одне - «дешевше, ніж зазвичай». Ціна без знижки лишається чорнилом.

A4 + A1 · один акцент

Ash

#D9D9D9

Поверхні, роздільники, межі, disabled.

Warm Neutral

#F2F0ED

Теплі секції (напр. гід). Робить нейтраль людяною, не клінічною.

A3 · тепло в нейтралі

Success

#2E7D46

Наявність, підтвердження. Спокійний, не святковий.

voice.md · стани

Warning

#C9821E

«Мало», увага. Помітний, і явно НЕ оранж-акцент. Для тексту - темніший #8A5A0E.

voice.md · стани

Error

#C42B1C

Помилка. Навмисно відділений від Signal Orange - помилка не читається як бренд-акцент чи свято.

voice.md · помилка каже правду

Пара текст / тло	Контраст	Вердикт	Застосування
A Ink на Canvas	16.1 : 1	AAA	основний текст
A Ink-2 на Canvas	10.3 : 1	AAA	вторинний текст
A Muted на Canvas	6.7 : 1	AA	підписи, meta
A White на Orange	3.1 : 1	AA large	мітки кнопок ≥19px/700
A Ink на Orange	5.2 : 1	AA	альтернатива на акценті
A Success на Canvas	4.9 : 1	AA	текст наявності / крапка
A Error на Canvas	5.3 : 1	AA	помилки
A Gold на Canvas	5.5 : 1	AA	текст бонусу (темна амбра)
A Warning на Canvas	3.0 : 1	AA large	лише крапка / великий, не дрібний текст

Типографіка

Три ролі, кожна зі своєю задачею. Дисплей упевнений, текст простий, цифри моно - як доказ. A4 · упевнений заголовокA5 · простий текстA2 · моно-цифри = довіра

ДисплейOswald 700 · uppercase

Fuel · Train · Recover

ТекстInter 400 / 600

Спершу проста відповідь: для чого це і що всередині. Глибина - нижче, коли захочеш. Плюс жирне для наголосу.

ЦифриIBM Plex Mono 600 · tabular

24 г білка · 8 ₴/порція · 925 ₴ · ★ 4.8

Шкаладисплей

AaAaAaAaAa

Форма

Радіуси чіткі й помірні, тіні стримані, поверхні пласкі. Спокійно, без важких ефектів. A1 · спокій

Радіус картки

--r · 12px

Радіус малий

--r-sm · 9px

Тінь

--shadow · стримана

Ритм відступів

8 · 12 · 16 · 24

Фото

Фото товару - матове чорне на білому (товар як герой картки). Список файлів фіксований у concept.md для відтворюваності. Маскот - у секції нижче. таст · фото-перший, товар на білому

Протеїн
product-whey.png

Креатин
product-creatine.png

Передтрен
product-preworkout.png

Маскот

Реалістичний 3D-ведмідь: та сама постать, вугільне худі, один оранжевий акцент. Спокійний, компетентний, веде - ніколи не агресивний і не святкує (за voice.md). Живе в героях, онбордингу, порожніх станах, підборі цілі й тренерських моментах. Один актив - різні кадри за контекстом. A3 · характер і теплоA5 · один крокvoice.md · без вітань і свята

Канон-лист: постать, шейкер і базові вирази - спокій · зосередженість · упевненість. brand-mascot-3d-realistic.png

Пози - за контекстом

Гід / підбір

Онбординг, підбір цілі, квіз

Веде далі

Порожні стани, «один крок»

Показує

Колекція, банер, спокійне промо

З товаром

Товарні моменти, стартовий набір

Вирази - стани кажуть правду

Уважний

Слухає: квіз, онбординг

Підтримка

«Ти в надійних руках»: порожні стани, довіра

Чесний стан

Немає в наявності / помилка - спокійно, без тривоги

Іконки

Solar-стилістика, inline SVG (не CDN), одна вага. Використання: довіра, метадані, дія, стани. A4 · впевнена вага

У кошик

Обране

Сертифікат

Склад

Походження

Енергія

Гідратація

Ціль

Готово

Далі

Компоненти

Три живі компоненти зі станами: кнопка дії, картка товару з бейджем-довірою, поле форми. A3 · одна дія кнопкоюA2 · доказ довіриA1 · стан каже правду

Кнопка дії

Primary · Signal Orange · мітка як великий текст

Підібрати ціль

Ghost · вторинна дія

Disabled · та icon-only (для щільної сітки)

Картка з бейджем-довірою

Популярне

Stack · Україна

Передтрен, цитрус, 360 г

Сертифікат перевірено

Склад
Походження

Поле форми

Телефон

Надішлемо код підтвердження

Код із SMS

Код неправильний. Спробуйте ще раз

Мова на реальному екрані

Та сама мова, покладена на реальний екран - лістинг «Протеїн» (вузол 2.1) з усіма станами. Це кольорові копії в design/: сірі вайрфрейми лишаються сірими, копія володіє лише візуальним шаром, а не-пофарбовані переходи ведуть на сірий оригінал. крок 6 · копія, не фарбуванняA1 спокійA2 моно-цифриvoice.md · стани кажуть правду

Лістинг · базовийсітка, картки, ціни, наявність Спискомта сама мова, інша щільність З фільтрамиактивні фільтри, обрані фасети (оранж) Фільтри · мобілкаbottom-sheet, «Застосувати» = дія Порожньомаскот-гід, вихід без глухого кута Помилкачесний стан + «Спробувати ще раз» Завантаженняскелетони

Повний розділ «UI + Visual» у роадмепі буде на етапі 07. Крок 7 - другий, контрастний екран тією ж мовою.

Стенд не суперечить DESIGN.md - усі значення взяті звідти, кожне рішення підписане атрибутом, контраст перевірено (таблиця вище). Крок 6 виконано - мова живе на реальному екрані в design/. Далі - крок 7: другий, контрастний екран тією ж мовою, щоб довести, що це мова, а не разова вдача.