Risal · система
Palette · OKLCH

Violet · h 300

Plum · h 318

Акценты

Нажмите на цвет — скопируется значение oklch(). Шаги ровные по светлоте L, оттенок держится по h.

Иконка · новые концепты
Концепт иконки: стеклянное облачко чата
D · Пузырьunified inbox; жёлтая точка — ИИ
Концепт иконки: искра ИИ на стеклянной сфере
E · ИскраИИ-помощник в центре
Концепт иконки: стеклянный слайдер со стрелкой
F · Слайдеркак кнопка “дальше” в приложении
40 / 20 px

Сплэш

Loading

Ошибка

No connection

С данными

Show:
Светлая тема · выбранное:

Первый запуск · данных ещё нет

Вход и первый запуск

Отдельный сценарий до входа в приложение. Заставка — в “Системе” вверху страницы. Формы кликаются: попробуйте войти с пустыми полями, с паролем “wrong” и с любым другим.

1 · Вход · ошибки и загрузка

2 · Sign up

3 · Восстановление · почта → код → пароль

4 · Приглашение в команду

5 · Знакомство · 3 слайда

6 · Имя, язык и разделы

7 · Разрешения · микрофон, уведомления, геопозиция

Системные экраны

Показываются вместо приложения: когда сервис недоступен или версия устарела. Остальные состояния — загрузка, нет сети, ошибка, обновление — встроены в рабочий телефон: кнопки “Показать” под ним.

1 · Сервер недоступен

2 · Обязательное обновление

Шаг 13 · Большие экраны — черновик

Одно приложение — четыре устройства, и по каждому можно ходить: нижнее меню (или боковая панель на iPad альбомном) переключает Главную, Чаты и Инструменты, аватар открывает Профиль. С главной: виджет «Tasks» или день в полоске → календарь, «Chats» → чаты; в Инструментах «Calendar» → календарь; в Профиле разделы открываются справа. Все экраны собраны из настоящих компонентов рабочего телефона. Узко (iPhone Duo закрытый, Android ≤ 600) — как телефон. Средне (Duo открытый, фолды, iPad в портрете · 600–900) — две колонки, нижнее меню остаётся. Широко (iPad альбомный, планшеты · ≥ 900) — боковая панель и до трёх колонок.

ThemeLanguage

1 · iPhone Duo закрытый · 5.4″ · узкая

2 · iPhone Duo открытый · 7.6″ · средняя

3 · iPad 11″ · альбомная · 1194 pt · широкая · Android-планшет так же

4 · iPad 11″ · портретная · 834 pt · средняя

Уведомления · состояния

Сам экран — в рабочем телефоне: Профиль → “Уведомления” или ⋯ в переписке → “общие настройки”. Здесь — состояния, которые там сложно увидеть: тест на экране блокировки, режим “Выкл.” и запрет в настройках iPhone.

1 · Тестовое уведомление

2 · Режим “Выкл.”

3 · Запрещено в iPhone

Дизайн-система · инвентаризация

Всё, что уже нарисовано в рабочей версии, собрано по типам. Под каждым элементом — его класс и реальные размеры. Красным отмечено то, что расходится со стандартом. Цифры сверху считаются по живой странице при каждом открытии.

Стандарт · токены

сетка 4 pt · iOS HIG + Material 3

Шрифт · --fs-* (9 размеров, без дробей)

--fs-captionАа11 pt · Caption 2 · подписи mono, метки, счётчики
--fs-footnoteАа13 pt · Footnote · вторичный текст, подписи строк
--fs-subheadАа15 pt · Subhead · текст в списках и чатах
--fs-bodyАа17 pt · Body / Headline · заголовок строки, кнопки, поля
--fs-title3Аа20 pt · Title 3 · заголовок блока
--fs-title2Аа22 pt · Title 2 · заголовок карточки
--fs-title1Аа28 pt · Title 1 · заголовок экрана
--fs-largeАа34 pt · Large Title · большой заголовок
--fs-displayАа56 pt · Display · часы, таймер, большие цифры

Скругления · --r-*

