Rocketmind

Компоненты

Базовые UI-примитивы Rocketmind. Каждый компонент использует только токены дизайн-системы — никаких одноразовых значений.

Кнопки

Четыре варианта × четыре размера. Высоты совпадают с инпутами — LG (48px) / MD (40px) / SM (32px) / XS (28px).

LG / 48px
MD / 40px
SM / 32px
XS / 28px

Primary

Главное действие на экране. Hero CTA, финальный шаг формы. Один на странице.

btn-primary
btn-primary
btn-primary
btn-primary

Secondary

Второстепенное действие рядом с primary. Фильтры, переключатели.

btn-secondary
btn-secondary
btn-secondary
btn-secondary

Ghost

Тихое нейтральное действие: серый фон и border.

btn-ghost
btn-ghost
btn-ghost
btn-ghost

Destructive

Необратимые действия. Удаление, архивация. Требует диалог подтверждения.

btn-destructive
btn-destructive
btn-destructive
btn-destructive

Состояния

Hover

bg #FFE040 (–10%)
opacity 0.88
bg --rm-gray-2
opacity-90

Disabled

opacity 0.5 + cursor not-allowed
opacity 0.5 + cursor not-allowed
opacity 0.5 + cursor not-allowed
opacity 0.5 + cursor not-allowed

Loading

opacity-80 + Loader2 spinner
MD / 40px
SM / 32px
XS / 28px
Micro / 20px

Крупные icon-кнопки для hero-секций и standalone-действий.

Основные icon-кнопки: undo, redo, тема, навигация.

Toolbar-кнопки рядом с компактными текстовыми кнопками.

Inline-контролы: удалить карточку, обновить саммари. Выровнен с Checkbox/Radio 20×20.

Бейджи

Лейблы для статусов, категорий и тегов. Шрифт — Loos Latin Condensed Medium, uppercase. Три размера: SM (20px) / MD (24px) / LG (28px).

Цвет
Variant
SM / 20px
MD / 24px
LG / 28px
Neutral
Мета
Тег
Статус
Yellow
Мета
Тег
Статус
Violet
Мета
Тег
Статус
Sky
Мета
Тег
Статус
Terracotta
Мета
Тег
Статус
Pink
Мета
Тег
Статус
Blue
Мета
Тег
Статус
Red
Мета
Тег
Статус
Green
Мета
Тег
Статус

Контекстные примеры

AI-агент «Аналитик»

Финансовый анализ и прогнозирование

АктивенPro
Статусы:АктивенОжиданиеОшибкаАрхив

Счётчик-индикатор (на иконке)

без счётчика
count = 2
count = 12

Жёлтый круглый оверлей на углу иконки-кнопки. Показывает число активных элементов (выбранных фильтров). Скрыт при значении 0. См. DS MD §6.1.1.

Табы

Tabs переключают соседние панели без смены экрана. default для равноправных наборов данных, secondary для локальной навигации.

Ключевые сценарииПример

Default

Сегментированный список с одной активной вкладкой. Для равноправных наборов данных.

Используй для переключения соседних наборов данных: «Все кейсы / Активные / Архив».

With Icons

Иконка работает как вспомогательный смысловой маркер и не заменяет текстовую метку.

Используй только известные 16px-иконки Lucide без цветных акцентов.

Secondary

Тихая навигация внутри секции с подчёркнутым активным состоянием.

Нужен для тихой навигации внутри уже выбранного объекта: кейса, агента, карточки.

Состояние / частьТокеныПравило
TabsList defaultbg --rm-gray-1 · border --border · radius --radius-smКонтейнер для сегментированных табов с общей подложкой.
TabsTrigger defaulttext --muted-foregroundНеактивный триггер остаётся нейтральным.
Hoverbg --rm-gray-2 · text --foregroundHover только на триггере, без glow и тени.
Activebg --background · border --border · text --foregroundАктивный таб — вложенная поверхность внутри списка.
Disabledopacity 0.4Вкладка видна в иерархии, но не интерактивна.
Secondary activeunderline --rm-yellow-100Подчёркивание заменяет filled-background.

Чекбоксы

Паттерн для независимого yes/no-выбора. Основа: 16×16 control, общий focus-visible и один акцент для checked и indeterminate.

Default

Disabled

Indeterminate

Основа

16×16 control, общий focus-visible и один акцент для checked и indeterminate.

CONSENT

Основной паттерн: checkbox + label + короткое пояснение.

BULK SELECT

Indeterminate нужен только там, где один master-checkbox управляет списком элементов.

Частичный выбор
Правила

Checkbox переключает независимый yes/no-выбор. Если пользователь должен выбрать ровно один вариант, используй Radio.

Размер фиксированный: 16x16 px. Радиус берём только --radius-sm, чтобы control совпадал с flat-характером кнопок и input.

Checked и indeterminate используют один акцентный фон --rm-yellow-100. Разница между ними читается только по внутренней пиктограмме.

Disabled-состояние не прячем, если оно помогает объяснить этап процесса или состав недоступных действий.

Радио

Паттерн для выбора одного варианта из группы. Основа: 16×16 control, один активный выбор и headless-композиция внутри строки.

Default

Disabled

Required

Основа

16×16 control, один выбор в группе и required без отдельного декоративного состояния.

Required не меняет визуальный стиль control. Обязательность показываем текстом, а не дополнительным декором.

HEADLESS

