Забота,
в ритме дня.

Lab52 — дополнительный уход за детскими зубами в течение дня. Сайт помогает родителю быстро понять роль продукта, выбрать вкус и перейти к проверенной точке покупки. Он не создаёт тревогу, не стыдит родителя и не выдаёт продукт за замену чистке.

Аудитории и задачи

Порядок убеждения

Узнавание ситуации → сценарий применения → принцип продукта → проверяемые основания доверия → выбор вкуса → покупка. Технология не открывает рассказ и не должна скрывать бытовую пользу.

Суть: спокойная, понятная дополнительная забота, которая вписывается в ритм семьи.

Характер: умный, спокойный, современный, заботливый, ясный. Не холодно-медицинский и не приторно-детский.

Редакционные ограничения

• Не писать, что средство лечит, предотвращает кариес, восстанавливает эмаль или заменяет чистку.
• Не выводить пользовательский результат из лабораторного показателя без соответствующего доказательства и юридически утверждённой формулировки.
• Для каждого опубликованного исследования указать, что именно было образцом, что измеряли, при каких условиях и где доступен отчёт.
• Не называть исследования порошка, искусственной слюны или лабораторных образцов клиническим испытанием готового спрея.
• Не использовать отзывы, лица специалистов, логотипы площадок или сертификаты без подтверждённых исходников, согласий и прав.
• Возраст, состав, безопасность и способ применения переносить только из действующей русскоязычной маркировки/инструкции после согласования.

Спокойная наука рядом с повседневной жизнью. Фирменный бирюзовый создаёт узнаваемость, светлые поверхности — пространство, цвет вкуса — навигационный акцент. Фото показывают реальные домашние моменты, а научные схемы помогают понять устройство технологии без псевдомедицинского эффекта.

Иерархия одного экрана

1. Один короткий заголовок о роли продукта в дне.
2. Одно простое пояснение без медицинских обещаний.
3. Один главный шаг — выбор вкуса или проверенная точка покупки.
4. Вторичный путь — «как пользоваться» или «как устроена технология».
5. Продукт/ситуация как визуальная опора; не добавлять одновременно несколько конкурирующих плашек.

Баланс формы

• Премиально и чисто за счёт композиции, воздуха и фото, а не золотых градиентов и псевдолюксовых деталей.
• Дружелюбие — через округлую типографику, мягкие формы и добрые графические знаки; не превращать весь сайт в игрушечную упаковку.
• Мягкая геометрия сочетается с прямой сеткой и предсказуемыми компонентами.
• Цветовые блоки вкусов занимают малую долю экрана; фирменный бирюзовый остаётся главным объединяющим кодом.

• Основной локальный файл: assets/lab52-logo-black.png; инверсия — assets/lab52-logo-white.png.
• На белом и светлом фоне — чёрный знак; на тёмной заливке — белый. Не накладывать на пёстрый фрагмент фотографии.
• Сохранять исходные пропорции и соотношение надписи со знаком. Не растягивать, не обводить, не перекрашивать в оттенок вкуса.
• Защитное поле: минимум высота цифр «52» вокруг видимой границы знака.
• Целевая ширина: desktop 118–144 px, mobile 96–112 px. Не опускаться ниже 96 px без отдельной проверки читаемости.
• Для favicon/аватаров использовать отдельный утверждённый знак, если он есть; не обрезать случайно часть wordmark.

Figma задаёт главный бирюзовый и три точных базовых цвета вкусов. Часть дополнительных кругов и нейтральный цвет считываются со скриншотов, поэтому ниже отмечены отдельно. Основные цвета вкуса — маркеры выбора и иллюстраций; это не автоматически пригодные цвета текста или CTA.

5.1 Брендовые исходники и значения из Figma

Примечание: RGB-пиксели скриншота могут отличаться от исходного Figma-значения из-за масштабирования/цветового профиля. До финального production-токена следует сверить цвета с исходными слоями. Точные подписанные значения имеют приоритет над выборкой пикселя. Contrast ratios рассчитаны по WCAG relative luminance для указанной пары foreground/background; повторно оценить после экспорта точных исходных цветов.

