# Этап B1 — Visual foundation

Дата: 2026-08-05  
Статус: `approved_by_owner — 2026-08-05`  
Следующий gate: B2 разрешён; утверждение B2 всё ещё обязательно перед B3

Визуальная презентация без продуктовых экранов: [`gate-b1/index.html`](gate-b1/index.html).

Реестр происхождения и допуска платформенных знаков: [`platform-asset-provenance.md`](platform-asset-provenance.md).

## 1. Что является визуальной правдой сейчас

### Подтверждённое направление бренда

- Основной сайт и клиентский Mini App связывают ThaiForTravel с бирюзовым морем, солнечным жёлтым, светлыми мягкими поверхностями, реальными фотографиями Таиланда и дружелюбной русскоязычной подачей.
- Корневой [`DESIGN.md`](../../../DESIGN.md) фиксирует Sea `#137E87`, Deep Sea `#0F737C`, Sun `#F1C059`, Cloud `#F6F8F7` и правило «тёмный текст на Sun».
- В `prototype/assets/` есть logo и фото, но право production-использования фотографий ещё не подтверждено.
- В интерфейсе партнёра важнее task clarity, чем атмосфера: фото допустимо в onboarding/empty/contextual moments, но не как фон каждой рабочей секции.

### Конфликты, которые нельзя переносить молча

| Источник | Текущее решение | Оценка |
|---|---|---|
| Client Mini App | Sea + Sun + светлые поверхности | Главная визуальная authority |
| Live referral CSS | Deep marine `#14324A` + yellow `#F5CA4B`, Golos Text | Полезный рабочий прототип, но primary слишком уходит в navy |
| Referral `DESIGN.md` / styleboard | Cobalt `#0A24E9` + lime `#C8F45A`, Manrope | Отклонить как несвязанный с ThaiForTravel новый бренд |
| Live referral logo | Буква `T` в круге | Заменить после gate на официальный знак; не объявлять новым логотипом |
| Platform picker | Буквенные `YT/VK/TG…` | Не соответствует требованию official marks |

### Вывод аудита

Нужно не «перекрасить SaaS-dashboard», а расширить клиентскую систему в более собранный рабочий инструмент. Тёплое солнце остаётся действием, море — структурой, фотография — редким эмоциональным доказательством.

## 2. Три близких направления

### Вариант 1 — «Тёплая тропическая утилитарность» — рекомендуется

**Тезис.** Рабочая стойка партнёра у моря: светлый тёплый холст, уверенный бирюзовый для структуры и солнечный акцент только для главного действия/готового результата.

- Dominant: глубокий teal, а не cobalt и не почти чёрный navy.
- Sun используется с тёмным текстом для primary CTA, selected marker и локального success результата.
- Большие группы разделяются тональными морскими полями и whitespace, не сеткой карточек.
- Фото появляется в регистрации, пустом состоянии и редком contextual header; core composer/list/statistics остаются рабочими.
- Подходит и Mini App 360–390 px, и desktop без двух разных визуальных продуктов.

Риск: при слишком широком использовании Sun интерфейс станет потребительским каталогом. Ограничение: Sun занимает не более одного primary action/смыслового акцента в viewport.

### Вариант 2 — «Светлый морской консьерж»

**Тезис.** Максимальная преемственность с клиентским Mini App: больше white/Sea Mist, более светлый teal, мягкие формы, Sun как редкая подсветка.

- Самый узнаваемый относительно клиентского продукта.
- Самый спокойный на мобильном и хорошо поддерживает onboarding.
- Слабее отделяет профессиональный кабинет от клиентского каталога.
- На desktop требует особенно строгой типографической иерархии, иначе становится слишком мягким.

### Вариант 3 — «Глубокий морской инструмент»

**Тезис.** Сохранить сильные стороны текущего live UI: deep marine для навигации/композера, Sun для действия, teal для данных и focus.

- Самый «рабочий» и контрастный вариант.
- Хорош для admin и плотных desktop-сценариев.
- На мобильном крупные тёмные поля визуально тяжелее и слабее связаны с текущим светлым Mini App.
- Требует строгого ограничения deep marine: navigation и одна task-zone, а не весь экран.

