Единый справочник всех визуальных компонентов BarberBazar — цвета, типографика, кнопки, формы, карточки, виджеты. Источник истины для дизайна и разработки.
01. Палитра
02. Шрифты
Семейство: Onest (самохост, woff2, 4 начертания). Системный fallback: sans-serif.
03. Действия
04. Поля ввода
05. Метки
06. Каталог
07. Текстовые страницы
Лид-параграф открывает страницу — увеличенный размер, серый цвет. Используется для краткого введения в тему.
Стандартный текст — высота строки 1.75 для удобного чтения. Жирный акцент выделяет важные термины и ключевые понятия.
Заголовки H2 имеют красную полоску слева (4px) — визуальный якорь для длинных страниц.
Применяется к slug: about, contacts, delivery, payment, faq, privacy, terms.
08. Сайдбар каталога
Состояния термина: обычный, .chosen (применённый), .pending (ожидает Apply). Виджеты с >7 терминами получают .bb-show-more-btn; с >12 — поле .bb-filter-search-input.
09. Корзина
| Товар | Цена | Количество | Итого | |
|---|---|---|---|---|
| Парикмахерское кресло Патрик | 30 900,44 ₽ | 61 800,88 ₽ | × |
10. Сообщения
UI Kit · BarberBazar · обновляется автоматически из живой темы (CSS-переменные + классы из main.css)