dp-trade-UI-kit/docs/design-audit-followup.md

# DP Trade - разбор предложений дизайнера

Источник: `/Users/lexx/Downloads/Аудит сайт дп-трейд.pdf`  
Дата разбора: 2026-04-21

## Короткий вывод

Предложения дизайнера в основном подтверждаются текущей версткой. Главная системная проблема - сайт все еще построен на retail/B2B-визуальном языке: Montserrat/Inter, жирные uppercase-заголовки, холодный серо-голубой фон, конкурирующие синий и бордовый акценты, тяжелые CTA и градиентные карточки товара. Для премиального винного каталога нужно сместить систему к более спокойной editorial-подаче: Cormorant Garamond для заголовков и названий вин, Manrope для текста, теплый белый/кремовый фон, один основной бордовый акцент.

Часть аудита уже не полностью совпадает с текущей реализацией: на главной CTA в hero присутствуют (`Смотреть каталог`, `Открыть UI-kit`), а заголовки в исходных HTML не набраны капсом руками. Но CSS принудительно включает uppercase и тяжелый вес, поэтому визуально замечание дизайнера остается актуальным.

## Ключевые замечания

### 1. Типографика

- В `tokens.css` основными токенами стоят `Montserrat` для заголовков и `Inter` для body. Дизайнер предлагает заменить на `Cormorant Garamond` + `Manrope`, оба шрифта уже подключены.
- В CSS много `font-weight: 800` и `text-transform: uppercase` для hero, H2, карточек, меню, контактов и карточек преимуществ. Это создает ощущение "крика" и снижает премиальность.
- Важное уточнение: проблема не в текстах шаблонов, а в стилях. Например, `src/about.njk` содержит нормальный регистр, но `.page-hero h1` принудительно делает uppercase.
- Минимальный размер текста должен быть не ниже 12px. Текущий 8px встречается в `.brand-logo small`; если этот элемент реально используется или вернется, его надо поднять до 12px.

### 2. Цвет и палитра

- Сейчас системные цвета: бордовый `#4b0f24`, фон `#f4f6f9`, синий акцент `#1f3476`. Дизайнер предлагает: основной бордовый `#7D021D`, теплый белый `#FFFDFA`, теплый карточный фон `#F5F0E8`, синий оставить только в логотипе.
- Синий телефон в шапке конкурирует с бордовым CTA.
- Холодные фоны `#f4f6f9`, `#eef2f6`, `#f8fafc` встречаются во многих секциях и выглядят чужими для винной темы.
- Градиенты в карточках товара выглядят случайными и конкурируют с этикетками бутылок. Нужен единый нейтральный фон под товар.

### 3. Карточка товара

- На главной карточки рекомендаций используют разноцветные градиенты под бутылками.
- Название товара в карточке визуально становится жирным uppercase через CSS. Рекомендация: normal case, Cormorant Garamond, 16-18px.
- Цена и кнопка стоят в одной строке как равнозначные элементы. Лучше выстроить вертикальную иерархию: регион, название, мета, разделитель, цена, full-width outlined CTA.
- Основной CTA сейчас темный залитый. Для карточек дизайнер предлагает более легкую outlined-кнопку на всю ширину.

### 4. Mega-menu

- Заголовки mega-menu слишком крупные и тяжелые: 26px, 800, uppercase.
- Фото занимает целую колонку и перетягивает внимание с навигации. Лучше уменьшить изображение до декоративного акцента или вынести в промо-блок в конце меню.
- В апелласьонах страна и регионы недостаточно различаются по иерархии. Страна должна быть золотой, 11px, caps; апелласьоны - 14px normal case с отступом.
- Чипы популярных регионов имеют разную ширину. Лучше задать единый min-width или вытянуть в ровную горизонтальную строку.

### 5. Главная

- Hero сейчас уже содержит явные CTA, поэтому замечание из аудита про отсутствие CTA неактуально.
- Остается актуальным: hero H1 слишком тяжелый из-за Montserrat, 800 и uppercase. Нужно перевести в Cormorant Garamond, normal case, более спокойный вес.
- H2 в секциях тоже надо убрать из uppercase и снизить визуальный вес.

### 6. Страница продукта

- Нет хлебных крошек. Для каталога это важно для ориентации и SEO.
- Описание продукта пока короткое, но для будущего длинного описания нужен текстовый блок с `max-width: 65-72ch`.
- Есть большой разрыв между метаданными и кнопками из-за сетки и отступов. Нужно проверить вертикальную композицию после добавления breadcrumbs и описания.
- H1 товара также наследует тяжелый uppercase.

### 7. "О нас"

- Hero-паттерн похож на остальные внутренние страницы: темная фотография, большой H1, белая карточка справа. Это снижает ощущение перехода между разделами.
- H1 спокойнее сделать serif, 48-56px, normal case, без давления.
- Правая карточка в hero сейчас работает как приклеенный светлый прямоугольник. Ее стоит смягчить: меньше кегль, обычный текст, меньше uppercase.
- Основной текст ограничен `max-width: 860px`, дизайнер предлагает 600-640px или около 66ch.
- Подзаголовки внутри статьи слишком крупные и uppercase.
- Карточки 01-04 имеют жесткую высоту 210px и `align-content: space-between`, из-за чего контент искусственно растянут.
- Цитата в CSS оформлена цветной левой границей и холодным фоном. Если блокquote используется в контенте, его лучше сделать через italic serif и тонкую нейтральную линию.
- Финальный muted-section на холодном фоне надо перевести в теплый кремовый.

