xs / 10px
Системный текст для микроподписей и служебных лейблов.
UI System
Styleguide
Живая страница компонентов и токенов темы. Используйте её как опорную точку для новых экранов, форм и внутренних паттернов интерфейса.
Типографика
Разрешённые размеры текста и базовая подача контента.
sm / 12px
Подписи полей, вспомогательные тексты и статусы интерфейса.
md / 14px
Основной интерфейсный текст и базовые описания.
lg / 18px
Кнопки, заметные подписи и важные короткие значения.
xl / 32px
Заголовок секции styleguide
2xl / 64px
Hero
Палитра
Только утверждённые цветовые токены темы.
site-black
Hex
#010202
site-green-dark
Hex
#113B2C
site-green
Hex
#54A67F
site-gold-dark
Hex
#B6832A
site-gold-light
Hex
#E6B76B
site-accent
Hex
#E9A31B
site-red
Hex
#B54A3A
site-surface
Hex
#FFFFFF
site-surface-muted
Hex
#f5f3f3
site-border
Hex
#e5e5e5
Кнопки И Ссылки
Базовые CTA, вторичные действия и текстовые ссылки.
Основные действия
Вторичные действия
Реальные Варианты Кнопок
Все основные button-patterns, которые реально используются в теме: от CTA-ссылок до icon-only контролов и раскрывающих summary.
CTA / Ссылки-Кнопки
Промо-блоки, support-CTA, быстрые действия аккаунта и кнопки футера.
Primary / Secondary / Inline Actions
Основные кнопки форм, вторичные действия, defer и inline-return кнопки аккаунта.
Icon-Only Buttons
Поиск, избранное, закрытие модалок, мобильные триггеры и toolbar-кнопки.
Tabs / Segments / Locale
Табы кабинета, segmented auth controls и переключатели рынков.
Filters / Select-Like / Qty
Триггеры фильтров, псевдо-кнопка сортировки и quantity stepper.
1
Chips / Options / Tree Toggle
Выбор вариаций товара, фильтры-категории и раскрытие дерева.
Лён
Carousel Nav / Pagination
Навигация каруселей, hero dots и lightbox/gallery pagination.
Accordion / Summary-Like Controls
`summary` используется как кнопка-раскрыватель в каталоге, карточке товара, FAQ и футере.
Категории
Панель фильтра.
Доставка
Контент раскрывающегося блока товара.
Вопрос и ответ
Пример FAQ summary как button-like контрола.
Формы
Инпуты, textarea, выбор страны, чекбоксы и OTP-поле.
Стандартный текстовый ввод.
Пример error-состояния поля.
Сегменты
Checkbox / Radio
OTP
Поверхности И Feedback
Карточки, muted-блоки, уведомления и тосты.
Base Card
Чистая поверхность
Основной контейнер для контента, форм и вторичных блоков страницы.
Muted Surface
Мягкий фон
Подходит для вторичных карточек, summary-блоков и группировки полей.
Notice
Сценарий success или информационного сообщения внутри контента.
Toast Success
Данные сохранены.
Toast Error
Не удалось отправить код.
Toast Info
Корзина обновлена.
Размеры И Ритм
Согласованный размерный ряд для высот и контентных блоков.
size-13
3.25rem
size-14
3.5rem
size-21
5.25rem
size-37
9.375rem
size-45
11.375rem
size-55
13.75rem
Spacing
Для внутренних отступов и gap используйте шаговую шкалу Tailwind с базовым шагом 0.25rem.
Радиусы
Единая система скруглений для поверхностей, контролов и pill-элементов.
radius-none
0
radius-md
1rem
radius-xl
1.75rem
radius-full
9999rem