5.2 UI-нейтрали и контрастные роли

Эти значения вводятся для читаемости интерфейса и являются системными UI-токенами проекта, а не самостоятельными цветами брендбука.

5.3 Правила применения цветов

• brand-500 допустим как заливка плашки/иконки и крупная цветовая область с ink-900; с белым мелким текстом он не используется.
• Главный CTA использует action с белой надписью. Так сохраняется бирюзовый характер и контраст для обычного текста.
• Для вкусов показывать название текстом и визуальный цветовой маркер одновременно; цвет не единственный сигнал выбора.
• Тёмные оттенки вкусов — для рамки, небольшого текста на очень светлом тоне или графики после проверки контраста. Не ставить белую микротипографику на яркий персиковый/розовый/фиолетовый.
• Жёлтый — только маленькая звезда, точка, часть пиктограммы. Не использовать как большая кнопка или фон текста.
• Разделитель border не служит единственным признаком активного состояния; добавить форму/иконку/текст.
• Не вводить градиенты вкусов и новые фирменные цвета без фиксации в DESIGN.md и assets/tokens.css.

Гарнитуры

• Nunito Variable 200–1000 — единственная активная гарнитура для заголовков, интерфейса и основного текста. Вес и размер задаются иерархией, а не сменой семейства.
• Использовать локальные кириллический и латинский файлы assets/fonts/nunito-{cyrillic,latin}.woff2; лицензия — assets/fonts/OFL-nunito.txt.
• Файлы Nunito Sans сохранены в проекте как исходные материалы, но страница их не загружает и не использует.

Размеры

На мобильном основной текст и поля ввода не уменьшаются ниже 16 px. Длинный текст ограничить примерно 62–70 знаками в строке. Заголовкам задавать text-wrap: balance; абзацам — естественный перенос без принудительной лесенки. Использовать sentence case, капс оставить коротким техническим меткам.

Контейнеры

Шкала отступов

Вертикальные поля секции: desktop 88–104 px, tablet 72–88 px, mobile 56–72 px. Не применять одинаковый большой отступ между всеми элементами — использовать иерархию 8/16/24/40 px.

Радиус и глубина

По умолчанию карточки разделяются фоном и пространством, не тенью. Не класть карточку внутрь другой карточки без понятной структуры.

• Пузырь/частица: простая округлая форма, прозрачность, тонкая обводка или заливка; используется фоном на больших свободных площадях.
• Фирменная искра: исходная композиция assets/brand-sparkles-figma-2-49.svg из узла Figma 2:49: белые округлые формы и две четырёхконечные искры. Белые формы показывать на контрастной фирменной поверхности; на белом фоне композиция читается прежде всего как пара жёлтых искр. Для размещения отдельно использовать вырезку assets/brand-sparkles-stars.svg с адаптированным расположением вокруг фотографии 3:4.
• Жёлтый акцент: точный цвет звёзд — #FFED00 (--color-graphic-yellow); применять только в небольшом декоративном масштабе. Не использовать для текста, CTA или больших плашек.
• Декоративные иллюстрации: единый язык сайта — мягкие округлые объёмные 3D-предметы и сцены с рассеянным светом, деликатной контактной тенью, чистым силуэтом; фон совпадает с поверхностью карточки, а тени остаются едва заметными. Внутри одного набора сохранять общий масштаб, материал и насыщенность цвета.
• Функциональные пиктограммы: интерактивные знаки остаются простыми и плоскими, чтобы их назначение читалось мгновенно; CTA и ссылки используют ясный текст без декоративных стрелок.
• Научная схема: подписи, направляющие и точки в одной плоскости. Схема должна быть понятной без декоративного 3D; подписи отделяют механизм от доказательства эффекта.
• Иллюстрация вкуса: узнаваемый ингредиент в том же мягком объёмном стиле, рядом с названием вкуса; картинка не должна заходить в соседний вариант.
• Декоративная графика не перекрывает текст, не выглядит как медицинский символ/гарантия и скрывается от screen reader (aria-hidden).

8.1 Применение на главной