Control живёт внутри более крупной строки выбора.

STANDALONE

Лаконичный radio без сложной карточки: полезен в таблицах, списках каналов и компактных настройках.

Правила

Radio используем только там, где пользователь обязан выбрать ровно один вариант из группы.

Required остаётся логикой формы, а не отдельным визуальным вариантом: control не получает новый цвет, бейдж или иконку.

Headless-композиция допустима, если сама строка выбора уже использует существующие токены surface: border-border, bg-card, accent-background по состоянию.

Standalone radio подходит для плотных списков. Если у варианта есть пояснение длиннее одной строки, переходи к строке-выбору с label и description.

Тумблер

Немедленный on/off. Squircle-форма (rounded-sm, 4px) — как у всех контролов DS.

BOOLEAN SWITCH

Тумблер для on/off. Squircle-форма (rounded-sm). Два размера.

Default / 36×20

SM / 28×16

Default

Disabled

TEXT SWITCH

Сегментированный переключатель из двух пунктов. Композиция из Tabs с двумя TabsTrigger.

Default / 40px

SM / 32px

Default — формы и настройки

Период оплаты
Режим просмотра

SM — toolbar и компактные панели

Зум
Фильтр
ICON SWITCH

Tabs с двумя иконками. Для компактных toolbar-переключателей.

Default / 40px

SM / 32px

Default

Тема
Вид каталога

SM

Тема
Вид каталога
Токены и размеры
ТипРазмерВысотаИмпорт
Booleandefault36×20
Booleansm28×16
Textdefault40px (trigger 32px)
Textsm32px (trigger 28px)
Icondefault40px (trigger 32px)
Iconsm32px (trigger 28px)

Boolean Switch переключает on/off. Text и Icon Switch переключают режим из двух вариантов.

Text / Icon Switch реализуется через Tabs с двумя TabsTrigger. Отдельного компонента нет.

SM-размер (32px) выравнивается по высоте с Button size="icon". Подходит для toolbar.

Default-размер (40px) используется в формах, настройках и standalone-переключателях.

Ступенчатый слайдер

Настройка с несколькими заранее выбранными значениями: температура модели, лимит токенов, число витков инструментов. Пять ступеней вместо свободного числового поля.

STEP SLIDER

Пять заранее выбранных значений вместо свободного числа. Точки справа от ручки — непройденные ступени, последняя показывает потолок шкалы.

Default / 28px

SM / 24px

Строки настроек

Температура
0.4
Лимит токенов
8K

SM и disabled

Температура
0.2
Лимит токенов
32K
Токены и правила
ЧастьТокен
Railborder-border · bg-rm-gray-1 · rounded-full
Пройденная часть--rm-yellow-100
Ручка--rm-yellow-fg · rounded-full · shadow-sm
Точка ступениbg-muted-foreground/40
Точка последней ступени--rm-yellow-100
Disabledopacity-40 · cursor-not-allowed

Канон — 5 ступеней. Меньше трёх — это Switch или Tabs, больше семи — Select или Input.

Значение вне шкалы подсвечивает ближайшую ступень и не переписывает данные молча.

Взаимодействие держит нативный input[type=range]: мышь, тач, стрелки, Home/End, фокус.

Подпись текущего значения рисуется снаружи — сам контрол текст не показывает.

Примечания / Notes

Постоянные сервисные сообщения внутри экрана: подсказки, предупреждения, подтверждения и локальные CTA. Используют только operational-состояния и существующие status/surface-токены.

Сценарий

Вариант

Правило

Базовое сообщение
neutral
Нейтральное сервисное сообщение без лишнего акцента.
CTA внутри note
action
Кнопка живёт внутри note только если завершает конкретное сообщение.
Статусные состояния
success / warning / error
Семантика собирается только на status-токенах: info, success, warning, error.
Filled
tone="filled"
Заполненная версия нужна, когда note должен считываться быстрее карточек и соседних нейтральных поверхностей.
Disabled / labels
disabled / eyebrow / no eyebrow
Note можно приглушить, скрыть подзаголовок или заменить его короткой смысловой формулировкой.
SOFT

Основной режим для пояснений внутри карточек, форм и системных панелей.

Нейтральное пояснение

Сначала соберите факты по кейсу

Используй neutral-note, когда сообщение должно помогать, но не конкурировать с главным CTA.

Синхронизация

Интеграция обновляется каждые 15 минут

Если нужен ручной запуск раньше, покажи action-note с кнопкой обновления.

Успешный шаг

Документы успешно прикреплены

Можно переходить к следующему шагу. Подробности смотри в карточке кейса.

Требует внимания

Часть полей ещё не заполнена

Warning-note виден заранее и не пропадает после закрытия модалки, пока риск остаётся актуальным.

Блокирующая ошибка

Не удалось отправить webhook

Error-note используется для блокирующей проблемы. Не смешивай его с toast, если сообщение должно оставаться на экране.
FILLED

Усиленный режим для флоу, где note должен считываться быстрее соседнего контента.

tone="filled"

Режим агента

Агент переключён в режим интервью

Filled info подходит для текущего режима работы, если важно подчеркнуть контекст экрана.

Подтверждение

Оплата подтверждена

Filled success фиксирует завершённый этап и может стоять сразу над блоком результата.

Ожидание ответа

Ответ ИИ может занять до 2 минут

