// 01 ONBOARDING · 4 screens

## Onboarding

User's first encounter with the app. Hero with preview gallery, first AI pick, usage example, bonus popup.

Welcome /welcome
Greeting after first launch. 8-image collage (generation previews) + Indicator (1/3) + «Start tutorial» CTA.
9:41

# Welcome!

VSE Ai — best AI aggregator
for Telegram

Skip
Source: `pages/welcomePage/welcomePage.tsx`
8 previews loaded via `useAiImageModels()`. In mockup placeholders are gradients — frontend will substitute real images.
SelectAI /select-ai
First AI pick — 4 circular previews (3 dimmed + 1 active center), big headline, Indicator (2/3), «Next» CTA.
9:41
Chat GPT
MidJourney
DALL·E 3
DeepSeek

Get started

# You choose AI

All your AI agents are now in
one app — VSE Ai

Skip
Source: `pages/selectAiPage/selectAiPage.tsx`
Drift fix: in-app heading «Eva-AI» — off-brand, should be «VSE Ai». Fixed in mockup.
ExampleChat /example-chat
Chat-with-model demo — shows what conversation looks like. Message bubbles, copy/refresh icons. Indicator (3/3) → goto Gift.
9:41
What can you do?
Chat GPT
Here are some things I can help with:
1. Q&A: I cover a wide range of topics.
2. Translation: between languages.
3. Reminders & to-do lists: I help organize your day…
Cool!

# You're using

All your AI agents are now in
one app — VSE Ai

Skip
Source: `pages/exampleChatPage/exampleChatPage.tsx`
Drift fix: in app heading «Eva-AI» — replaced with «VSE Ai» in mockup.
Gift (Welcome bonus) /gift
Final onboarding step — 50-token bonus with required Privacy + Terms consent. CTA enabled only when both checkboxes are on.
9:41

# Welcome!

VSE Ai — best AI aggregator
for Telegram

# Get 50 free tokens

To start using the app,
please confirm your consent

I agree to Privacy Policy

I agree to Terms of Service

Source: `pages/giftPage/giftPage.tsx`
Drift fix: in-app gift image is a static PNG. In mockup replaced with cyan-glow SVG in brand style (cyan accent + sparkles). Final icon TBD with you.
States: 2 checkboxes OFF / 1 ON / both ON (active CTA).
// 02 CORE · 4 screens

## Core flow

Home screen with composer + assistants + tab-bar, active chat with model, chat list, history. What users see 80% of the time.

Home /
Home screen. Header with model, h1 «Hi, %username%», composer, assistants scroll-carousel, bottom glass tab-bar.
9:41
// promo-banner area

# Hi, MULan!

## How can I help you?

Choose AI and ask your question

Gemini 2.0 Flash
Ready for your questions

### Assistants

All

#### Animal
Trainer

Pet training,
command teaching

#### Businessman

