Lacor logistics · Telegram Mini App

Design System
v 0.1

A compact UI library for Lacor's Telegram Mini App — built around the marque navy, signal red, and the lighthouse-net texture. All inputs render at 16 px so iOS Safari won't zoom on focus.

Brand
Lacor · Логистика

Surface
Telegram WebView
iOS / Android · 360–430 dp

Type
Decima Nova Pro
↳ Barlow (fallback)
01 · Brand

Logo lockups

2 marks · PNG
Lacor primary lockup
Primary lockuplogo-full.png
Lacor wordmark
Wordmarklogo-mark.png
Lacor on dark
On ink · knockoutbrightness(0) invert(1)
02 · Foundations

Color palette

5 tokens · brand-locked
Ink
#2A2244
Primary · text
Signal
#C8202C
Action · alert
Surface
#F1F2F6
Page bg
Line
#DEE1E5
Border · divider
Rose
#F5E0DF
Soft signal
03 · Foundations

Typography

Decima Nova Pro · 7 sizes
Display XL800 · 56 / 0.95
Доставка точно в срок
Display L700 · 36 / 1.05
Накладная № 24 819
H1700 · 24 / 1.15
Маршруты на сегодня
H2600 · 18 / 1.25
Контактные данные отправителя
Body400 · 16 / 1.55
Введите номер заказа, телефон получателя и адрес доставки. После сохранения мы сразу же передадим заявку в обработку и пришлём уведомление.
Caption500 · 13 / 1.4
Обновлено 7 минут назад · Курьер в пути
Mono / EyebrowJetBrains · 12 · 0.06em
Tracking · LKR-24819-RU
04 · Foundations

Background & net texture

3 surface treatments
Surface · F1F2F6 · net 100%
White · net 60%
Ink · knockout net 18%
05 · Components

Buttons

Primary action = Signal red

Variants

One signal button per screen, ideally pinned to bottom. Use Ink for safe alternates, Ghost for in-row triggers, Rose for destructive cancellations.

Sizes

Use Large at the screen bottom (the Telegram main-button slot). Small lives inside list rows and toolbars.

With icon · Icon-only · Disabled

Icon-only buttons stay square (48 × 48). Disabled = Line fill, 35% Ink text — never grey out red.

Full-width

Sticky bottom CTA inside a Telegram mini-app — mirrors the native main-button slot but lives in the DOM, so you control state.

06 · Components

Inputs

font-size: 16px · prevents iOS zoom

Text field

Default 52 px tall, 16 px text. Hover thickens the border, focus adds an 8% Ink ring.

font-size: 16px;
Начните вводить — мы подскажем
⧉
Похоже, в адресе ошибка — проверьте домен.

With leading icon · Disabled · Search

Leading slot for inline currency or icon. Disabled uses surface bg, no shadow.

₽
🔒
Подгружено из профиля Telegram
⌕

Textarea

Resizes vertically. 16 px text, comfortable line-height.

0 / 240 символов

OTP / Code entry

Cells are 52 × 60. The active cell carries the focus ring.

2
4
8
1
·
·
07 · Components

Dropdown selects

Tap a trigger to open

Single-select

Mirrors the Input shape — same height, same focus ring. Selected item gets a red checkmark.

Палеты, 1.2 т ▾
Документы≤ 2 кг
Посылка≤ 30 кг
Палеты, 1.2 тевропаллет
Сборный грузLTL
Полная фураFTL
Рефрижератор+2 / −18°
Выберите способ… ▾
Картой онлайн
Счёт юр. лицу
Наличные курьеру
СБП
Подтянется из вашего профиля при следующей заявке

Autocomplete

Used for cities, terminals, contacts — anywhere the dataset is > 10 items. Matches are highlighted in Signal red.

Начните вводить город… ▾
⌕
Поддерживается 124 города
Подольск-1 ▾
⌕
08 · Components

Headers

3 levels · in-app, page, section

App header

Ink fill with knockout net texture at 10% opacity. Sits below Telegram's own chrome.

Lacor Лакор
⌕
⋯

Page header

White card with crumb above title. Use to anchor a screen with a subtitle/description.

Заявки · В работе

Накладная LKR-24819-RU

Подольск → Санкт-Петербург · 712 км · паллеты 1.2 т

Section header

Inline divider for groups within a screen. Right action is optional.

Активные маршруты · 4
Смотреть все
09 · Components

Table

Desktop & mobile card variants

Standard table

Mono uppercase headers, tabular numerals on numeric columns. Use for ops dashboards inside the Mini App (admin only).

Накладная Маршрут Тип Вес Статус Сумма
LKR-24819 Подольск → СПб Паллеты 1 240 кг В пути 28 400 ₽
LKR-24820 Москва → Казань Сборный 320 кг Загрузка 9 100 ₽
LKR-24821 Краснодар → Сочи Реф +2° 540 кг Принято 12 700 ₽
LKR-24822 Екатеринбург → Тюмень Документы 2 кг Задержка 890 ₽
LKR-24823 СПб → Москва Фура (FTL) 19.2 т Черновик — —

Mobile rows

