DP Trade — Design System
UI-kit для премиального торгового каталога
Живая HTML/CSS витрина компонентов, токенов, паттернов и экранов для сайта DP Trade. Структура повторяет Figma-файл и использует критичный naming format.
00 Production Status
Статус дизайн-системы
Этот блок показывает, насколько UI-kit готов к production handoff: что можно использовать сразу, что требует детализации, и какие правила обязательны для новых экранов.
Есть варианты, состояния, фоны изображений, shadows и реальная страница для проверки.
Header, dropdown, hover bridge, ширина контейнера и базовые состояния зафиксированы.
Цветовые роли, типографика, сетка, spacing, tokens и shadows описаны для dev handoff.
Есть default/focus/error, но нужны helper text, required, disabled, textarea и validation patterns.
Шаблоны описывают обязательные блоки, компоненты, screen-ссылки и статус готовности.
Есть checklist и адаптивные правила, но перед релизом нужен визуальный проход по всем страницам.
Новый компонент нельзя считать готовым без anatomy, variants, states, usage, CSS hook и responsive notes.
Новый экран должен быть связан с template, иметь статус, ссылку на HTML и список QA-проверок.
Все изображения должны иметь понятный alt, стабильные размеры контейнера и не ломать layout на mobile.
Readiness Matrix
| Раздел | Anatomy | States | Usage | Responsive | Status |
|---|---|---|---|---|---|
| Foundations | Да | Да | Да | Да | Ready |
| Buttons | Да | Partial | Да | Да | Review |
| Product Cards | Да | Да | Да | Да | Ready |
| Navigation | Да | Partial | Да | Partial | Review |
| Forms / Controls | Да | Partial | Да | Да | Review |
| Templates / Screens | Да | Да | Да | Да | Ready |
01 Foundations
База системы
Colors
#4B0F24
#6D1C36
#161616
#66605F
#D8D3CF
#F4F6F9
#B9965B
`color.text.primary` = #161616 для заголовков и основного текста. `color.text.muted` = #66605F для meta, captions, описаний и вторичных ссылок.
`color.background.base` = #F4F6F9 для страницы. `color.surface.default` = #FFFFFF для карточек, форм, таблиц и dropdown.
`color.primary.wine.100` для CTA, активных состояний и важных ссылок. `color.accent.gold` для labels, eyebrow и editorial accents.
Error использует #A33A2F. Success/review/draft пока локальные в UI-kit; перед разработкой их нужно вынести в state tokens.
Typography
Text / Heading / H1 / Montserrat / 48 / 56
Rare wines for trade
Text / Heading / H2 / Montserrat / 36 / 44
Catalog collections
Text / Heading / H3 / Montserrat / 28 / 36
Producer selection
Text / Body / Regular / Inter / 16 / 24
Вина, регионы, партии и коммерческие условия в единой системе.
Text / Label / Caps / Inter / 12 / 16
FEATURED REGION
Montserrat 700-800, uppercase, clamp 44-78px, line-height около 0.98-1.08. Используется на главной и крупных внутренних hero.
Montserrat 800, 22-32px для list-card. Не использовать uppercase в текущем каталоге, чтобы длинные названия читались легче.
Inter 22-30px, line-height 1.38-1.48. Используется как первый смысловой абзац в редакционных материалах.
Inter 700-800, 14-16px. Текст должен помещаться без переноса на desktop; на mobile кнопка может становиться full-width.
Grid & Spacing
4
8
16
24
32
48
64
`--container: 1240px`. Desktop width: `min(100% - 40px, var(--container))`; mobile width: `min(100% - 28px, var(--container))`.
Desktop default. Tablet: max-width 1080/1100px. Mobile: max-width 720/760px depending on site vs UI-kit shell.
Компоненты: 8-16px gap. Карточки/формы: 16-24px padding. Секции: 56-72px vertical padding.
Tokens
color.primary = #4B0F24
color.text = #161616
spacing.md = 16px
radius.sm = 8px
shadow.soft = 0 12px 32px rgba(22,22,22,.08)
shadow.lift = 0 20px 52px rgba(75,15,36,.14)
`color.primary.wine.100`, `color.primary.wine.80`, `color.accent.gold`, `color.accent.blue`, `color.background.base`, `color.surface.default`.
`container.max = 1240px`, `spacing.4/8/16/24/32/48/64`, `radius.sm = 8px`, `radius.md = 12px`, `radius.lg = 24px`.
`font.heading = Montserrat`, `font.body = Inter`. Размеры текста хранятся как semantic styles, а не только raw px.
Elevation & Shadows
Изображения бутылок, прозрачные PNG/JPG внутри карточек, плоские служебные элементы.
box-shadow: none;
Только для sticky header: лёгкое отделение от контента при скролле.
0 10px 28px rgba(22,22,22,.05)
Основной токен для карточек, footer-контейнера, форм, contact panels и info-card.
0 12px 32px rgba(22,22,22,.08)
Для bottle-card и визуальных карточек с изображением, когда нужно чуть больше воздуха.
0 18px 46px rgba(18,25,38,.08)
Hover/active состояние list-card. Используется вместе с border-color, без изменения размеров.
0 22px 54px rgba(25,37,62,.13)
Высокий слой: dropdown, mega-menu, временно поднятые панели.
0 20px 52px rgba(75,15,36,.14)
Крупные изображения в статье, где фото должно отделяться от фона страницы.
0 22px 58px rgba(25,37,62,.12)
Не декоративная тень, а доступное состояние focus для search/input.
0 0 0 4px rgba(75,15,36,.08)
02 Components
Компоненты
Component Readiness
Каждый production-компонент должен иметь anatomy, variants, states, sizes, usage, CSS hooks и responsive notes.
Default, Hover, Focus, Active, Disabled. Для data-heavy компонентов также Loading, Empty, Error, Selected.
Использовать стабильные классы: `.button--primary`, `.product-card--list`, `.product-image--gold`, `.contact-auth-gate`.
Icon Styles
Основной стиль для header, account, cart, menu chevrons и вторичных действий. Stroke 1.75px, без заливки.
stroke-width: 1.75; width: 22px;
Для кликабельных icon buttons: header account/cart, toolbar actions, карточки избранного. Контейнер 44-48px.
background: #fff; border: rgba(75,15,36,.14);
Акцентный вариант для primary icon-only действий, selected states и важных быстрых команд. Использовать дозированно.
background: color.primary; color: #fff;
Для chevron, accordion, table sorting и compact filters. Stroke 1.6px, размер 14-18px, без отдельного контейнера.
width: 16px; stroke-width: 1.6;
Utility 16px, navigation 20-22px, icon button 44/48px container, primary action 48px container. SVG всегда квадратный.
Базовый stroke 1.75px. Не использовать тяжёлые 2.5-3px иконки в header: они спорят с логотипом и типографикой.
Default, Hover, Focus, Active, Disabled, Selected. Hover меняет border/background, а не толщину линии.
`.kit-icon--line`, `.kit-icon--soft`, `.kit-icon--filled`, `.kit-icon--tiny`. В рабочем header использовать тот же визуальный принцип.
Product Card
Card / Product / Default, Hover, Compact, List. List используется в каталоге и поисковой выдаче.
Image, Meta, Name, Details, Price, CTA. Для list-card добавляется Product info + Product buy.
Default, Hover, Favorite, Out of stock. Hover усиливает border/shadow без изменения размеров.
Catalog List Cards
Текущая карточка каталога: Image, Product info, Price, CTA. Используется для B2B-выдачи и страниц стран.
Сниженная высота, меньше изображение и короче details. Подходит для плотной выдачи и избранного.
Цветной фон только в зоне изображения: Gold, Wine, Green. Бутылка остаётся реальной фотографией без shadow.
Дополнительные параметры: тип, сорт, упаковка, артикул. Для профессионального сравнения SKU.
Default использует Shadow / Soft. Hover использует Shadow / Card / Hover + border rgba(75,15,36,.28). Картинки бутылок всегда shadow none.
Image Backgrounds
Для белых, сладких, премиальных и акцентных карточек. Хорошо работает с бутылками без прозрачного фона.
.product-image--gold { background: linear-gradient(135deg, #b9965b 0%, #d7c18b 48%, #eef2f6 100%); }
Для красных вин, премиальных подборок и карточек, где нужен более сильный брендовый акцент.
.product-image--wine { background: linear-gradient(135deg, #6d1c36 0%, #9b5366 46%, #e6dce1 100%); }
Для белых, органики, свежих регионов и спокойных карточек с холодным фоном.
.product-image--green { background: linear-gradient(135deg, #1f4d3a 0%, #88a28e 48%, #eef2e5 100%); }
Для hover, B2B dense и ситуаций, где цвет не должен спорить с информацией.
background: linear-gradient(135deg, #eef2f6 0%, #dde6ef 100%);
Градиент применяется только к контейнеру изображения, не к карточке целиком. Так карточка остаётся читаемой и не превращается в баннер.
Бутылка всегда `object-fit: contain`, `box-shadow: none`, без вылета за блок. Для JPG без прозрачности контейнер должен скрывать переполнение.
Для list-card использовать `.product-image product-image--gold|wine|green`. Для плиток использовать модификаторы media-контейнера.
Editorial Components
Заголовок, дата/мета, крупное фото. Для новостей производителей и экспертных материалов.
Lead, paragraph, blockquote, wide image, photo grid. Не больше 4 текстовых абзацев без визуальной паузы.
Sticky fact block, timeline или recognition. На мобильном становится обычным блоком над текстом.
Отдельная страница с требованиями к заголовкам, тексту, фото, SEO и pre-publish checklist.
Editorial hero image использует Shadow / Editorial / Image. Текстовые блоки и сайдбар остаются без декоративной тени, чтобы читать было спокойнее.
Добавить компоненты: Article meta, Article quote, Article image caption, Related products, Related producer.
Filters
Tags & Inputs
Tag / Default
Tag / Filled
Tag / Outline
Controls Specs
Checkbox Default/Active/Disabled, Chip Default/Active, Range Slider Default/Dragging.
Input Default/Focus/Error/Disabled. Error меняет border и helper text, не меняет высоту поля.
Default для метаданных, Filled для выбранного статуса, Outline для мягких категорий.
Нужны helper/error text, required label, disabled controls, textarea, select open state, clear all для фильтров.
Tables / B2B
| SKU | Name | Region | Stock | Trade price |
|---|---|---|---|---|
| DP-1042 | Chateau Laroque Grand Cru | Bordeaux | 48 cases | 3 890 ₽ |
| DP-1188 | Riesling Kabinett | Mosel | 32 cases | 2 150 ₽ |
Table Specs
Table Header, Row, Cell, Numeric cell, Actions. Горизонтальный scroll на мобильных.
Row Default/Hover/Selected, Header, Empty, Loading. Hover используется для B2B-сканирования.
Прайс-листы, остатки, коммерческие условия и сравнение SKU.
Добавить Empty, Loading, Selected, Actions column, numeric alignment, sticky header и mobile fallback.
03 Patterns
Паттерны
Pattern / Product Grid / 3 col
Content & Inner Pages
Split hero, date meta, lead, wide image, timeline sidebar, quote, photo grid, final CTA.
Hero + короткая история + сетка преимуществ. Подходит для корпоративной страницы без перегруза.
Контактные панели + форма заявки менеджеру. На мобильном блоки идут одной колонкой.
Контакты открыты, заявка заблокирована для гостя. Показываем CTA входа/регистрации и disabled-preview формы.
Guideline cards + checklist. Используется как внутренняя документация для редакции и контент-менеджера.
04 Templates
Шаблоны
Templates описывают каркас страницы: обязательные блоки, опциональные зоны, компоненты и связь с реальным screen. Это не финальный экран, а правило сборки.
Product listing
Required: Header, catalog head, toolbar, product list, footer.
Components: Catalog List Card, Select, Button Secondary, Mega-menu.
Screen: catalog.html
Status: Review, needs mobile QA for dense list.Editorial story
Required: Article hero, date/meta, lead, body, image block, footer.
Optional: timeline, quote, photo grid, related products.
Screen: news-villa-raiano-v2.html
Status: Ready, content/photo rules documented.Gated request
Required: contacts hero, open contacts, auth gate, disabled preview, footer.
Components: Contact Panel, Contact Auth Gate, Button Primary/Secondary.
Screen: contacts-auth.html
Status: Review, needs real login/register routes.Commercial landing
Required: asymmetrical hero, producer block, news block, footer.
Components: Header, Mega-menu, Button Primary, News Card, Producer Card.
Screen: index.html
Status: Ready, visual direction approved.Internal documentation
Required: page intro, rule cards, photo requirements, writing checklist.
Components: Guideline Card, Checklist Card, Editorial Specs.
Screen: article-guidelines.html
Status: Ready, supports content production.Product detail
Required: product media, details, price/CTA, characteristics, recommendations.
Components: Product Media, Product Meta, Table, Product Card.
Screen: product.html
Status: Draft, needs final product content model.05 Screens
Реальные экраны
Этот раздел ведёт на конкретные HTML-страницы проекта. В отличие от Templates, здесь фиксируются уже собранные экраны с реальным контентом, header/footer и состояниями.
Screen / Home / v1
Главная
Hero, производители, новости, рекомендации и общий визуальный тон сайта.
Screen / Catalog / v1 КаталогСписок товаров, toolbar, сортировка, текущая горизонтальная карточка каталога.
Screen / Product / v1 Карточка товараПродуктовый detail layout: изображение, описание, метаданные и CTA.
Screen / Cards Lab / v1 Варианты карточекЛаборатория карточек бутылок и текущих list-card состояний.
Screen / News / v2 Villa Raiano editorialЖурнальная статья с крупными фото, таймлайном, цитатами и финальным акцентом.
Screen / About / v1 О компанииКорпоративная страница: описание, преимущества, спокойная B2B-подача.
Screen / Contacts / v1 КонтактыОткрытая форма заявки, контактные панели, юридический информационный блок.
Screen / Contacts / Auth Контакты authВариант, где заявка доступна только после входа или регистрации.
Screen / Guidelines / v1 Редакционный гайдТребования к статьям, фотографиям, заголовкам, SEO и pre-publish checklist.
Ready: Home, News v2, Guidelines, Cards Lab. Review: Catalog, Contacts Auth. Draft: Product, если не утверждена модель данных.
Каждый экран проверяется на desktop/tablet/mobile: header/footer, links, image loading, hover/focus states, overflow и читаемость текста.
Каждый screen должен соответствовать одному template. Если меняется template, связанные screens обновляются вместе с ним.
06 Handoff
Production checklist
Финальный список проверок перед передачей дизайна в разработку или публикацией новой страницы в UI-kit.
- Компонент использует существующие tokens: color, spacing, radius, shadow.
- Есть все состояния: default, hover, focus, active, disabled, error/loading где нужно.
- Размеры стабильны: hover, текст и динамический контент не двигают layout.
- Компонент не дублирует уже существующий паттерн без причины.
- Есть CSS hook или class naming по схеме Category / Type / Variant / State.
- В UI-kit указан usage: где компонент применяется и где не применяется.
- Все ссылки в demo/screens ведут на реальные HTML-файлы.
- Нет inline-логики, которая мешает переиспользовать компонент.
- Проверены desktop, tablet и mobile.
- Карточки, таблицы и формы не переполняют контейнер.
- Текст в кнопках и карточках не обрезается и не накладывается.
- Таблицы имеют horizontal scroll или мобильную альтернативу.
- Интерактивные элементы имеют видимый focus.
- Изображения имеют осмысленный alt.
- Кнопки и ссылки различимы по роли и тексту.
- Цвет не является единственным способом передать состояние.
- Заголовки соответствуют иерархии H1/H2/H3.
- Для статей есть лид, визуальные паузы, alt и финальный CTA.
- Даты, имена, регионы, апелласьоны и награды проверены.
- Изображения достаточно крупные и не выглядят случайно обрезанными.
- Раздел имеет описание назначения.
- Есть пример, спецификация и ссылка на screen, если применимо.
- Компонент или экран можно собрать без дополнительных устных пояснений.
- Статус готовности понятен: Ready, Review или Draft.