UI Kit
Bootstrap 5 dark · Inter · AI Chat
Цвета и токены
Меняй цвета — изменения мгновенно применяются ко всем элементам ниже. Перезагрузка страницы возвращает дефолты.
Типографика
Inter · базовый размер 14px · line-height 1.6
Display · 32px 700
Чем могу помочь?
H1 · 24px 600
Генерация изображений
H2 · 20px 600
Параметры генерации
H3 · 16px 500
История запросов
Body · 14px 400
Это стандартный текст интерфейса. Используется для сообщений, описаний, настроек и большинства элементов управления.
Body large · 16px 400
Текст сообщений в чате. Чуть крупнее для удобства чтения длинных ответов.
Small · 13px 400
Вспомогательный текст, подсказки, описания
Label · 12px 500
Метка элемента управления
Caption · 11px 400
ChatGPT · Быстрый  ·  Подпись модели
Overline · 11px 600 caps
Раздел · История · UI Kit
Muted · any size
Приглушённый цвет для вторичного контента и неактивных состояний
Code · 13px mono
const model = 'chatgpt:fast'
Иконки
SVG stroke · stroke-linecap round · stroke-linejoin round. Для новых иконок — система классов `.icon`/`.icon-Nx`.
Система .icon · базовый 14px, множители 2x/3x/4x
.icon · 14px
.icon-2x · 20px
.icon-3x · 28px
.icon-4x · 40px
Размерный ряд (legacy · inline width/height)
12px
14px
16px
20px
24px
Набор · 20px · stroke-width 1.8
new-chat
templates
images
video
audio
ai-dot
Навигационные · 20px · stroke-width 2.5
collapse
expand
chevron-up
chevron-down
send
close
Действия · 20px · stroke-width 1.8–2
copy
check
img-ref
Кнопки
Состояния: Default · Hover · Active · Disabled
Primary · основное действие · .btn-generate
Default
Hover
Loading
Disabled
Icon · отправка · .send-btn
Default
Hover
Disabled
Ghost icon · копирование (msg-copy-btn)
Default
Hover
Copied
Унифицированные кнопки 39px · .btn-generate / .bp-edit-btn / .ref-picker-footer .btn
Primary (btn-generate)
Save (bp-edit-save)
Secondary (bp-edit-btn)
Auth кнопки · .auth-btn / .auth-btn-primary
Default
Disabled
Link (auth-link)
Settings кнопки · .settings-btn-narrow (высота как у .auth-input)
Primary
Ghost
Danger
Confirm modal кнопки · .confirm-btn
Default
Primary
Danger
Plan card buy button · .plan-card-buy
Default (outline)
Featured (filled)
Collapse / Expand (btn-collapse)
Default
Hover
Поля ввода
Состояния: Default · Focus · Error · Disabled
Chat input (input-box)
Default
Focus
Error
Image prompt box (images-prompt-box)
TTS textarea
Выпадающие списки
ctrl-pill-primary (модель/провайдер) · ctrl-pill (параметр) · статичное меню
Model pill (ctrl-pill ctrl-pill-primary) · основная модель / провайдер
Default
Hover
Disabled
Setting dropdown (ctrl-pill) · параметры генерации
Default
Hover
Disabled
Открытое меню (dropdown-menu) · в статичном виде
Параметры в одну строку · как в поле изображений
1/4
Контролы
Счётчик · разделитель · range slider · select
Счётчик (ctrl-counter) · — N/max +
Min (1)
1/4
Mid (2)
2/4
Max (4)
4/4
Вертикальный разделитель (ctrl-sep)
Элемент А
Элемент Б
Элемент В
Range slider · TTS параметры
Медленно Быстро
Низко Высоко
Voice picker (ctrl-pill-primary + tts-voice-group) · TTS
Навигация
Sidebar nav items · история чатов · expanded vs collapsed
Sidebar nav · expanded
Sidebar nav · collapsed
История чата (chat-history-item)
Расчёт токенов API
Генерация изображений с промптом
Нет чатов
Секция истории · заголовок с кнопкой
История
Чат-компоненты
Сообщения · метки · состояния загрузки · поле ввода
User message (msg-user → user-bubble)
Напиши краткое описание архитектуры нейронных сетей
Многострочное сообщение
со вторым абзацем
и третьей строкой
Assistant message (msg-assistant)
Нейронная сеть — это вычислительная модель, вдохновлённая структурой биологического мозга. Она состоит из слоёв нейронов, которые обрабатывают входные данные и передают результат дальше через активационные функции.
ChatGPT · Быстрый
Loading state
думаю...
Model label (msg-model-label · caption 11px)
ChatGPT · Быстрый Claude · Эксперт Gemini · Продвинутый
Поле ввода · полный вид (input-box с футером)
Виджеты
Аватар · кольцо кредитов · виджет баланса · превью изображений · бейджи
Аватар с кольцом кредитов · .avatar-wrap
Authed (initials)
Authed (photo)
Unauth (no ring)
Виджет кредитов · .user-menu-tokens
Кредиты
86.40 / 120
Library / image popup кнопка «В библиотеке» · .img-popup-lib-btn
Default
In library
Edit badge · .bp-edited-badge
изменено
Модальные окна
Кастомные backdrop'ы — settings, plan, confirm. Все используют один паттерн: затемнение + панель с border-radius. Вход модалкой больше не показывается — он живёт на отдельной странице /login (см. ниже).
Login page · .login-page — тёмная половина с брендом + светлая с формой (статичное превью, экран 1:1 масштабирован)
Login page · экран ввода PIN (светлая половина)
Confirm · .confirm-panel
Выйти из аккаунта?
Текущая сессия будет закрыта. Чтобы вернуться, потребуется снова войти по коду.
Settings · sidebar + content (компактно)
Настройки
Профиль
Персонализация
Тариф
Реферальная программа
Видимо другим участникам
Plan card · .plan-card · обычная и featured
Lite
450 ₽
300 кредитов бессрочно
~600 сообщений
~60 изображений
Все нейросети
Plus
1 800 ₽
1 200 кредитов бессрочно
~2400 сообщений
~240 изображений
Все нейросети
Баннеры
Полноширинные блоки-подсказки. Используют тот же радиус и фон, что у .input-box, чуть выше по padding'у.
Topup-prompt · auth юзер без активного тарифа (единственный пользователь .auth-prompt-banner: баннер «войдите» уехал на /login)
Подключите тариф или введите промокод на использование для продолжения пользования сервисом.
Maintenance · полностраничная заглушка во время деплоя
Аккаунт-блок
Блок в нижней части sidebar'а: аватар + имя + строка тарифа / кнопка «Обновить».
С активным тарифом · .user-account-row + .user-account-plan
Без тарифа · .user-account-upgrade + «без тарифа»
Виджет кредитов с кнопкой «Обновить» · .user-menu-tokens-upgrade
Кредиты
— / —
Реф-ссылки и промокоды
Card-style строки в реф-разделе настроек, table-rows промокодов с заблокированным состоянием, kebab-меню.
Реф-ссылка · .ref-link-item с copy/delete
Главная
https://lama-ai.ru/?ref=AB7F2K9X
12 / 3
Таблица «Мои промокоды» · card-style строки + статус «Заблокирован»
Код Тариф Использовано / Всего
BRJX-7K2P Promo 3 / 10
OLD-CODE-2 Plus 5 / 5
Inline-форма создания · .promo-inline-form
Сообщения формы · .plan-promo-msg
Success
Промокод BRJX-7K2P скопирован
Error
Недостаточно реферальных баллов
Мобильный
Компоненты не дублируются: мобильная версия — это та же разметка в узком вьюпорте. Поэтому живые примеры ниже показаны в iframe шириной 390px — внутри него по-настоящему срабатывают и media-запросы, и html.is-mobile. Симулировать это блоком на широкой странице нельзя: медиа-запросы смотрят на вьюпорт, а не на размер контейнера.
Токены раскладки
Редактор выше работает только с цветами. Эти токены задаются в :root и меняются вручную.
Брейкпоинты
CSS-переменные не работают в условиях @media — пороги пишутся литералами и дублируются в js/mobile.js → LamaMobile.SCREENS. Менять только парой.
phone(max-width: 599.98px)360–430, портрет — целевой диапазон
tablet(max-width: 1023.98px)планшет / узкое окно
Зона нажатия
На (pointer: coarse) иконочные кнопки растут до 44px. Там, где рост ломает раскладку, зона расширяется прозрачным ::after — видимый размер не меняется.
24px иконка · 44px зона
Безопасные зоны
--safe-* ненулевые только на устройстве с вырезом при viewport-fit=cover. В браузере на десктопе все нули — это нормально.
контент внутри safe-area
Живые экраны