On phone viewports the table collapses into stacked cards — each row carries ID, route, status, and a metadata footer.

LKR-24819-RU
В пути
Подольск → Санкт-Петербург
Палеты · 1 240 кг28 400 ₽
LKR-24820-RU
Загрузка
Москва → Казань
Сборный · 320 кг9 100 ₽
LKR-24822-RU
Задержка
Екатеринбург → Тюмень
Документы · 2 кг890 ₽
10 · Components

Status badges

5 semantic + 1 ghost

Variants

One-word labels. Reserve Signal red for genuinely bad states — delays, failures, rejected.

Создана Принято Загрузка В пути Задержка Черновик
11 · Components

Blocks & cards

Stat · List · Info · Inverse

Stat cards

Big tabular numerals with a mono eyebrow. Use Ink-fill cards sparingly for the lead KPI.

Заявки сегодня
24
↑ 12% к среднему
Выручка, неделя
412 ₽K
↑ 3.4%
Срывы графика
2
↓ 1 vs пн

List items

Tap target ≥ 56 px. Icon slot tints to Signal for the primary CTA in a list.

+
Создать новую заявку
Заполнить за 30 секунд
›
⛵
Мои маршруты
4 активных · 2 завершено сегодня
›
⚐
Сохранённые адреса
12 точек
›

Info block

Neutral white for tips, Rose for warnings. Never use as a CTA — it has no tap target.

i
Документы загрузим автоматически
Если в профиле компании заполнены реквизиты, мы подставим их в накладную при создании заявки.
!
Срок отгрузки истекает через 38 минут
После 19:00 заявка перейдёт на следующий день — стоимость может измениться.

Form controls

Toggle, checkbox, radio, segmented. Radios share a group so only one is active at a time.

Все
Активные
Архив

Bottom tab bar

4 destinations max. Active state uses Signal red dot under the label, ink text.

▤ Главная
⛵ Рейсы
＋ Заявка
⌬ Профиль
13 · Components

Multistep form

N steps · one CTA · animated

Anatomy

One page, N collapsible steps stacked vertically. Only one step is open; completed steps collapse to a one-line summary you can tap to re-edit. The single CTA at the bottom relabels itself — "Далее" for steps 1…N−1, "Отправить" on the last step.

data-multistep · data-step
Адреса можно ввести вручную или выбрать из сохранённых.
⌕
⌕
Палеты, 1.2 т ▾
Палеты, 1.2 т
Сборный груз
Документы
кг
шт
+7
Выберите способ… ▾
Картой онлайн
Счёт юр. лицу
СБП
i
К оплате 28 400 ₽
Сумма зафиксирована и не изменится при отправке сегодня до 19:00.

Step number variants

Pill carries the count "1 / 4". Default outline; filled Ink for completed; faded Line for upcoming.

1 / 4 2 / 4 3 / 4
14 · Components

Picker subheader

Title + segmented · swaps the panel below

Anatomy

Section title on top, segmented control below, then the dependent control. The picker is fed by 2–4 mutually exclusive options — pick one and only that field is visible.

data-picker · data-panel
Товар Заполните 1 поле
Чем подробнее описание, тем точнее таможенный расчёт.
🔗
Начните вводить код или название… ▾
⌕
Используйте 10-значные коды ЕАЭС. Описание усечено до 60 знаков.
15 · In context

Mini App screens

360 × 640 · Telegram WebView
Лакор
✕
Лакор
⌕
В работе
4
К оплате
3
Быстрые действия
+
Новая заявка
30 сек · подставим реквизиты
›
⛵
Активные рейсы
4 в пути
›
Последние
Все
LKR-24819
В пути
Подольск → СПб
LKR-24822
Задержка
Екб → Тюмень
▤Главная
⛵Рейсы
＋Заявка
⌬Профиль
Главная
← Новая заявка
✕
Шаг 1 из 3 · Маршрут

Откуда и куда едем?

⌕
⌕
Палеты, 1.2 т ▾
Палеты, 1.2 т
Сборный груз
Документы
i
Подставим реквизиты компании
Из вашего профиля Telegram.
Создание заявки
← LKR-24819-RU
✕
Накладная
LKR-24819-RU
Подольск → Санкт-Петербург
В пути 712 км
Прогресс
Принято на терминале
15 МАЯ · 09:14 · Подольск-1
Загружено в машину
15 МАЯ · 11:48 · А472ВН 197
В пути · Тверь
сейчас · осталось ~ 6 ч
Доставка получателю
прогноз: 15 МАЯ · 21:00
Трекинг
← Новая заявка
✕
Шаг 2 из 3 · Груз

Что отправляем?

Товар 1 из 3
🔗
Код или описание… ▾
⌕
шт.
Товар · picker subheader
← Новая заявка
✕
Заявка · 4 шага

Оформить доставку

⌕
⌕
Палеты, 1.2 т ▾
Палеты, 1.2 т
Сборный
Документы
кг
шт
+7
Выберите способ… ▾
Картой онлайн
СБП
Счёт юр. лицу
i
К оплате 28 400 ₽
Сумма зафиксирована при отправке до 19:00.
Multistep · 4 шага