--r-sm12 pt · иконки-плитки
--r-md16 pt · поля ввода, мелкие карточки
--r-lg24 pt · карточки, списки, сегменты
--r-xl32 pt · шторки, большие карточки
--r-full∞ · кнопки, чипсы, теги, аватары

Высота элементов · --h-*

--h-xsXS32 pt · кнопка в строке
--h-smSM36 pt · чипсы, кнопки в карточке, сегмент
--h-mdMD44 pt · кнопки-иконки, поиск · мин. область нажатия iOS
--h-lgLG56 pt · главная кнопка, поле ввода
--h-tagTAG24 pt · теги и метки (область нажатия — 44)

Иконки · толщина линии 2 (12 → 2.4, 32+ → 1.8)

иконка 12внутри тегов
иконка 16в строках и кнопках S
иконка 20в кнопках и списках
иконка 24навигация, панели
иконка 32пустые состояния
иконка 40иллюстрации

Отступы · --sp-*

--sp-14 pt
--sp-28 pt
--sp-312 pt
--sp-416 pt
--sp-624 pt
--sp-832 pt
Правила: 1 pt (iOS) = 1 dp (Android) = 1 px в макете. Все размеры кратны 4, дробей нет — на экранах @3x дробные размеры дают полпикселя и размытый текст. Всё нажимаемое меньше 44 получает невидимую область нажатия 44×44 (iOS) / 48×48 (Android). Минимальный размер текста — 11. В новых экранах пишем только токенами: font-size:var(--fs-subhead), border-radius:var(--r-lg), height:var(--h-md), gap:var(--sp-3).

Цвета

✓ одна палитра OKLCH · вне токенов 0 (было 126)

Палитра · OKLCH · 7 оттенков × 10 ступеней

violetViolet · акцент
50
100
200
300
400
500
600
700
800
900
plumPlum · фон и поверхности
50
100
200
300
400
500
600
700
800
900
950
magentaMagenta
50
100
200
300
400
500
600
700
800
900
roseRose · ошибки, срочно
50
100
200
300
400
500
600
700
800
900
amberAmber · предупреждения
50
100
200
300
400
500
600
700
800
900
mintMint · успех, онлайн
50
100
200
300
400
500
600
700
800
900
skySky · инфо, ссылки
50
100
200
300
400
500
600
700
800
900
w-*белый с прозрачностью · стекло, линии, текст
04
08
12
16
24
32
48
64
80
90
k-*чёрный с прозрачностью · тени, скрим
04
08
12
16
24
32
48
64
80
90

Смысловые токены → ссылаются на палитру · тёмная тема

--accent→ violet-300 · кнопки, выделение
--accent-hi→ violet-200 · текст-акцент
--accent-deep→ violet-600 · нажатие
--surface→ plum-800 · листы, меню
--on-light→ plum-800 · текст на светлом
--danger→ rose-500 · удалить, ошибка
--danger-text→ rose-300 · текст ошибки
--success→ mint-200 · готово
--warn-hi→ amber-200 · внимание
--page→ plum-200 · фон страницы
--ink→ white · текст
--ink-2→ w-80 · вторичный
--ink-3→ w-64 · подписи
--glass→ w-08 · стекло
--stroke→ w-24 · рамка

Светлая тема · те же токены

--accent→ violet-600 · кнопки
--accent-hi→ violet-600 · текст-акцент
--accent-deep→ violet-700 · нажатие
--surface→ почти белый · листы
--on-light→ белый · текст на тёмной кнопке
--danger→ rose-500 · удалить
--danger-text→ rose-600 · текст ошибки
--success→ mint-600 · готово
--warn-hi→ amber-600 · внимание
--page→ plum-50 · фон
--ink→ plum-900 · текст
--ink-2→ plum-900 72% · вторичный
--ink-3→ plum-900 52% · подписи
--glass→ белый 55% · стекло
--stroke→ plum-900 12% · рамка
Стандарт: все цвета записаны в oklch() и живут только в :root. В интерфейсе — только var(--…): смысловой токен (--accent, --danger…) или ступень палитры (--violet-300, --w-12). Близкие цвета объединены в одну ступень: ступени по светлоте L = .97 · .93 · .86 · .78 · .69 · .60 · .52 · .44 · .35 · .27, прозрачность белого/чёрного — 10 уровней. Исключение — фирменные цвета Telegram и WhatsApp в их логотипах.

