Компонентная система интернет-магазина растений, собранная из трёх мобильных референсов и готовая к масштабированию.
Палитра, типографика и ритм задают единое ощущение во всех точках контакта.
Назначение. Восемь опорных цветов, по одному на смысл. Leaf 600 — действие и подтверждение, Sage 300 — выбор и рамки, Canvas и Sand — фоны разной глубины, Ink и Muted — два уровня текста, Sun — рейтинг и скидка, Bloom — новизна. Близкие зелёные не взаимозаменяемы: Leaf 600 означает «действие», Leaf 700 — «наведение на действие». Полная таблица токенов с назначением и контрастом — в разделе Правила системы.
Назначение. Одна гарнитура на всю систему — Manrope, четыре смысловых уровня. Display только для первого экрана, Heading для разделов, Body для всего остального, Caption для подписей и счётчиков. Пятого размера в системе нет: если текст «не помещается» между уровнями, менять нужно длину текста, а не размер. Реальные значения, которыми пользуются компоненты, приведены в разделе Правила системы.
Назначение. Радиус кодирует размер элемента. Здесь показаны четыре ступени из одиннадцати: 12 px — мелкие управляющие элементы, 18 px — средние блоки, 28 px — крупные поверхности, 999 px — бейджи и переключатели. Полная шкала с назначением каждой ступени — в разделе Правила системы. Две тени различают уровни: Surface — элемент лежит на странице, Float — элемент над ней (нижняя навигация, всплывающие карточки). Третьего уровня в системе нет, и он не нужен: выше плавающего слоя находится только тост.
Зелёный резервируем для ключевого действия, контур — для альтернативы.
Назначение. Запускает действие на экране. Зелёная заливка — единственный первичный акцент в блоке: если на экране две кнопки Primary, значит иерархия действий не определена. Secondary — альтернатива того же уровня, Ghost — необязательное действие, которое не должно перетягивать внимание.
Кнопка «Войти» с экрана входа.
| Параметр | Значение |
|---|---|
| Варианты | .btn-primary — заливка --green-600, белый текст, тень 0 8 18 rgba(40,106,53,.18); .btn-secondary — прозрачный фон, обводка --line; .btn-ghost — без фона и обводки, текст --green-600 |
| Размеры | Small 36 px / радиус 12 · Medium 48 px / радиус 14 · Large 58 px / радиус 18. Ширина — по содержимому, горизонтальный padding 14 / 20 / 26 px |
| Состояния | Default · Hover (--green-700 + сдвиг на −1 px) · Focus (системное кольцо браузера, собственного стиля нет) · Disabled (#c9cec7, текст #f5f5f5, cursor:not-allowed). нет Loading |
| Иконка | Необязательная, 18 px, справа от текста, gap: 10px. Наследует цвет текста через currentColor |
| Поведение | Текст не переносится — кнопка растёт по содержимому. На ширине ≤ 680 px кнопки в ряду получают flex:1 и min-width:145px, то есть занимают строку целиком |
| В макете | «Войти» на экране входа, «Смотреть» в промо-баннере каталога, «В корзину» в карточке товара |
Назначение. Chip — фильтр каталога с одиночным выбором: активен ровно один, счётчик показывает количество товаров в категории. Badge — неинтерактивная метка состояния товара; она сообщает, но не кликается. Разница важна: chip меняет выдачу, badge только описывает.
Пара состояний: обычный и выбранный. Бейджа в листе компонентов нет — он существует только внутри карточки товара.
| Параметр | Значение |
|---|---|
| Chip · состояния | Default (фон --canvas, прозрачная рамка) · Active (--sage-100 + рамка --sage-300, текст --green-700). нет Hover и Disabled |
| Chip · поведение | Клик снимает active со всех остальных чипов группы — выбор одиночный, ни один вариант не оставляет выдачу без фильтра. Фактическая фильтрация списка в прототипе не реализована |
| Badge · тона | green — «Хит», подтверждённый спрос · purple — «Новинка» · yellow — скидка, единственный тон с числом · neutral — «Нет в наличии», отсутствие действия |
| Badge · размер | Высота по содержимому, padding 5 / 10 px, радиус 999px, текст 10 px / 700. Ширина max-content — бейдж не растягивается по контейнеру |
| Контраст | green 5.62 : 1 · purple 6.28 : 1 · yellow 6.90 : 1 · neutral 4.49 : 1 — последний на границе AA, крупный текст на нём недопустим |
| Ограничение | Тон бейджа задаётся классом, а не токеном: purple, yellow и neutral объявлены литеральными цветами в styles.css. См. раздел «Токены» |
Крупные зоны касания, спокойные обводки и явная обратная связь.
Назначение. Ввод данных на экранах входа и оформления заказа. Лейбл живёт внутри поля и виден всегда — он не исчезает при вводе, поэтому пользователь не теряет контекст в длинной форме. Слева — иконка типа поля, справа — действие над полем (показать пароль, статус промокода).
Пара состояний: пароль скрыт и пароль показан. Обратите внимание на иконку — в макете она меняется.
| Параметр | Значение |
|---|---|
| Размер | Минимальная высота 68 px, радиус 16 px, внутренний отступ 16 px, gap: 14px между иконкой, содержимым и действием |
| Анатомия | Иконка типа 22 px (--muted) → лейбл 10 px (--muted) + значение 15 px (--ink) → кнопка действия |
| Состояния | Default · Focus-within (рамка --green-500 + кольцо 3 px rgba(40,106,53,.09)) · Success (.input-success: рамка #82ad6b, фон rgba(167,196,138,.08), подпись справа). нет Error и Disabled |
| Поведение | Кнопка глаза переключает type поля между password и text. Иконка при этом не меняется — расхождение с макетом компонентов, где закрытый глаз соответствует скрытому паролю |
| Валидация | В прототипе не реализована: «Применён» — статичное состояние показа, проверки промокода нет. Правила валидации и тексты ошибок нужно согласовать до вёрстки |
| Доступность | Поле обёрнуто в <label>, поэтому клик по лейблу и иконке ставит фокус в поле. Отдельного видимого стиля :focus-visible у кнопки-глаза нет |
Назначение. Size option — выбор размера растения: один из трёх, цена меняется вместе с выбором, поэтому вариант несёт и параметр, и стоимость. Switch — мгновенное переключение настройки без кнопки «Сохранить». Оба элемента выбирают, но switch применяет изменение сразу, а size option только готовит заказ.
Пара состояний варианта размера. Переключателя в листе компонентов нет.
| Параметр | Значение |
|---|---|
| Size option · состав | Буква размера (800), диапазон высоты (--muted), цена, галочка-индикатор 20 px в правом верхнем углу |
| Size option · состояния | Default (рамка --line) · Selected (рамка --green-500, фон rgba(167,196,138,.09), показана галочка). Выбор одиночный и обязательный — пустого состояния нет |
| Switch · размеры | Дорожка 44 × 25 px, кружок 19 px, ход 19 px, длительность 0.2 s. Off — #d7dbd6, On — --green-600 |
| Поведение | Клик по варианту размера снимает выбор с остальных. Switch управляется нативным <input type="checkbox">, скрытым визуально, — состояние доступно с клавиатуры и читается скринридером |
| Адаптив | На ширине ≤ 680 px три варианта размера перестраиваются в вертикальные строки с сеткой 35px 1fr auto |
| Не реализовано | Недоступный размер (нет в наличии) и подтверждение сохранения настройки. требует проработки |
Основной носитель изображения, цены, рейтинга и быстрого действия.
Назначение. Product card — основной носитель товара в каталоге: изображение, категория, название, рейтинг, цена и быстрое добавление в корзину без перехода на страницу товара. Care card — контентная карточка совета по уходу: у неё нет цены и действия покупки, поэтому она намеренно отличается по форме и не может быть перепутана с товаром.
Карточка товара и два её интерактивных элемента парами.
| Параметр | Значение |
|---|---|
| Product · анатомия | Изображение 260 px (бейдж слева-сверху, избранное справа-сверху) → категория 15 px --muted → название → рейтинг → строка цены с кнопкой быстрого добавления |
| Product · состояния | Избранное: Default / Active (#f1d9dc + #a03643, иконка получает заливку). Быстрое добавление: Default (--sage-100) / Added (--green-600, белая иконка). нет Loading и «Нет в наличии» |
| Product · поведение | Избранное переключается и показывает тост «Добавлено в избранное» / «Удалено из избранного». Быстрое добавление необратимо в пределах сессии: класс added снимается только перезагрузкой — отмена действия не предусмотрена |
| Care · форма | Минимальная высота 390 px, фото под градиентом rgba(40,106,53,.87), содержимое прижато к нижнему краю, белый текст, ссылка со временем чтения |
| Рейтинг | Звезда цветом --sun (контраст к белому 1.77 : 1 — декоративный). Значение продублировано текстом, поэтому информация не теряется при слабом зрении |
| Адаптив | Сетка 3 → 2 колонки на ≤ 980 px (care card занимает всю ширину) → 1 колонка на ≤ 680 px |
Составные блоки для выбора варианта, количества и подтверждения ценности.
Безопасная оплата
Назначение. Составной блок покупки: количество и добавление в корзину в одной строке, потому что это одно решение пользователя, а не два. Цена внутри кнопки пересчитывается сразу — сумма видна до нажатия, а не после перехода в корзину.
Счётчик количества на всех четырёх значениях и состояние «В корзине», которого на сайте нет.
| Параметр | Значение |
|---|---|
| Stepper | Кнопки 45 × 50 px, значение по центру с минимальной шириной 24 px, рамка --line, радиус 14 px |
| Границы значения | Минимум 1 — уменьшение ниже единицы игнорируется. Максимум в прототипе не задан; в макете компонентов «плюс» на значении 4 показан неактивным, поэтому верхний предел нужно согласовать со складскими остатками |
| Пересчёт цены | Базовая цена 1 490 ₽ умножается на количество и форматируется локалью ru-RU — разряды разделяются неразрывным пробелом |
| Кнопка | Занимает оставшуюся ширину (flex:1), содержимое разнесено по краям: иконка и подпись слева, сумма справа. Добавление увеличивает счётчик корзины на выбранное количество и показывает тост |
| Состояния | Default. В макете компонентов есть состояние «В корзине» с галочкой и суммой — в прототипе оно не реализовано. нет Loading и ошибки оплаты |
| Адаптив | На ≤ 680 px строка разворачивается вертикально: stepper растягивается по ширине, кнопка получает высоту 56 px |
Назначение. Trust banner снимает главное возражение при покупке живого растения — «а если оно приедет сломанным». Это интерактивный блок: шеврон справа обещает продолжение, поэтому он обязан вести к условиям замены. Delivery — статичная справка о сроке и пороге бесплатной доставки, она ничего не обещает по нажатию и поэтому не кликается.
| Параметр | Значение |
|---|---|
| Trust · форма | Кнопка во всю ширину, рамка rgba(40,106,53,.22), градиент от rgba(167,196,138,.12) к прозрачному, радиус 18 px, эмодзи-иконка 28 px |
| Trust · поведение | Цель перехода в прототипе не задана — обработчика у баннера нет. требует уточнения куда ведёт нажатие: условия замены, страница гарантии или раскрывающийся блок |
| Delivery · форма | Иконка 38 px на подложке --sage-100, срок основным цветом, порог бесплатной доставки — --muted |
| Данные | Срок «завтра» и порог «3 000 ₽» зашиты в разметку. При подключении к бэкенду обе величины становятся динамическими и зависят от региона |
| Состояния | Только Default у обоих блоков. Наведение, нажатие и фокус у trust banner не оформлены, хотя элемент кликабелен |
Токены и компоненты вместе — адаптивный hero для будущего сайта.
Живые растения с доставкой и понятными советами по уходу.
Монстера ДелишиозаНеприхотлива · от 1 490 ₽
Назначение. Первый экран магазина: обещание, одно первичное действие и одно необязательное. Композиция намеренно сложная — текст лежит поверх фотографии, а карточка-подпись вынесена за поток. Это единственное место в системе, где допускается наложение; в Auto Layout такую компоновку переводить нельзя, она рассыплется.
| Параметр | Значение |
|---|---|
| Размер | Минимальная высота 580 px, радиус 34 px, внутренний отступ clamp(30px, 6vw, 72px), фото center / cover |
| Заголовок | clamp(42px, 6vw, 76px), интерлиньяж 1.02, трекинг −0.05em. Второе слово — Georgia курсивом цветом --green-600: единственное место, где система выходит за пределы Manrope |
| Hero note | Абсолютное позиционирование в правом нижнем углу, подложка из 94 % белого с backdrop-filter: blur(16px) и тенью для отрыва от фотографии. Текст набран токенами --ink-fixed и --muted-fixed, которые не переворачиваются вместе с темой: подложка карточки остаётся светлой в обеих темах. На ≤ 680 px растягивается по ширине с отступом 18 px |
| Читаемость текста | Светлая тема ≤ 680 px: сверху добавляется градиент от rgba(247,245,239,.98) — текст перестаёт лежать на листьях. Тёмная тема: слева накладывается rgba(18,23,20,.72). Контраст зависит от фотографии, поэтому при замене изображения его нужно проверять заново |
| Адаптив | ≤ 980 px фон смещается к 62 % по горизонтали. ≤ 680 px высота 640 px, содержимое прижимается к верху, действия выстраиваются колонкой |
| Ограничение | Фон — растровое изображение 1.9 МБ без srcset. Для продакшена нужны адаптивные размеры и формат WebP / AVIF |
То, что нельзя показать одним компонентом: шкалы, сетка, именование, состояния и доступность.
Компонент не содержит литеральных цветов и радиусов — только переменные. Тему меняют переопределением токена, а не правкой селектора компонента. Пятьдесят четыре токена, и каждый используется хотя бы один раз. Значения, переопределения тёмной темы и число обращений в таблицах ниже прочитаны из styles.css, а не набраны руками: раздел, который ловит расхождение между шкалой и разметкой, не должен сам от неё отставать. В переносимой библиотеке assets/ui-kit/css/tokens.css базовые значения объявлены с префиксом --plant-.
Палитра. 13 токенов.
| Токен | Значение | Тёмная тема | Назначение | Обращений |
|---|---|---|---|---|
| --green-700 | #1F562A | — | Наведение на первичную кнопку, текст на светло-зелёной подложке | 7 |
| --green-600 | #286A35 | — | Первичное действие, активное состояние, акцентный текст и иконки | 28 |
| --green-500 | #348642 | — | Обводка поля в фокусе и выбранного варианта размера | 2 |
| --green-400 | #55A762 | — | Индикатор готовности в верхнем баре | 1 |
| --sage-300 | #A7C48A | — | Рамка активного фильтра, акцент документации в тёмной теме | 6 |
| --sage-100 | #E9F0DF | #273729 | Подложка бейджей, чипов, иконочных кнопок и блоков-подсказок | 8 |
| --canvas | #F7F5EF | #121714 | Фон страницы и невыбранного чипа | 9 |
| --surface | #FFF | #1A211C | Фон карточек, блоков и полей | 6 |
| --sand-100 | #EEE9DD | #242B26 | Тёплая половина градиента первого экрана | 1 |
| --nav-bg | #183D24 | — | Фон боковой навигации — темнее любого зелёного из палитры | 1 |
| --nav-mark | #DFEAD3 | — | Подложка знака бренда в навигации | 1 |
| --sun | #F4B942 | — | Звезда рейтинга. Декоративный цвет: значение продублировано текстом | 2 |
| --bloom | #D5B1FF | — | Акцент новизны в палитре | 2 |
Текст и контент. 10 токенов.
| Токен | Значение | Тёмная тема | Назначение | Обращений |
|---|---|---|---|---|
| --ink | #171A18 | #F2F4EF | Основной текст и заголовки | 17 |
| --muted | #6F746F | #A4AAA4 | Вторичный текст, подписи, неактивные пункты навигации | 39 |
| --on-dark | #FFFFFF | — | Текст и иконки на брендовой или тёмной подложке — не переворачивается | 12 |
| --ink-fixed | #171A18 | — | Название на карточке-подписи поверх фотографии | 1 |
| --muted-fixed | #4F544F | — | Вторичная строка там же. Подложка карточки светлая в обеих темах | 1 |
| --on-photo | #171A18 | #FFFFFF | Заголовок прямо на фотографии — переворачивается вместе с затемнением | 2 |
| --on-photo-soft | #555B56 | #C0C7C1 | Текст под ним | 1 |
| --accent-soft-ink | #1F562A | #A7C48A | Акцент на светло-зелёной подложке: код, ссылки оглавления | 2 |
| --link | #286A35 | #A7C48A | Ссылка в таблицах и описаниях документации | 3 |
| --link-hover | #1F562A | #FFFFFF | Она же при наведении | 1 |
Состояния и чипы. 16 токенов.
| Токен | Значение | Тёмная тема | Назначение | Обращений |
|---|---|---|---|---|
| --disabled-bg | #C9CEC7 | — | Фон отключённой кнопки | 1 |
| --disabled-ink | #F5F5F5 | — | Текст на ней | 1 |
| --switch-off | #D7DBD6 | — | Дорожка выключенного переключателя | 1 |
| --success-line | #82AD6B | — | Рамка поля с успешно применённым значением | 1 |
| --danger | #A03643 | — | Активное избранное | 2 |
| --danger-soft | #F1D9DC | — | Его подложка | 1 |
| --chip-ok-bg | #E9F0DF | — | Чип «выполнено»: фон. 5.62 : 1 | 1 |
| --chip-ok-ink | #286A35 | — | Он же: текст | 1 |
| --chip-new-bg | #EFE3FF | — | Чип «новинка»: фон. 6.28 : 1 | 1 |
| --chip-new-ink | #6D36A5 | — | Он же: текст | 1 |
| --chip-sale-bg | #FFE06B | — | Чип скидки: фон. 6.90 : 1 | 1 |
| --chip-sale-ink | #5A4700 | — | Он же: текст | 1 |
| --chip-off-bg | #EBEDEB | — | Чип «нет» и «не применимо»: фон. 4.49 : 1 — на границе AA | 2 |
| --chip-off-ink | #686D68 | — | Он же: текст | 2 |
| --chip-warn-bg | #FFE6CF | — | Чип «требует внимания»: фон. 5.69 : 1 | 1 |
| --chip-warn-ink | #8A4A12 | — | Он же: текст | 1 |
Шкала радиусов. 11 ступеней.
| Токен | Значение | Тёмная тема | Назначение | Обращений |
|---|---|---|---|---|
| --r-2xs | 4px | — | Образец цвета в таблице токенов, инлайн-код | 3 |
| --r-xs | 10px | — | Индикатор внутри элемента, вложенное изображение | 2 |
| --r-sm | 12px | — | Мелкий управляющий элемент: пункт меню, малая кнопка, ссылка-чип | 7 |
| --r-ctl | 14px | — | Кнопка, чип, иконочная кнопка, степпер | 7 |
| --r-field | 16px | — | Поле ввода, вариант размера, образец цвета | 4 |
| --r-md | 18px | — | Средний блок: подсказка, баннер, таблица, крупная кнопка | 10 |
| --r-card | 24px | — | Карточка товара и плавающая панель | 3 |
| --r-lg | 28px | — | Крупная поверхность: блок витрины | 2 |
| --r-xl | 34px | — | Собранный экран | 1 |
| --r-pill | 999px | — | Бейдж, переключатель, тост | 5 |
| --r-circle | 50% | — | Круглые элементы: аватар, индикатор, кнопка избранного | 9 |
Структура. 4 токенов.
| Токен | Значение | Тёмная тема | Назначение | Обращений |
|---|---|---|---|---|
| --line | rgba(23,26,24,.12) | rgba(255,255,255,.11) | Все границы и разделители | 26 |
| --shadow | 0 18px 50px rgba(28,45,29,.08) | 0 18px 50px rgba(0,0,0,.25) | Плавающий уровень: нижняя навигация, hero, поднятая кнопка | 3 |
| --sidebar | 260px | — | Ширина боковой навигации; от неё считается отступ основной колонки | 2 |
| --figma-canvas | #F6F8F6 | — | Фон артборда в экспортах из Figma | 2 |
Здесь было три расхождения. Токены --sand-100, --sand-200 и --bloom объявлялись и ни разу не вызывались. Шкала радиусов состояла из четырёх ступеней, а в стилях встречалось тринадцать числовых значений. Вне блока :root было задано семнадцать литеральных цветов. Сейчас литералов цвета вне токенов ноль — двадцать семь вхождений переведены на переменные. --sand-200 удалён: назначения у него не было. --sand-100 подключён к градиенту первого экрана через color-mix, --bloom — к своему образцу в палитре. Радиусы сведены к одиннадцати именованным ступеням, сорок одно объявление переведено на них, близкие значения слиты: 11 → 12, 13 → 14, 17 → 18, 22 → 24, а 99px и 999px стали одним --r-pill. Отдельная находка: #A9CA89 в боковой панели отличался от --sage-300 на шесть единиц — это был не цвет, а опечатка, теперь один токен. Вне шкалы намеренно остались альфа-значения rgba() и органический радиус декоративного круга на первом экране.
Образцы Leaf 600, Sage 300, Sun и Bloom читают значение из токена: style="--swatch:var(--bloom)". Canvas, Sand 100, Ink и Muted оставлены литералами намеренно — тёмная тема их переопределяет, и образец, привязанный к такому токену, показывал бы в тёмной теме не тот цвет, который подписан под ним. Образец документирует объявленное значение, а не текущее состояние темы.
Шаг системы — 8 px, с двумя половинными ступенями для плотных мест. Отступ выбирают по смыслу расстояния, а не по внешнему виду: 4 px разделяет части одного элемента, 8–12 px — соседние элементы внутри блока, 16–24 px — блоки между собой, 32–48 px — смысловые части экрана.
| Правило сетки | Значение | Комментарий |
|---|---|---|
| Боковая навигация | 260 px, фиксированная | Основная колонка получает отступ слева ровно на эту величину |
| Поля раздела | clamp(24px, 6vw, 88px) | Растут вместе с окном и упираются в 88 px на широком экране |
| Вертикальный ритм разделов | 96 px, на мобильной ширине 68 px | Разделы отделены линией --line, а не только расстоянием |
| Колонки | 2 (.split-grid), 3 (.cards-grid), 4 (.swatch-grid) | Промежуток 20 px между колонками, 12 px между образцами цвета |
| Брейкпоинты | 980 px · 680 px · 520 px | Не диапазоны устройств, а точки, где текущая раскладка ломается |
| Отступ якоря | scroll-margin-top: 70px | Компенсирует липкий верхний бар при переходе по ссылке |
Одна гарнитура — Manrope, запасная Arial. Карточка в разделе «Основа системы» показывает номинальную шкалу; ниже — размеры, которыми фактически пользуются компоненты. Заголовки набираются плотно, с отрицательным трекингом, текст — свободно: контраст между ними и создаёт ощущение системы.
| Роль | Размер и интерлиньяж | Начертание | Где применяется |
|---|---|---|---|
| Display | clamp(50px, 6.4vw, 94px) / 0.98, трекинг −0.055em | 800 | Заголовок первого экрана |
| Hero | clamp(42px, 6vw, 76px) / 1.02, трекинг −0.05em | 800 | Заголовок собранной композиции |
| Heading | clamp(32px, 4vw, 50px) / 1.05, трекинг −0.04em | 700 | Заголовки разделов |
| Subheading | 25 px / 1.18 | 700 | Заголовок контентной карточки |
| Block title | 16 px | 700 | Заголовки блоков и названия товара |
| Body L | 17–18 px / 1.5 | 400 | Подзаголовок первого экрана и hero |
| Body | 15 px / 1.55 | 400 | Основной текст, значения полей, пункты навигации |
| Caption | 11–13 px / 1.4–1.6 | 400 | Подписи, рейтинг, вторичный текст карточек |
| Overline | 9–11 px, трекинг 0.08–0.18em | 700, прописные | Метки разделов, статус, лейблы полей, бейджи |
| Акцент | Georgia, курсив, цвет --green-600 | 400 | Второе слово в заголовках Display и Hero — единственное исключение из Manrope |
Manrope подключается с fonts.googleapis.com. При открытии страницы без сети подставляется Arial: метрики отличаются, и заголовки с плотным трекингом становятся шире. Для передачи в разработку шрифт нужно положить рядом с проектом и подключить через @font-face.
Один встроенный SVG-спрайт, никаких иконочных шрифтов и внешних запросов. Все иконки нарисованы обводкой одной толщины и наследуют цвет текста через currentColor — поэтому одна и та же иконка работает и на светлом фоне, и внутри зелёной кнопки.
Восемь иконок, нарисованных в макете. Остальные семь добавлены на витрине.
| Правило | Значение |
|---|---|
| Холст | viewBox="0 0 24 24" у всех символов без исключения |
| Обводка | stroke: currentColor, толщина 1.8, скругления round, заливки нет |
| Размеры | 22 px по умолчанию · 18 px внутри кнопки · 16 px в ссылке карточки · 13–15 px в мелких индикаторах |
| Исключение | Активный пункт нижней навигации добавляет иконке заливку rgba(40,106,53,.13) — единственное место, где обводочная иконка становится залитой |
| Подключение | Спрайт лежит первым элементом <body> и скрыт правилом .svg-sprite; ссылка — <use href="#i-имя"> |
| Именование | Префикс i- на витрине, plant- в переносимой библиотеке; далее существительное в единственном числе строчными буквами |
| Не покрыто | Нет иконок фильтра, доставки, полива и температуры, которые встречаются на мобильных экранах — там они нарисованы отдельно. расширить спрайт |
Имя обязано отвечать на вопрос «что это», а не «как выглядит». .btn-primary — это роль; .btn-green было бы описанием, и при смене палитры такое имя начинает врать. Правило одинаково действует и для слоёв макета, и для классов.
| Пространство | Шаблон | Пример | Комментарий |
|---|---|---|---|
| Классы витрины | блок / блок-модификатор | .btn, .btn-primary, .product-card | Без префикса: страница самостоятельная и ни с чем не соседствует |
| Классы библиотеки | plant-блок__элемент--модификатор | .plant-product__title, .plant-btn--primary | Префикс обязателен: библиотеку копируют в чужой проект с Bootstrap или Tailwind |
| Состояние | .active на витрине, .is-active в библиотеке | .chip.active, .plant-bottom-nav .is-active | Состояние — отдельный класс, а не отдельный компонент |
| Идентификатор раздела | Существительное латиницей строчными | #foundation, #commerce, #docs | Попадает в адресную строку, поэтому не меняется после публикации |
| Иконка | i-имя / plant-имя | #i-heart | Имя описывает предмет, а не действие: heart, не favorite |
| Токен | --группа-ступень | --green-600, --space-4, --r-md | Число — ступень шкалы, а не значение в пикселях |
| Экран в макете | Screen / Название | Screen / Каталог | Совпадает с конвенцией плагина Project 7 |
| Компонент в макете | Категория / Название, вариант Свойство=Значение | Button / Primary, State=Hover | Категория задаёт группировку в панели ассетов |
Таблица описывает не идеальный набор, а фактический. Прочерк — это задача, а не оформительский пропуск: разработчик, который увидит здесь пустую клетку, спросит про поведение до вёрстки, а не после неё.
| Компонент | Default | Hover | Выбран | Focus | Disabled | Loading | Error |
|---|---|---|---|---|---|---|---|
| Button | есть | есть | — | браузерный | есть | — | — |
| Icon button | есть | есть | есть | браузерный | — | — | — |
| Chip | есть | — | есть | — | — | — | — |
| Badge | есть | не нужен | не нужен | не нужен | не нужен | — | — |
| Input | есть | — | — | есть | — | — | — |
| Size option | есть | — | есть | — | — | — | — |
| Switch | есть | — | есть | нативный | — | — | — |
| Пункт навигации | есть | есть | есть | — | — | не нужен | не нужен |
| Product card | есть | — | — | — | — | — | — |
| Избранное | есть | — | есть | — | — | — | — |
| Быстрое добавление | есть | — | есть | — | — | — | — |
| Stepper | есть | — | не нужен | — | только в макете | — | — |
| Trust banner | есть | — | — | — | — | — | — |
| Состояние | Что означает |
|---|---|
| Default | Исходный вид, элемент доступен для взаимодействия |
| Hover | Курсор над элементом. Только для указательных устройств — на телефоне это состояние недостижимо |
| Выбран | Текущий вариант, раздел или отметка пользователя. Сохраняется после того, как курсор ушёл |
| Focus | Элемент получил фокус клавиатуры. Обязателен для доступности |
| Disabled | Действие недоступно; элемент не принимает ввод и не отправляет событий |
| Loading | Выполняется запрос; повторное нажатие заблокировано до ответа |
| Error | Значение не прошло проверку; сопровождается сообщением |
Loading и Error не реализованы нигде. Пока интерфейс статичен, это незаметно; как только появится сеть, оба состояния понадобятся сразу у всех действий — вход, добавление в корзину, применение промокода. Их стоит спроектировать до подключения бэкенда, а не по факту первой ошибки.
Контрастность посчитана по формуле WCAG 2.1 для всех сочетаний текста и фона, которые встречаются в системе. Порог AA — 4.5 : 1 для обычного текста и 3 : 1 для крупного (от 24 px или от 18.5 px полужирного).
| Сочетание | Контраст | Вердикт |
|---|---|---|
| Ink на Canvas — основной текст | 16.09 : 1 | AAA |
| Ink на Surface — текст карточек | 17.54 : 1 | AAA |
| Белый на Leaf 600 — первичная кнопка | 6.56 : 1 | AA |
| Белый на Leaf 700 — кнопка при наведении | 8.67 : 1 | AAA |
| Leaf 600 на Surface — акцентный текст и ссылки | 6.56 : 1 | AA |
| Muted на Surface — подписи в карточках | 4.77 : 1 | AA |
| Muted на Canvas — подписи на фоне страницы | 4.37 : 1 | ниже AA |
| Бейдж «Хит» — зелёный | 5.62 : 1 | AA |
| Бейдж «Новинка» — фиолетовый | 6.28 : 1 | AA |
| Бейдж скидки — жёлтый | 6.90 : 1 | AA |
| Бейдж «Нет в наличии» — нейтральный | 4.49 : 1 | на границе AA |
| Избранное в активном состоянии | 5.06 : 1 | AA |
| Карточка-подпись на фото: название | 15.87 : 1 | AAA |
| Карточка-подпись на фото: вторичная строка | 7.00 : 1 | AAA |
| Карточка-подпись на фото: номер | 5.93 : 1 | AA |
| Звезда рейтинга на белом | 1.77 : 1 | декоративная |
| Текст отключённой кнопки | 1.47 : 1 | вне требований |
| Тёмная тема: Ink на Canvas | 16.37 : 1 | AAA |
| Тёмная тема: Muted на Canvas | 7.65 : 1 | AAA |
| Тёмная тема: Leaf 600 на Sage 100 — бейдж «Хит», активный чип | 1.92 : 1 | не читается |
| Тёмная тема: Leaf 700 на Sage 100 — быстрое добавление | 1.46 : 1 | не читается |
| Правило | Как выполнено |
|---|---|
| Зона касания | Кнопка 48 px, поле 68 px, пункт нижней навигации ≈ 45 px. Иконочная кнопка 42 × 42 px — на 2 px меньше рекомендованных 44 |
| Фокус клавиатуры | Собственного стиля :focus-visible нет: виден только системный контур браузера. Поле ввода — исключение, у него есть :focus-within |
| Смысл без цвета | Выбранный размер и активный фильтр помечены не только цветом: у размера появляется галочка, у чипа — рамка. Рейтинг продублирован числом |
| Подписи к иконкам | У иконочных кнопок есть aria-label. У пунктов нижней навигации подпись видна на десктопе и скрывается на мобильной ширине, оставляя иконку без текстовой альтернативы |
| Текст поверх фотографии | Карточка-подпись hero лежит на подложке из 94 % белого и набрана фиксированными токенами. Три значения выше посчитаны для худшего случая — тёмного листа под карточкой. До правки подложка была 80 %, вторичная строка использовала --muted и давала 3.39 : 1, а в тёмной теме название карточки становилось почти белым на белом фоне |
| Анимация | prefers-reduced-motion: reduce отключает все переходы и плавную прокрутку |
| Тёмная тема | Переключается вручную и запоминается в localStorage. Системная настройка prefers-color-scheme не учитывается — пользователь с тёмной ОС при первом заходе увидит светлую тему |
| Семантика | Разделы — <section>, карточки — <article>, навигация — <nav> с aria-label. Поля обёрнуты в <label>, поэтому клик по подписи ставит фокус в поле |
В тёмной теме --sage-100 становится #273729, а --green-600 и --green-700 остаются прежними. Все пары «зелёный текст на светло-зелёной подложке» — бейдж «Хит», активный чип, кнопка быстрого добавления — падают до 1.92 : 1 и 1.46 : 1, то есть перестают читаться. Правка на одну строку: переопределить акцент в тёмной теме на #A9CA89, который уже есть в палитре боковой панели и даёт 6.91 : 1. Чипы документации на этой странице решают это иначе: у них фиксированная пара токенов, которая не переворачивается вообще, — ровно как у бейджей «Новинка», «−25 %» и «Нет в наличии». Бейдж «Хит», активный чип и кнопка быстрого добавления намеренно оставлены как есть: правка дизайна витрины должна быть отдельным осознанным шагом, а не побочным эффектом написания документации.
Маскот появился по итогам copy-теста UX-исследования: из четырёх участников трое выбрали дружелюбный вариант текста, нейтральный не выбрал никто. Жабка — самый дешёвый способ нести эту интонацию, не трогая визуальную систему: она маленькая, появляется в считаных местах и никогда не находится внутри управляющего элемента. Исходник — Result/scripts/lib/mascot.mjs, оттуда же позы попадают в панель плагина Project 7 и на борды гайдлайна.
Заголовок страницы и шапка раздела — лицо документации. Поза по умолчанию: открытые глаза, спокойная улыбка.
Раздел без замечаний. Зажмуренные глаза, широкая улыбка и единственная лаймовая искра — самый яркий цвет во всей системе.
Разделу нечего показать: список пуст, данных нет. Опущенные дуги вместо прямых линий — прямые читались бы как повязка на глазах, а не как сон.
Раздел требует внимания или ручной проверки. Капля вынесена правее глазного бугорка, чтобы силуэт не слипался.
| Цвет | Значение | Где в фигуре |
|---|---|---|
| Sage 300 | #A7C48A | Тело и глазные бугорки — тот же токен, что и рамка активного фильтра |
| Sage 300 тёмный | #8FB474 | Лапы и затенение листа. Единственный оттенок вне общей палитры — нужен, чтобы лапы отделялись от тела |
| Leaf 700 | #1F562A | Контуры, улыбка, лист, буква «z» и обводка капли |
| Sage 100 | #E9F0DF | Живот и заливка капли |
| Lime | #C8FF28 | Искра у позы Happy. Больше нигде в системе не встречается — в этом и смысл акцента |
| Ink | #171A18 | Зрачки и закрытые глаза |
| Surface | #FFFFFF | Белки глаз |
| Правило | Значение |
|---|---|
| Холст | 64 × 64, viewBox="0 0 64 64" — вдвое крупнее иконок, потому что у маскота есть черты лица |
| Размер отображения | 26–44 px в интерфейсе плагина, 56 px на этой странице. Ниже 26 px глаза перестают читаться, выше 72 px фигура начинает кричать |
| Цвет | Единственный элемент системы, который не перекрашивается. Маскот, приведённый к одному цвету, превращается в силуэт, поэтому палитра запечена в фигуру, а assets/icons.ts исключает её из перекраски |
| Общая база | Лапы, тело и живот одинаковы во всех четырёх позах — так Smart Animate в прототипе плавно переводит одну позу в другую |
| Почему без рук | Машущая лапа пробовалась и была убрана: на 26–44 px обводка 3 px плюс кисть — это примерно по одному пикселю на каждое, и жест читался как хвост. Позы различаются глазами и одним предметом — это переживает уменьшение |
| Где уместна | Заголовок страницы, шапка раздела, пустое состояние, строка-подсказка рядом с текстом |
| Где недопустима | Внутри кнопки, поля, чипа или любого управляющего элемента; в карточке товара; рядом с ценой, ошибкой или предупреждением о деньгах |
| Что она не делает | Не несёт обязательной инструкции. Если убрать все реплики Жабки, документация останется полной — это проверяемое свойство, а не пожелание |
Девять разделов для передачи разработчику. Каждое утверждение опирается на макет, разметку или обработчик — там, где данных нет, так и написано.
Всё, что описано на этой странице, собрано в одном файле Figma. Ссылка ведёт на рабочую страницу с экранами и компонентами; две страницы рядом созданы плагином из папки Project 7 и обновляются его командой Verify. Структура ниже прочитана по панели слоёв файла.
| Страница | Что содержит | Кто создаёт |
|---|---|---|
| UX/UI7 · 1 Product & Prototype | Рабочая страница: секции 01 APP SCREENS и 02 COMPONENTS, три заблокированных референса | Дизайнер |
| Project 7 / UI Guidelines | Борды гайдлайна: цвета, типографика, отступы, сетки, радиусы, эффекты, иконки, именование, Жабка и каталог компонентов с живыми инстансами | Плагин Project 7 |
| Project 7 / Documentation | Девять разделов документации на канвасе плюс навигация по узлам | Плагин Project 7 |
| Верхний уровень рабочей страницы | Тип | Назначение |
|---|---|---|
| 02 COMPONENTS | Section, 1084 × 875 | Лист компонентов: каждый элемент показан парой «обычное состояние — активное» |
| 01 APP SCREENS | Section | Три экрана приложения в размере устройства |
| REFERENCE / Enter.png | Изображение, заблокировано | Референс экрана входа |
| REFERENCE / Catalogue.png | Изображение, заблокировано | Референс каталога |
| REFERENCE / Card.png | Изображение, заблокировано | Референс карточки товара |
Девятнадцать компонентов. Одиннадцать элементов интерфейса и восемь иконок. Лист показывает не отдельные состояния россыпью, а пары: слева обычное, справа активное — так расхождение между ними видно без переключения слоёв.
| Компонент в Figma | На сайте | Что показано на листе |
|---|---|---|
| Button / Primary | Button · .btn-primary | Кнопка «Войти» в основном состоянии |
| Product Card | Product card | Карточка целиком: бейдж «Хит», избранное, категория, рейтинг, цена и быстрое добавление |
| Bottom Navigation | Bottom navigation | Панель из пяти пунктов, активен «Каталог» |
| Nav Item | Пункт нижней навигации | Пара: неактивный серый и активный зелёный с залитой иконкой |
| Category Chip | Chip | Пара: обычный на белом и выбранный на светло-зелёном |
| Size Option | Size option | Пара: обычный и выбранный с зелёной рамкой и галочкой |
| Password Field | Input | Пара: скрытый пароль с перечёркнутым глазом и открытый с зелёной рамкой и текстом plant2026 |
| Quantity | Stepper | Четыре значения: 1 с неактивным минусом, 2, 3 и 4 с неактивным плюсом — отсюда и вывод о верхнем пределе |
| Cart Button | Add to cart | Состояние «В корзине» с галочкой и суммой 1 490 ₽ — на сайте не реализовано |
| Cart Icon | Quick add | Пара: обычная на светло-зелёном и добавленная — зелёная с галочкой |
| Favorite | Favorite | Пара: обычное и активное с красным контуром сердца |
| Icon / plant-leaf, plant-droplet, plant-sun, plant-home, plant-search, plant-heart, plant-bag, plant-user | Спрайт #i-* | Восемь иконок одной обводкой. На сайте их пятнадцать: добавлены moon, check, chevron, mail, lock, eye, arrow, menu, close |
| Фрейм экрана | Закреплено при прокрутке | Прокручивается | Примечание |
|---|---|---|---|
| Enter | Status bar, Home indicator | Content | Hero вынесен отдельным слоем — фотография и логотип над формой |
| Catalogue | Header, Bottom Navigation | Scroll Content | Единственный экран, где нижняя навигация вставлена инстансом компонента, а не нарисована заново |
| Card | Status bar, Top actions, Home indicator | Scroll Content | Кнопки «назад», «поделиться» и «в избранное» закреплены поверх галереи |
Статус-бар, индикатор и нижняя навигация вынесены из потока прокрутки — это не оформительское решение, а готовая инструкция для вёрстки: эти блоки остаются на месте, всё остальное едет. Каталог показывает и вторую половину правила — навигация там инстанс, поэтому правка компонента доходит до экрана сама.
Продукт. PLANT STORE — магазин комнатных растений. Аудитория — покупатель без опыта ухода за растениями: отсюда рейтинг и отметка «Легко ухаживать» в карточке товара, блок ухода с четырьмя параметрами и обещание замены живого растения. Интерфейс должен снимать страх «я его загублю» раньше, чем предложит купить.
Задачи пользователя. Войти в аккаунт, чтобы сохранить избранное и отслеживать заказы. Найти растение — через категорию, поиск или подборку «Популярные». Понять, подойдёт ли оно, — по цене, рейтингу, условиям ухода и размеру. Купить: выбрать размер, количество и добавить в корзину.
Состав. Три мобильных экрана в макете (Вход, Каталог, Карточка товара) и одна десктопная витрина — эта страница. Двадцать четыре компонента, пятнадцать иконок в спрайте, четыре позы маскота, пятьдесят четыре переменные в styles.css и двадцать восемь в переносимой библиотеке tokens.css. Две темы, три брейкпоинта. Фреймворков и сборщика нет: HTML, CSS, SVG, JavaScript и JSON.
| Артефакт | Где лежит | Назначение |
|---|---|---|
| Макет | Файл в Figma | Первоисточник: три экрана, девятнадцать компонентов и две страницы, созданные плагином. Разбор структуры — в блоке «Исходник в Figma» |
| Витрина системы | index.html, styles.css, app.js | Эта страница: гайдлайн, каталог компонентов и документация в одном месте |
| Переносимая библиотека | assets/ui-kit/ | Токены, компоненты, спрайт и семь готовых сниппетов для копирования в проект |
| Тексты интерфейса | assets/ui-kit/content/texts.json | Весь основной текст одним файлом — для локализации и правок без вёрстки |
| Экспорт экранов | Components/01 APP SCREENS.png и .svg | Три экрана из макета. Страница показывает растр: векторная версия весит 11 МБ из-за встроенных фотографий |
| Экспорт компонентов | Components/02 COMPONENTS.svg | Состояния элементов парами: обычное и активное. Векторный, 191 КБ — показан на странице как есть |
| Плагин проверки | Project 7/ | Аудит Figma-файла и генерация гайдлайна и документации на страницах макета |
Состав экранов прочитан по исходнику в Figma и его экспорту. Точные размеры фреймов нужно смотреть в самом файле — из растра они не измеряются; пропорция кадра соответствует телефону около 19.5 : 9. Разделение слоёв на закреплённые и прокручиваемые приведено в блоке «Исходник в Figma».
Components/01 APP SCREENS.svg, но весит 11 МБ из-за встроенных фотографий, поэтому на странице растрТочка входа в приложение. Форма занимает нижние две трети, верхняя треть — фотография и логотип: сначала узнавание бренда, потом работа.
name@mail.ru, поле «Пароль» с маской и кнопкой глаза, ссылка «Забыли пароль?»Основной экран выбора. Три способа сузить выдачу — поиск, фильтры и категории — стоят до товаров, промо-баннер разделяет фильтры и сетку.
Экран решения о покупке. Галерея на всю ширину, карточка с данными наезжает на неё снизу — изображение остаётся главным, но не занимает весь экран.
Десктопный каталог системы: постоянная боковая навигация 260 px и прокручиваемая колонка разделов. Работает как офлайн-файл — сервер не нужен.
clamp(24px, 6vw, 88px), до 980 px боковая панель уезжает за экранКраткое назначение каждого компонента и его параметры. Развёрнутая спецификация — в блоке «Спецификация» рядом с самим компонентом в разделах 02–07; соответствие компонентам макета и лист состояний — в блоке «Исходник в Figma».
| Компонент | Назначение | Параметры | Состояния |
|---|---|---|---|
| Button | Запускает действие; зелёная заливка означает главное действие экрана | Вариант: Primary / Secondary / Ghost. Размер: S / M / L. Иконка: есть / нет | Default, Hover, Disabled |
| Icon button | Действие без подписи там, где смысл считывается по иконке | 42 × 42 px, радиус 14 | Default, Hover, Active |
| Chip | Фильтр каталога по категории, выбор одиночный | Подпись, счётчик, эмодзи | Default, Active |
| Badge | Неинтерактивная метка состояния товара | Тон: green / purple / yellow / neutral | Default |
| Input | Ввод данных в формах входа и оформления | Иконка типа, лейбл, значение, действие справа | Default, Focus, Success |
| Size option | Выбор размера растения вместе с ценой | Размер, диапазон высоты, цена | Default, Selected |
| Switch | Мгновенное переключение настройки без сохранения | Заголовок, пояснение | Off, On |
| Top navigation | Навигация по разделам на десктопе | Вордмарк, до трёх ссылок, действия | Default, Active-ссылка |
| Bottom navigation | Основная навигация на телефоне, ровно пять направлений | Иконка и подпись у каждого пункта | Default, Active |
| Cart counter | Показывает число товаров в корзине | Число, 17 × 17 px | Default |
| Product card | Носитель товара в каталоге с быстрым добавлением | Изображение, бейдж, категория, название, рейтинг, цена | Default |
| Favorite | Отметка «в избранное» поверх изображения товара | 38 × 38 px, полупрозрачная подложка | Default, Active |
| Quick add | Добавление одной штуки прямо из каталога | 42 × 42 px | Default, Added |
| Care card | Карточка совета по уходу; намеренно не похожа на товар | Тема, заголовок, время чтения | Default |
| Stepper | Количество товара перед добавлением в корзину | Минимум 1, максимум не задан | Default |
| Add to cart | Добавление с показом итоговой суммы до нажатия | Иконка, подпись, сумма | Default |
| Trust banner | Снимает возражение о сохранности живого растения | Иконка, заголовок, пояснение, шеврон | Default |
| Delivery note | Срок доставки и порог бесплатной | Иконка, срок, условие | Default |
| Hero | Первый экран: обещание и одно первичное действие | Бейдж, заголовок, текст, два действия | Default |
| Hero note | Подпись к растению на фотографии | Номер, название, краткая характеристика | Default |
| Swatch | Образец цвета с копированием значения | Цвет, имя, hex, размер обычный / крупный | Default |
| Toast | Подтверждение действия на 1.6 секунды | Текст сообщения | Hidden, Shown |
| Theme toggle | Переключение светлой и тёмной темы | Иконка луны или солнца | Light, Dark |
| Sidebar navigation | Постоянная навигация витрины по разделам | Номер и название раздела, блок-подсказка внизу | Default, Active, Open (на мобильной ширине) |
Прототип в Figma-файле здесь не читался, поэтому переходы между мобильными экранами восстановлены по составу экранов, а не по связям прототипа. Колонка «Основание» показывает, на что опирается каждая строка: проверяемый обработчик или предположение по структуре.
| Сценарий | Откуда | Куда | Основание |
|---|---|---|---|
| Вход в аккаунт | Вход · кнопка «Войти» | Каталог | Структура экранов требует подтверждения |
| Вход через провайдера | Вход · Google / Apple | Каталог | Структура экранов требует подтверждения |
| Регистрация | Вход · «Зарегистрироваться» | Экрана нет в макете | не спроектировано |
| Просмотр товара | Каталог · карточка товара | Карточка товара | Структура экранов требует подтверждения |
| Фильтрация по категории | Каталог · чип | Каталог с отфильтрованной выдачей | Обработчик в app.js: выбор переключается, сама выдача не фильтруется |
| Возврат из карточки | Карточка · кнопка «назад» | Каталог | Структура экранов требует подтверждения |
| Добавление в избранное | Каталог или Карточка | Остаётся на месте, состояние меняется | Обработчик в app.js + пара состояний на листе компонентов |
| Быстрое добавление в корзину | Каталог · кнопка на карточке | Остаётся на месте, счётчик растёт | Обработчик в app.js |
| Покупка с выбором количества | Карточка · stepper и «В корзину» | Остаётся на месте, счётчик растёт | Обработчик в app.js |
| Переход в корзину | Любой экран · иконка корзины | Экрана нет в макете | не спроектировано |
| Смена раздела | Нижняя навигация | Главная, Каталог, Избранное, Корзина, Профиль | Нарисованы пять пунктов; четыре экрана из пяти отсутствуют не спроектировано |
| Навигация по витрине | Боковая панель | Раздел страницы по якорю | Якорные ссылки + IntersectionObserver |
Всё, что перечислено ниже, реализовано в app.js и проверяется открытием страницы. Поведение, которого в коде нет, в эту таблицу не попало — оно перечислено в разделах 4 и 8 как неопределённое.
| Элемент | Событие | Что происходит | Обратная связь |
|---|---|---|---|
| Образец цвета | Клик | Значение hex копируется в буфер обмена | Тост «#XXXXXX скопирован» |
| Переключатель темы | Клик | На <body> переключается класс dark, выбор пишется в localStorage и восстанавливается при следующем открытии | Иконка меняется с луны на солнце |
| Кнопка меню | Клик | Боковая панель выезжает; клик по крестику или по любому пункту закрывает её | Сдвиг панели 0.3 s и тень |
| Прокрутка страницы | IntersectionObserver | Активным становится пункт раздела, попавшего в полосу от 25 % до 35 % высоты окна | Подсветка пункта в боковой панели |
| Чип категории | Клик | Выбор переходит на нажатый чип, с остальных снимается | Смена фона и рамки |
| Вариант размера | Клик | Выбор переходит на нажатый вариант | Рамка и галочка в углу |
| Кнопка глаза | Клик | Тип поля переключается между password и text | Символы пароля становятся видимыми |
| Избранное | Клик | Состояние переключается в обе стороны | Заливка иконки и тост «Добавлено» / «Удалено из избранного» |
| Stepper | Клик по «−» или «+» | Количество меняется на единицу, ниже 1 не опускается; сумма пересчитывается как цена × количество в формате ru-RU | Число и сумма в кнопке обновляются сразу |
| Добавление в корзину | Клик | Счётчик корзины растёт на выбранное количество (из каталога — на одну штуку), кнопка каталога получает класс added | Тост «Добавлено в корзину», счётчик и цвет кнопки |
| Тост | Автоматически | Скрывается через 1600 мс; новый вызов сбрасывает таймер предыдущего | Появление и уход снизу за 0.25 s |
| Переключатель уведомлений | Клик | Нативный checkbox меняет состояние; обработчика нет, значение никуда не сохраняется | Сдвиг кружка и смена цвета дорожки |
Копирование цвета обёрнуто в try / catch, но тост «скопировано» показывается в любом случае — в том числе когда браузер запретил доступ к буферу обмена, что происходит при открытии файла по протоколу file://. Сообщение об успехе должно показываться только после успешной записи.
Точки переключения выбраны по тому, где ломается раскладка, а не по моделям устройств. Между ними макет тянется: колонки заданы долями, поля и заголовки — функцией clamp(), поэтому промежуточных состояний рисовать не требуется.
| Ширина | Что меняется |
|---|---|
| Больше 980 px | Боковая панель закреплена, основная колонка со сдвигом 260 px. Карточки по три в ряд, образцы цвета по четыре, парные блоки в две колонки |
| 980 px и меньше | Боковая панель уезжает за экран и открывается бургером, появляется кнопка закрытия и мобильный вордмарк. Карточки и образцы — по две в ряд, контентная карточка занимает всю ширину, заголовок раздела и подпись встают друг под друга, фон hero смещается к 62 % |
| 680 px и меньше | Одна колонка везде. Верхний бар 62 px, статус скрыт, ссылки верхней навигации скрыты, подписи нижней навигации скрыты. Кнопки в ряду растягиваются, варианты размера становятся строками, строка покупки разворачивается вертикально, hero получает высоту 640 px и светлую подложку под текстом |
| 520 px и меньше | Кнопка перехода в библиотеку теряет иконку и сжимает поля |
| Правило | Как реализовано |
|---|---|
| Тянущиеся величины | clamp() для полей разделов, заголовков и внутренних отступов hero — минимум, предпочтительное значение во vw и максимум |
| Поведение при длинном тексте | Блоки растут по содержимому: везде flex и grid, фиксированных высот у текстовых контейнеров нет. Исключение — кнопка: текст в ней не переносится |
| Горизонтальная прокрутка | Запрещена на уровне страницы (body { overflow-x: hidden }); широкие таблицы документации прокручиваются внутри своего контейнера |
| Изображения | Фоновые, с cover и точкой фокуса в процентах, — кадр смещается вместе с шириной. srcset не используется |
| Не проверено | Поведение при увеличении шрифта в системе и при масштабе страницы выше 200 %. требует тестирования |
Список не перечисляет обычных подозреваемых, а показывает, какие из них система действительно закрывает. Отсутствие — тоже результат проверки, и именно эти строки стоит обсудить до начала вёрстки.
| Ситуация | В системе | Как проверено |
|---|---|---|
| Пустое состояние | не найдено | В разметке и стилях нет ни одного блока-заглушки: ни пустой выдачи каталога, ни пустого избранного, ни пустой корзины |
| Состояние ошибки | не найдено | Нет класса ошибки ни у поля, ни у кнопки; красный цвет используется только для активного избранного |
| Состояние загрузки | не найдено | Нет скелетонов, спиннеров и блокировки повторного нажатия |
| Длинный текст | частично | Контейнеры растут по содержимому, но название товара не обрезается и не ограничено числом строк — карточки в ряду разъедутся по высоте. Текст кнопки не переносится вовсе |
| Товар закончился | частично | Бейдж «Нет в наличии» существует, но у карточки товара нет соответствующего состояния: кнопка добавления остаётся активной |
| Недоступное действие | есть | Только у кнопки — псевдокласс :disabled. У остальных интерактивных элементов такого состояния нет |
| Изображение не загрузилось | не найдено | Изображения подключены как CSS-фон, поэтому при ошибке загрузки останется пустой блок без запасного варианта и без alt |
| Буфер обмена недоступен | частично | Ошибка перехвачена try / catch, страница не ломается, но пользователю всё равно сообщают об успехе |
| JavaScript отключён | частично | Навигация якорями, вся вёрстка и наведение работают; тема, фильтры, счётчик корзины и копирование — нет |
| Нет сети | частично | Страница открывается как локальный файл целиком, кроме шрифта Manrope с Google Fonts — подставляется Arial |
Первая таблица — то, что измерено в проекте и требует решения до вёрстки. Вторая — вопросы, ответ на которые нельзя вывести из макета и кода: их нужно задать автору дизайна, а не додумывать.
| Тип | Описание |
|---|---|
| Ограничение системы | Альфа-значения заданы литеральными rgba(): одна и та же зелень записана как rgba(40,106,53,…) в семи местах с разной прозрачностью. Следующий шаг — хранить компоненты цвета в токене (--brand-rgb: 40,106,53) и собирать прозрачность из него |
| Закрыто | Литеральные цвета вне :root, неиспользуемые токены и неприменяемая шкала радиусов — исправлено: двадцать семь вхождений цвета и сорок одно объявление радиуса переведены на токены, --sand-200 удалён. Подробности — в разделе 8.1 Токены |
| Доступность | --muted на --canvas даёт 4.37 : 1 — ниже порога AA для обычного текста, хотя на первом экране заявлен контраст AA. Затемнение до #5F645F закрывает вопрос без заметной смены оттенка |
| Доступность | Тёмная тема переопределяет подложку --sage-100, но не акцент на ней: бейдж «Хит», активный чип и кнопка быстрого добавления падают до 1.92 : 1 и 1.46 : 1. Исправляется одной строкой — переопределением акцента на #A9CA89 |
| Доступность | Иконочные кнопки 42 × 42 px при рекомендованных 44. Собственного стиля фокуса клавиатуры нет ни у одного элемента, кроме поля ввода |
| Производительность | Фоновое изображение hero весит 1.9 МБ и подключается без srcset и без современных форматов. На мобильной сети это основной вклад в время загрузки |
| Данные | Все значения зашиты в разметку: цена 1 490 ₽, счётчики категорий, счётчик корзины «2», срок доставки, порог бесплатной доставки 3 000 ₽. Тексты продублированы в texts.json, но разметка его не читает — при подключении к бэкенду источник должен стать один |
| Расхождение | Название товара: «Монстера Делишиоза» на витрине и в texts.json, «Монстера Делициоза» на мобильных экранах. Нужно выбрать одно написание |
| Расхождение | Размеры растения расходятся в трёх местах: витрина — S 20–30 см / M 40–60 см / L 60–80 см с ценами, экран товара — S 20–30 / M 30–50 / L 50–80 без цен, лист компонентов — M 30–40. Диапазон для M отличается во всех трёх источниках |
| Расхождение | Счётчик «38 компонентов» на первом экране не совпадает с каталогом документации, где их 24. Вероятно, счётчик считает варианты — требует уточнения |
| Расхождение | Кнопка глаза переключает видимость пароля, но иконка не меняется, тогда как на листе компонентов скрытому паролю соответствует перечёркнутый глаз |
| Необратимое действие | Класс added у кнопки быстрого добавления не снимается: убрать товар из корзины на этом экране невозможно |
| Требует уточнения | Куда ведёт нажатие на баннер «Растение живое» — на страницу условий, в раскрывающийся блок или никуда |
| Требует уточнения | Верхний предел количества в stepper: на листе компонентов «плюс» на значении 4 показан неактивным, в коде предела нет |
| Требует уточнения | Правила валидации полей входа и промокода, тексты ошибок, поведение при неверном пароле |
| Требует уточнения | Экраны, на которые ведёт нижняя навигация: из пяти направлений нарисован один — «Каталог» |
| Требует уточнения | Поведение поиска и содержимое панели фильтров в каталоге |
| Требует уточнения | Максимальная длина названия товара и число строк, после которого оно обрезается |
Таблица показывает, где на этом сайте выполнено каждое требование к передаче дизайна. Это карта разделов, а не результат проверки: статус требований к самому Figma-файлу — организация слоёв, сетки, Auto Layout, стили, компоненты, данные для Inspect — измеряется плагином из папки Project 7 командой Verify и зависит от состояния файла, а не этой страницы.
| Требование | Что должно быть | Где на сайте |
|---|---|---|
| Организация слоёв и имён | Понятные имена, единая конвенция | 8.5 Именование — конвенция для классов, токенов, иконок и слоёв макета |
| Сетка и отступы | Заданная и описанная сетка | 8.2 Отступы и сетка — шкала, колонки, поля, брейкпоинты |
| Поведение при изменении содержимого | Правила роста и переноса | 6 Адаптивность — тянущиеся величины и поведение при длинном тексте |
| Стили и переменные | Значения вынесены в токены | 8.1 Токены — пятьдесят четыре токена с назначением, значением в обеих темах и числом обращений |
| Компоненты и варианты | Каталог с параметрами | 3 Компоненты и блоки «Спецификация» в разделах 02–07 |
| Данные для разработчика | Размеры, отступы, цвета, состояния в машинно-проверяемом виде | Спецификации компонентов + 8.1; исходники styles.css и assets/ui-kit/ читаются напрямую |
| Примечания для разработчиков | Ограничения и открытые вопросы | 8 Примечания — девятнадцать пунктов с разделением на ограничения и вопросы |
| Готовность к передаче | Всё нужное собрано в одном месте | Разделы 08 и 09 плюс переносимая библиотека с инструкцией |
| UI-гайдлайн | Отдельный раздел с правилами системы | 08 Правила системы — восемь блоков |
| Документирование цветов | Все цвета с названиями и назначением | 01 Основа системы — образцы с копированием, 8.1 — назначение и охват |
| Документирование шрифтов | Гарнитура, размеры, начертания | 8.3 Типографика — десять ролей с реальными значениями |
| Документирование кнопок | Варианты, размеры, состояния | 02 Кнопки и действия + спецификация |
| Документирование состояний | Перечень состояний и их смысл | 8.6 Состояния — матрица по тринадцати компонентам и словарь состояний |
| Страница документации | Девять обязательных разделов | 09 Документация — оглавление вверху раздела |
| Описания компонентов | Краткое назначение у каждого | 3 Компоненты — назначение всех двадцати четырёх; развёрнуто — в блоках «Спецификация» |
| Описания поведения | Что происходит при взаимодействии | 5 Правила взаимодействия — двенадцать проверяемых правил |
| Пользовательские сценарии | Переходы между экранами | 4 Сценарии — с указанием основания каждой строки |
| Нестандартные ситуации | Пустые состояния, ошибки, загрузка | 7 Нестандартные ситуации — десять проверок с честным результатом |
| Понятность названий | Имена отражают роль, а не вид | 8.5 Именование |
| Ссылки и навигация | По документации можно перемещаться | Боковая панель, оглавление раздела 09 и перекрёстные ссылки внутри таблиц |
| Ссылка на исходник | Документация ведёт к макету | Исходник в Figma — ссылка на файл, состав страниц, девятнадцать компонентов и разбор фреймов; та же ссылка в таблице артефактов раздела 1 |
| Описание элементов макета | Что именно лежит в файле | Исходник в Figma — соответствие каждого компонента Figma элементу сайта и оригинальные экспорты обоих листов |
| Маскот | Позы, палитра и правила применения | 8.8 Жабка — четыре позы с назначением, семь цветов и восемь правил |
Сайт документирует дизайн-систему и то, что реализовано в вёрстке. Он не проверяет Figma-файл: организация слоёв, сетки на фреймах, Auto Layout, привязка стилей, варианты компонентов и данные для Inspect живут в макете и измеряются плагином Project 7. Нативные комментарии Figma плагин создать не может — вместо них он готовит фреймы DEV NOTE и список текстов для ручного переноса. Сроки, цены и остатки на этой странице — значения из макета, а не данные магазина.