Раздел 9.1 ТЗ
Витрина компонентов дизайн-системы
Единый визуальный язык для публичного сайта, личного кабинета владельца и панели управления Filament. Mobile-first, контраст WCAG AA, базовый шрифт от 16 px, минимальная зона нажатия 44 px.
1. Цветовая палитра и токены
#0f172a
Slate 900 (Основа)
Фон шапки, футера, текст
#ea580c
Orange 600 (Акцент)
Кнопки, CTA, активные пункты
#059669
Emerald 600 (Успех)
Оплачено, принято
#f59e0b
Amber 500 (Внимание)
На проверке, заявлена
#e11d48
Rose 600 (Ошибка)
Долг, сторно, отказ
#e2e8f0
Slate 200 (Нейтраль)
Границы, не передал
2. Типографика (Локальный Inter Cyrillic)
H1 / 36px ExtraBold:
Гаражно-строительный кооператив «Бумажник»
H2 / 24px Bold:
Карточка бокса 127 · ряд 3
H3 / 18px SemiBold:
Показания счётчика и расчёт электроэнергии
Body / 16px Regular (не меньше 16px):
Владельцы передают показания электросчётчиков в личном кабинете. Расчёт суммы выполняется автоматически по действующему тарифу без использования чисел с плавающей точкой.
3. Кнопки (Touch Target ≥ 44 px)
4. Статусные бейджи карточки бокса (ТЗ разд. 5.3)
● оплачено
● долг 5 360 ₽
● на проверке
● оплата заявлена
● не передал
5. Плитка карточки бокса (адаптив под экран 360 px)
Бокс 127
Ряд 3 · Иванов И. И.
Показания:
4210 → 4330
Расход:
120 кВт·ч
К оплате:
5 360 ₽
6. Паттерны очередей председателя
4
Показания на проверке
7
Оплат ждут подтверждения
12
Должников по взносам