### 8. "Контакты"

- Для контактов полноэкранный/крупный hero с темной фотографией слишком тяжелый. Контакты должны быстрее показывать телефон, email и форму.
- Телефон в карточке слишком крупный и тяжелый, выбивается из общей иерархии.
- Юридическая информация стоит рядом с телефоном и email как равнозначная карточка. Ее лучше перенести ниже формы или в конец страницы мелким справочным блоком.
- Заголовок формы крупный и uppercase, labels слишком жирные.
- Поле "Телефон или email" неоднозначно. Лучше разделить на два поля или дать понятную подсказку.
- Нет видимого success-state после отправки формы.

## Расхождения с аудитом

- CTA в hero главной уже есть: `src/index.njk` содержит две кнопки в первом экране. Значит пункт "отсутствует явный CTA" стоит закрыть как неактуальный или переформулировать в "сделать CTA визуально легче/элегантнее".
- В исходных шаблонах многие заголовки набраны нормальным регистром. Капс появляется из CSS. Исправлять надо в основном CSS-токены и правила `text-transform`, а не тексты.
- В аудите упоминается Playfair Display как почти неиспользуемый шрифт, но итоговая рекомендация дизайнера - Cormorant Garamond + Manrope. Лучше не распыляться на Playfair и зафиксировать одну пару.
- В карточках каталога (`product-card--list`) названия уже без uppercase, но слишком тяжелые и крупные. Замечание про uppercase точнее относится к карточкам рекомендаций/общим `.product-card h3`.
- Страница продукта пока очень короткая. Замечание про ширину описания надо учесть как требование к будущему расширенному описанию, а не как текущий критический баг.

## План доработок

### Этап 1. Системные токены и базовая типографика

1. Обновить `src/css/tokens.css`: `--font-heading` на Cormorant Garamond, `--font-body` на Manrope, основной бордовый на `#7D021D`, фон на теплый `#FFFDFA`, surface/card background на теплую белую/кремовую шкалу.
2. Синхронизировать те же токены в `src/css/ui-kit.css`, чтобы витрина UI-kit не расходилась с сайтом.
3. Убрать uppercase с H2-H4, product titles, news titles, page hero titles, form titles. Caps оставить только для eyebrow/meta labels.
4. Пересобрать шкалу весов: H1 может быть крупным, но не обязательно 800; H2-H4 сделать 500-600 или доступный локальный эквивалент с текущими файлами шрифтов.
5. Проверить минимальные размеры: не использовать текст ниже 12px.

### Этап 2. Карточки и CTA

1. Заменить градиентные product media на единый теплый нейтральный фон `#F5F0E8`.
2. Перестроить карточку рекомендаций: region label, serif title 16-18px, gray meta 13px, разделитель, цена 22-24px, outlined full-width CTA.
3. Смягчить primary/secondary buttons: новый бордовый, меньше "B2B-тяжести", четкие hover/focus states.
4. Проверить карточки каталога отдельно: сохранить плотность B2B-списка, но снизить вес заголовков и цены.

### Этап 3. Header и mega-menu

1. Убрать синий цвет телефона в шапке, оставить синий только внутри логотипа.
2. Уменьшить и облегчить заголовки mega-menu: 16-18px, normal case, semibold.
3. Переделать визуальную колонку mega-menu: уменьшить изображение или вынести его в небольшой промо-блок.
4. Настроить иерархию апелласьонов: страна как meta label, регионы с отступом и normal case.
5. Выровнять popular chips: единый min-width или одна строка с равномерным ритмом.

### Этап 4. Страницы

1. Главная: обновить hero-типографику, H2 секций, карточки рекомендаций и холодные фоны новостей.
2. Продукт: добавить breadcrumbs, расширенный description-блок с `max-width: 65-72ch`, пересобрать вертикальную иерархию metadata/price/CTA.
3. О нас: сделать hero спокойнее, смягчить правую карточку, сузить основной текст до 66ch, облегчить подзаголовки, убрать жесткую высоту feature-card, заменить холодный muted-section.
4. Контакты: сделать компактный hero без тяжелой фотографии, вывести телефон/email в первый экран, юридический текст перенести ниже, облегчить форму, разделить контактные поля или добавить подсказку, добавить success-state.

### Этап 5. Проверка

1. Прогнать `npm run build`.
2. Проверить страницы минимум на desktop и mobile: `index.html`, `catalog.html`, `product.html`, `about.html`, `contacts.html`, `ui-kit.html`.
3. Отдельно проверить, что длинные русские заголовки и телефоны не ломают сетку.
4. Сверить UI-kit с сайтом: токены, кнопки, карточки, hero, формы.

## Приоритет

P0: токены, шрифты, uppercase, фон, основной бордовый. Без этого остальные правки будут точечными и визуально не соберутся.

P1: карточки товара, CTA, header/mega-menu. Это самые заметные пользовательские интерфейсы и они прямо влияют на восприятие каталога.

P2: страницы "О нас", "Контакты", "Продукт". Здесь много композиционных улучшений, но они лучше лягут после системной смены визуального языка.

P3: финальная полировка UI-kit, состояния формы, hover/focus, адаптивные проверки.