Strategy advice,
idea check,
planning help
Id…
Profile
VSE Ai
Chats
Source: `pages/mainPage/mainPage.tsx` + `features/home/ui/introductionHome.tsx` + `features/chat/chatModel/ui/MainInput.tsx`
Drift fix: tab-bar now matches canon (308×67, blur 36, squircle pill 61×61). In-app it was blur-xl + white@20% border + drop-shadow white glow → off-canon.
ChatModel (active) /chat-model
Active chat with model — header shows model, conversation (user/assistant bubbles), bottom composer. Messages scroll within.
9:41
Gemini 2.5 Pro
Explain quantum entanglement in simple words
Gemini 2.5 Pro
Imagine two coins in sealed boxes — one with you, one with a friend on another planet. The boxes are sealed; you don't know which is in yours.
When you open yours and see «heads» — you instantly know your friend has «tails». Not because a signal traveled faster than light, but because the state was linked from creation.
That's entanglement — two particles act as one system regardless of distance.
How is this used in tech?
Gemini 2.5 Pro
Source: `pages/chatModelPage/chatModelPage.tsx` + `features/chat/chatModel/ui/AIMessage,UserMessage,ChatInput`
Drift fix: User messages in-app use different styles (bg-blue/30 in exampleChat, bg-darkGray in chatModel). Unified to cyan-tinted glass bubble (right-aligned, asymmetric radius).
States: empty (shows `IntroductionModel`) / typing (3 cyan dots) / refresh / image attached.
ChatModel — Attach menu state · plus tapped
When user taps «+» in composer — a glass bottom-sheet expands with options. Replaces the single paperclip with a full menu in our canon style (iOS-inspired, not ChatGPT). Camera / Photos / Files as icon-grid on top, toggles and rows below.
9:41
Gemini 2.5 Pro
Brief dimmed conversation preview — focus on attach menu below...
Camera
Photos
Files
Voice
Generation params
Auto
Assistant style
Default
Web search
State: attach menu open. Close — tap «Cancel» or the dimmed area above.
Structure: 4 icon-grid actions on top (Camera / Photos / Files / Voice) → list rows with toggles and links (Params / Style / Web search).
Replaces the single paperclip in the composer. Web search toggle ON = model cites web sources.
AllChatList /all-chats-list
List of all chats: search input on top, chats by date with last-message preview, fixed «New chat» CTA at bottom.
9:41
Chats
Search chats
All 12
Text 7
Images 3
Video 2
Audio 0
Pinned
Today
Quantum entanglement
How is this used in tech?
12:34
Startup idea
Break this idea down with Lean Canvas framework
10:21
Yesterday
Logo for label
Generate 4 minimal-style variants
19:08
Document translation
Translate attached PDF to English
14:55
Profile
VSE Ai
Chats
Source: `pages/allChatListPage/allChatListPage.tsx` + `features/chat/allChatList/ui/`
Drift fix: «New chat» CTA in-app — `bg-gradient-to-t from-gray-900 via-gray-900/80` (off-canon). Replaced with cyan brand button + smooth gradient fade-out.
ChatHistory /chat-history
Past session archive — swipe by day. Each day = chat group with preview.
9:41
Chat history
29 Apr
28 Apr
27 Apr
26 Apr
25 Apr
29 April · 6 chats
12:34 Quantum entanglement
10:21 Startup idea
09:15 Quarterly sales analysis
Source: `pages/chatHistoryPage/chatHistoryPage.tsx`
Date pagination — horizontal scroll, active day = cyan pill, others = glass pill.
// 03 ACCOUNT · 3 screens

## Account & subscription

User profile, general settings, PLUS subscription page. Key monetization area.

Profile /profile
User account: name, email, subscription status (PLUS/FREE), payment history, payment methods.
9:41
Profile
Display name:
Mikhail Petrov
Email:
mikhail@example.com
PLUS Subscription
Subscription active until May 28, 2026
Payment history
Payment methods
Profile
VSE Ai
Chats
Source: `pages/profilePage/profilePage.tsx`
Conditional branches: PLUS / FREE / no subscription. Mockup shows PLUS — for FREE it would be «Upgrade to PLUS» instead of «PLUS Subscription».
Settings /settings
Main settings menu: PLUS banner on top, account, chat history, token balance, FAQ, legal links.
9:41
PLUS
Maximum features
for advanced users
Subscribe
Account
FREE
Chat history
Balance
277
Buy tokens
Invite a friend
Dark
Light
RU Russian
ENG English
FAQ
Privacy Policy Terms of Service
@ VSE Ai | Neural Networks, 2026
Profile
VSE Ai
Chats
Source: `pages/settingsPage/settingsPage.tsx`
PLUS banner changes by status: `plus` → PlusBanner (cancel/up-status), `free` → FreeBanner (upsell), no user → EmptyBanner. Mockup shows FREE upsell.
Drift fix: in-app Settings has a special bg gradient (purple/blue/teal in Layout.tsx) — off-canon. Removed in mockup, background unified.
Subscriptions PLUS /subscriptions
PLUS subscription page — sales-driven redesign (Task 4 of Spec): Year/Month toggle, Free vs PLUS, model catalog by tier, sticky CTA.
Source: `pages/subscriptionsPage/subscriptionsPage.tsx` + `features/settings/subscriptions/`
Implementation: ready in mockup.html (1393 lines, sales-driven redesign with model catalog, tier-gradients, USD/Stars currency toggle).
Open fullscreen: mockup.html ↗
// 04 AI MODELS · 3 screens

