STORE.
STORE.
Профиль

UI Kit Прототипа

Шрифт: Inter / Next.js, Tailwind CSS, Zustand, Lucide Icons

Типографика

H1 Заголовок (4xl)

Используется на главных страницах (Например: Заголовок Корзины, Каталога, UI Kit)

H2 Заголовок (2xl)

Крупные блоки внутри страниц (Например: Секции "О нас", заголовки в UI Kit)

H3 Заголовок (xl)

Окна, модалки, крупные элементы, карточки FAQ

Текст Large (lg)

Акцентный текст, подзаголовки, цены в корзине

Основной текст (base)

Стандартный текст описаний, параграфы, абзацы

Второстепенный текст (sm)

Детали, метаданные, формы ввода, некритичная информация

Акцентный текст (xs)

Бейджи, ярлыки, статус заказа, метки (как "Осталось мало")

Тени (Shadows)

shadow-smМелкие карточки, кнопки,
статичные бейджи
shadow-mdКарточки товаров, FAQ,
выпадающие списки (dropdown)
shadow-lgМодальные окна, корзина,
плавающие меню (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 / О нас)

Как оформить заказ?

Добавьте понравившиеся товары в корзину, перейдите в неё и нажмите "Оформить заказ". Заполните данные для доставки и выберите способ оплаты.

Безопасная оплата

Встроенный пример карточки из раздела "Почему мы".

Инпуты

Пагинация (Pagination)

Текущая страница: 1

Карточка Товара (Product Card)

Черная куртка из экокожи

$15499.00
В наличии: 12 шт.

Модальные Окна