Дизайн-система Str_control
Живая витрина всех визуальных примитивов проекта. Все экраны строятся из этих кирпичиков, в этих цветах и шрифте. Источник истины — docs/FRONTEND_STYLEGUIDE.md.
Палитра
Бренд
Нейтральные
Статусы ячеек шахматки (источник истины — таблица statuses)
⚠️ Два зелёных в палитре: бренд-мятный #7EE7A7 (UI-акцент) и статус #92D050 (доменный лайм). Мятный никогда не используется как заливка ячейки. Статус accepted никогда не используется для ссылок/кнопок UI.
Типографика — Inter
Display 32 / Inter 700
H1 главных экранов
H1 24 / Inter 700
Заголовки экранов
H2 20 / Inter 600
Заголовки секций
H3 16 / Inter 600
Подзаголовки, шапки карточек
Body 14 / Inter 400 — основной текст интерфейса, кнопки, формы, таблицы. Этот размер должен читаться без напряжения с расстояния вытянутой руки до планшета на стройплощадке.
Основной размер UI
Small 12 / Inter 400 — подписи под полями, мелкие подписи в шахматке, метаданные карточек.
Подписи
Tiny 11 / Inter 500 — тултипы, бейджи, индикаторы.
Тултипы и бейджи
Кнопки
Варианты
Размеры
Состояния
С иконками
Поля ввода
Виден всем участникам проекта
Пароль слишком короткий — минимум 8 символов
Статусные бейджи
Ячейки шахматки
Базовые состояния
С индикаторами вложений
Интерактивные состояния
Фрагмент шахматки в контексте
| Этаж | Секция 1 — ГВС, ХВС | Секция 1 — Отопление | ||||
|---|---|---|---|---|---|---|
| Стояки ХВС/ГВС | Стояки ВК | Прокладка/изоляция | Счётчики | Главный стояк | МОП | |
| 10 | 100% |
100% |
💬100% |
50% |
100% |
70% |
| 9 | 📷100% |
80% |
60% |
100% |
40% |
|
| 8 | 30% |
💬 📷 |
20% |
|||
| 7 | ||||||
Жёлтая точка справа — есть неопубликованные изменения. Две ячейки в строке 7 выделены мятной обводкой — multi-select для массового ввода.
Карточки
ЖК Северный
Корпус 1
23 этажа + цоколь + парковка
Навигация
Уведомления и диалоги
Toasts
Dialog
Опубликовать изменения?
Будет создан слепок текущего состояния. 137 неопубликованных изменений станут видны всем пользователям проекта.
Состояния экранов
Loading (skeleton)
Empty state
Здесь пока пусто
Создайте первый проект, чтобы начать
Error state
Не удалось загрузить
Проверьте соединение и повторите
Иконки (lucide-react, stroke 1.5)
Размеры: w-3 h-3 (12px индикаторы) · w-4 h-4 (16px плотные списки) · w-5 h-5 (20px основной UI)