> For the complete documentation index, see [llms.txt](https://amber-metaverse.gitbook.io/trend-arena/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://amber-metaverse.gitbook.io/trend-arena/produkt/visual.md).

# Visual Design Guide

Полное руководство по визуальному стилю платформы для дизайнеров. Дата обновления: 2026-03-25

***

## 1. ОБЩАЯ КОНЦЕПЦИЯ

**Творческий ориентир: "The Gilded Gauntlet"**

**Жанр:** SocialFi / Gamified Trading — high-stakes, cinematic trading environment. **Платформа:** Telegram Mini App (mobile-first, WebView). **Режим:** Dark theme по умолчанию (основной и единственный для пользователей). **Ощущение:** Напряжение между агрессивной dark-ops эстетикой и престижем high-roller казино. "Mobile Game Editorial" experience — высококонтрастная типографика, намеренная асимметрия, отказ от плоских скучных контейнеров в пользу глубины и движения.

**Ключевые принципы:**

* Atmospheric layering — ambient glows и glassmorphism создают ощущение UI, парящего над живым двигателем огня и золота
* Depth is a weapon — тональные переходы вместо границ, Light Emission вместо стандартных теней
* Numbers are the hero — крупные, широкие числа (Space Grotesk) как центр внимания

***

## 2. ЦВЕТОВАЯ ПАЛИТРА

### 2.1 Primary Palette (The Gold Standard)

| Название              | HEX       | Назначение                                                                                 |
| --------------------- | --------- | ------------------------------------------------------------------------------------------ |
| **Primary**           | `#ffba41` | Основной цвет действия. High-energy gold. Кнопки, CTA, акценты                             |
| **Primary Container** | `#d4930a` | Глубокие action-поверхности, pressed states, градиентная пара к Primary                    |
| **On-Primary**        | `#432c00` | Текст на primary-кнопках — глубокий коричнево-чёрный для максимальной читаемости на золоте |
| **Gold**              | `#D0B772` | Трофеи, ранги, лидерборд                                                                   |

### 2.2 Semantic Accents (The Heat Map)

| Назначение         | Цвет                | HEX       | Использование                                  |
| ------------------ | ------------------- | --------- | ---------------------------------------------- |
| **Profit / Live**  | Неоновый зелёный    | `#00C951` | Winning streaks, активные рынки, свечи вверх   |
| **Loss / Extreme** | Агрессивный красный | `#FB2C36` | Ликвидации, high-risk alerts, свечи вниз       |
| **Bonding / Cold** | Технический синий   | `#2B7FFF` | Ранние стадии bonding curve, "холодные" активы |

### 2.3 Surface Hierarchy (Dark Theme)

**Правило "No-Line":** 1px solid borders запрещены для секционирования. Пространство определяется через **Tonal Transitions** — разницу цветов поверхностей.

| Уровень                | Роль                   | HEX       | Описание                            |
| ---------------------- | ---------------------- | --------- | ----------------------------------- |
| **Level 0 (Base)**     | Surface Dim            | `#131314` | Основной фон приложения — фундамент |
| **Level 1 (Sections)** | Surface Container      | `#201f20` | Широкие области контента            |
| **Level 2 (Cards)**    | Surface Container High | `#2a2a2b` | Интерактивные единицы — карточки    |
| Surface Container Low  | —                      | `#1a191a` | Для вложенных/утопленных элементов  |

| Роль             | Значение                 | Описание                                |
| ---------------- | ------------------------ | --------------------------------------- |
| Foreground       | `#e8e4df`                | Основной текст (тёплый, не чисто белый) |
| Muted Foreground | `#8a8078`                | Второстепенный текст                    |
| Border           | `rgba(255,255,255,0.08)` | Ghost borders — 8% opacity              |
| Input            | `rgba(255,255,255,0.12)` | Фон полей ввода                         |
| Surface Tint     | `#ffba41`                | Золотой тинт для ambient-эффектов       |

**Правило "Tint Your Greys":** Все "нейтральные" поверхности имеют лёгкий оттенок primary gold. Никогда не использовать чистый `#000` или `#FFF`.

### 2.4 Температурные цвета (ключевая визуальная система)

| Температура | Emoji | Цвет текста  | Фон overlay     | Цвет графика                         | Stroke таймера |
| ----------- | ----- | ------------ | --------------- | ------------------------------------ | -------------- |
| Cold ❄️     | ❄️    | `blue-500`   | `blue-400/20`   | `#2B7FFF`                            | `blue-500`     |
| Hot ☀️      | ☀️    | `yellow-500` | `yellow-500/20` | `#ffcc00` (зона) / `#FFC202` (линия) | `yellow-500`   |
| Extreme 🔥  | 🔥    | `red-500`    | `red-500/20`    | `#FB2C36`                            | `red-500`      |

***

## 3. ТИПОГРАФИКА: Editorial Aggression

Пара: техническая точность **Inter** + брутальная, широкая геометрия **Space Grotesk**.

| Роль          | Шрифт                | Вес                | Использование                                                                                                                          |
| ------------- | -------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
| **Display**   | **Space Grotesk**    | 700                | Крупные числа (PnL, баланс, энергия), заголовки арен. `display-lg` (3.5rem) для "Big Win" моментов; `display-sm` (2.25rem) для баланса |
| **Headlines** | **Space Grotesk**    | 700                | Заголовки секций. `headline-sm` — ALL-CAPS для ощущения "Command Center"                                                               |
| **Body / UI** | **Inter**            | 400, 500, 600, 700 | Workhorse font. Весь основной текст, кнопки, лейблы. `body-md` (0.875rem) для большинства UI                                           |
| **Mono**      | **System monospace** | 400                | Эксклюзивно для Wallet Addresses и Transaction Hashes — сигнализирует "Technical Truth"                                                |

**Размеры текста (Tailwind):**

* `text-[10px]` — микро-лейблы (процент BC)
* `text-xs` (12px) — метаданные, вторичный текст
* `text-sm` (14px) — основной UI-текст, кнопки
* `text-base` (16px) — имя пользователя, лейблы полей
* `text-lg` (18px) — заголовки секций
* `text-xl` — `text-4xl` — крупные числа (баланс, энергия). **Всегда Space Grotesk.**

***

## 4. ELEVATION & DEPTH

### 4.1 The Layering Principle

* Stack `surface-container-low` cards на `surface-container` background → "sunken" slot-machine эффект
* Stack `surface-container-high` → "raised" floating эффект
* **Ambient Shadows:** для floating modals: `blur: 40px`, `spread: -5px`, цвет из `surface-tint` при 8% opacity → golden under-glow вместо серой тени

### 4.2 Главный фон приложения (GradientBackground)

**Ambient Glows** — absolute-positioned radial gradients в углах экрана:

| Glow          | Позиция                      | Градиент            | Blur |
| ------------- | ---------------------------- | ------------------- | ---- |
| Top Right     | `top: 0, right: -113vw`      | `#FF5E00 → #000000` | 40px |
| Top Left      | `top: -40vh, left: -110vw`   | `#FF9900 → #995C00` | 40px |
| Bottom Left   | `bottom: -47vh, left: -90vw` | `#FF9900 → #995C00` | 60px |
| Bottom Center | `bottom: -52vh, left: -25vw` | `#FF5E00 → #000000` | 40px |

Каждый glow: `width: 130vw, height: 130vw`. Результат — мягкое ambient-свечение, через которое "Arena Fire" просвечивает при скролле.

### 4.2b Фон экрана Profile (отдельный)

```css
background: linear-gradient(
  172.38deg,
  #000000 -3.51%,
  #C92C01 27.84%,
  #FEC905 54.74%,
  #F48206 72.21%,
  #000000 108.78%
);
```

Переход: чёрный → тёмно-красный → золотой → оранжевый → чёрный. Самый яркий экран — "Big Win" moment.

### 4.3 Градиенты карточек токенов (Arena)

**Temperature Overlays:** карточки с высокой активностью получают 2% opacity red-to-orange gradient overlay для индикации "Heat."

Базовый паттерн: `bg-gradient-to-br from-black/10 via-black/10 via-60% to-{color}/30`

| Состояние        | Конечный цвет   | Визуальный эффект               |
| ---------------- | --------------- | ------------------------------- |
| Bonding Curve    | `blue-500/30`   | Синеватое свечение справа-снизу |
| Live — Cold      | `white/30`      | Нейтральное, без цвета          |
| Live — Hot       | `yellow-500/30` | Тёплое золотистое свечение      |
| Live — Extreme   | `red-500/30`    | Красное горячее свечение        |
| Refund / Crashed | `zinc-500/30`   | Серое, потухшее                 |

### 4.4 Градиенты кнопок и навигации

| Элемент                | Градиент                                                                                  |
| ---------------------- | ----------------------------------------------------------------------------------------- |
| **Throne CTA**         | `linear-gradient(135deg, primary → primary-container)` — обязательно для всех primary CTA |
| Active nav icon (круг) | `from-amber-500 to-orange-600`                                                            |
| Hot Seat icon glow     | `from-yellow-500 to-orange-500`                                                           |
| Profit badge           | Solid `#00C951` или `#FB2C36`                                                             |
| Leaderboard top-3 row  | `from-yellow-950/20 to-orange-950/20` (dark)                                              |
| Gradient текст (ранг)  | `from-yellow-400 to-yellow-600`, `text-transparent bg-clip-text`                          |

***

## 5. GLASS-МОРФИЗМ (Ключевой визуальный паттерн)

Glassmorphism обязателен для Bottom Navigation и Top Headers — позволяет "Arena Fire" просвечивать при скролле.

### 5.1 Glass Card

```css
background: rgba(0, 0, 0, 0.1);       /* dark: bg-black/10 */
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 16px;                   /* rounded-2xl */

/* Верхний блик — golden tint в dark mode */
::before { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7); }

/* Нижний блик */
::after { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.7); }
```

### 5.2 Glass Button

```css
background: rgba(255, 255, 255, 0.1);  /* dark: bg-white/10 */
backdrop-filter: blur(16px);
border-radius: 8px;                    /* rounded-md */
transition: all 200ms;
/* Active state: scale(0.95) */
/* Hover: brightness(1.1) */
```

### 5.3 Glass Tabs

```css
/* Контейнер */
background: rgba(255, 255, 255, 0.05); /* bg-white/5 */
border-radius: 8px;
padding: 3px;

/* Активный таб */
background: rgba(255, 255, 255, 0.1);  /* bg-white/10 */
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
```

### 5.4 Glass Input

```css
background: surface-container-low;      /* #1a191a */
border: 1px solid rgba(255,255,255,0.1); /* Ghost Border 10% */
border-radius: 8px;
/* Focus: border → primary (#ffba41), ring → primary/30 */
```

### 5.5 Quick Swap панель (floating)

```css
position: fixed;
bottom: 80px;                          /* над навигацией */
background: rgba(0, 0, 0, 0.4);       /* bg-black/40 */
backdrop-filter: blur(24px);           /* backdrop-blur-xl */
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
```

***

## 6. КОМПОНЕНТЫ

### 6.1 Кнопки

**Throne CTA (Primary) — главная кнопка действия:**

* Фон: `linear-gradient(135deg, #ffba41 → #d4930a)` — обязательный градиент
* Текст: `#432c00` (On-Primary)
* Скруглёние: `rounded-xl` (12px)
* Пульсация: `1.5s ease-in-out infinite` — расходящаяся золотая тень
* Hover: `brightness(1.1)`

**Standard Action:**

* Фон: `bg-primary` (solid `#ffba41`)
* Скруглёние: `rounded-md` (6px)
* Тень: `shadow-xs`

**Ghost Action:**

* Без фона. Текст `primary` с Ghost Border (10% opacity `outline-variant`)
* Hover: `bg-primary/10`

**Quick Swap Buy/Sell:**

* Buy ($5, $10, $25): `bg-primary`, иконка `ArrowUp`
* Sell (10%, 20%, 30%): `bg-muted`, иконка `ArrowDown`
* Размер: компактный `py-2 px-2`, `text-xs font-medium`

**Размеры:**

* `sm`: h-8, px-3
* `default`: h-9, px-4
* `lg`: h-10, px-6
* `xl`: h-12, px-8, `text-lg font-bold`, `rounded-xl`
* `icon`: size-9 (квадрат)

### 6.2 Cards & Lists

**The Arena Card:**

* Скруглёние: `rounded-2xl` (16px)
* Фон: `surface-container-high` (`#2a2a2b`)
* **Запрет dividers:** используем `spacing-4` (0.9rem) вертикального whitespace между элементами списка
* **Temperature Overlays:** карточки с высокой активностью — 2% opacity red-to-orange gradient overlay

Структура:

```
┌──────────────────────────────────────┐
│ [Logo]  Airdrop                  🔵 │  ← иконка статуса (BC/Live/Refund)
│         $0.07404  ↗ 232.1%  MC $37K │
│ ████████████████████░░ 90%           │  ← BC progress bar (синий)
│ Mentions: ~85.6K        $9.0K/$10K  │
└──────────────────────────────────────┘
```

* Статус-индикатор: цветной кружок справа вверху (синий BC, зелёный Live, серый Refund)
* Процент роста: зелёный badge `profitGreen` (solid `#00C951`)
* Progress bar BC: `bg-blue-500` на `bg-zinc-700`, высота `h-1.5`
* Mentions: текст `text-muted-foreground`

### 6.3 Нижняя навигация (5 табов)

```
┌──────────────────────────────────────────────┐
│  Arena    Portfolio   Hot Seat   Trade   Profile │
│   🌡️        📋         🔥        ⇄        👤    │
└──────────────────────────────────────────────┘
```

| Таб       | Иконка         | Библиотека иконок              |
| --------- | -------------- | ------------------------------ |
| Arena     | Термометр      | `fluent:temperature-16-filled` |
| Portfolio | Кошелёк        | `lucide:wallet`                |
| Hot Seat  | Огонь          | `lucide:Flame`                 |
| Trade     | Стрелки обмена | `eva:swap-fill`                |
| Profile   | Профиль        | `iconamoon:profile`            |

**Стилистика:**

* Высота: `h-20`, скруглёние верха: `rounded-t-3xl`
* Обязательно: `backdrop-filter: blur(12px)` — glassmorphism, чтобы Arena Fire просвечивала
* **Неактивный таб:** иконка + текст `text-muted-foreground`
* **Активный таб:** иконка поднимается (`-translate-y-2`), увеличивается (`scale-110`), под ней golden radial glow с градиентом `from-primary to-primary-container`, тень `shadow-primary/40`, текст `text-foreground`
* Hot Seat dot: `bg-primary` (pending) или `bg-loss` (dethroned)

### 6.4 Badges / Pills

| Вариант     | Фон                      | Текст                 | Использование           |
| ----------- | ------------------------ | --------------------- | ----------------------- |
| green       | `profit/10`              | `profit` (`#00C951`)  | Положительные метрики   |
| red         | `loss/10`                | `loss` (`#FB2C36`)    | Отрицательные метрики   |
| yellow      | `primary/10`             | `primary` (`#ffba41`) | Предупреждения          |
| blue        | `bonding/10`             | `bonding` (`#2B7FFF`) | Информация, BC статус   |
| profitGreen | `profit` (solid)         | `black`               | Процент роста (+232.1%) |
| profitRed   | `loss` (solid)           | `black`               | Процент падения         |
| ghost       | `surface-container-high` | `foreground`          | Нейтральные теги        |

### 6.5 The "Heat Meter"

Кастомный progress bar для bonding curve:

* Градиент: `primary (#ffba41) → primary-container (#d4930a) → loss (#FB2C36)`
* Показывает прогресс от холодного к горячему

### 6.6 Prestige / Статус-тиры

| Тир      | Emoji | Процентиль | Цвет ассоциации       |
| -------- | ----- | ---------- | --------------------- |
| Bronze   | 🟫    | ≤ 50%      | Коричневый            |
| Silver   | 🥈    | 50-75%     | Серебристый           |
| Gold     | 🥇    | 75-90%     | Золотой               |
| Platinum | 🟦    | 90-99%     | Синий                 |
| Diamond  | 💎    | ≥ 99%      | Голубой/бриллиантовый |

### 6.7 Daily Streak календарь

```
        SUN  MON  TUE  WED  THU  FRI  SAT
         ✅   ✅   ✅   ✅   ✅   ✅   ○     ← 6d streak
```

* **Выполненный день:** круг с градиентом `linear-gradient(301.5deg, #F4A533 48.76%, #FFFFFF 98.97%)`, белая галочка внутри (`stroke-width: 3`)
* **Текущий день (не завершён):** полукруглая дуга, фон `#3f3f46`, белый прогресс
* Счётчик: иконка огня 🔥 + число дней справа

***

## 7. ГРАФИКИ И ВИЗУАЛИЗАЦИИ

### 7.1 Свечной график (Token Screen)

**Библиотека:** Lightweight Charts (TradingView)

| Элемент               | Цвет                          |
| --------------------- | ----------------------------- |
| Up candle (рост)      | `#00C951` (profit green)      |
| Down candle (падение) | `#FB2C36` (loss red)          |
| Сетка                 | `#27272A` (surface-container) |
| Текст осей            | `#9F9FA9` (muted-foreground)  |
| Линия цены            | `#E4E4E7`                     |
| Фон                   | Прозрачный                    |

### 7.2 Температурный график (Mentions)

| Зона    | Цвет заливки              | Цвет линии |
| ------- | ------------------------- | ---------- |
| Cold    | `rgba(43, 127, 255, 0.5)` | `#007AFF`  |
| Hot     | `#ffcc00` с opacity       | `#FFC202`  |
| Extreme | `rgba(251, 44, 54, 0.2)`  | `#FF000F`  |

### 7.3 Burns-график

* Цвет баров: `#9CA3AF` (gray-400)

### 7.4 Portfolio area-chart

* Цвет линии: `#EAB308` (amber/золотой)
* Библиотека: Recharts

### 7.5 Временные диапазоны

```
[ 1H ]  [ 6H ]  [ 1D ]  [ 1W ]  [ 1MO ]  [ 3MO ]
```

***

## 8. ЭКРАНЫ (Референс)

### 8.1 Arena (Главная лента)

* Фон: ambient glows приложения
* Лента: вертикальный список Arena Cards
* Карточки: glass + temperature overlay gradient
* BC-токены: синий progress bar + Heat Meter
* Live-токены: температурные иконки (❄️/☀️/🔥), рамка отсутствует — вместо неё tonal overlay

### 8.2 Portfolio

* Баланс: крупный `$125`, **Space Grotesk display-sm** — числа как герой
* P\&L: зелёный `↗ $17.9` + badge `↗ 16.7%` (profit green)
* Area-chart: золотой на тёмном фоне
* Кошельки: два ряда — USD и ARENA
* Монеты: список позиций — spacing, не dividers

### 8.3 Hot Seat

* Табы: `Live` / `Leaderboard` (glass-табы)
* Таймер: "Resets in 2d 02h 21m 27s"
* Throne Card: glass-карточка с:
  * Корона: золотая иконка с glow `drop-shadow rgba(251,191,36,0.5)`
  * Энергия: `⚡ 1.8393` крупно (Space Grotesk, primary)
  * CTA: Throne CTA — градиент primary→primary-container с пульсацией
* Quick Buy: карусель карточек
* Recent Activity: лента с аватарами, энергией, временем

### 8.4 Trade (Swap)

* Два поля: "You pay" / "You receive" — **Glass Input** style
* Пресеты: `25%`, `50%`, `MAX`
* CTA: Throne CTA "Swap"

### 8.5 Profile

* Фон: яркий градиент (чёрный → красный → золотой → оранжевый → чёрный) — "Big Win" moment
* Аватар: `w-16 h-16`, `rounded-full`
* Статус-badge: glass-pill с ранговой информацией
* Daily Streak: календарь 7 дней
* Tasks: аккордеон-секции с progress bar

***

## 9. АНИМАЦИИ И ПЕРЕХОДЫ

**Правило:** Не использовать стандартный easing. Использовать **"Back"** или **"Quint"** easing для snappy, game-like feel.

### 9.1 Переходы между экранами

| Анимация          | Длительность | Easing                                         |
| ----------------- | ------------ | ---------------------------------------------- |
| Slide in (вправо) | 300ms        | `cubic-bezier(0.34, 1.56, 0.64, 1)` (Back out) |
| Slide out (влево) | 300ms        | `cubic-bezier(0.36, 0, 0.66, -0.56)` (Back in) |
| Fade in           | 300ms        | `cubic-bezier(0.22, 1, 0.36, 1)` (Quint out)   |
| Scale in          | 300ms        | `cubic-bezier(0.34, 1.56, 0.64, 1)` (Back out) |

### 9.2 Интерактивные анимации

| Элемент         | Эффект                                                      |
| --------------- | ----------------------------------------------------------- |
| Кнопка (tap)    | `scale(0.95)` + `brightness(1.1)`                           |
| Throne CTA      | Пульсирующая золотая тень `1.5s ease-in-out infinite`       |
| Button ping     | Расходящаяся golden тень `2s Back easing infinite`          |
| Active nav icon | Подъём `-translate-y-2` + `scale(1.1)` + golden radial glow |
| Progress bar    | Заполнение `width 0→100%`, `500ms Quint easing`             |

### 9.3 Длительности

* Быстрые: `100ms` (hover states)
* Стандартные: `200-300ms` (переходы, кнопки)
* Медленные: `500ms` (progress bars)
* Бесконечные: `1.5-2s` (pulse/ping анимации)

***

## 10. ИКОНКИ

**Основная библиотека:** Lucide React + @iconify/react

**Часто используемые:**

* `TrendingUp` / `TrendingDown` — рост/падение
* `Flame` — Hot Seat, streak
* `Crown` — трон
* `Trophy` — достижения, ранг
* `Zap` — энергия
* `Clock` — таймер
* `Users` — рефералы, лиги
* `Wallet` — портфолио
* `Check` — выполнено
* `XCircle` — ошибка
* `Loader2` — загрузка (вращение)
* `ArrowUp` / `ArrowDown` — buy/sell

**Эмодзи как иконки:**

* 🔵 Bonding Curve
* 🟢 Live
* 💀 Refund
* ❄️ Cold / ☀️ Hot / 🔥 Extreme
* 🟫🥈🥇🟦💎 Prestige тиры
* 👑 Корона

***

## 11. СКРУГЛЁНИЯ (Border Radius)

| Элемент                 | Радиус | Tailwind                                                    |
| ----------------------- | ------ | ----------------------------------------------------------- |
| Аватары, иконки         | 50%    | `rounded-full`                                              |
| Карточки (Arena Card)   | 16px   | `rounded-2xl`                                               |
| Throne CTA              | 12px   | `rounded-xl`                                                |
| Кнопки (base)           | 6px    | `rounded-md`                                                |
| Badges (base)           | 6px    | `rounded-md` (переопределяется на `rounded-full` для pills) |
| Нижняя навигация (верх) | 24px   | `rounded-t-3xl`                                             |
| Glass Input             | 8px    | `rounded-md`                                                |

***

## 12. ТЕНИ И СВЕЧЕНИЕ (Light Emission)

**Правило:** Не стандартные Material shadows. Используем **Light Emission** — golden under-glow.

| Элемент           | Тень                                                                           |
| ----------------- | ------------------------------------------------------------------------------ |
| Arena Card        | Без тени — tonal depth через surface levels                                    |
| Кнопки            | `shadow-xs`                                                                    |
| Floating modals   | `blur: 40px`, `spread: -5px`, `surface-tint` at 8% opacity (golden under-glow) |
| Throne CTA        | Пульсирующая gold тень `0 0 0 14px rgba(255,186,65,0.4)`                       |
| Active nav circle | `shadow-lg shadow-primary/40`                                                  |
| Crown icon        | `drop-shadow(0 0 12px rgba(251,191,36,0.5))`                                   |

***

## 13. DO'S AND DON'TS

### Do:

* **Asymmetry:** "Big Win" display может слегка перекрывать край карточки
* **Space Grotesk для чисел:** числа — герой. Крупные и широкие
* **Tint Your Greys:** все нейтральные поверхности с оттенком primary gold. Никогда чистый #000 или #FFF
* **Ghost Borders:** 10% opacity вместо solid borders
* **Temperature Overlays:** 2% opacity gradient для индикации активности

### Don't:

* **Не использовать 1px solid lines** — только tonal transitions или Ghost Borders
* **Не использовать стандартный easing** — только Back/Quint для game-like feel
* **Не overcrowd** — если экран полный, увеличить spacing. Editorial design требует "воздуха"
* **Не использовать серые тени** — только golden Light Emission

***

## 14. КЛЮЧЕВЫЕ ФАЙЛЫ (для разработчика)

| Файл                                                | Содержание                                  |
| --------------------------------------------------- | ------------------------------------------- |
| `frontend/app/globals.css`                          | Все CSS-переменные, анимации, glass-эффекты |
| `frontend/app/layout.tsx`                           | Импорт шрифтов (Inter, Space Grotesk)       |
| `frontend/components/ui/button.tsx`                 | Варианты кнопок (включая Throne CTA)        |
| `frontend/components/ui/badge.tsx`                  | Варианты badges                             |
| `frontend/components/ui/glass-card.tsx`             | Glass-морфизм карточки                      |
| `frontend/components/ui/glass-button.tsx`           | Glass-кнопки                                |
| `frontend/components/ui/input.tsx`                  | Glass Input                                 |
| `frontend/components/GradientBackground.tsx`        | Ambient glows                               |
| `frontend/components/BottomNavigation.tsx`          | Нижняя навигация с glassmorphism            |
| `frontend/components/tw-charts/config/constants.ts` | Цвета графиков                              |
| `frontend/utils/token-state.ts`                     | Маппинг состояний → цвета                   |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://amber-metaverse.gitbook.io/trend-arena/produkt/visual.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.