// 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.

`icon-lightning.svg`

### Lightning ⚡

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

### Picture frame

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

### Microphone

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

### Chevron down

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

### Check (selected radio)

Выбранная модель в picker, активный тариф. Cyan круг с тёмным check.
24 × 24 · stroke 2.5 · #0E2A2C на cyan bg
icon-check.svg
`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
// 07 БАННЕР

## Animated banner — 3 формата

Real liquid glass animation. Deep navy + teal/cyan ribbons. Корректное отображение на всех брейкпоинтах. Можно использовать как MP4 (premium quality) или GIF (легче, autoplay везде).

Задача 3 ТЗ — корректное отображение баннера

### Desktop · 16:9

Полноширинный для desktop viewport. max-width 1120px контента.
1280 × 720 · 5 sec loop · MP4 ~10MB · GIF ~3-5MB
MP4 (premium) GIF (универсальный)

### Tablet · 16:9

Промежуточный формат, max-width 720px.
1280 × 720 · 5 sec · MP4 ~7MB · GIF ~2-4MB
MP4 GIF

### Mobile · 9:16

Vertical для phone. Используется в Premium banner на странице Profile.
720 × 1280 · 5 sec · MP4 ~6MB · GIF ~2-3MB
MP4 GIF
🧠 Система →