## 3. Сравнение направлений

| Критерий | 1. Тёплая утилитарность | 2. Морской консьерж | 3. Глубокий инструмент |
|---|---:|---:|---:|
| Преемственность ThaiForTravel | 5/5 | 5/5 | 4/5 |
| Скорость рабочих задач | 5/5 | 4/5 | 5/5 |
| Mobile 360–390 | 5/5 | 5/5 | 4/5 |
| Desktop/admin expansion | 5/5 | 3/5 | 5/5 |
| Риск generic SaaS | Низкий | Средний | Средний |
| Рекомендация | **Выбрать** | Альтернатива | Альтернатива |

Отклонено: cobalt + lime. Причина — это самостоятельная визуальная идентичность, которая нарушает требование сохранить связку «морской бирюзовый + солнечный жёлтый».

## 4. Proposal tokens варианта 1

До утверждения все значения имеют namespace `proposal` и не считаются official brand colors.

### Light

| Semantic token | OKLCH | Hex fallback | Роль |
|---|---|---|---|
| `--p1-canvas` | `oklch(97.1% 0.006 128.5)` | `#F4F6F2` | Тёплый фон приложения |
| `--p1-surface` | `oklch(99.7% 0.005 95.1)` | `#FFFEFA` | Рабочая поверхность |
| `--p1-surface-sea` | `oklch(95.2% 0.012 184.1)` | `#E7F2F0` | Связанная task-group |
| `--p1-ink` | `oklch(31.1% 0.018 213.4)` | `#263336` | Основной текст |
| `--p1-muted` | `oklch(52.4% 0.017 207.1)` | `#5F6D6F` | Вторичный текст |
| `--p1-line` | `oklch(90.4% 0.011 176.3)` | `#D8E2DF` | Граница/разделитель |
| `--p1-sea` | `oklch(48.9% 0.084 208.0)` | `#006D79` | Primary structural / links / active |
| `--p1-sea-strong` | `oklch(41.8% 0.072 208.2)` | `#005761` | Hover/pressed |
| `--p1-sea-soft` | `oklch(94.5% 0.019 196.8)` | `#DFF1F1` | Selected/Info surface |
| `--p1-sun` | `oklch(84.0% 0.129 84.1)` | `#F2C35F` | Primary action / ready state |
| `--p1-sun-soft` | `oklch(96.8% 0.041 90.2)` | `#FFF4D6` | Warning/help tint |
| `--p1-success` | `oklch(48.4% 0.093 165.6)` | `#176F52` | Success text/icon |
| `--p1-warning` | `oklch(51.0% 0.108 74.2)` | `#8A5B00` | Warning text/icon |
| `--p1-danger` | `oklch(54.4% 0.158 35.9)` | `#B94424` | Error/destructive |
| `--p1-focus` | `oklch(48.9% 0.084 208.0)` | `#006D79` | 2–3 px focus ring |

### Dark proposal

Dark mode не является обязательным scope V1, но система не должна мешать Telegram theme adaptation.

| Semantic token | OKLCH | Hex fallback |
|---|---|---|
| `--p1-dark-canvas` | `oklch(20.7% 0.017 209.0)` | `#0E1A1C` |
| `--p1-dark-surface` | `oklch(24.8% 0.021 211.5)` | `#152427` |
| `--p1-dark-surface-raised` | `oklch(29.4% 0.027 211.6)` | `#1C3034` |
| `--p1-dark-text` | `oklch(97.3% 0.005 165.0)` | `#F3F7F5` |
| `--p1-dark-muted` | `oklch(80.7% 0.015 185.9)` | `#B6C3C1` |
| `--p1-dark-line` | `oklch(38.5% 0.027 207.1)` | `#33484B` |
| `--p1-dark-sea` | `oklch(75.1% 0.099 201.1)` | `#54C1C8` |
| `--p1-dark-sun` | `oklch(84.0% 0.129 84.1)` | `#F2C35F` |

### Проверенные contrast pairs

