UI Kit (RU)

Эта страница — публичное краткое представление живой дизайн-системы Snabplus на основе текущего UI Kit из репозитория.

Философия

Ясность: интерфейс должен читаться мгновенно.
Уважение к контенту: интерфейс не должен спорить с данными пользователя.
Глубина: слои, тени и переходы должны объяснять иерархию.

Ключевые дизайн-токены

Цвета

Токен	Значение
`--bg`	`#f3efe6`
`--bg-accent`	`#e6dcc8`
`--surface`	`rgba(255, 252, 246, 0.9)`
`--text`	`#221b14`
`--muted`	`#6f6355`
`--ok`	`#1f7a52`
`--error`	`#b2432f`

Токены кнопок:

--button-primary-bg: linear-gradient(135deg, #3b71dd, #2b57b0)
--button-secondary-bg: #efe4d2
--button-ghost-border: rgba(72, 61, 43, 0.12)

Типографика

--font-body: Montserrat, sans-serif
--font-display: IBM Plex Sans, sans-serif
body-диапазон: 13px–16px
display-диапазон: 28px–46px

Радиусы и материальность

кнопки и поля используют системный радиус кнопки
карточки масштабируются от компактных (12px) до shell-контейнеров (28px)
тени должны оставаться мягкими и ненавязчивыми

Motion

hover: 150ms
стандартные transform-переходы: 200ms
accordion: 320ms
поддержка prefers-reduced-motion обязательна

Инвентарь компонентов

Текущий UI Kit покрывает:

primary, secondary, ghost и toolbar-кнопки
input, select, textarea и search field
статусные badge, счётчики, chips и метки “Coming Soon”
карточки от компактных виджетов до page-level shell
modal и drawer
banner, empty state, skeleton, avatar и table
sidebar-навигацию, иерархию типографики и правила консистентности

Правила использования

нельзя хардкодить значения токенов внутри компонентов
serif-шрифты не используются
маленькие кнопки не должны превращаться в pill
тяжёлые непрозрачные тени запрещены
анимация должна объяснять изменение состояния, а не украшать интерфейс

Полный объём исходного документа

Исходный UI Kit в репозитории также содержит подробные implementation snippets и правила по:

кнопкам и форм-контролам
badge, карточкам, modal и drawer
таблицам и sidebar
цветовой семантике прав доступа
запрещённым визуальным паттернам