• Сценарии дня, шаги применения, свойства продукта и вкусы используют один стиль объёмной 3D-графики с мягким светом и едва заметной контактной тенью без тёмных падающих теней. В каждом наборе главные предметы и силуэты различаются. Размер иллюстрации меняется по роли блока, материал остаётся единым.
• Свойства продукта показывают предметный образ, но не заменяют оговорки в тексте и не изображают щит, лечение или гарантированный результат.
• Вкус обозначается узнаваемым ингредиентом и текстовой подписью; целостная отдельная картинка не пересекает границы соседней кнопки. Состояние выбора сообщает контрастная рамка.
• Научные схемы и функциональные знаки интерфейса остаются плоскими. Декоративные иллюстрации скрыты от screen reader; текст остаётся единственным источником утверждений.
• Сцены дня используют локальный спрайт assets/day-scenes-sprite.png. Для трёх шагов и трёх подтверждённых продуктовых сообщений используются отдельные объёмные сцены: assets/step-3d-01.webp–assets/step-3d-03.webp и assets/benefit-3d-01.webp, assets/benefit-3d-05.webp, assets/benefit-3d-06.webp. Блок четырёх вкусов показывает соответствующие иллюстрации из assets/flavor-art-*.webp.
• Композиция искр из узла Figma 2:49 и производная вырезка локальны и не зависят от временных URL Figma. На главной искры обрамляют фотографию, оставаясь вне флакона и подписей; на мобильном размере уменьшаются и не обрезаются краем экрана.
• Примечание линейки вкусов ограничено шириной текстовой колонки и переносится по словам, чтобы оставаться целиком видимым на широком экране.

Снимать/выбирать

• Повседневный момент семьи, а не постановочный медицинский осмотр.
• Естественный мягкий свет; близкая дистанция; спокойная палитра помещения.
• Видно действие и контекст, но взрослый не доминирует кадр.
• Оставлять свободную область под заголовок; в мобильном кропе проверять лицо, продукт и действие отдельно.
• Предметные фото держать на чистом фоне и не менять цвет реальной упаковки.

Перед размещением

Для каждого файла зафиксировать: точный путь/имя источника, право использования, продуктовый SKU/вкус, дата актуальности упаковки, crop desktop/mobile, alt-текст и статус «финал/референс». Генерации с пометкой «не доработано» не идут в production. Не использовать внутреннее подтверждение лабораторного материала как пользовательский отзыв.

Веб-компоненты реализуются семантическими элементами. Интерактивные зоны имеют минимум 44×44 px (для комфортного mobile — 48×48 px), видимые hover, active и focus-visible состояния.

10.1 Кнопки и ссылки

Hover меняет контраст или сдвигает кнопку максимум на 1–2 px; active возвращает её и усиливает заливку. Focus-visible — двойной/наружный контур 2–3 px с отступом. Ссылки навигации — <a>, действия — <button>. Тексты кнопок называют результат («Перейти к покупке»), не «Подробнее» там, где действие можно назвать точно.

10.2 Переключатель вкуса

• Четыре значения начального запуска: виноград, персик, клубника, нейтральный.
• На desktop — четыре компактных карточки/chip с названием и маркером; на mobile — 2×2 или горизонтальный ряд с полной клавиатурной доступностью.
• Выбранное состояние показывает контрастную рамку и дополнительный знак (галочка/внутренняя точка), а не один только цвет.
• Меняются: имя/описание вкуса, корректная фотография, SKU если он есть, прямая ссылка на товар и соответствующие UTM-параметры.
• Не сбрасывать выбранный вкус при закрытии модального окна/возврате с продавца. URL должен сохранять вариант (?flavor=... или согласованный якорь), чтобы ссылка открывала то же состояние.
• Если URL или товар недоступен, показывать понятную альтернативу/состояние, не отправлять на случайный SKU.

10.3 Карточки сценария/преимущества

