# 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

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`

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

### Grid & Spacing

4 8 16 24 32 48 64

### Tokens

`color.primary = #4B0F24` `color.text = #161616` `spacing.md = 16px` `radius.sm = 8px` `shadow.soft = 0 12px 32px rgba(22,22,22,.08)`

02 Components

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

### Buttons

Анатомия

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

Состояния

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

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

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

### 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 без изменения размеров.

### Navigation

DP Trade
Анатомия

Logo, Search, Phone, Account, Cart, Main nav, Mega-menu. Header sticky, две строки.

Состояния

Default, Sticky, Dropdown open, Focus. У nav hover только underline, без pill-background.

Dropdown

Mega-menu: visual image, intro, 3 content columns, popular links. Hover bridge удерживает меню.

### 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 для мягких категорий.

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

03 Patterns

## Паттерны

### Filters / Sidebar

Bordeaux Tuscany Rioja

### Pattern / Product Grid / 3 col

Bordeaux Grand Cru
Tuscany Reserve
Mosel Riesling

04 Templates

## Шаблоны

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

05 Screens

## Реальные экраны

Screen / Home / v1

### Curated trade catalog