Заполненный warning уместен перед долгой операцией, если пользователь должен скорректировать ожидание.

Проверьте данные

Проверьте slug агента

Filled error используем редко: только для первичной блокировки, которую важно заметить мгновенно.
ACTION + DISABLED

CTA и disabled-состояние для сервисных сообщений.

Следующий шаг

Подключите оплату, чтобы завершать кейс автоматически

CTA живёт внутри note только тогда, когда действие напрямую относится к сообщению.

Временно недоступно

Расшифровка звонка временно недоступна

Disabled-note нужен, когда важно сохранить место и объяснить структуру шага, но сценарий ещё закрыт.
SUBHEADS

Вместо badge note использует короткий подзаголовок, который объясняет суть примечания.

Контекст сценария

Default label

Когда контекст неочевиден, подзаголовок помогает быстрее считать смысл note.

Платёжный статус

Custom label

Подзаголовок можно привязать к сценарию: платёж, синк, онбординг, модерация.

Без подзаголовка

Подзаголовок убираем только в плотных интерфейсах, где контекст уже читается из секции или карточки.
Токены и правила
ВариантТокеныКогда использовать
Neutralborder --border · bg card / --rm-gray-1Базовое объяснение, вторичная помощь, meta-комментарий.
Infoblue 300 / 900 / fg-subtle · blue 100 / fgНейтрально-операционный контекст: синхронизация, импорт, системные подсказки.
Successgreen 300 / 900 / fg-subtle · green 100 / fgПодтверждение завершения, валидные шаги, успешный sync.
Warningyellow 300 / 900 / fg-subtle · yellow 100 / fgСценарий требует внимания, но не блокирует поток.
Errorred 300 / 900 / fg-subtle · red 100 / fgБлокирующая проблема, риск потери данных или неудачный запрос.
Disabledopacity 0.4Сохраняем в лэйауте, но выключаем взаимодействие до доступности сценария.

Note нужен для постоянного контекста внутри экрана. Если сообщение краткоживущее и не должно занимать место после действия, используй toast.

Не добавляй новые декоративные цвета. Для note зафиксированы только operational-состояния: neutral, info, success, warning, error, action.

CTA внутри note разрешён только один, размером sm и только когда действие логически завершает или исправляет конкретное сообщение.

Внутри note не используем badge-лейблы. Если нужен дополнительный смысловой слой, ставь короткий текстовый подзаголовок над заголовком.

Таблицы

Паттерн для плотных сравнимых данных: кейсы, платежи, документы, usage-отчёты. Таблица собирается на существующих surface, border, badge и control-токенах.

Паттерн

Вариант

Правило

Базовая таблица
base
Семантическая таблица на `bg-card`, `border-border`, заголовок на `--rm-gray-1`. База для списков кейсов, платежей и файлов.
Полосы
striped
Полосы допустимы только для плотных наборов данных. Используем тихий зебра-фон `--rm-gray-1`, без новых оттенков.
Вертикальные разделители
bordered
Вертикальные разделители берём из `--border`. Никаких теней, inset-обводок и декоративных grid-эффектов.
Hover / selection
interactive / selectable
Hover строки = `--rm-gray-2`, выбранная строка = `--rm-yellow-900` + border `--rm-yellow-300`. Selection живёт на существующих control-токенах.
Операционная таблица
operational table
Сложные таблицы собираются из уже описанных badge, checkbox, button и note-паттернов. Таблица сама не вводит новые цвета.
Большой набор данных
large dataset / progressive reveal
Для MVP фиксируем поведение `Show more` или пагинацию. Виртуализация как техника возможна, но визуально не получает отдельного стиля.
BasicBase
АгентСтатусНагрузка
МаркетологАктивен12 кейсов
Финансовый агентНа паузе3 кейса
Юридический агентЧерновик7 кейсов
StripedDense lists
АгентСтатусНагрузка
МаркетологАктивен12 кейсов
Финансовый агентНа паузе3 кейса
Юридический агентЧерновик7 кейсов
BorderedExplicit columns
АгентСтатусНагрузка
МаркетологАктивен12 кейсов
Финансовый агентНа паузе3 кейса
Юридический агентЧерновик7 кейсов
InteractiveHover row
АгентСтатусНагрузка
МаркетологАктивен12 кейсов
Финансовый агентНа паузе3 кейса
Юридический агентЧерновик7 кейсов
FULL FEATURED

Таблица кейсов собирается из уже описанных badge, checkbox и button-паттернов.

КейсЭтапКаналСуммаОбновлено

Аудит воронки продаж

/a/case-1

Нужна оплатаTelegram24 000 ₽5 мин назад

Юридический due diligence

/a/case-2

В работеWeb chat48 000 ₽22 мин назад

AI-агент для HR

/a/case-3

ГотовоEmail16 000 ₽1 час назад

Разбор unit-экономики

/a/case-4

Ошибка webhookWeb chat32 000 ₽2 часа назад
Subtotal120 000 ₽
LARGE DATASET

Сначала фиксируем визуальный паттерн, потом технику рендера.

Большой список документов

Показываем первые 8 строк, затем догружаем пачками.

brief.pdf

Строка 1

contract-v2.docx

Строка 2

payment-link.txt

Строка 3

summary.md

Строка 4

call-transcript.pdf

Строка 5

persona.csv

Строка 6

nda.pdf

Строка 7

webhook-log.json

Строка 8