Типографика

шрифты Manrope + JetBrains Mono — ок; размеров слишком много
Стандарт: 9 размеров по шкале iOS (совпадает с Material 3): 11 · 13 · 15 · 17 · 20 · 22 · 28 · 34 · 56 — без дробей. Начертания: 300 для крупных цифр, 400, 500, 600.

Скругления

Стандарт: 12 (иконки-плитки) · 16 (поля) · 24 (карточки, списки, сегменты) · 32 (шторки) · «пилюля» (всё нажимаемое, теги, аватары).

Кнопки · один компонент Button

—

Размер × вид

.lg.md.sm.xs.primary
.accent
стекло
.soft
.ghost
.danger

Опции

Стандарт: одна кнопка .btn + модификаторы. Размер: .lg 56 — главное действие экрана, .md 44 — по умолчанию, .sm 36 — в карточке, .xs 32 — в строке. Вид: .primary, .accent, стекло (по умолч.), .soft, .ghost, .danger, .red. Опции: .block, .icon, .loading, disabled. На экранах: только этот компонент — старые классы (au-go, c7-go, c7-ghost, c7-mini, tk-btn, obbtn, ntb, au-sso) удалены из кода.

Кнопки-иконки · тот же Button c опцией .icon

—

Размер × вид

.md 44.sm 36.xs 32.lg 56стекло
мягкая
основная
акцент
без фона
опасная

Опции

Стандарт: отдельного компонента нет — это Button с опцией .icon: круг, ширина = высоте, те же размеры (.md 44 навигация, .sm 36 в шапке карточки и строке, .xs 32, .lg 56) и те же виды. Иконка 20–24, обводка 2. Опции: точка-уведомление .dot, .loading, disabled. На экранах: только этот компонент — старые классы (ibtn, tk-ib, back, cc-plus, a9-ib, ib) удалены из кода.

Чипы · один компонент Chip

—

.md 36 · фильтр (выбирается)

.sm 32 · сводка, период

online 6/7

.xs 24 · метка и статус · тоны

contract
Complaint
Pending
Paid
Owner
Client
Стандарт: одна .chip + модификаторы. Размер: .md 36 — фильтр (по умолч.), .sm 32 — сводка и период, .xs 24 — метка/статус в строке. Состояние: .on — белый. Тон: нейтральный, .red, .amber, .mint, .violet; для фильтра — .red-text. Опции: счётчик .n, точка или иконка слева. На экранах: только этот компонент — старые классы (c7-chips, a9-pills, ktags, c7-flag, c7-who, a9-tag, a9-role, kp-st) удалены из кода.

Сегменты · Segmented

—
Стандарт: один .segm: .md 44 (по умолч.), .sm 36; внутренний отступ 4, всё «пилюлей», выбранный — белый (aria-checked="true" или .on). Опции: .block, иконка или счётчик в кнопке. На экранах: только этот компонент — старые классы (seg, c7-seg, cc-seg) удалены из кода.

Переключатель · Switch

—
Стандарт: отдельный компонент .switch (нажмите — переключается): .md 50×30 (по умолч.) и .sm 40×24 для плотных списков. Включён — мятный, вариант .accent — фиолетовый, disabled — 40%. Состояние — role="switch" + aria-checked. На экранах: только этот компонент — старые классы (sw, c7-sw2) удалены из кода.

Поля ввода · один компонент TextField

—
Стандарт: эталон — поле «Почта» со входа: подпись 11 над значением 15, высота 56, скругление 24, рамка --w-16, фон --w-08; в фокусе рамка --w-48. Один .field + модификаторы. Размер: .lg 56 с подписью (по умолч.), .md 44 без подписи — поиск, «пилюля». Опции: .has-icon — иконка слева, .act — кнопка справа («показать», очистить), .hint — подсказка под полем, textarea — многострочное. Состояния: фокус, .err (красная рамка и подсказка), disabled. На экранах: только этот компонент — старые классы (au-in, search, c7-search, c7-ta) удалены из кода.

