UI Kit Прототипа
Шрифт: Inter / Next.js, Tailwind CSS, Zustand, Lucide Icons
Типографика
Используется на главных страницах (Например: Заголовок Корзины, Каталога, UI Kit)
Крупные блоки внутри страниц (Например: Секции "О нас", заголовки в UI Kit)
Окна, модалки, крупные элементы, карточки FAQ
Акцентный текст, подзаголовки, цены в корзине
Стандартный текст описаний, параграфы, абзацы
Детали, метаданные, формы ввода, некритичная информация
Бейджи, ярлыки, статус заказа, метки (как "Осталось мало")
Тени (Shadows)
статичные бейджи
выпадающие списки (dropdown)
плавающие меню (DevMenu, Theme)
Цвета (Нажмите, чтобы скопировать HEX)
Primary
Главные кнопки, заголовки
Primary Hover
Ховер главных кнопок
Secondary
Второстепенные элементы
Accent
Ссылки при наведении, акценты
Background
Основной фон страниц
Surface
Фон карточек, панелей
Border
Линии и рамки
Success
Успешные действия (Snackbar)
Error
Ошибки, "Мало на складе"
Badge
Бейджи, счетчики уведомлений
Text Main
Основной текст тела
Text Muted
Серый текст (детали)
CSS-переменные для Tailwind (globals.css)
@theme {
--color-primary: #111827;
--color-primary-hover: #374151;
--color-secondary: #f3f4f6;
--color-accent: #3b82f6;
--color-success: #10b981;
--color-error: #ef4444;
--color-badge: #ef4444;
--color-badge-text: #ffffff;
--color-warning: #f59e0b;
--color-background: #ffffff;
--color-surface: #f9fafb;
--color-border: #e5e7eb;
--color-text-main: #111827;
--color-text-muted: #6b7280;
--color-text-inverse: #ffffff;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}Кнопки
Интерактивные Кнопки (Loaders)
Уведомления (Snackbar)
Уведомления (Колокольчик)
Информационные Карточки (FAQ / О нас)
Как оформить заказ?
Добавьте понравившиеся товары в корзину, перейдите в неё и нажмите "Оформить заказ". Заполните данные для доставки и выберите способ оплаты.
Безопасная оплата
Встроенный пример карточки из раздела "Почему мы".