DP Trade — Design System
UI-kit для премиального торгового каталога
Живая HTML/CSS витрина компонентов, токенов, паттернов и экранов для сайта DP Trade. Структура повторяет Figma-файл и использует критичный naming format.
01 Foundations
База системы
Colors
#4B0F24
#6D1C36
#161616
#66605F
#D8D3CF
#F4F6F9
#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
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
Logo, Search, Phone, Account, Cart, Main nav, Mega-menu. Header sticky, две строки.
Default, Sticky, Dropdown open, Focus. У nav hover только underline, без pill-background.
Mega-menu: visual image, intro, 3 content columns, popular links. Hover bridge удерживает меню.
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 для мягких категорий.
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
Паттерны
Pattern / Product Grid / 3 col
04 Templates
Шаблоны
05 Screens
Реальные экраны
Screen / Home / v1