Дизайн-брендбук v2

Все ИИ
— дизайн-система Mini App

Каждый компонент со ссылкой на ТЗ-задачу и кнопкой скачивания SVG/анимации для фронтенда. Liquid glass aesthetic, Manrope, accent cyan #54C4CE.

4 задачи ТЗ закрыты SVG production-ready MP4 + GIF banners
// 01 ПАЛИТРА

Цвета

Базовый dark canvas + cyan accent для functional states. Никаких декоративных подсветок — только liquid glass через transparent white.

bg-primary
#181819
bg-surface
white @ 5%
bg-surface-strong
white @ 10%
accent-cyan
#54C4CE
text-primary / CTA bg
#FFFFFF
text-tertiary
#9CA3AF
tier-top
#E67E22 → #F39C12
tier-mid
#3B6CF7 → #5C7CFF
tier-base
#1B8A5A → #2DA08E
Скачать CSS-tokens
// 02 ТИПОГРАФИКА

Manrope

Единственный шрифт. Веса 400 / 500 / 600 / 700 / 800. Скромный type scale — никаких 28+ px на mobile.

display-h128px / 800 / -0.03em
PLUS — все ИИ в Telegram
display-h222-24px / 800
Подписка PLUS
heading-md17-18px / 700
Выберите ИИ модель
body-emphasis16px / 600
Все топ-модели
body14px / 500
GPT-5, Claude Opus, Gemini Pro, Grok 4.
caption12px / 500
Отмена в любой момент · Без скрытых платежей
micro / badge11px / 600
ВСЕ ИИ  ·  БЕСПЛАТНО  ·  ТОП
Manrope CSS @ Google Fonts
// 03 ТАБ-БАР

Tab bar — production icons

Контейнер 308 × 67 px, radius 20 px. Active вкладка — squircle highlight 61 × 61 r=15 без цветного accent (Apple-style liquid glass). Иконки взяты из Figma fragment 2805:4266.

Задача 1 ТЗ — унификация формата и состояния
Профиль
Профиль
ВСЕ ИИ
ВСЕ ИИ
Чаты
Чаты

Готовый компонент

Active state не через цвет, а через subtle inset highlight. Ни одного эмодзи / точечного маркера.
container · 308 × 67 · radius 20
active squircle · 61 × 61 · radius 15
backdrop-filter: blur(36px)
icon-profile.svg icon-infinity.svg icon-chats.svg
// 04 ИКОНКИ

Иконки для UI

Outline SVG, stroke 1.7-2px, white. Используются в преимуществах подписки, accordion, selected states. Все pixel-perfect и pre-cleaned.

Lightning icon-lightning.svg

Lightning ⚡

«Все топ-модели», «Приоритетная скорость» — два пункта подписки.
24 × 24 · stroke 1.7 · white · outline
icon-lightning.svg
Picture icon-picture.svg

Picture frame

«Генерация изображений» — DALL·E, Midjourney, Imagen.
24 × 24 · stroke 1.7
icon-picture.svg
Microphone icon-mic.svg

Microphone

«Голосовой ввод» — STT/TTS feature.
24 × 24 · stroke 1.7
icon-mic.svg
Chevron icon-chevron.svg

Chevron down

Раскрывание провайдеров в Models picker (accordion). Поворот 180° на expanded state.
24 × 24 · stroke 2 · #9CA3AF
icon-chevron.svg
Check icon-check.svg

Check (selected radio)

Выбранная модель в picker, активный тариф. Cyan круг с тёмным check.
24 × 24 · stroke 2.5 · #0E2A2C на cyan bg
icon-check.svg
Arrow right icon-arrow.svg

Arrow right

«Подключить →» CTA на Premium banner. Тёмный на белой кнопке.
24 × 24 · stroke 2 · #181819
icon-arrow.svg

Aspect-ratio иконки

SVG <rect>-shapes для всех 6 пропорций. Используются в кнопках выбора формата (Изображения 1:1/4:3/16:9/2:3/9:16, Видео + 21:9 cinematic). 28×28 viewBox, заполнение/обводка по token-цветам, switch active state via CSS.

1:1
4:3
16:9
2:3
9:16
21:9
1:1 4:3 16:9 2:3 9:16 21:9
// 05 КНОПКИ И БЭДЖИ

Кнопки, pills, бэджи

Primary CTA — белая pill 999px. Secondary — glass squircle. Accent cyan только для functional badges и selected states.

Primary CTA (white pill)

Главное действие — подписка / подключение. Белая pill на dark canvas.
bg #FFFFFF · text #181819 · radius 999 · padding 14 / 28 · Manrope 600 / 14px

Secondary glass

CTA внутри Premium banner или secondary actions. Translucent с inset highlight.
bg white@10% · border white@15% · inset highlight white@18% · radius 999
−35%PROНовоеЛучший выбор

Бэджи

−35% (cyan на годовом тарифе) · PRO (платные модели в picker) · Новое (свежие топ-модели) · Лучший выбор (PLUS колонка в сравнении).
bg #54C4CE · text #0E2A2C · Manrope 700 / 10-11px · radius 5-6
// 06 ВЫБОР ИИ МОДЕЛИ

Models picker — collapsible accordion

UX-инсайт: вместо длинного flat-списка с 3 Gemini подряд + 2 Grok + 2 DeepSeek — одна строка на провайдера с chevron. Click → раскрываются версии inline.

Задача 2 ТЗ — порядок отображения моделей

6 провайдеров одной колонкой

GPT · Claude · Gemini · Grok · DeepSeek · Kimi. По умолчанию все свёрнуты, click chevron — раскрывается accordion с версиями.
card radius 16 · provider row padding 12 / 14 · avatar 40 × 40 radius 12
chevron Manrope · версии inline с radio + Manrope SemiBold 14
Live preview icon-chevron.svg
🧠 Система →