Визуально large dataset не отличается от обычной таблицы: те же row height, border и hover-state.

Если строк очень много, сначала пробуем `Show more`, пагинацию или sticky-фильтры. Виртуализация скрыта внутри реализации и не добавляет новый видимый стиль.

Зебру, selection и bulk-actions можно комбинировать, но только если они реально помогают чтению, а не перегружают экран.

Токены и правила
СлойТокеныОписание
Containerbg-card + border-border + rounded-lgБазовая flat-surface для любой таблицы.
Headbg --rm-gray-1 · text-muted-foregroundТихий header, который не спорит с содержимым.
Row hoverbg --rm-gray-2Единый hover-паттерн строк и quiet-controls.
Row selectedbg --rm-yellow-900 · border --rm-yellow-300Выбранная строка или частичный bulk-контекст.
Stripeodd/even bg-card / --rm-gray-1Только для длинных однотипных списков.
Numericfont-caption-familyЧисла, суммы, id и короткие коды.

Таблица нужна только для сравнимых, повторяющихся данных. Если каждая строка превращается в mini-card с длинным текстом, переходи к списку или карточкам.

Header всегда тихий: `--rm-gray-1`, `text-muted-foreground`, Loos Condensed uppercase. Основной контраст должен оставаться у данных, а не у шапки.

Interactive row использует только два слоя поведения: hover `--rm-gray-2` и selected `--rm-yellow-900` + `--rm-yellow-300`. Не добавляй новый hover-border, shadow или ring на всю строку.

Числа, суммы, id и короткие коды лучше ставить на `--font-caption-family`, чтобы колонки читались ровнее. Для статусов используем существующие `Badge`, а не красим текст вручную.

Инпуты

Четыре размера идентичны кнопкам по высоте и padding: LG (48px) / MD (40px, default) / SM (32px) / XS (28px).

LG / 48px
MD / 40px
SM / 32px
XS / 28px

Default

Стандартное поле. border: --border, bg: --rm-gray-1.

Error

Ошибка валидации. border: --destructive.

Disabled

Недоступно. opacity: 0.4, cursor: not-allowed.

CODE (OTP)

6 символов авторизации. Моноширинный шрифт, крупный.

WITH LABEL + ERROR
Введите корректный email

Textarea

Паттерн для multiline-ввода. Базовые состояния: default, disabled и error; focus меняет только border.

Default

Disabled

Error

Основа

Базовые состояния: default, disabled и error. Focus меняет только border.

Добавьте цель, аудиторию или желаемый результат.

DEFAULT

Основной textarea для форм, briefs и длинных ответов.

CHAT

Компактный composer для чата: поле сверху, action-ряд снизу.

Enter отправляет, Shift + Enter переносит строку.

Правила

Используй default для форм, брифов, описаний кейса и любых задач, где пользователь пишет больше одной строки.

Используй chat только в зоне отправки сообщения: компактная высота, без ручного resize и с ограничением по max-height.

Для focus меняется только border на --ring; не добавляй кастомные ring, shadow или glow поверх компонента.

Error оформляется через aria-invalid на поле и текст ошибки под ним цветом --destructive.

Поиск / Combobox

Компонент поиска для Rocketmind: inline-search, подсказки, история, empty-state и запуск в модальном окне.

Search / Combobox

Полноценный поиск по агентам, кейсам и системным действиям

Новый паттерн

Поиск по агентам, кейсам и системным действиям: inline, история, preset-подсказки и запуск в модальном окне.

1. Размеры

Четыре размера совпадают по высоте с кнопками и базовыми input, поэтому toolbar и поисковые сценарии собираются без ручной подгонки.

XS / 28px

SM / 32px

MD / 40px

LG / 48px

2. Состояния

Базовые состояния компонента и типовые тексты ошибок.

Default

Disabled

Error

Агент с таким slug не найден. Проверьте название или откройте каталог.

3. Подсказки и история

При пустом запросе компонент показывает историю поиска и готовые сценарии. Если истории нет, блок не исчезает, а объясняет следующий шаг и уступает приоритет preset-подсказкам.

История + preset-подсказки

Истории нет

Правило empty-state

Когда запрос уже введён, список показывает только результаты совпадения или одно текстовое сообщение без декоративных иллюстраций. Когда запрос пустой, вместо пустоты показываем полезный старт: история, популярные сценарии или оба блока сразу.

4. Поиск в модальном окне

Основной паттерн глобального поиска: на desktop центрированное modal-окно, на mobile bottom sheet.

Подходит для `Cmd/Ctrl + K`, каталога агентов и быстрого перехода по кейсам.

Карточки

SУзкая — 20–30% экрана. Сетка 3–4 колонки.
MШирокая — ~50% экрана. Сетка 2 колонки.
LГоризонтальная — 100% ширины. Медиа слева, контент справа.

1. Продукт консалтинга

Карточки для раздела «Консалтинг и стратегия». Горизонтальная обложка 3:2 (как карточка медиа), жёлтый бейдж в верхнем-левом углу и опциональные аватарки экспертов поверх обложки (снизу-справа). Заголовок — макс. 2 строки, описание — 3 строки с многоточием.

С экспертами

Экспертный продукт
+3

Экосистемная стратегия

Создадим стратегию и портфель бизнес-моделей, которые расширят влияние и сделают бизнес более устойчивым

Экспертный продукт

Умная аналитика

