# DP Trade — Design System

DP Trade — Design System

# UI-kit для премиального торгового каталога

Живая HTML/CSS витрина компонентов, токенов, паттернов и экранов для сайта DP Trade. Структура повторяет Figma-файл и использует критичный naming format.

Компоненты Dev tokens
Bordeaux

### Chateau Laroque Grand Cru

France · Red dry · 2019 · 0.75 L

00 Production Status

## Статус дизайн-системы

Этот блок показывает, насколько UI-kit готов к production handoff: что можно использовать сразу, что требует детализации, и какие правила обязательны для новых экранов.

Ready Catalog List Cards

Есть варианты, состояния, фоны изображений, shadows и реальная страница для проверки.

Ready Navigation / Mega-menu

Header, dropdown, hover bridge, ширина контейнера и базовые состояния зафиксированы.

Ready Foundations

Цветовые роли, типографика, сетка, spacing, tokens и shadows описаны для dev handoff.

Review Forms / Inputs

Есть default/focus/error, но нужны helper text, required, disabled, textarea и validation patterns.

Ready Templates

Шаблоны описывают обязательные блоки, компоненты, screen-ссылки и статус готовности.

Review Responsive QA

Есть checklist и адаптивные правила, но перед релизом нужен визуальный проход по всем страницам.

Production rule

Новый компонент нельзя считать готовым без anatomy, variants, states, usage, CSS hook и responsive notes.

Screen rule

Новый экран должен быть связан с template, иметь статус, ссылку на HTML и список QA-проверок.

Content rule

Все изображения должны иметь понятный 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

Color / Primary / Wine / 100 `#4B0F24`
Color / Primary / Wine / 80 `#6D1C36`
Color / Neutral / Black `#161616`
Color / Neutral / Gray / 600 `#66605F`
Color / Neutral / Gray / 300 `#D8D3CF`
Color / Background / Base `#F4F6F9`
Color / Accent / Gold `#B9965B`
Text roles

`color.text.primary` = #161616 для заголовков и основного текста. `color.text.muted` = #66605F для meta, captions, описаний и вторичных ссылок.

Surface roles

`color.background.base` = #F4F6F9 для страницы. `color.surface.default` = #FFFFFF для карточек, форм, таблиц и dropdown.

Brand roles

`color.primary.wine.100` для CTA, активных состояний и важных ссылок. `color.accent.gold` для labels, eyebrow и editorial accents.

State roles

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

Hero / H1

Montserrat 700-800, uppercase, clamp 44-78px, line-height около 0.98-1.08. Используется на главной и крупных внутренних hero.

Catalog / Product title

Montserrat 800, 22-32px для list-card. Не использовать uppercase в текущем каталоге, чтобы длинные названия читались легче.

Article / Lead

Inter 22-30px, line-height 1.38-1.48. Используется как первый смысловой абзац в редакционных материалах.

Button / Label

Inter 700-800, 14-16px. Текст должен помещаться без переноса на desktop; на mobile кнопка может становиться full-width.

### Grid & Spacing

4 8 16 24 32 48 64
Container

`--container: 1240px`. Desktop width: `min(100% - 40px, var(--container))`; mobile width: `min(100% - 28px, var(--container))`.

Breakpoints

Desktop default. Tablet: max-width 1080/1100px. Mobile: max-width 720/760px depending on site vs UI-kit shell.

Spacing rule

Компоненты: 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 tokens

`color.primary.wine.100`, `color.primary.wine.80`, `color.accent.gold`, `color.accent.blue`, `color.background.base`, `color.surface.default`.

Layout tokens

`container.max = 1240px`, `spacing.4/8/16/24/32/48/64`, `radius.sm = 8px`, `radius.md = 12px`, `radius.lg = 24px`.

Typography tokens

`font.heading = Montserrat`, `font.body = Inter`. Размеры текста хранятся как semantic styles, а не только raw px.

### Elevation & Shadows

Shadow / None none

Изображения бутылок, прозрачные PNG/JPG внутри карточек, плоские служебные элементы.

`box-shadow: none;`
Shadow / Header / Sticky Navigation depth

Только для sticky header: лёгкое отделение от контента при скролле.

`0 10px 28px rgba(22,22,22,.05)`
Shadow / Soft Base surface

Основной токен для карточек, footer-контейнера, форм, contact panels и info-card.

`0 12px 32px rgba(22,22,22,.08)`
Shadow / Card / Product Product card

Для bottle-card и визуальных карточек с изображением, когда нужно чуть больше воздуха.

`0 18px 46px rgba(18,25,38,.08)`
Shadow / Card / Hover Interactive lift

Hover/active состояние list-card. Используется вместе с border-color, без изменения размеров.

`0 22px 54px rgba(25,37,62,.13)`
Shadow / Lift Mega-menu

Высокий слой: dropdown, mega-menu, временно поднятые панели.

`0 20px 52px rgba(75,15,36,.14)`
Shadow / Editorial / Image Hero media

Крупные изображения в статье, где фото должно отделяться от фона страницы.

