Umra OS · дизайн-система

Umra UI kit

Все кнопки, формы, окна и таблицы проекта — в одном месте. Каждый раздел можно посмотреть в размере web, планшета и телефона, в светлой и тёмной теме, в видах CRM · CEO и Dashboard.

Смотреть компонентыШаблоны страниц

Разделы

ОсновыЦвета, шрифт, отступы, радиусы, тени, иконки и размеры экрана.КнопкиОсновные, тихие, опасные, золотые кнопки, кнопки-иконки, группы и состояния.ФормыТекстовые поля, подпись и подсказка, ошибка, пароль, телефон, файл.ВыборВыбор из списка, список с поиском, диапазоны дат и чисел, отметки, переключатель.ОкнаОкно (Modal), форма в окне, подтверждение, нижнее окно, боковое меню.ТаблицыТаблица, фильтры колонок, страницы 10 · 25 · 50, вид карточками.НавигацияБоковое меню, верхняя полоса телефона, вкладки, выбор вида.СостоянияМетки статуса, сообщения, уведомления, пустой список, загрузка.КарточкиКарточка, показатель, карточки фирмы и тура.ГрафикиСтолбчатый график, горизонтальные полосы, линия тренда, кольцо, прогресс.АнимацияПоявление, карточка с подсветкой, счётчик, анимация окна и уведомления, нажатие.ТокеныФайлы цветов и размеров: JSON (мобильные), CSS, Tailwind 4.Шаблоны страницСтраница списка, профиль, вход — на web, планшете и телефоне.

Главные правила

Один вид

Каждая кнопка, форма, окно и таблица — как здесь. Новая страница собирается из частей этого кита.

Формы в окне

В dashboard на странице — данные и кнопка «Изменить»; поля открываются в окне, ошибка сервера — внутри окна.

Закрытие через ×

Окно закрывается только ×; браузерные confirm() и <select> не используются — только свои окна и Dropdown.

Таблица 10 · 25 · 50

Каждый список — по 10 строк, над ним панель, под каждым столбцом фильтр, действия строки — иконки.

Сначала телефон

Область нажатия ≥ 44 px, форма в одну колонку, меню выезжает слева, номер телефона под маской.

Токен, а не цвет

Цвет в коде не пишется: bg-brand-blue, text-ink-3. Тёмная тема и три вида переключаются сами.

Как пользоваться

Имена классов те же, что в umra-web: ui-field, ui-button-primary, ui-card, ui-table… React-компоненты те же, что в админке: Modal, FormDialog, Dropdown, ListToolbar (components/kit).