Аналитика для развития бизнеса на основе данных и выявления зон роста

Без экспертов

Цифровая платформа

Внедрение цифровой платформы в ваш бизнес для масштабирования и оптимизации

Дизайн-спринты

Организация дизайн-спринтов для быстрого тестирования идей и проверки гипотез

2. Продукт с изображением

Карточки для разделов «Онлайн-школа» и «AI-продукты». Изображение cover 220px, бейдж -22px overlap. Вариант «wide» — 2 колонки с фактоидами из hero.

1 колонка

Экспертный продукт

Бизнес-дизайн для команд

Практикум по бизнес-дизайну для команд, помогающий системно подойти к развитию продукта

Тестирование гипотез

ИИ-агент по тестированию бизнес-гипотез с автоматическим анализом данных

2 колонки (wide)

Практикум по бизнес-дизайну для команд

Навыки стратегического развития бизнеса — от поиска бизнес-модели до проектирования платформ и экосистем

3. Статья

Карточка статьи для раздела «Медиа». Обложка сверху (overlap −22px), бейдж типа (sky — урок, terracotta — кейс), теги, автор и дата. Вариант «wide» — двухколоночный: обложка слева, заголовок и описание во всю ширину.

Default — обложка сверху

КейсСтратегияЭкосистема

Как мы строим экосистемную стратегию для растущих компаний

Разбор фреймворка из 5 шагов, который применяем в консалтинговых проектах.

Иван Петров
УрокПродуктДизайн

Бизнес-дизайн: от идеи до запуска

Практический разбор инструментов, которые ускоряют вывод продукта на рынок.

Ирина Смирнова
AIКонсалтингПрактика

ИИ-агенты в консалтинге

Где LLM реально помогают, а где замедляют работу команды.

Сергей Кузнецов

Wide — обложка слева

КейсСпринтыКоманды

Дизайн-спринт за 5 дней: что работает на практике

Адаптация Google Ventures под российский контекст и распределённые команды.

Мария Лебедева

4. Aside-карточка продукта

Мини-карточка продукта для правой колонки статьи. Вариант default — 72×72 thumb + аватары экспертов (для consulting); вариант image — широкая cover-картинка (для academy/ai-products).

АЕИГ+1

Экосистемная стратегия

Стратегия и портфель бизнес-моделей, расширяющих влияние.

Тестирование гипотез

ИИ-агент по тестированию бизнес-гипотез с автоматическим анализом данных.

5. Кейс

Карточка кейса для раздела «Кейсы». Заголовок, описание, бордерный блок с тремя метриками, итоговый результат. Для «big»-кейсов (есть страница) — жёлтый бордер при наведении и стрелка ↗ в правом верхнем углу.

Запуск онлайн-академии для корпоративных команд

Помогли крупному EdTech-игроку упаковать методологию и вывести её на b2b-рынок за 6 месяцев.

6
месяцев до запуска

От первой стратегической сессии до продаж b2b-клиентам.

12
корпоративных клиентов

Подписали контракты в первый квартал после запуска.

×3
рост выручки за год

Относительно базового сценария без b2b-направления.

Методология упакована в продукт, продажи — системные, команда заказчика выросла в два раза.

Аватар

Круглый аватар пользователя или агента. 5 размеров: XS (24px) / SM (32px) / MD (40px) / LG (48px) / XL (64px). Fallback — инициалы на bg-rm-gray-1, моно-шрифт.

Размеры и fallback

МXS
АИSM
НКMD
СДLG
RMXL

Контекстные примеры

АА

AI-агент «Аналитик»

Финансовый анализ

Активен
МДАСНКЕВ+3 участника

Диалог

Модальное окно для подтверждения действий и показа информации. Оверлей — rm-gray-alpha-600, панель — max-w-480px bg-card rounded-lg.

Примеры

INFO
CONFIRM
DESTRUCTIVE
Адаптив: desktop ↔ mobile bottom sheet

Desktop (lg+)

  • • Центр экрана, max-w-480px, max-h-85dvh
  • • rounded-lg на всех углах
  • • Open: 500ms easeOutExpo (slide-in-from-bottom-8 + fade)
  • • Close: 200ms easeInQuad
  • • Esc / клик на overlay / X

Mobile (<lg) — bottom sheet

  • • Прижат снизу, на всю ширину, max-h-85dvh
  • • rounded-t-lg + шторка SheetGrabHandle сверху: полоса h-1 w-10, в потоке 20px, тач-зона 44px отдельным слоем поверх
  • • Open: 260ms cubic-bezier(0.32, 0.72, 0, 1)
  • • Drag-down ≥ 120px → закрытие; меньше — return
  • • visualViewport: при фокусе input sheet поднимается на верх с отступом 16px, внутри активируется скролл

Шторка — общий SheetGrabHandle из @rocketmind/ui: те же полоса, зона захвата 44px и порог 120px используются и в собственных bottom sheet'ах приложений (напр. чат с Алексом в Р-проекте). Остальное поведение зашито в DialogContent. Опционально: mobileSheet={false} отключает sheet (только center-modal на всех экранах), bodyClassName="p-0" — отключает дефолтный padding scroll-обёртки (для media-viewer'ов), footer — контролы слоем поверх тела у самого низа окна (без подложки, на фейде; кнопки в ряд справа, отступ 16px).

Правила