`0 22px 58px rgba(25,37,62,.12)`
Shadow / Focus Ring Input focus

Не декоративная тень, а доступное состояние focus для search/input.

`0 0 0 4px rgba(75,15,36,.08)`

02 Components

## Компоненты

### Component Readiness

Required anatomy

Каждый production-компонент должен иметь anatomy, variants, states, sizes, usage, CSS hooks и responsive notes.

Required states

Default, Hover, Focus, Active, Disabled. Для data-heavy компонентов также Loading, Empty, Error, Selected.

CSS hooks

Использовать стабильные классы: `.button--primary`, `.product-card--list`, `.product-image--gold`, `.contact-auth-gate`.

### Buttons

Анатомия

Button / Background + Label. Высота 48px, compact 38px, radius 8px, padding 12/22.

Состояния

Default, Hover, Focus, Disabled. Hover меняет фон/тень, focus должен иметь видимый outline.

Использование

Primary для главного CTA, Secondary для каталогов и избранного, Ghost для тихих действий.

Production gap

Добавить disabled, loading, icon-only, full-width mobile. Loading не должен менять ширину кнопки.

### Icon Styles

Icon / Line / Default

Основной стиль для header, account, cart, menu chevrons и вторичных действий. Stroke 1.75px, без заливки.

`stroke-width: 1.75; width: 22px;`
Icon / Soft Container

Для кликабельных icon buttons: header account/cart, toolbar actions, карточки избранного. Контейнер 44-48px.

`background: #fff; border: rgba(75,15,36,.14);`
Icon / Filled Action

Акцентный вариант для primary icon-only действий, selected states и важных быстрых команд. Использовать дозированно.

`background: color.primary; color: #fff;`
Icon / Utility / Small

Для chevron, accordion, table sorting и compact filters. Stroke 1.6px, размер 14-18px, без отдельного контейнера.

`width: 16px; stroke-width: 1.6;`
Size scale

Utility 16px, navigation 20-22px, icon button 44/48px container, primary action 48px container. SVG всегда квадратный.

Stroke rule

Базовый stroke 1.75px. Не использовать тяжёлые 2.5-3px иконки в header: они спорят с логотипом и типографикой.

States

Default, Hover, Focus, Active, Disabled, Selected. Hover меняет border/background, а не толщину линии.

CSS hooks

`.kit-icon--line`, `.kit-icon--soft`, `.kit-icon--filled`, `.kit-icon--tiny`. В рабочем header использовать тот же визуальный принцип.

### Product Card

Tuscany

### Brunello di Montalcino

Italy · Red dry · 2018 · 0.75 L

Rioja

### Reserva Seleccion Especial

Spain · Red dry · 2017 · 0.75 L

Mosel

### Riesling Kabinett

Germany · White · 2021

Варианты

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

Card / Product / List / Default

Текущая карточка каталога: Image, Product info, Price, CTA. Используется для B2B-выдачи и страниц стран.

Card / Product / List / Compact

Сниженная высота, меньше изображение и короче details. Подходит для плотной выдачи и избранного.

Card / Product / List / Color Image

Цветной фон только в зоне изображения: Gold, Wine, Green. Бутылка остаётся реальной фотографией без shadow.

Card / Product / List / B2B Dense

Дополнительные параметры: тип, сорт, упаковка, артикул. Для профессионального сравнения SKU.

Shadow

Default использует Shadow / Soft. Hover использует Shadow / Card / Hover + border rgba(75,15,36,.28). Картинки бутылок всегда shadow none.

Открыть варианты карточек

### Image Backgrounds

Image Background / Gold

Для белых, сладких, премиальных и акцентных карточек. Хорошо работает с бутылками без прозрачного фона.

`.product-image--gold { background: linear-gradient(135deg, #b9965b 0%, #d7c18b 48%, #eef2f6 100%); }`
Image Background / Wine

Для красных вин, премиальных подборок и карточек, где нужен более сильный брендовый акцент.

`.product-image--wine { background: linear-gradient(135deg, #6d1c36 0%, #9b5366 46%, #e6dce1 100%); }`
Image Background / Green

Для белых, органики, свежих регионов и спокойных карточек с холодным фоном.

`.product-image--green { background: linear-gradient(135deg, #1f4d3a 0%, #88a28e 48%, #eef2e5 100%); }`
Image Background / Neutral

Для hover, B2B dense и ситуаций, где цвет не должен спорить с информацией.

`background: linear-gradient(135deg, #eef2f6 0%, #dde6ef 100%);`
Правило

Градиент применяется только к контейнеру изображения, не к карточке целиком. Так карточка остаётся читаемой и не превращается в баннер.

Изображение

Бутылка всегда `object-fit: contain`, `box-shadow: none`, без вылета за блок. Для JPG без прозрачности контейнер должен скрывать переполнение.

CSS hook

Для list-card использовать `.product-image product-image--gold|wine|green`. Для плиток использовать модификаторы media-контейнера.

### Editorial Components

Article / Hero / Split

Заголовок, дата/мета, крупное фото. Для новостей производителей и экспертных материалов.

Article / Body

