Компоненты

Основы

Цвета, шрифт, отступы, радиусы, тени, иконки и размеры экрана.

Логотипы и favicon

Родительский бренд и шесть продуктов из актуального брендбука.

Текущая редакция · V19 · На согласованииОткрыть библиотеку бренда

Umra EcosystemSVG PNG

Umra OSSVG PNG

Umra MarketSVG PNG

Umra CRMSVG PNG

Umra DashboardSVG PNG

Umra TravelerSVG PNG

Umra PartnerSVG PNG

Umra Ecosystem · faviconSVG PNG

Правила

Сохраняйте исходные пропорции и охранное поле.
Ecosystem и OS используют общий знак. Чтобы различать их, используйте полное название.
CEO входит в CRM; Dashboard остаётся самостоятельным продуктом. Для Partner используется актуальная подпись в кривых.

Цвета

Цвет не пишется напрямую — только токен: bg-brand-blue, text-ink-3, border-line. Тёмная тема и три вида (CRM · CEO, Dashboard, Сайт) подменяют эти токены.

Бренд

brand-blue

Основной изумруд: кнопка, активный элемент, ссылка

brand-blue-dark

Тёмный изумруд: заголовок, нажатая кнопка

brand-blue-soft

Мягкий фон: выбранная строка, активный раздел

brand-pink

Золотой акцент: кольцо фокуса, метка

gold

CTA сайта: «Забронировать»

side

Фон бокового меню

Текст

ink

Основной текст

ink-2

Второстепенный текст

ink-3

Подсказка, подпись, неактивное

Поверхности

ground

Фон страницы

panel

Карточка, окно

panel-2

Заголовок таблицы, hover

line

Граница

line-2

Сильная граница, hover

Статус

ok

Успех

ok-soft

warn

Предупреждение

warn-soft

crit

Ошибка, удаление

crit-soft

info

Информация

info-soft

Правила

Цвета бренда — изумруд #00583F и золото #C79A3C (Ivory & Pine).
Красный и жёлтый — только состояния (ошибка, предупреждение), не цвета бренда.
Каждая пара цветов проходит контраст WCAG AA — проверяйте перед добавлением нового цвета.

Шрифт

Один шрифт во всех приложениях: текст — Inter, числа и подписи — JetBrains Mono (dashboard, CRM, CEO, сайт, маркетплейс). Файлы лежат в самом проекте, Google Fonts не используется.

Заголовок страницыpanel-title · 26 / 800

Заголовок блокаtext-[20px] font-bold · 20 / 700

Заголовок окнаtext-[16px] font-bold · 16 / 700

Основной текст — формы и текстtext-[15px] · 15 / 400

Ячейка таблицыtext-[13.5px] · 13.5 / 400

Подсказка под полемtext-[12.5px] text-ink-3 · 12.5 / 400

Подпись — название поляui-label · 11.5 / 700 mono

12 450 000 сумtnum font-bold text-[22px] · raqamlar: tnum

InterTTF для мобильных:400 500 600 700 800 OFL

JetBrains MonoTTF для мобильных:400 500 700 OFL

Noto Sans ArabicTTF для мобильных:400 500 600 700 OFL

Правила

Web: WOFF2 (переменная насыщенность) — @font-face в app/fonts.css; mobile: статичные TTF (400, 500, 600, 700, 800).
В Inter есть кириллица — узбекский, русский и английский текст выводятся одним шрифтом.
Арабские буквы рисует Noto Sans Arabic: он стоит в обоих списках шрифтов, латиница и цифры остаются в Inter.
Рабочий инструмент плотный: основной текст 15 px, таблица 13.5 px.
Деньги и числа выравниваются в столбик — всегда tnum.
На странице один заголовок — название в верхней полосе (второго h1 нет).

Направление (RTL)

Арабский читается справа налево: язык ставит <html lang="ar" dir="rtl">, и страница зеркалится сама. Остальные три языка — dir="ltr".

dir="ltr"+998 90 123 45 671 250 $

dir="rtl"+998 90 123 45 671 250 $

Правила

В классах только логические свойства: ms-, me-, ps-, pe-, start-, end-, text-start, text-end, border-s, border-e. В CSS вместо left и right — margin-inline, inset-inline, text-align: start.
Иконки со смыслом направления зеркалятся (chev, arrowleft, login, logout, enter, send): Icon сам ставит класс yon. Шеврон, повёрнутый вверх или вниз, не зеркалится. Стрелка в тексте — <span className="yon">→</span>.
Для transform — переменная --yon: 1 или -1 в арабском (переключатель, выдвижное меню, сдвиг иконки).
Телефон, паспорт, номер рейса, номер договора и код — dir="ltr". Цифры всегда 0-9, календарь григорианский.
Между тысячами неразрывный пробел (fmtNum, numberLocale): обычный пробел в арабской строке превращает «1 250» в «250 1». Дата и время и в арабском 15.10.2026, 07:40.
Текст денежного поля — dir="ltr"; само поле зеркалится, валюта уходит влево.
Графики по времени (Columns, Spark) остаются слева направо; Bars, Progress и Legend зеркалятся.
В арабском тексте нет межбуквенного интервала (буквы соединяются): его убирает правило :lang(ar), мелкие подписи — 12.5 px.
Стрелки клавиатуры тоже зеркалятся: в календаре и на вкладках языков в арабском ← — следующий.

Отступы, радиус, тень

Отступы с шагом 4 px (Tailwind: gap-2 = 8 px). Радиус: поле, кнопка, страницы и переключатели — 12 px, выбор внутри — 9 px, карточка 14–16 px.

Отступ

4px

8px

12px

16px

20px

24px

32px

Радиус

base

полный

Тень

карточка

окно

Размеры экрана

Три устройства — три раскладки. Кнопкой «Устройство» вверху посмотрите любой раздел в реальной ширине.

Телефон< 640 pxsm dan oldin

Планшет640 – 1023 pxsm: md:

Web≥ 1024 pxlg:

Правила

Телефон < 640 px: одна колонка, боковое меню выезжает слева, заголовок в тёмной верхней полосе.
Планшет 640–1023 px: форма в две колонки, таблица прокручивается вбок или переходит в карточки.
Web ≥ 1024 px: постоянное меню слева, таблица целиком.
Область нажатия пальцем — не меньше 44 × 44 px: при (pointer: coarse) все кнопки увеличиваются до этого размера.

Иконки

Формы Lucide, один спрайт (IconSprite). Линия 1.75, цвет — цвет текущего текста. У иконки всегда есть название: текст или data-tip + aria-label.

dash

kanban

users

msg

phone

receipt

package

wallet

truck

calc

note

trend

chart

bell

building

send

search

filter

sort

pencil

plus

minus

trash

copy

download

upload

refresh

more

clock

calendar

user

key

shield

cog

sliders

eye

eye-off

x

check

list

grid

menu

chev

arrowleft

logout

login

plug

zap

moon

spark

history

server

device

tablet

mobile

camera

pin

card

info