--- name: ThaiForTravel Mini App description: A sunlit Telegram concierge for choosing travel services in Thailand --- # Design System: ThaiForTravel Mini App ## Overview **Creative North Star: "Солнечный консьерж"** ThaiForTravel ощущается как спокойная стойка русскоязычного консьержа у моря. Пользователь видит яркость Таиланда в фотографиях, получает уверенность через ясную структуру и всегда понимает, что произойдёт после заявки. Интерфейс наследует солнечный жёлтый, морские светлые поверхности и тёмный текст сайта, но ведёт себя как нативный Telegram-продукт. Знакомые контролы, короткие переходы и предсказуемая навигация важнее декоративных эффектов. **Key Characteristics:** - Светлые прохладные поверхности и редкий солнечный акцент. - Крупная реальная фотография как главный эмоциональный материал. - Один очевидный следующий шаг на каждом экране. - Мягкие формы без стекла, свечения и тяжёлых теней. - Явная передача диалога из Mini App в Telegram-бот. ## Colors Палитра полная, но роли не пересекаются: Sun ведёт к действию, Sea организует интерфейс, нейтрали обеспечивают спокойствие. ### Primary - **Sun** (`#F1C059`): основной CTA, акция и короткий акцент. Всегда используется с тёмным текстом. ### Secondary - **Sea** (`#137E87`): выбранные фильтры, вторичные кнопки и активная навигация. - **Deep Sea** (`#0F737C`): ссылки, focus ring и текстовые интерактивные состояния. - **Sea Mist** (`#E7F0F0`): доверительные сообщения и вторичная поверхность. ### Neutral - **Ink** (`#363636`): основной текст в светлой теме. - **Cloud** (`#F6F8F7`): фон приложения в светлой теме. - **White Surface** (`#FFFFFF`): карточки и поля. - **Night Water** (`#0B1416`): глубокий графитовый фон приложения в тёмной теме. - **Night Surface** (`#121F22`): базовые карточки в тёмной теме. - **Night Raised** (`#18272A`): приподнятые карточки и закреплённые панели. - **Night Control** (`#1A292C`): нейтральные поля, переключатели и счётчики. - **Night Selection** (`#193337`): выбранные элементы без избыточной бирюзовой заливки. - **Night Text** (`#EDF4F3`): основной текст в тёмной теме. ### Named Rules **The Sun Means Action Rule.** Sun не используется для больших декоративных полей или вторичных действий. **The Dark Ink Rule.** Белый текст на Sun запрещён. Контрастная пара для CTA: Ink на Sun. **The Photo Carries Emotion Rule.** Цвет интерфейса направляет, а ощущение путешествия создаёт фотография. ## Typography Одна рабочая sans-serif семья с уверенной кириллицей обслуживает заголовки, текст, контролы и цены: `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`. Иерархия компактная, без рекламно-крупных заголовков. Эталон построен по главным экранам «Главная» и «Каталог»: 28 px для заголовка страницы, 21 px для раздела, 17 px для карточки и 15 px для основного текста. Минимальный допустимый кегль — 11 px; поля ввода всегда используют 16 px, чтобы iOS не увеличивала Mini App при фокусе. Полная шкала, веса, межстрочные интервалы и распределение ролей по всем экранам зафиксированы в [`design/typography-standard.md`](design/typography-standard.md). CSS-переменные с теми же значениями находятся в `prototype/styles.css` и являются источником правды для реализации. **The Role, Not Location Rule.** Один смысловой уровень имеет одинаковый размер на всех экранах. Карточка в плане отдыха может быть компактнее каталожной по отступам, но её текст не превращается в подпись 9–10 px. **The No Shrinking Rule.** Длинный русский текст переносится, обрезается по согласованному числу строк или раскрывается. Уменьшать кегль ради размещения запрещено. **The One Family Rule.** Не смешивать display, serif и UI-шрифты ради декоративного контраста. ## Layout Базовый экран проектируется на ширину 390 px с боковыми полями 16 px и полезной шириной 358 px. Пространственный ритм строится на шагах 4, 8, 12, 16, 24 и 32 px. Крупные фотографии используют отношение 16:10. Нижняя навигация видна на корневых экранах. На детальной карточке и в формах её заменяет закреплённый CTA с учётом Telegram safe area. На ширине меньше 360 px горизонтальные группы сохраняют touch targets и переходят в scroll-snap или компактную сетку. Текст не уменьшается для сохранения сложной композиции. ## Elevation & Depth Система почти плоская. Иерархия создаётся тональными поверхностями, фотографиями и редкими границами. Небольшая рассеянная тень допустима только для закреплённой нижней панели и плавающего функционального контроля поверх фото. **The Tonal First Rule.** Сначала использовать разницу поверхностей и отступы. Тень появляется только когда нужно показать реальное наложение. ## Shapes Форма мягкая и уверенная: - Карточки и крупные блоки: 18 px. - Поля и небольшие поверхности: 14 px. - Основные кнопки: 16 px. - Чипы и компактные фильтры: полный pill. Фото обрезаются по форме карточки. Иконки находятся в одном outline-семействе с одинаковой толщиной штриха. ## Do's and Don'ts ### Do: - **Do** показывать реальную фотографию достаточно крупно, чтобы она помогала выбору. - **Do** сохранять один главный CTA на экране. - **Do** использовать Sea Mist для объяснения Telegram-сценария и доверительных сообщений. - **Do** разделять метаданные на фото: акция и категория сверху слева, направление снизу слева. - **Do** показывать loading, empty, error, disabled и success в той же визуальной системе. - **Do** сохранять знакомое поведение Telegram Back Button, safe area и темы. ### Don't: - **Don't** превращать каталог в плотный маркетплейс с корзиной, скидочными таймерами и давлением. - **Don't** использовать glassmorphism, неон, цветные свечения или декоративные градиенты. - **Don't** ставить белый текст на Sun. - **Don't** собирать категорию и направление в одну строку поверх нижней части фотографии. - **Don't** анимировать частые действия дольше 250 ms.