| Пара | Контраст | Решение |
|---|---:|---|
| Ink / Surface | `12.93:1` | Основной текст |
| Muted / Surface | `5.33:1` | Обычный вторичный текст |
| Sea / Surface | `6.01:1` | Ссылки, controls, white-on-sea допустим |
| Ink / Sun | `7.92:1` | Правильная primary CTA pair |
| White / Sun | `1.63:1` | **Запрещено** |
| Success / Surface | `6.06:1` | Текст статуса |
| Warning / Surface | `5.82:1` | Текст статуса |
| Danger / Surface | `5.31:1` | Ошибка/destructive text |
| Dark text / Dark canvas | `16.42:1` | Основной dark text |
| Dark Sea / Dark surface | `7.49:1` | Dark links/focus |

Contrast — только первый фильтр. На B3 дополнительно проверяются disabled, hover, chart lines, focus appearance и текст поверх фото.

## 5. Typography proposals

### T1 — Golos Text, одна рабочая семья — рекомендуется

- Роли: UI/body 400–500, labels/actions 500–600, headings/metrics 600–700.
- Сильная кириллица и спокойная humanist-пластика; хорошо читается на 360–390 px.
- Поддерживает tabular numbers через `font-variant-numeric: tabular-nums`.
- Локальные WOFF2 и SIL OFL уже есть; текущий полный Cyrillic+Latin payload около 59 KB.
- Display accent не нужен для ежедневного кабинета: характер создают цвет, ритм и фото.

### T2 — Manrope для UI/чисел + Golos Text для длинного текста

- Manrope даёт более геометричный, компактный desktop-ритм; Golos сохраняет мягкость длинных русских текстов.
- Обе семьи имеют локальные WOFF2 и OFL.
- Ориентировочный combined payload текущих файлов около 97 KB.
- Риск: две близкие sans-семьи создают сложность без достаточной пользы. Не рекомендуется для V1.

### T3 — Golos Text для UI + Alumni Sans как display accent

- Alumni Sans допустим только для крупных onboarding/empty-state заголовков, не для controls и аналитики.
- Более характерный travel/editorial голос без serif-клише.
- Текущий локальный TTF — около 133 KB; нужен WOFF2 subset и отдельное подтверждение источника/лицензии, потому что license manifest рядом отсутствует.
- Использовать только если владелец хочет более выразительный onboarding. Для core operate surface не требуется.

### Рекомендуемая type scale

| Role | Fluid value | Notes |
|---|---|---|
| Display/onboarding | `clamp(2rem, 5vw, 3.5rem)` | Только редкие входные состояния |
| Page title | `clamp(1.5rem, 2.4vw, 2rem)` | Не giant hero |
| Section title | `clamp(1.125rem, 1.5vw, 1.375rem)` | 600–700 |
| Body | `clamp(0.9375rem, 1vw, 1rem)` | 1.5 line-height |
| Small/meta | `0.8125rem` | Не ниже 13 px для важного текста |
| Control | `1rem` | Исключает iOS zoom на input |
| Metric | `clamp(2rem, 4vw, 3.25rem)` | `tabular-nums`; только один dominant metric |

Loading после утверждения: self-hosted WOFF2, `unicode-range`, `font-display: swap`, preload только реально critical Cyrillic face, системный fallback `-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`. Не загружать три семьи одновременно.

## 6. Shape, spacing, elevation

- Spacing scale: `4, 8, 12, 16, 24, 32, 48, 64`; fluid section gaps через `clamp()`.
- Radius: control `12–14`, item `16`, major panel `20–24`, pill только для status/filter.
- Touch target: минимум `44×44 px`, даже если visual glyph меньше.
- Elevation: tonal-first; shadow только у реально плавающей bottom nav, dialog/sheet и sticky overlap.
- QR всегда на чистой светлой подложке с quiet zone; не красить функциональный код в brand palette без scan testing.

## 7. Motion tokens

| Token | Значение | Применение |
|---|---|---|
| `--motion-press` | `100ms` | `scale(.98)` на pointer down |
| `--motion-color` | `160ms` | hover/selected/focus color |
| `--motion-popover` | `180ms` | origin from trigger, ease-out |
| `--motion-sheet` | `260ms` | critically damped, interruptible |
| `--motion-result` | `220ms` | короткий opacity/translate reveal |
| `--ease-out` | `cubic-bezier(.2,.8,.2,1)` | controls/surfaces |

