UI Kit
Bootstrap 5 dark · Inter · AI Chat
Цвета и токены
CSS-переменные — единственный источник цвета в интерфейсе
--bg
#0c0c0c
--sidebar
#111111
--surface
#1a1a1a
--surface2
#222222
--border
#2a2a2a
--muted
#666666
--text
#eeeeee
--accent
#ffffff
green
#10a37f
error
#e05252
success
#6ee7a0
Типографика
Inter · базовый размер 14px · line-height 1.6
Чем могу помочь?
Генерация изображений
Параметры генерации
История запросов
Это стандартный текст интерфейса. Используется для сообщений, описаний, настроек и большинства элементов управления.
Текст сообщений в чате. Чуть крупнее для удобства чтения длинных ответов.
Вспомогательный текст, подсказки, описания
Метка элемента управления
ChatGPT · Быстрый · Подпись модели
Раздел · История · UI Kit
Приглушённый цвет для вторичного контента и неактивных состояний
const model = 'chatgpt:fast'
Иконки
SVG stroke · stroke-linecap round · stroke-linejoin round. Для новых иконок — система классов `.icon`/`.icon-Nx`.
Система
.icon · базовый 14px, множители 2x/3x/4xРазмерный ряд (legacy · inline width/height)
Набор · 20px · stroke-width 1.8
Навигационные · 20px · stroke-width 2.5
Действия · 20px · stroke-width 1.8–2
Кнопки
Состояния: Default · Hover · Active · Disabled
Primary · основное действие
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 .btnPrimary (btn-generate)
Save (bp-edit-save)
Secondary (bp-edit-btn)
Auth кнопки ·
.auth-btn / .auth-btn-primaryDefault
Disabled
Link (auth-link)
Settings кнопки ·
.settings-btn-narrow (высота как у .auth-input)Primary
Ghost
Danger
Confirm modal кнопки ·
.confirm-btnDefault
Primary
Danger
Plan card buy button ·
.plan-card-buyDefault (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
Чат-компоненты
Сообщения · метки · состояния загрузки · поле ввода
User message (msg-user → user-bubble)
Напиши краткое описание архитектуры нейронных сетей
Многострочное сообщение
со вторым абзацем
и третьей строкой
со вторым абзацем
и третьей строкой
Assistant message (msg-assistant)
Нейронная сеть — это вычислительная модель, вдохновлённая структурой биологического мозга. Она состоит из слоёв нейронов, которые обрабатывают входные данные и передают результат дальше через активационные функции.
Loading state
думаю...
Model label (msg-model-label · caption 11px)
ChatGPT · Быстрый
Claude · Эксперт
Gemini · Продвинутый
Поле ввода · полный вид (input-box с футером)
Виджеты
Аватар · кольцо токенов · виджет баланса · превью изображений · бейджи
Аватар с кольцом токенов ·
.avatar-wrapAuthed (initials)
D
Authed (photo)
Unauth (no ring)
?
Виджет токенов ·
.user-menu-tokensLibrary / image popup кнопка «В библиотеке» ·
.img-popup-lib-btnDefault
In library
Edit badge ·
изменено
.bp-edited-badgeМодальные окна
Кастомные backdrop'ы — auth, settings, plan, confirm. Все используют один паттерн: затемнение + панель с border-radius.
Auth · ввод email + чекбоксы (статичное превью)
Вход
Auth · ввод PIN
Подтверждение
Confirm ·
.confirm-panelВыйти из аккаунта?
Settings · sidebar + content (компактно)
Настройки
Видимо другим участникам
Plan card ·
.plan-card · обычная и featuredLite
450 ₽
за 30 дней
300 токенов
~600 сообщений
~60 изображений
Все нейросети
Plus
1 800 ₽
за 30 дней
1 200 токенов
~2400 сообщений
~240 изображений
Все нейросети