• Один объект, один момент, одна мысль.
• Формат: короткий заголовок до 5 слов, текст до 2–3 строк, одна фото/иконка.
• Карточка целиком кликабельна только если ведёт на страницу; иначе кликабельным должен быть конкретный элемент.
• Desktop: 3 карточки в строке; tablet: 2; mobile: вертикальный список. Не использовать карусель как единственный доступ к содержимому.

10.4 Лабораторная карточка

Обязательные поля: Название документа · что было образцом · метод/измеряемый параметр · что результат позволяет сказать · что он сам по себе не доказывает · оригинальный PDF. Не показывать проценты крупной промоплашкой без сопровождающей методики. Сертификат соответствия оформлять отдельно от лабораторного теста.

10.5 FAQ/аккордеон

• Нативные <details>/<summary> или эквивалент с кнопкой и aria-expanded.
• Разрешено несколько открытых ответов, как указано в ТЗ.
• Строка вопроса имеет hit area ≥44 px, плюс/минус декоративный и скрытый для screen reader.
• Ответ не использует клик «да/нет» как скрытый юридический дисклеймер; существенное ограничение показывать сразу в тексте.

10.6 Поле/форма партнёра

• Один столбец, только обязательные поля. Каждое поле имеет видимый <label>, корректный type, имя, autocomplete если уместно.
• Согласие на обработку данных отделено от необязательных маркетинговых подписок; ссылка на текст согласия рядом.
• Ошибка находится у поля и описывает, как исправить. На отправке фокус перемещается к первому ошибочному полю; успех объявляется через aria-live="polite".
• Не имитировать реальную отправку или CRM-соединение в статическом макете. Подключение, получатель, срок хранения и reCAPTCHA утверждаются отдельно.
• В дизайне предусмотрены: default, focus, filled, error, disabled и success состояния.

10.7 Модальное окно/сертификат

Открывается только по явному действию. Закрытие — кнопка с aria-label, Escape и клик вне панели; фокус удерживается внутри и возвращается на исходный триггер. PDF доступен обычной ссылкой и не зависит только от модального просмотра.

10.8 Шапка, меню и покупка

• Desktop: логотип, 4–5 якорей, одно заметное действие.
• Mobile: menu button ≥44 px, понятные aria-expanded/aria-controls, открывающаяся вертикальная навигация; Escape закрывает, выбор пункта закрывает меню.
• Sticky header не перекрывает focus target и якорные заголовки; у секций есть scroll-margin-top.
• Покупка ведёт на подтверждённую площадку. Для каждого продавца — собственные utm_source/utm_campaign, без подмены их одной ссылкой.

Отдельные страницы из ТЗ

• Privacy policy: спокойная узкая колонка текста, оглавление при длинном документе, юридически согласованный документ.
• Согласие на обработку персональных данных: отдельная доступная страница, не заменяемая краткой подписью у формы.
• 404: дружелюбная навигационная ошибка без медицинских/продуктовых обещаний; кнопка на главную и ссылка к выбору вкуса.

Контрольные ширины из ТЗ: 360, 390, 768, 1024, 1280, 1440 и 1920 px.

На каждом размере проверить crop фото, масштаб упаковки, порядок чтения, sticky header, горизонтальное переполнение и ширину кнопок. Мобильная страница не должна превращаться в уменьшенную десктопную.

• Переходы 150–220 ms; простая easing-кривая cubic-bezier(.2,.7,.2,1).
• Анимировать opacity и transform, не transition: all.
• Никакого autoplay слайдера/видео. Видео — lazy-load, пользовательский запуск, субтитры/текстовая альтернатива.
• prefers-reduced-motion: reduce убирает необязательное движение и плавную прокрутку.
• Состояния управляются кликом/клавиатурой; жесты не являются единственным способом использования.
• Для текущего переключателя вкуса отражать выбор в URL; для меню использовать нативную навигацию-якоря.

Цель — соответствовать уровню AA, указанному в ТЗ; соответствие подтверждается аудитом, а не самим документом.

