Бесплатная доставка с примеркой от 10 000 ₽
UI-Kit
ЖенщинамМужчинамВерхняя одеждаSaleВесь каталогUI-Kit
STORE · Design System & UI Kit

Дизайн-система и библиотека компонентов витрины

Единый каталог цветовых палитр, типографики, карточек каталога, интерактивного шоурум-рейла и калькулятора розничных скидок и программы лояльности.

Студийное паспарту

Нейтральная подложка --card-media-surface сохраняет естественный контраст как для светлого шёлка, так и для угольно-чёрной кожи в обеих темах.

Табличная типографика цен

Все ценники, размеры скидок и платежи рассрочки выровнены через tabular-nums для безупречной визуальной сетки.

Мгновенный отклик 60 FPS

Переключение расцветок, появление размерной сетки и 3D-разворот вешалок работают на аппаратных CSS-трансформациях без задержек загрузки.

Адаптивная эргономика

На десктопе доступны hover-панели выбора размера и шоурум-рейл, на смартфонах — компактная навигация и быстрое добавление в один тап.

1. Палитра и семантические токены

Переключите тему выше, чтобы сравнить дневную палитру Gallery Paper и вечернюю Obsidian Atelier

Background

--background

Основной фон витрины (#FAF9F6 / #0B0B0E)

Card Surface

--card

Поверхность карточек и модальных окон

Media Passe-partout

--card-media-surface

Студийное паспарту под фото изделий

Primary CTA

--primary

Основные кнопки покупки

Brand Accent

--accent-ai

Акцент комплектов и бонусных баллов

Muted Surface

--muted

Вторичные плашки и фильтры

Desktop Showroom Pattern

2. Интерактивный шоурум-рейл «ON THE RAIL»

Наведите курсор на вещь на штанге для разворота плечиков лицом, кликните для перехода к карточке модели. На мобильных экранах блок автоматически скрывается в пользу компактной сетки.

На мобильном разрешении (< 768px) шоурум-рейл скрыт. Откройте страницу на десктопе, чтобы протестировать интерактивный разворот вещей на штанге.
Catalog Component · Aspect Ratio 3:4

3. Карточка товара (ProductCard)

Пропорция 3:4, мгновенное переключение расцветок по свотчам, быстрый выбор размера по ховеру с полупрозрачным наложением силуэта вещи, бейдж сплита 4 × 25% и бонусных баллов.

Pricing & Loyalty Simulator

4. Калькулятор каскадных скидок и минимальной цены бренда

Интерактивная проверка розничной цены: Скидка бренда → Скидка за покупку комплектом → Промокод → Бонусные баллы (до 10%) → Неснижаемый порог цены селлера (Floor Price).

Итоговая калькуляцияСработала защита Floor Price
Базовая цена:
18 900 ₽
После скидки бренда:
17 010 ₽
После скидки за комплект:
15 309 ₽
После промокода:
14 309 ₽
Списано бонусами (≤ 10%):
−1 430 ₽
Итоговая цена к оплате:13 500 ₽
Платежами 4 × 25% (Долями / Сплит):4 × 3 375 ₽
Начисление бонусов (3%):+405 баллов