DP Trade — Design System
UI-kit для премиального торгового каталога
Живая HTML/CSS витрина компонентов, токенов, паттернов и экранов для сайта DP Trade. Структура повторяет Figma-файл и использует критичный naming format.
01 Foundations
База системы
Colors
#4B0F24
#6D1C36
#161616
#66605F
#D8D3CF
#FAF8F5
#B9965B
Typography
Text / Heading / H1 / Playfair / 48 / 56
Rare wines for trade
Text / Heading / H2 / Playfair / 36 / 44
Catalog collections
Text / Heading / H3 / Playfair / 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
Product Card
Navigation
Filters
Tags & Inputs
Tag / Default
Tag / Filled
Tag / 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 ₽ |
03 Patterns
Паттерны
Pattern / Product Grid / 3 col
04 Templates
Шаблоны
05 Screens
Реальные экраны
Screen / Home / v1