## Models & assistants

AI model catalog with detailed info, model picker for chat, assistants grid (Businessman / Investor / Marketer etc.).

InfoModel /info-model
Model detail page — header with logo/name, capabilities slider, description + tagline.
9:41
Model
Gemini 2.5 Pro
Google · Top model
Text
Code
Images
PDF

### About the model

Gemini 2.5 Pro — Google's flagship multimodal model. Up to 2M context tokens, natively handles text, images, audio, and video. Leader in reasoning and code analysis.

Context
2M tokens
Cost
15 tokens / request
Access
PLUS
Profile
VSE Ai
Chats
Source: `pages/infoModelPage/infoModelPage.tsx` + `features/infoModel/`
PLUS-only models must have cyan PLUS-badge. FREE-accessible show cost in tokens.
NewChatModel — model picker /new-chat-model
Provider-grouped accordion. One row per provider (GPT / Claude / Gemini / Grok / DeepSeek / Kimi), expand → version list with radio. Colored letter-avatars per provider. «New» badge on fresh top models.
9:41

## AI Models

Text
Images
Video
Audio
G
GPT i
OpenAI · GPT-5
GPT-5
OpenAI flagship · complex analysis
GPT-5.4 Pro New
Top reasoning · coding
GPT-4o
Excellent quality for most tasks
GPT-4o Mini
Fast and smart · free
C
Claude i
Anthropic · Sonnet 4.5
G
Gemini i
Google · 2.5 Pro
X
Grok i
xAI · Grok 4
D
DeepSeek i
V3.1 · Universal
K
Kimi i
Moonshot · K2
Source: CANON from `brandbook-public/mockup.html` (T2 v7) — provider-grouped accordion.
Drift fix: my previous version (tier-organized with NEW/PLUS/FREE badges) is CANCELED. Restored to canonical provider-accordion.
Colored avatars: `openai` (#1A6E48), `anthr` (#B25A2B), `google` (#2C5DB5), `xai` (#2A2A2A), `deepseek` (#5B43C8), `kimi` (#4A7B5C).
Assistant /assistant
Assistants grid 2 cols (mobile). Each — image card 190px with title and star (favorite). FREE-locked = opacity 0.4.
9:41
Assistants
Search assistant
Businessman
Strategy, negotiation, presentations
Investor
Market analysis, startup valuation
Marketer
Content, advertising, analytics
Psychologist
Emotions, support, motivation
Lawyer
Contracts, disputes, claims
Chef
Recipes, menu, diet
Profile
VSE Ai
Chats
Source: `pages/assisitantPage/assistantPage.tsx`
Active favorite = cyan filled star. FREE-locked assistants (if user.subscription === 'free' and not in FREE_ALLOWED) = opacity 0.4 + lock icon, click redirects to /subscriptions.
// 05 MONETIZATION · 4 screens

## Monetization

Buy tokens (USD / Telegram Stars), referral program, payment history, saved cards.

Token /token
5 token packs (USD or Stars). Currency tab toggle. Dynamic CPU. Sticky «Pay» CTA at bottom.
9:41
Buy tokens

# Buy tokens

Tokens are available immediately after top-up. They don't expire or get locked when subscription ends.

USD
Telegram Stars
2,500 tokens
≈ $0.0022 / token
499 $
5,800 tokens
≈ $0.0019 / token
−14%
999 $
10,000 tokens
≈ $0.0017 / token
1 499 $
20,000 tokens
≈ $0.0014 / token
2 499 $
50,000 tokens
≈ $0.0011 / token · −50%
4 999 $
Source: `pages/tokenPage/tokenPage.tsx` + `entities/tokens/TopUpList`
Selected bundle = cyan border + cyan glow + cyan price hint. Sticky white CTA at bottom with dynamic total.
Referral /referral
Referral program: 100 tokens per friend. 3-step cyan timeline, stats, copy/share link, share button.
9:41
Invite friends

# Invite friends

## Get 100 tokens
per friend

You invite friends with the link
Friends sign up in the app
You earn 100 tokens per friend
Friends invited: 12
Tokens earned: 1 200
Invite link
t.me/VSEIIBOT?start=ref_a4f9
Source: `pages/referralPage/referralPage.tsx`
Drift fix: in-app uses `bg-darkGray` cards and `text-cyan-400` (Tailwind preset). Unified to canon glass-cards and `--accent-cyan`.
Payments (history) /payments
Payment history: sticky «Sort» header with dropdown, expandable transaction cards with status, description, method, date.
9:41
Payment history
Sort
Newest first
PLUS · Year
29 Apr 2026 · 12:34
2 299 $
SUCCESS
Visa **4242
5,800 tokens
22 Apr 2026 · 15:47
999 $
SUCCESS
10,000 tokens
15 Apr 2026 · 09:21
1 499 $
DECLINED
Source: `pages/paymentsPage/paymentsPage.tsx` + `features/payments/cardList/ui/transactionCard.tsx`
Empty state: glass card 8 × 12 px padding with CreditCard icon and «No payments» text. Status colors: completed=green, failed=red, pending=warn.
Cards /cards
Saved cards — list with brand logo, last4, delete button. Empty state centered.
9:41
Payment methods

## Saved cards

VISA
Visa
**4242
Mastercard
**5588
Add card
Source: `pages/cardPage/cardPage.tsx` + `features/carrd/cardList/`
In live app — empty state: «No cards» / «Add a card to make purchases» centered.
// 06 GROWTH · 4 screens

## Affiliate & growth

Affiliate program for bloggers (with invited-friends gallery), application form, ad overlays (reward per view), affiliate entry point.

Partner (entry) /partner
Affiliate entry point — simple redirect to /partner-blog (for bloggers).
9:41
Affiliate program

## Affiliate program

Connect the app to your audience and earn from every subscription.

Your status
Not connected
Apply and get 30% revenue share from every invited PLUS user.
For bloggers
YouTube · TikTok · Telegram
Apply
Form · 5 minutes
Program terms
30% revenue · pay-out monthly
Source: `pages/partnerPage/partnerPage.tsx`
Drift fix v2: previous version had a giant chevron (class without sizes) and big 44×44 colored icon boxes. Replaced with canonical list-card pattern (as Settings/Profile) — unified visual language across the entire app.
Hero-stats card on top — cyan glow in our canon style, positions «connect» as the goal.
PartnerBlog /partner-blog
Affiliate referral — 3-step cyan timeline, invited-friends photo gallery, referral link.
9:41
Affiliate program

# Affiliate program

You invite a friend with the link
Your friend signs up
You earn tokens
You've already invited 4 friends
Maria
Mat…
Alex
Zaytsev
Anton
Ivanov
Ivan
Shchur
Your link
t.me/VSEIIBOT?start=blog_a4f9
Source: `pages/partnerBlogerPage/referralBlogerPage.tsx`
Avatars from Unsplash in-app — here replaced with gradient-circles + cyan border. Real photos will be loaded by frontend.
Apply (form) /apply
Affiliate-program form — Name, Telegram, YouTube, Instagram, TikTok, VK, other fields. Submit with success state.
9:41
Fill the form

## Fill the form

Name
Telegram
YouTube
Instagram
TikTok
Source: `pages/applyPage/applyPage.tsx`
Drift fix: in-app inputs use `text-black bg-white` (on dark background!) and `focus:ring-blue-500` — legacy garbage. Replaced with canon glass inputs + cyan focus.
Ads (reward overlay) /ads
Reward overlay after watching an ad — Diamond icon, «+15 tokens», «Watch more» CTA. Below — card of advertised app.
9:41
Hooray! You got
+15 tokens!
Total Battle: Strategy Games
Kingdom Wars: Kings & Castles
Source: `pages/adsPage/adsPage.tsx`
Overlay appears 2s after load. Before overlay — live ad-video on the reward content spot (LazyImage `Ads`).
// 07 STATIC · 4 screens

## Static & info

FAQ with accordion, legal texts (Privacy / Terms), news. The simplest screens — but in unified canon.

Questions (FAQ) /questions
FAQ — Radix Accordion with expansion. ChevronRight rotates 90° on open.
9:41
FAQ

## Frequently asked questions

What are tokens and how many do I need?
Tokens are the app's internal currency. 1 model request costs 1–25 tokens depending on model and complexity. Buy packs in the «Balance» tab.
What's the difference between PLUS and FREE?
How to cancel subscription?
Which models are available?
Where to find chat history?
Source: `pages/questionsPage/questionsPage.tsx` (Radix Accordion + `shared/data/questionsData`)
Open state: chevron rotates 90°, heading turns white (vs grey when closed).
Privacy /privacy
Privacy Policy — long scrollable text document. h2/h3 headings, paragraphs.
9:41
Privacy

# Privacy Policy

Updated 22.04.2026

## 1. General provisions

This Privacy Policy governs the processing of personal data of «VSE Ai» Telegram Mini App users (hereinafter — «Service»). By using the Service, you agree to the terms of this Policy.

## 2. What data we collect

We process the following data categories:

- Telegram identifier (telegram_user_id)
- Username and avatar (passed by Telegram)
- AI-model request history
- Payment operations (via secured provider)

## 3. Processing purposes

Data is processed to provide AI generation services, manage subscriptions and token balances, and prevent fraud.

## 4. Retention and deletion

Chat history is retained 90 days. Payment data — for the period required by law. Upon request, the user may delete their account via support.

Source: `pages/privacyPage/privacyPage.tsx`
Text content — H2 headings cyan, body white@60%. Actual text loaded from `shared/data/`.
Conditions (Terms) /conditions
Terms of Service — same structure as Privacy, different content.
9:41
Agreement

# Terms of Service

Updated 22.04.2026

## 1. Subject of agreement

This Agreement defines the rules for using the «VSE Ai» Telegram Mini App. By registering and using the Service, you accept the terms of this Agreement in full.

## 2. PLUS Subscription

PLUS subscription is purchased for 1 month or 1 year with auto-renewal. Cancel is available anytime via the «Profile» section — after cancellation, access remains until the end of the paid period.

## 3. Refunds

Refunds are available within 14 days of payment, provided the service was not actually used (no requests to paid models were made).

## 4. Restrictions

The service cannot be used to generate prohibited content (CSAM, terrorism, discrimination, copyright infringement).

Source: `pages/userConditionsPage/userConditionPage.tsx`
Structure mirrors Privacy — unified layout for legal documents.
News /news
News and updates — card feed. Page is currently empty in app — added mockup with «how it should look» design.
9:41
News

## What's new

NEW
GPT-5.4 Pro now available in PLUS
OpenAI's flagship model with 1M context tokens and improved reasoning.
29 Apr
Veo 3.1 — video generation up to 30 seconds
New long-clip mode with native audio.
25 Apr
Referral program: 100 tokens per friend
Invite friends and earn tokens for each signup.
20 Apr
Source: `pages/newslPage/newsPage.tsx`
Page is EMPTY in live app — only ``p-4 h-screen`` div without content. Filled out structure analogous to other feed screens.
// For frontend · drop-in archives
Download design as package
Two archives: full design (everything in the brandbook — 4 screen versions, mockups, params, loaders, banners, icons, spec) or banners only (mini-package with CSS tokens and React components for quick drop-in).
↓ Full design (5.5 MB) ↓ Banners only (1.9 MB) Handoff page →
82 files · both themes · both languages · auth-free
// 08 BANNERS · 3 formats

## PLUS Banners

Animated strip banners for all breakpoints — premium liquid-glass with dynamic glow. Sizes match the release-notes series exactly (393×180 / 768×261 / 1200×260) — a unified raster grid for all in-app banners. PLUS banner on /settings, hero on /subscriptions, landing marketing.

Mobile 393 × 180 · ~2.18:1
Mini App in Telegram (mobile viewport). PLUS banner on /settings, /profile (applied via `<PlusBanner />`).
Download: ↓ MP4 393×180 · ↓ Hero 9:16 (archive 1080×1920)
Tablet 768 × 261 · ~2.94:1
Tablet breakpoint (640px ≤ width < 1024px). Auto-play, gradient liquid + cyan glow.
Download: ↓ MP4 768×261 · ↓ Hero 16:9 (archive 1920×1080)
Desktop 1200 × 260 · ~4.6:1
Desktop breakpoint (width ≥ 1024px). Full desktop strip, content max-width 1120px (Task 3 of Spec).
Download: ↓ MP4 1200×260 · ↓ Hero 16:9 (archive 1920×1080)
// 08b RELEASE NOTES · 3 formats

## Release Notes Banners

Second banner series — for new version announcements ("What's new"). Narrow horizontal strips matching app breakpoints. Same liquid-glass language as PLUS, but without particle-glow and without the ∞ logo — a calm "info / update" mood, not "promo". Animation: slow drift of color blobs under glass + breathing cyan accent line.

Mobile 393 × 180 · ~2.18:1
Mini App in Telegram, mobile viewport. Vertical stack: chip → title → 4 bullets in 2×2 grid.
Download / open: ↓ HTML 393×180 · open in new tab ↗
Tablet 768 × 261 · ~2.94:1
Tablet breakpoint. Horizontal layout: chip + 42px title on the left, features 2×2 on the right.
Download / open: ↓ HTML 768×261 · open in new tab ↗
Desktop 1200 × 260 · ~4.6:1
Desktop breakpoint. Same layout as tablet but wider, with 56px title. Hero release announcement on /home or /news.
Download / open: ↓ HTML 1200×260 · open in new tab ↗
// 09 BRAND SYMBOL & LOADERS · 12 logos + Liquid Loader

## Brand mark ∞ and loaders

Master path: unified Cassini ∞ form (c/a=0.99, target_height=50). 12 logo variants via single SVG `<symbol>` + ::use. Liquid Loader (3 sizes × 3 tempos) for loading states. Full collection and animations on /loaders.

01 · White solid
primary
02 · Outline
secondary
03 · Cyan accent
brand
04 · Liquid glass
premium
05 · Silver gradient
accent
06 · Glow
hero/splash
07 · Cyan gradient
marketing
08 · Inverted
light bg
09 · Bichromatic
duotone
10 · Neon
night
11 · Wireframe
technical
12 · Dotted
decorative
LIQUID LOADER · 6 STATES

### Brand-mark animations

Idle (breathing) · Listening (liquid waves) · Speaking (voice bars) · Thinking (cyan halo pulse) · Alert (fast bright pulse) · Sleeping (scaleY collapse). Used for loading-states and future voice-assistant face-system.

Open loaders.html ↗
// 10 GENERATION PARAMS · 2 modals

## Generation params

Liquid glass parameter modals for image / video AI models. Include reference-image, aspect ratios (5 options), quality/resolution, duration (4–30 sec video), start/end frames, audio toggle, dynamic cost calculation in tokens. Opened from chat composer via icon-toggle.

### Images · Params

- · Reference-image upload (text-to-img / img-to-img)
- · 5 aspect ratios: 1:1 / 4:3 / 16:9 / 2:3 / 9:16
- · Quality: Low (30) / Standard (90) / High (185 tokens)
- · Stepper quantity: up to 4 images
- · Dynamic cost calculation
- · White CTA «Apply» pill

### Video · Params

- · 2 frame slots: start + end
- · Duration 4–30 sec via slider
- · Resolution: 480p / 720p / 1080p / 4K
- · 5 aspect ratios (including 21:9 cinematic)
- · Audio toggle (+30% cost)
- · Cost: base 110 × dur/5 × resolution × audio-mult

Open fullscreen ↗ Download params.html
Source: `features/audio/ui/videoPopup.tsx` (video parameters) + `features/chat/chatModel/ui/MainInput.tsx` (invocation).
In live app opens as bottom-sheet or modal on icon-toggle click in composer.