Lead, paragraph, blockquote, wide image, photo grid. Не больше 4 текстовых абзацев без визуальной паузы.

Article / Sidebar

Sticky fact block, timeline или recognition. На мобильном становится обычным блоком над текстом.

Guidelines

Отдельная страница с требованиями к заголовкам, тексту, фото, SEO и pre-publish checklist.

Shadow

Editorial hero image использует Shadow / Editorial / Image. Текстовые блоки и сайдбар остаются без декоративной тени, чтобы читать было спокойнее.

Production gap

Добавить компоненты: Article meta, Article quote, Article image caption, Related products, Related producer.

Новость v2 Редакционный гайд

### Filters

France Italy
Price range

### Tags & Inputs

Tag / Default Tag / Filled Tag / Outline

### Controls Specs

Filters

Checkbox Default/Active/Disabled, Chip Default/Active, Range Slider Default/Dragging.

Inputs

Input Default/Focus/Error/Disabled. Error меняет border и helper text, не меняет высоту поля.

Tags

Default для метаданных, Filled для выбранного статуса, Outline для мягких категорий.

Production gap

Нужны 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.

Production gap

Добавить Empty, Loading, Selected, Actions column, numeric alignment, sticky header и mobile fallback.

03 Patterns

## Паттерны

### Filters / Sidebar

Bordeaux Tuscany Rioja

### Pattern / Product Grid / 3 col

Bordeaux Grand Cru
Tuscany Reserve
Mosel Riesling

### Content & Inner Pages

Pattern / News Article / Editorial

Split hero, date meta, lead, wide image, timeline sidebar, quote, photo grid, final CTA.

Pattern / About Page / Default

Hero + короткая история + сетка преимуществ. Подходит для корпоративной страницы без перегруза.

Pattern / Contacts / Form

Контактные панели + форма заявки менеджеру. На мобильном блоки идут одной колонкой.

Pattern / Contacts / Auth Gate

Контакты открыты, заявка заблокирована для гостя. Показываем CTA входа/регистрации и disabled-preview формы.

Pattern / Editorial Guidelines

Guideline cards + checklist. Используется как внутренняя документация для редакции и контент-менеджера.

04 Templates

## Шаблоны

Templates описывают каркас страницы: обязательные блоки, опциональные зоны, компоненты и связь с реальным screen. Это не финальный экран, а правило сборки.

Template / Home Hero + regions + recommendations
Template / Catalog Filters + product grid + table mode
Template / Product Page Gallery + meta + CTA + availability
Template / Producer Page Story + region + producer catalog
Template / News Article Editorial story + media + timeline
Template / About Company story + advantages
Template / Contacts Contact panels + manager request
Template / Contacts Auth Open contacts + gated request form
Template / Article Guidelines Rules + checklist + photo requirements
Template / Catalog

### 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.
Template / News Article

### 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.
Template / Contacts Auth

### 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.
Template / Home

### 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.
Template / Article Guidelines

### 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.
Template / Product Page

### 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.

Screen status

Ready: Home, News v2, Guidelines, Cards Lab. Review: Catalog, Contacts Auth. Draft: Product, если не утверждена модель данных.

Screen QA

Каждый экран проверяется на desktop/tablet/mobile: header/footer, links, image loading, hover/focus states, overflow и читаемость текста.

Template link

Каждый screen должен соответствовать одному template. Если меняется template, связанные screens обновляются вместе с ним.

06 Handoff

## Production checklist

Финальный список проверок перед передачей дизайна в разработку или публикацией новой страницы в UI-kit.

Design

- Компонент использует существующие tokens: color, spacing, radius, shadow.
- Есть все состояния: default, hover, focus, active, disabled, error/loading где нужно.
- Размеры стабильны: hover, текст и динамический контент не двигают layout.
- Компонент не дублирует уже существующий паттерн без причины.

Development

- Есть CSS hook или class naming по схеме Category / Type / Variant / State.
- В UI-kit указан usage: где компонент применяется и где не применяется.
- Все ссылки в demo/screens ведут на реальные HTML-файлы.
- Нет inline-логики, которая мешает переиспользовать компонент.

Responsive

- Проверены desktop, tablet и mobile.
- Карточки, таблицы и формы не переполняют контейнер.
- Текст в кнопках и карточках не обрезается и не накладывается.
- Таблицы имеют horizontal scroll или мобильную альтернативу.

Accessibility

- Интерактивные элементы имеют видимый focus.
- Изображения имеют осмысленный alt.
- Кнопки и ссылки различимы по роли и тексту.
- Цвет не является единственным способом передать состояние.

Content

- Заголовки соответствуют иерархии H1/H2/H3.
- Для статей есть лид, визуальные паузы, alt и финальный CTA.
- Даты, имена, регионы, апелласьоны и награды проверены.
- Изображения достаточно крупные и не выглядят случайно обрезанными.

Ready criteria

- Раздел имеет описание назначения.
- Есть пример, спецификация и ссылка на screen, если применимо.
- Компонент или экран можно собрать без дополнительных устных пояснений.
- Статус готовности понятен: Ready, Review или Draft.