АссортиZ · Брендбук
⬇ Токены CSS
Продукт · ЗБС

ЗБС.AZ

Система закупок, бюджета и склада (ЗБС). Основной акцент — хвоя: спокойная опора для действий и данных. Вторичный — медь: только для предупреждений и вторичных действий. Ниже — живые компоненты на токенах брендбука. Переключите тему в шапке — всё перекрашивается само.

KPI-карточки

Крупное число (JetBrains Mono), подпись, дельта к прошлому периоду и мини-график тренда. Дельта — семантикой: рост освоения зелёный, перерасход/просрочка — медь/красный. Спарклайн — акцентом хвоя.

Бюджет освоен, ₽
4 218 500
▲ 8,3%
Остаток на складе, ₽
1 962 040
▼ 4,1%
Заказов в работе
47
▲ 6
Просрочка, ₽
184 900
▲ 2 срока

Заказы и поставки

Числа — моноширинно и по правому краю. Статусы — чипы семантики: оплачен (good), ждёт оплаты (медь/warn), просрочен (bad), черновик (акцент). Ховер строки — акцентный tint.

ПоставщикСтатусСумма, ₽Срок
ООО «Смолторг»Оплачен842 30018.07
ТД «Северный»Ждёт оплаты421 50024.07
ИП Ковалёв А.М.Просрочен184 90014.07
ООО «ПромРесурс»Черновик

Бюджет и склад

Прогресс-бары освоения — плоская заливка акцентом хвоя, без градиента. Перерасход красится в bad. Индикатор остатка на складе: норма — good, мало — медь (предупреждение).

Освоение бюджета

по статьям
Закупка сырья1,82 / 2,40 млн
Логистика0,54 / 0,80 млн
Упаковка0,29 / 0,25 млн
Прочее0,11 / 0,40 млн
В пределах бюджетаПерерасход

Остатки на складе

позиции
Профиль ПВХ 58мм1 240 штнорма
Фурнитура петли86 штмало
Стеклопакет 4-16-4312 штнорма
Уплотнитель, м140 ммало
Крепёж, компл.2 480 штнорма

Кнопки, чипы, фильтры

Хвоя — основной акцент и действия. Медь — вторичные действия и предупреждения. Никаких градиентов и цветных теней. Радиусы 12 px.

Кнопки

Чипы-статусы

Черновик Оплачен Ждёт оплаты Просрочен

Как не сломать бренд ЗБС

Хвоя — основной акцент: действия (кнопки, «Провести заказ»), заливка прогресс-баров, выбранная строка.

Медь — только вторичное: предупреждения (мало на складе, просрочка) и вторичные действия (отклонить, отложить).

Не смешивать хвою и медь как попало и не красить медью основные действия. Без градиентов на кнопках и барах.

Статусы — семантикой (good/warn/bad), НЕ произвольным цветом. Не красить акцентом всю страницу и большие плашки.