Dialog используется для подтверждения критичных действий (удаление, завершение) или показа информации, требующей фокуса. Оверлей — rm-gray-alpha-600.

Desktop: max-w-480px, rounded-lg, bg-card, border-border, padding 24px (p-6). Mobile: full-width bottom sheet, rounded-t-lg, drag-handle сверху.

Заголовок — font-heading, uppercase, text-18. Описание — text-14, text-muted-foreground. Footer выровнен вправо с gap-3.

Для деструктивных действий кнопка подтверждения использует bg-destructive. Кнопка отмены всегда Ghost-стиль.

На mobile шторка обязательна — визуальный сигнал «можно потянуть вниз чтобы закрыть». Крестик/стрелку вместо неё в bottom sheet не ставим.

Когда внутри sheet есть инпуты — sheet автоматически поднимается над клавиатурой через visualViewport, внутри включается скролл. Не задавать фикс. высоту контенту.

Dropdown Menu

Контекстное меню действий. Контейнер — bg-popover rounded-sm min-w-160px. Destructive-элемент — text-rm-red-100.

Примеры

BASIC
WITH GROUPS
ICON TRIGGER
Правила

DropdownMenu — контекстное меню для действий, которые не помещаются в одну строку. Trigger — кнопка Ghost или Icon-only.

Контейнер: bg-popover, border-border, rounded-sm, min-width 160px. Элементы — высота 32px (h-8), padding px-2.

Hover-фон элемента — rm-gray-2. Destructive-элемент — текст rm-red-100, hover-фон rm-red-900.

Label — mono, uppercase, text-12, text-muted-foreground. Separator — h-px bg-border. Используй группы для логического разделения.

Popover

Плавающая панель, привязанная к триггеру: лёгкие inline-формы и действия. Контейнер — bg-popover rounded-lg, flat (без тени). Для блокирующего подтверждения — Dialog, для списка действий — DropdownMenu.

Примеры

BASIC
ФОРМА + ИСТОРИЯ
Правила

Popover — для лёгкой inline-формы / действия рядом с триггером. Для блокирующего подтверждения — Dialog, для списка действий — DropdownMenu.

Контейнер: bg-popover, border-border, rounded-lg (panel-радиус), flat — без тени, z-50. По умолчанию w-72, max-width до края экрана.

Триггер — любая кнопка через render-проп: <PopoverTrigger render={<Button … />} />. Закрытие по клику вне, Escape, PopoverClose.

Скроллящийся контент (история, длинные списки) — внутри ScrollArea с max-h. Не растягивай поповер на весь экран.

Разделитель

Визуальный разделитель контента. Горизонтальный — h-px w-full, вертикальный — w-px self-stretch. Цвет — bg-border.

Горизонтальный и вертикальный

Horizontal

Блок контента сверху

Блок контента снизу

Vertical

Раздел AРаздел BРаздел C

Skeleton

Placeholder-загрузка с анимацией пульса. Фон — bg-rm-gray-1 animate-pulse rounded-sm. Повторяет форму реального контента.

Паттерны загрузки

Card skeleton

Chat skeleton

Table skeleton

Profile skeleton

Scroll Area

Контейнер с кастомным скроллбаром. Thumb — bg-rm-gray-3, hover — bg-rm-gray-4, ширина — 8px, rounded-full.

Вертикальный скролл

Список агентов

АН

Аналитик

Финансовый анализ и прогнозирование

СТ

Стратег

Разработка стратегии и планирование

ИС

Исследователь

Маркетинговые исследования

ТЕ

Тестировщик

Тестирование гипотез и A/B тесты

КО

Копирайтер

Создание текстов и контента

ДИ

Дизайнер

Визуальный дизайн и брендинг

РА

Разработчик

Прототипирование и MVP

КО

Консультант

Бизнес-консалтинг

Лог сообщений

01.Пользователь отправил сообщение
02.Агент обработал запрос
03.Система обновила статус кейса
04.Пользователь отправил сообщение
05.Агент обработал запрос
06.Система обновила статус кейса
07.Пользователь отправил сообщение
08.Агент обработал запрос
09.Система обновила статус кейса
10.Пользователь отправил сообщение
11.Агент обработал запрос
12.Система обновила статус кейса

Горизонтальный скролл · .rm-scrollbar-thin-x

Полоса 8px, отступ от контента 8px (pb-2). Разрешён только таблицам и коду — например, таблицы в статьях.

Колонка 1
Колонка 2
Колонка 3
Колонка 4
Колонка 5
Колонка 6
Широкая ячейка таблицы 1.1
Широкая ячейка таблицы 1.2
Широкая ячейка таблицы 1.3
Широкая ячейка таблицы 1.4
Широкая ячейка таблицы 1.5
Широкая ячейка таблицы 1.6
Широкая ячейка таблицы 2.1
Широкая ячейка таблицы 2.2
Широкая ячейка таблицы 2.3
Широкая ячейка таблицы 2.4
Широкая ячейка таблицы 2.5
Широкая ячейка таблицы 2.6

Invisible scrollbar · .rm-scrollbar-invisible

Скролл работает (wheel/touch/keyboard), но визуально полоски нет. Используется в GlossaryWidget на /media и других aside-панелях, где DS не хочет видимой полосы.

Строка списка 01 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 02 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 03 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 04 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 05 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 06 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 07 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 08 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 09 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 10 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 11 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 12 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 13 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 14 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 15 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 16 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 17 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 18 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 19 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 20 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 21 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 22 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 23 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 24 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 25 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 26 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 27 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 28 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 29 — наполнитель для демонстрации внутреннего скролла плашки.

