UI Kit — формы, таблицы, токены и правила использования

Этот документ объединяет в одном HTML-файле: расширенную цветовую систему, типографику, отступы, закругления, тени, формы, таблицы и примеры “как можно / как нельзя”. Его можно использовать как рабочий стандарт при сборке интерфейсов в Pixso и реализации в Vue + Quasar + AG Grid.

Version 1.0

1. Расширенная цветовая система

Ниже не только основные цвета, но и полные шкалы: brand, secondary, status и neutral. Это важно для hover, active, soft backgrounds, borders, chips и form states.

Brand / Primary scale

Primary = #3F52B5

Primary 50

#F3F5FF

Primary 100

#E4E8FA

Primary 300

#A8B3EE

Primary 500

#3F52B5

Primary 600

#384AA4

Primary 700

#2F3F91

Primary 800

#26347B

Primary 900

#1E2966

Secondary / Support scale

Secondary 100

#EEF0FD

Secondary 300

#B7BFF2

Secondary 500

#5C6BC0

Secondary 700

#424E98

Neutral scale

Neutral 0

#FFFFFF

Neutral 100

#F6F7FB

Neutral 300

#E3E6EF

Neutral 700

#6B7280

Success

100

#E8F5E9

500

#2E7D32

Negative

100

#FDECEC

500

#C62828

Warning

100

#FFF4E5

500

#ED6C02

Info

100

#E3F2FD

500

#0288D1

2. Типографика по группам использования

Шрифты разделены по сценариям: таблицы, кнопки, формы, заголовки и служебные подписи. Для таблицы зафиксировано: основной текст 14px, дополнительный 12px.

Таблицы

Основной текст таблицы — 14px / Regular Использовать для значений ячеек, названий поставщиков, проектов, текстовых данных

Дополнительный текст таблицы — 12px / Regular Использовать для подстроки, примечания, вторичных пояснений, служебной информации

Денежные значения — 14px / Semibold Использовать для суммы, без цветной заливки ячейки

Кнопки и интерактивные элементы

Button text — 14px / Medium Primary, secondary, danger buttons

Chip / Badge — 12px / Medium Статусы, вспомогательные индикаторы

Формы и заголовки

Label — 12px / Medium Подписи к полям формы

Input value — 14px / Regular Значение и placeholder в полях

Card title — 16px / Semibold Заголовок блока или карточки

Page title — 24px / Semibold Главный заголовок экрана

3. Отступы, закругления и тени

Интерфейс должен быть строгим и системным. Основное разделение — за счёт отступов и границ, а не тяжёлых теней.

Отступы

4px

8px

12px

16px

24px

32px

Закругления

Radius 4

Использовать редко

Radius 6

Кнопки, поля

Radius 8

Карточки

Pill

Chips, badges

Тени

Shadow XS

Карточки по умолчанию

Shadow SM

Topbar, floating panels

Shadow MD

Modal

4. Формы — пример применения цветов, радиусов и шрифтов

Ниже показано, как использовать токены в полях ввода: label 12px, значение 14px, границы нейтральные, focus через primary, success / warning / error через semantic colors.

Форма создания счета

Form input guide

Номер счета

Border: neutral-300, radius: 6px, text: 14px

Дата счета

Focus state — primary-500 + мягкая тень

Поставщик

Поставщик найден в справочнике

Проект

Требуется уточнение организации проекта

Сумма к оплате

Проверьте сумму: отсутствует подтверждение НДС

Комментарий

Placeholder = neutral-600, label = 12px medium

5. Таблица — единый шаблон для AG Grid

Таблица должна быть главной рабочей зоной. Деньги выделяются жирностью, а не зелёной заливкой. Статусы передаются через chips. Дополнительная информация в строке — 12px secondary text.

Счета от поставщиков

Readonly / Selectable table

Номер счета	Поставщик	Проект	Автор	К оплате	Статус	Действия
02/278236-1-5 20.03.2026	АО "ТД ЭЛЕКТРОТЕХМОНТАЖ" Договор (основание)	Мызызавод ООО "НСК МОНТАЖЭНЕРГОСТРОЙ"	Непомнящих Д. В. Инженер	49 086,30 ₽ включая НДС	60 дней после поставки	👁💬📎
10086 18.03.2026	ООО "ПРОМЭКО" Основание договора	ЕБ ГП45 ООО "НСК МОНТАЖЭНЕРГОСТРОЙ"	Непомнящих Д. В. Инженер	72 000,60 ₽ подтверждено	Оплачено	👁💬📎
602/278487 17.03.2026	АО "ТД ЭЛЕКТРОТЕХМОНТАЖ" Спецификация 17	Мызызавод ООО "НСК МОНТАЖЭНЕРГОСТРОЙ"	Непомнящих Д. В. Инженер	32 669,80 ₽ требует проверки	На проверке	👁💬📎

Пустое состояние таблицы

Если нет записей, показывать объяснение и действие, а не пустую сетку без контекста.

6. Как можно / как нельзя

Этот раздел особенно важен для аналитиков. Он показывает не только правильный паттерн, но и типичные ошибки: лишний цвет, цветные суммы, тяжёлые заливки, плохая иерархия текста.

✅ Как можно

Поставщик

Сумма

Статус

АО "ТД ЭЛЕКТРОТЕХМОНТАЖ" Договор (основание)

49 086,30 ₽

Ожидает оплаты

• Деньги выделены жирностью, а не зелёной заливкой

• Статус оформлен chip-компонентом

• Есть вторичный текст 12px

• Header светлый и нейтральный

❌ Как нельзя

Поставщик

Сумма

Статус

АО "ТД ЭЛЕКТРОТЕХМОНТАЖ"

49 086,30 ₽

СРОЧНО

• Не красить денежную ячейку зелёным

• Не использовать красный фон вместо статуса-chip без контекста

• Не уменьшать основной текст таблицы до 12px

• Не делать несколько агрессивных акцентов в одной строке

✅ Как можно в форме

Поставщик

Label 12px, value 14px, border neutral-300, radius 6px

• Focus через primary

• Ошибка / success через semantic border + soft background

❌ Как нельзя в форме

Поставщик

Слишком много несистемных цветов

• Не использовать случайные радиусы

• Не применять декоративные цвета вне системы

• Label не должен конкурировать с содержимым

7. Базовые компоненты системы

Минимальный набор UI-компонентов, на которые должны опираться аналитики при проектировании экранов.

Кнопки

Chips / Status

Оплачено Ожидает оплаты На проверке Просрочено

Поля ввода

Поиск