• Контраст основного текста ≥4.5:1, крупного ≥3:1; цвет не единственный индикатор состояния.
• Видимый :focus-visible для ссылок, кнопок, полей, summary и переключателей; sticky-панели не закрывают фокус.
• Полная работа клавиатурой: Tab/Shift+Tab, Enter/Space, Escape для меню/модалки.
• Иерархия заголовков без пропусков уровней, один <h1>, skip-link к main, якорям задан scroll-margin-top.
• Кнопки — действия, ссылки — навигация. Иконка без текста получает accessible name; декоративная — aria-hidden="true".
• У всех содержательных изображений есть полезный alt; декоративным — пустой alt. Явные width/height предотвращают скачки макета.
• Поля ввода имеют видимые подписи, инструкции и связанное сообщение ошибки. Фокус ошибки управляемый; асинхронный успех — aria-live.
• Сенсорные зоны ≥44×44 px; текст не меньше 16 px на узких экранах; интерфейс сохраняет масштабирование браузера.
• Меню/модалки корректно используют safe area; диалог ограничивает прокрутку только внутри себя.

Ориентиры из ТЗ: Lighthouse mobile ≥80, LCP ≤2.5 s, CLS ≤0.1, до 3 MB передаваемых ресурсов без видео. Это критерии будущего работающего сайта, а не измеренные результаты данного бренд-гайда.

• Hero-фото оптимизировать и не загружать несколько вариантов сразу; ниже первого экрана — loading="lazy".
• Видео загружать по действию пользователя, показывать poster и текстовую альтернативу.
• Локальные WOFF2 загружать с font-display: swap; предварительно загружать только критические кириллические шрифты.
• Избегать тяжелых каруселей, библиотек и внешних трекеров до отдельного обоснования.
• Для изображений указывать размеры и подходящий srcset/sizes на production.

assets/tokens.css — машинно-используемое представление токенов. DESIGN.md описывает значение и применение. При изменении цвета/шрифта/размера синхронизировать оба файла. Компонентные CSS не должны переопределять брендовые значения локально.

:root {
  --color-brand-500: #5CC1D6;
  --color-ink-900: #23343A;
  --color-action: #236F7B;
  --space-4: 16px;
  --radius-card: 24px;
}

• design-system.html — исходник наглядного гайда; в закрытой публикации становится index.html.
• assets/tokens.css — глобальные цвета, типографика, размеры, формы, движение.
• assets/site.css — layout и стили компонентов гайда; новые компоненты наследуют токены.
• assets/site.js — только поведение переключателя вкуса и мобильной навигации в демо.
• assets/material-library.css и assets/material-library.js — стили, поиск и фильтр исходных материалов.
• assets/source-catalog.json — каталог 137 файлов с исходным путём, размером и контрольной суммой.
• materials/ — оригиналы и уменьшенные превью файлов из закрытой библиотеки; в бренд-системе они доступны после входа через Bitrix.
• assets/fonts/ — локальные WOFF2; assets/lab52-logo-*.png — исходный wordmark.

1. Сверить нейтральный цвет, малые варианты вкусов и дополнительные цвета напрямую со слоями Figma.
2. Подтвердить SKU запуска: в части упаковочных/регистрационных материалов есть арбуз, а сайт/Figma показывают четыре вкуса.
3. Подтвердить русскоязычную упаковку, инструкцию, состав и разрешённые возрастные формулировки.
4. Проверить юридические формулировки всех продуктовых заявлений, включая FAQ и лабораторные результаты.
5. Передать актуальные URL продавцов/UTM, email/CRM, соцсети, юридические реквизиты и материалы для B2B.
6. Не включать отзывы/стоматологов до проверки личности, разрешений и утверждённого текста.

• ТЗ «ТЗ на разработку сайта Lab52» — Google Docs по ссылке пользователя.
• Figma-файл Lab52, страницы бренд-гайда и цветов по ссылке пользователя.
• Переданная папка Dropbox: СГР и лабораторные отчёты.
• Google Sheet-реестр и папка 19. Lab52: бренд-презентации, упаковка, фото/видео, product design.
• Полный архивный каталог 19. Lab52: 137 оригинальных файлов в шести исходных разделах, с сохранённой структурой и проверкой контрольных сумм.
• Локальные версии чёрного и белого логотипа из предоставленных брендовых материалов.