`prefers-reduced-motion` удаляет transform и chart morph; остаётся мгновенная смена или короткий opacity fade. `transition: all` запрещён.

## 8. Chart foundation

- `chart-total`: Sea `#006D79`, solid line + circle markers.
- `chart-link`: Sea strong `#005761`, solid line, label «Ссылка».
- `chart-qr`: Sun-dark/Warning `#8A5B00`, dashed line + square markers, label «QR».
- Grid: Line `#D8E2DF`; zero line чуть темнее.
- Цвет никогда не единственный код: line style, marker shape, прямые labels и data-table alternative обязательны.
- Высота chart резервируется до загрузки; period switch не обнуляет layout.

## 9. Photo direction

Приоритет:

1. утверждённые материалы текущего Mini App;
2. официальный сайт ThaiForTravel;
3. лицензированный фотограф/фотобанк с сохранённой лицензией и source URL.

Сюжеты:

- реальный агент/блогер в процессе публикации или съёмки, а не luxury influencer cliché;
- тёплый естественный свет, настоящее бирюзовое море, реальные продаваемые направления;
- люди в естественном масштабе и ситуации, без постановочной «успешности»;
- свободная quiet area для responsive crop, но без мелкого текста на активной фотографии.

Использование в продукте:

- onboarding/pending/empty: один decisive image;
- create/list/statistics/admin: без декоративного фото;
- AVIF/WebP + fallback, `srcset`, focal point, lazy load ниже первого viewport;
- AI-generated изображение реального места/экскурсии не использовать без отдельного согласования.

Обязательный manifest на каждый файл: `source_url`, `author`, `license`, `downloaded_at`, `usage`, `alt_ru`, `focal_point`, `crop_variants`, `approval_status`.

Текущие `hero-thailand.webp`, `card-adrenaline.webp`, `card-catamaran.webp`, `card-family.jpg` — только визуальные референсы до подтверждения прав.

## 10. Original platform icon set

Набор: YouTube, ВКонтакте, RUTUBE, Telegram, Instagram, TikTok; нейтральные system globe/link для «Сайт» и neutral ellipsis/grid для «Другое».

Правила:

- брать original SVG из official brand kit либо проверенного пакета с разрешённым использованием;
- сохранять brand color/proportions/safe area; нормализовать только внешний контейнер 36–40 px;
- всегда показывать текстовое название рядом/под знаком;
- не перерисовывать логотипы и не заменять их буквенными `YT/TG/IG`;
- светлая/тёмная версия только если разрешена brand guideline;
- каждый asset получает manifest: platform, source URL, license/terms URL, retrieved date, original filename/hash, allowed backgrounds.

SVG в `web/styleboard/assets/` можно использовать для B1 preview, но не переносить в production до заполнения manifest и юридической проверки.

Зафиксированные официальные точки проверки и SHA-256 текущих preview-файлов находятся в [`platform-asset-provenance.md`](platform-asset-provenance.md). Instagram и TikTok сейчас имеют блокирующий статус; остальные знаки требуют повторной выгрузки из официального brand kit и проверки условий перед production.

## 11. Что предлагается утвердить

Рекомендованный пакет:

1. Направление **«Тёплая тропическая утилитарность»**.
2. Light-first palette proposal из раздела 4; dark tokens — совместимый резерв, не обязательный V1 scope.
3. Golos Text как единая рабочая семья; без display accent в core cabinet.
4. Официальный существующий logo; никаких новых знаков.
5. Фото только точечно и только после provenance/license approval.
6. Official platform marks с обязательным asset manifest.
7. Cobalt/lime styleboard считать отвергнутой экспериментальной веткой.

Gate B1 подтверждён владельцем 2026-08-05. Следующий артефакт — B2 sitemap/flows/low-fi clickable grayscale prototype для agent mobile+desktop и отдельного admin, включая все access/loading/empty/error states. Live referral UI и `DESIGN.md` остаются неизменными до последующих гейтов.