Строка списка 30 — наполнитель для демонстрации внутреннего скролла плашки.

Overlay scrollbar · <OverlayScrollbar />

Бегунок 4px поверх контента: появляется при скролле и гаснет через 500мс после последнего события. Нативной полосы нет — она не занимает место в раскладке и не ложится на правый край контейнера.

Строка списка 01 — наполнитель для демонстрации оверлейного скролла.

Строка списка 02 — наполнитель для демонстрации оверлейного скролла.

Строка списка 03 — наполнитель для демонстрации оверлейного скролла.

Строка списка 04 — наполнитель для демонстрации оверлейного скролла.

Строка списка 05 — наполнитель для демонстрации оверлейного скролла.

Строка списка 06 — наполнитель для демонстрации оверлейного скролла.

Строка списка 07 — наполнитель для демонстрации оверлейного скролла.

Строка списка 08 — наполнитель для демонстрации оверлейного скролла.

Строка списка 09 — наполнитель для демонстрации оверлейного скролла.

Строка списка 10 — наполнитель для демонстрации оверлейного скролла.

Строка списка 11 — наполнитель для демонстрации оверлейного скролла.

Строка списка 12 — наполнитель для демонстрации оверлейного скролла.

Строка списка 13 — наполнитель для демонстрации оверлейного скролла.

Строка списка 14 — наполнитель для демонстрации оверлейного скролла.

Строка списка 15 — наполнитель для демонстрации оверлейного скролла.

Строка списка 16 — наполнитель для демонстрации оверлейного скролла.

Строка списка 17 — наполнитель для демонстрации оверлейного скролла.

Строка списка 18 — наполнитель для демонстрации оверлейного скролла.

Строка списка 19 — наполнитель для демонстрации оверлейного скролла.

Строка списка 20 — наполнитель для демонстрации оверлейного скролла.

Строка списка 21 — наполнитель для демонстрации оверлейного скролла.

Строка списка 22 — наполнитель для демонстрации оверлейного скролла.

Строка списка 23 — наполнитель для демонстрации оверлейного скролла.

Строка списка 24 — наполнитель для демонстрации оверлейного скролла.

Строка списка 25 — наполнитель для демонстрации оверлейного скролла.

Строка списка 26 — наполнитель для демонстрации оверлейного скролла.

Строка списка 27 — наполнитель для демонстрации оверлейного скролла.

Строка списка 28 — наполнитель для демонстрации оверлейного скролла.

Строка списка 29 — наполнитель для демонстрации оверлейного скролла.

Строка списка 30 — наполнитель для демонстрации оверлейного скролла.

Уведомления / Toasts

Всплывающие уведомления через sonner. Типы: default, success, error, warning, info, loading. Фон — bg-popover, бордер — border-border.

Нажмите кнопку для демонстрации

Правила

Toaster подключается один раз в layout.tsx через <Toaster /> из @rocketmind/ui. Вызов — через функцию toast() из библиотеки sonner.

Фон — bg-popover, бордер — border-border, скругление — var(--radius). Иконки: Lucide (CircleCheck, Info, TriangleAlert, OctagonX, Loader2).

Типы: default (без иконки), success, error, warning, info, loading. Loading можно обновить на success/error по id.

Action-кнопка используется для отмены (undo-паттерн). Тост автоматически наследует тему (light/dark) из ThemeProvider.

Show More

Кнопка-разделитель для скрытия избыточного контента. Пропсы: expanded, onClick, label, labelExpanded. Занимает всю ширину контейнера.

Варианты

Collapsed

Expanded

Default

Список · fade + overlap

LIST
А

Аналитик

Финансовый анализ и прогнозирование

С

Стратег

Разработка стратегии и планирование

И

Исследователь

Маркетинговые исследования рынка

Т

Тестировщик

Тестирование гипотез и A/B тесты

К

Копирайтер

Создание текстов и контента

Д

Дизайнер

Визуальный дизайн и брендинг

Р

Разработчик

Прототипирование и MVP-разработка

К

Консультант

Бизнес-консалтинг и аудит

Текст · fade + overlap

TEXT

AI-агент «Стратег» разрабатывает планы роста и анализирует рыночные возможности. Специализируется на B2B-стратегиях и конкурентном анализе.

Агент интегрируется с CRM и аналитическими системами. Формирует еженедельные стратегические отчёты, предлагает гипотезы роста и оценивает риски. Работает в связке с агентом «Аналитик» для построения финансовых прогнозов.

Настройки · без fade (collapse to 0)

SETTINGS
Имя агентаСтратег
Модельclaude-sonnet-4-6
Язык ответаРусский
Температура0.7
Макс. токенов4096
Системный промптКастомный
Правила
  • fade на обоих компонентах — показывает частичный контент с градиентом; кнопка заезжает поверх через margin-top: -36px.
  • Без fade — контент схлопывается до нуля; кнопка стоит ровно под ним.
  • Все скрытые элементы кладите внутрь ShowMorePanel. При fade помещайте туда весь список — градиент подскажет что есть продолжение.
  • collapsedHeight подбирайте так, чтобы последний видимый элемент был срезан наполовину — это явный сигнал.
  • Если фон контейнера отличается от --background, передайте нужное значение в fadeBg.