Заголовки разделов · один компонент SectionHeader

—
Pinned
Channels2
Ownerchange
Modulescan be changed later
Today7
No line
Стандарт: один .sec: название mono 11 заглавными, линия с затуханием (в RTL — в обратную сторону), отступы 22 сверху / 10 снизу. Опции справа (всегда после линии): счётчик .n, ссылка-действие .act, подпись small. Размер: по умолч. 11, .lg 13 — для заголовка группы на отдельной странице. .plain — без линии, .first — без верхнего отступа. На экранах: только этот компонент — старые классы (lsec, pj-sec, wgt, tk-h, whead, shlabel) удалены из кода.

Строки списков · один компонент ListRow

—
AI auto-replyafter hours
Стандарт: одна .lrow внутри группы .lgroup (стеклянная карточка, скругление 24, разделители). Размер: .md 56 (по умолч.), .sm 44 — одна строка, .lg 72 — с аватаром и двумя строками. Слева: иконка .ri 36 (тон .on мятный, .red) или Avatar. По центру .t: заголовок 15 + подпись 13. Справа: шеврон, Switch, значение em или радио .rd. Опции: .pick — строка-выбор в шторке (карточкой, .on — выбрана), .red — опасное действие. На экранах: только этот компонент — старые классы (p8-list, p8-row, c7-opt) удалены из кода.

Аватары · один компонент Avatar

—

Размеры · xs 24 · sm 36 · md 44 · lg 56 · xl 84

NQ
FH
BS
NS
K

Тон · 7 градиентов по имени + ИИ

NQ
TS
NS
BS
MR
JN
AH
AI

Опции

NQ
FH
K
RK
NQFHNS+4
Стандарт: один .avatar. Размер: .xs 24 (в метке, стопке), .sm 36 (шторки), .md 44 (список, по умолч.), .lg 56 (профиль), .xl 84 (карточка клиента); шрифт инициалов растёт по шкале 11 → 34. Форма: круг, .grp — группа (скруглённый квадрат). Тон: .t1…t7 — градиент выбирается по имени, .ai — ИИ. Опции: .chn значок канала в углу, .dot онлайн, .edit карандаш, .avatars — стопка с наложением. На экранах: только этот компонент — старые классы (face, swav, p8-ava, pava) удалены из кода.

Пустые состояния · один компонент EmptyState

—
No tasks

Add your first task.

All read

New notifications will appear here.

No flags

Flagged chats — complaints, urgent, payments — will appear here.

Backlog is empty

Tasks without a date will land here.

Стандарт: один .empty-state: иконка в стекле, заголовок, текст 15, кнопка. Размер: .sm — иконка 56, заголовок 17 (внутри карточки или виджета); .md — 72 / 22 (пустой экран, по умолч.); .lg — стеклянный шар 150 / 28 (пустой раздел целиком). Тон иконки: нейтральный, .red, .mint, .violet. Опции: текст, кнопка Button. На экранах: только этот компонент — старые классы (fempty, c7-empty, cc-empty) удалены из кода.

Уведомления-тосты · один компонент Toast

—
Copied
Flag set
Couldn’t send
Chat archived
Стандарт: один .snackbar: стеклянная «пилюля» 36, текст 13, одна строка. Позиция: снизу над меню (по умолч.) или .top — под шапкой. Тон: нейтральный, .ok, .red — иконка слева. Опции: .act + кнопка .undo («Отменить»), высота 44. На экранах: только этот компонент — старые классы (gtoast, c7-toast) удалены из кода.

Шторки и иконки

следующий шаг
Стандарт: Sheet: один компонент (ручка, заголовок с иконкой 40, контент, кнопки внизу) вместо c7-sheet, xsheet, cr-sheet. Иконки: один набор, обводка 2 — сейчас наборы иконок скопированы в 6 скриптов, обводка 1.6–2.6.