Бесплатно по России 8 800 123-45-67
Избранное Кабинет
0 Корзина

UI Kit

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

01. Палитра

Цвета

Brand red
var(--red)
#E63329
Red dark (hover)
var(--red-dark)
#C42920
Black
var(--black)
#111111
Gray
var(--gray)
#888888
Background
var(--bg)
#F7F7F7
Border
var(--border)
#E5E5E5
White
#fff
#FFFFFF
Red tint (active)
rgba(230,51,41,.06)
используется в hover/.chosen

02. Шрифты

Типографика

Семейство: Onest (самохост, woff2, 4 начертания). Системный fallback: sans-serif.

H1 / 48px / 900
Заголовок страницы
H2 / 28px / 800
Секционный заголовок
H3 / 18px / 700
Подзаголовок раздела
Lead / 18px / 400
Лид-параграф для контентных страниц — увеличенный шрифт, серый цвет, открывает страницу.
Body / 16px / 400
Основной текст в контентных страницах. Высота строки 1.75 для удобного чтения длинных абзацев.
Body small / 14px / 400
Мелкий текст для подписей, метаданных и второстепенной информации.
Caps label / 11px / 800 / +3
КЛЮЧЕВАЯ ПОДПИСЬ
Цена / 18px / 900
59 704,00 ₽

03. Действия

Кнопки

Primary (черная)
.add-to-cart
Primary (красная)
.cart-checkout-btn
Оформить заказ
Apply (сайдбар)
.sidebar-apply-btn
Reset link
.sidebar-reset-btn
Сбросить все фильтры
Toggle (категории)
.cat-toggle
collapsed expanded

04. Поля ввода

Формы

05. Метки

Бейджи

New .badge.badge-new
−15% .badge.badge-sale
Хит .badge.badge-hit

06. Каталог

Карточка товара

Парикмахерское крелсло Патрик
30 900 ₽
В корзину
Парикмахерское кресло Мэтью
29 650 ₽
В корзину
Парикмахерское кресло Гербер
30 433 ₽
В корзину

07. Текстовые страницы

Контентная страница (.content-page)

Заголовок страницы

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

Подзаголовок раздела

Стандартный текст — высота строки 1.75 для удобного чтения. Жирный акцент выделяет важные термины и ключевые понятия.

  • Маркер с красной точкой (унаследован от .content-page ul li::marker)
  • Поддержка вложенных списков и длинных пунктов на нескольких строках
  • Внешние и внутренние ссылки с подчёркиванием в фирменном красном

Ещё один раздел

Заголовки H2 имеют красную полоску слева (4px) — визуальный якорь для длинных страниц.

Применяется к slug: about, contacts, delivery, payment, faq, privacy, terms.

09. Корзина

Строка корзины

Товар Цена Количество Итого
Парикмахерское кресло Патрик 30 900,44 ₽ 61 800,88 ₽ ×

10. Сообщения

Уведомления

Способ доставки и стоимость рассчитываются отдельно — выберете перевозчика на следующем шаге.
Найдено 478 товаров — Показать
Нет товаров с такими фильтрами
Считаем…

UI Kit · BarberBazar · обновляется автоматически из живой темы (CSS-переменные + классы из main.css)