Слайдер

Минималистичный прогресс-слайдер 62×8 px из дизайн-системы. Трек — border, заливка и точка — foreground. Пропсы: value, min, max, width, animate, animateKey, animationDuration, onChange.

Статичный (value=0.4)

Анимированный (animate, 4 сек)

Интерактивный, ширина 200 px

NumberPagination — нумерованная пагинация

Общий компонент NumberPagination: все номера остаются на местах, анимированный ползунок появляется справа от активного номера. Стоит в блоке «Кейсы» (theme="dark") и в белой плашке блока «О продукте» (theme="light"). Gap между элементами — 16px, ползунок 62×8 px, durationMs должен совпадать с таймером автопереключения блока.

Прогресс-бар

Детерминированный прогресс-бар для операций с известным процентом (выгрузка файла, импорт). Дорожка — border, заливка — foreground, скругление rounded-full, высота 6px. Единственный проп — value (0–100). Для тонкого индикатора кейсов — Slider, для неизвестного состояния — спиннер Loader2.

Статичный (0 / 35 / 100%)

С подписью и процентом (симуляция загрузки)

Загрузка видео…0%

Дискретный пайплайн → процент (обработка файла: uploaded 15 · extracting 45 · extracted 65 · indexing 85; indexed → чип «Готов»)

Загружен15%

Пагинация

Навигация между разделами многостраничной статьи. Размещается в конце тела статьи перед блоком «Похожие». Пропсы: prev, next (каждый — { label, href }), опционально renderLink для интеграции с next/link.

Навигация между разделами многостраничной статьи. Ставится в конце тела статьи перед блоком «Похожие». Кнопки занимают центральные две колонки тела (cols 2-3).

Кнопка «следующий раздел» при появлении во вьюпорте (порог 0.6) заливается круговым dot-fill от правого края: круг var(--foreground) раскрывается за --duration-smooth / --ease-standard, текст и иконка инвертируются в var(--background), рамка — в var(--foreground). Ушла из вида — круг сворачивается, при повторном появлении заливается снова. Кнопка «предыдущий раздел» эффект не получает. prefers-reduced-motion — смена состояния без анимации круга. Прокрутите страницу, чтобы увидеть эффект на примерах ниже.

prev + next

Средний раздел статьи: обе кнопки 50/50.

только next

Первый раздел: оставшаяся кнопка занимает всю ширину тела.

только prev

Последний раздел: оставшаяся кнопка занимает всю ширину тела.

длинные имена глав

Названия обрезаются truncate без переноса строки.

Аккордеон

Минимальный аккордеон для продуктовых страниц. Иконки +/−, бордер #404040, заголовок — Label 16, контент — Copy 14. Одновременно открыт только один элемент.

Интерактивный пример

Rich-редактор (Tiptap)

Tiptap-редактор тела урока/статьи (@rocketmind/ui/rich-editor). Хранит контент как markdown, round-trip в ArticleBodyBlock[]. Команды по «/», bubble-меню на выделении, кастом-ноды галереи и видео, импорт .md. Адаптеры (загрузка, AI, глоссарий) инъектируются приложением — ниже мок.

Markdown на выходе (живой)
### Подзаголовок раздела

Обычный абзац с **жирным**, *курсивом* и [ссылкой](https://rocketmind.ru). Нажмите «/» для команд или выделите текст для bubble-меню.

> Цитата внутри редактора

- Первый пункт списка
- Второй пункт

| Колонка | Значение |
| --- | --- |
| A | 1 |
| B | 2 |

Курсор совместной работы

Графический курсор: стрелка-указатель + плашка с именем (человек / AI-агент / Rocketmind), залитые фирменным цветом (color — один из 8 акцентов). Плашка раскрывается к центру (side), стрелка наклоняется при движении (tilt). Поле CollaborationCursorsField анимирует блуждание (имитация совместной работы), редактор CollaborationCursorsEditor задаёт количество, имена и цвета.

Все фирменные цвета · плашка справа (курсор левее центра)

Жёлтый
Фиолетовый
Бирюзовый
Терракотовый
Розовый
Синий
Красный
Зелёный

Плашка слева (курсор правее центра) — зеркальный наклон стрелки

Розовый
Синий
Жёлтый
Зелёный

Живое поле — имитация совместной работы (на центре стрелка плавно доворачивается, плашка переезжает)

Галина
Rocketmind
AI-аналитик
Иван

Шаблонная обложка продукта

ProductTemplateCover — обложка hero и карточки продукта: сетка точек DotGridLens (реагирует на курсор), курсоры совместной работы и опциональная иконка с настраиваемой позицией / масштабом / поворотом. Тип обложки (шаблонная / своя фотография / без обложки) задаётся в site-admin через редактор обложек.

Иконка hero обобщена в стопку CoverParallaxLayers — PNG-слоёв с 3D-реакцией на курсор (смещение + наклон, сила parallax 0..1 у каждого слоя). Только десктоп; на touch и при prefers-reduced-motion слои статичны. Порядок массива = z-index. Настраивается списком слоёв в редакторе обложек. Подробнее — в MD-спеке (6.1 · «PNG-слои с параллаксом»).

Галина
Rocketmind
AI-аналитик
Hero · 520×300
Галина
Rocketmind
AI-аналитик
Карточка · 3:2
PNG-слои · параллакс (наведи курсор)