1
Руководство по фирменному стилю · Версия 2.0 · 2026
Руководство по фирменному стилю
Phuket, Thailand · Обменный пункт валют
01
Философия бренда
Кто мы, зачем мы, во что верим
Бренд — это не просто сервис. Это часть цифрового образа жизни современной аудитории. Мы не говорим языком банков, корпораций или «официальных сервисов». Мы говорим языком интернета, скорости, новостей, путешествий, денег, свободы и современной digital-культуры.
Наша задача — убрать ощущение сложности, напряжения и недоверия из финансовых операций и превратить их в понятный, быстрый и комфортный digital-опыт.
Мы не создаём образ «идеальной корпорации». Мы создаём ощущение умного, современного и немного дерзкого digital-сервиса, которым реально хочется пользоваться.
Основа бренда: люди, простота, скорость, доверие, визуальная узнаваемость, интернет-культура, современная коммуникация.
Миссия
Сделать международный обмен валют быстрым, прозрачным и доступным для каждого в Таиланде.
Видение
Стать финтех-обменником №1 для экспатов и путешественников в Юго-Восточной Азии.
Ценности бренда
ДовериеПрозрачные курсы, никаких скрытых комиссий. Клиент всегда знает, что получит.
СкоростьБыстрое исполнение — доставка, банкомат, перевод. Никаких ожиданий.
ТехнологииСовременный финтех-интерфейс. Digital-first, удобно на мобильном.
СмелостьМы выделяемся. Запоминающийся дизайн, уверенная коммуникация.
Характер бренда
СОВРЕМЕННЫЙ
УВЕРЕННЫЙ
БЫСТРЫЙ
ПОНЯТНЫЙ
СВОЙ
ТЕХНОЛОГИЧНЫЙ
ЖИВОЙ
02
Система логотипа
Пять официальных вариантов — для любого формата и носителя
Основная версия — Rectangle Full
Основная версия. Используется в navbar, шапках, маркетинговых материалах и всей основной коммуникации.
Все официальные варианты
Rectangle Short
Горизонтальный, ограниченное пространство
Square Full
Квадратный формат, соцсети, аватары
Square Short
Квадратный формат, краткая версия
Icon
Фавикон, app-иконка, минималистичные носители
Вариант — в разработке
Зарезервировано для будущих версий
+
Вариант — в разработке
Зарезервировано для будущих версий
+
Монохромные версии
Белый на тёмном
Тёмный на белом
Серый (grayscale)
03
Правила использования
Охранное поле, минимальные размеры, запрещённые приёмы
Охранное поле (зона защиты)
x — высота цифры «1»
x
x
x
Минимальный отступ = высота цифры «1» со всех сторон
Минимальные размеры
Экран / Digital
120 px
Полный логотип
Печать / Офсет
25 мм
Полный логотип
Фавикон
16 px
Только иконка
App-иконка
40 px
Только иконка
✓ Разрешено
- Использовать на одобренных фонах
- Сохранять пропорции логотипа
- Использовать официальные версии
- Соблюдать охранное поле
- Использовать файлы из официального архива
✗ Запрещено
- Растягивать или деформировать
- Добавлять тени, обводки, свечения
- Менять цвета на неутверждённые
- Размещать на пёстром фоне
- Наклонять или переворачивать
- Менять шрифт или компоновку
04
Цветовая палитра
Основные, акцентные цвета, градиенты и UI-состояния
Основные цвета
Neon Magenta
#FF006E
C0 M100 Y26 K0
Главный акцент
Electric Cyan
#00E5FF
C53 M0 Y10 K0
Дополнительный акцент
Arctic White
#EDFAFD
C7 M0 Y2 K0
База/фон (светлый)
Obsidian Black
#0F1316
C77 M73 Y80 K70
База/фон (тёмный)
Slate Gray
#838F96
C48 M32 Y33 K1
Вторичный текст
Raised Graphite
#161B1F
C77 M72 Y77 K64
Подложки, карточки
Upper Graphite
#22292F
C77 M71 Y71 K51
Активные подложки
Акцентные и утилитарные цвета
Prime Yellow
#FFEA00
Ожидание
Confirm Green
#00FF80
Успешный статус
Signal Orange
#FF6730
Акцент внимания
Critical Red
#FF3146
Состояние ошибки
Digital Violet
#8800FF
Фокус клавиатуры
Inactive Gray
#565C60
Недоступный элемент
Градиенты
Pink Voltage
#FF006E → #FF006E
Фоновый, акцентный
Electric Ice
#00E5FF → #94F3FE
Доп. фоновый, акцентный
Magenta Overlay
#FF006E 30% → 0%
Фоновый, для фото 1
Cyan Overlay
#00E5FF 15% → 0%
Фоновый, для фото 2
Main The One
#FF006E → #9945FF → #00E5FF
Главный акцентный
UI-состояния
Default
Интерактивный элемент в покое
Hover
Курсор на элементе
Pressed
Элемент нажат
Disabled
Недоступный элемент
Success
Успешное действие
Pending
Ожидание
Warning
Требует внимания
Error
Ошибка, неудача
Focus
Фокус клавиатуры
05
Типографика
Шрифтовые пары, иерархия и правила применения
PRIMARY TYPEFACE — WIX MADEFOR DISPLAY
Wix Madefor Display Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
Заголовки H1–H3
Дисплейный текст
Числовые акценты
Все CAPS-надписи
SECONDARY TYPEFACE — MANROPE
Manrope SemiBold
абвгдеёжзийклмнопрстуфхцчшщъыьэюя 0123456789
Основной текст
UI-метки
Кнопки и CTA
Подписи и мета
Типографическая иерархия
УровеньШрифтРазмерИнтерлиньяж
H1 — ГеройWix Madefor Display ExtraBold64–72 pt1.1
H2 — РазделWix Madefor Display Bold40–48 pt1.15
H3 — КарточкаWix Madefor Display SemiBold28–32 pt1.2
H4 — ПодразделManrope Bold20–24 pt1.3
Body LargeManrope SemiBold16–18 pt1.5
Body RegularManrope Regular14–16 pt1.5
Caption / LabelManrope Light10–12 pt1.4
Важно:
Оба шрифта — Wix Madefor Display и Manrope — полностью поддерживают кириллицу и латиницу. Системные замены запрещены.
06
Иконография
Стиль иконок, валюты, банки, UI-иконки
Система иконок — стиль и правила
Сетка
Базовая: 24×24 px
Стандарт: 32×32 px
Крупные: 48×48 px
Стиль
Outline, скругления 2 px
Толщина: 1.5–2 px
Без заливки внутри
Цвета
Cyan: активные
Серый: неактивные
Золотой: премиум
Форматы
SVG (основной)
PNG @1x @2x @3x
PDF для печати
Иконки валют
Логотипы банков
Отображаются с тёмным оверлеем и фирменной рамкой для визуальной согласованности.
СБ
Сбербанк
T
Тинькофф
А
Альфа
Р
Райффайзен
ВТБ
ВТБ
МКБ
МКБ
Конвенция именования
Имя файла: ic_{категория}_{название}_{размер}.svg → ic_currency_usd_24.svg
Размеры: Экспортировать все 4 размера: 16, 24, 32, 48 px
Состояния: _default · _active · _disabled · _hover
07
Визуальная система
Паттерны, графические элементы, работа с фото
Библиотека паттернов
Точечная сетка
Тонкий фоновый паттерн
Полосы скорости
Движение и финтех-энергия
$€¥₽฿£₮$€¥₽฿$€¥₽฿$€¥
Дождь валют
Тематический фон
Фирменные графические элементы
Двойная полосаФирменный элемент. Две параллельные линии (magenta + cyan) за ключевым текстом. Присутствует в логотипе и всех заголовках.
Свечение (Glow)Мягкие радиальные градиенты cyan/magenta. Фоновая атмосфера на тёмных экранах и маркетинговых материалах.
Угловые меткиОстрые угловые срезы на карточках. Добавляет технологичный интерфейсный feel. Используется на Hero-банерах.
Стрелка обменаИконка ⇄ обмена. Основной функциональный символ бренда. Всегда в cyan или в градиентной версии.
Работа с фотографиями
Cyan Overlay
Cyan Overlay
Фоновый оверлей для фото — #00E5FF 15% → 0%
Тёмный оверлей
Тёмный оверлей
Obsidian Black → Upper Graphite, текст поверх фото
Magenta Overlay
Magenta Overlay
Фоновый оверлей для фото — #FF006E 30% → 0%
08
Голос бренда
Голос бренда — живой, уверенный и современный
МЫ НЕ ИСПОЛЬЗУЕМ
— перегруженный официальный язык
— «банковские» формулировки
— сухую корпоративную коммуникацию
— сложные конструкции
— излишнюю формальность
МЫ ГОВОРИМ
— коротко
— понятно
— уверенно
— без ощущения «продажи»
Бренд может шутить, использовать интернет-культуру и современные digital-референсы, но не превращаться в клоуна или мем-страницу.
Коммуникация должна создавать ощущение: «это сервис, который понимает современного человека».
Четыре столпа голоса
Спокойная уверенность
Мы говорим прямо и по делу. Без показной экспертности и без неуверенности.
Digital-native
Мы родились внутри интернета. Говорим его языком — скорости, контента и культуры.
Без бюрократии
Прозрачность без формализма. Никаких шаблонов, канцелярита и корпоративных клише.
Контроль и надёжность
Даже при неформальном тоне бренд остаётся профессиональным и вызывает доверие.
Как надо / Как не надо
Курс обмена
✓ КАК НАДО
Курс сегодня: 1 USD = 32,93 THB. Без комиссий.
✗ КАК НЕ НАДО
Уважаемый клиент, сообщаем об актуальном обменном курсе...
Кнопка CTA
✓ КАК НАДО
Обменять сейчас →
✗ КАК НЕ НАДО
Нажмите здесь для перехода к операции обмена валюты.
Ошибка
✓ КАК НАДО
Перевод не прошёл. Попробуйте снова или напишите нам.
✗ КАК НЕ НАДО
К сожалению, транзакция не может быть обработана в настоящее время.
Онбординг
✓ КАК НАДО
Выбери валюту. Укажи сумму. Готово.
✗ КАК НЕ НАДО
Пожалуйста, заполните все обязательные поля формы для начала.
Ключевые сообщения
09
Тон по каналам
Один бренд, один голос — стиль адаптируется под площадку
Каждый канал имеет свой характер аудитории и ожидания. Бренд адаптирует тон, не теряя голос.
Социальные сети
Эмоциональный, живой, с характером
Допускается
- Юмор, контрастность, ирония, тренды
- Разговорный стиль, провокационные заголовки (без грязи)
- Визуальный шум и bold-коммуникация
Главная задача
- Вызывать эмоцию и узнаваемость
Telegram
Ближе к внутреннему комьюнити
Пример
📊 USD сегодня: 32.93 THB
📈 EUR: 38.84 (+0.2%)
💬 Пишите нам за лучшим курсом
→ @theoneexchange
📈 EUR: 38.84 (+0.2%)
💬 Пишите нам за лучшим курсом
→ @theoneexchange
Правила
- Быстро, живо, но не корпоративно
- Короткие сообщения, реакции, ситуативный контент
- Более формально, чем соцсети — но без официоза
Сайт
Чистый, уверенный, с акцентом на выгоды
Правила
- Доверие + понятность + акцент на удобство
- Коммуникация минималистичная, без перегруза
- Быстро доносит выгоды и следующий шаг
Поддержка клиентов
Спокойный, человеческий, решает вопрос
Пример
Привет! Курс USD сегодня:
Покупка: 31.91 | Продажа: 32.93
Что хотите обменять?
Покупка: 31.91 | Продажа: 32.93
Что хотите обменять?
Правила
- Без шаблонных ответов и канцелярита
- Скорость, ясность, ощущение помощи
- Без сухости — живой и внимательный тон
Реклама
Bold-коммуникация, high-contrast
Допускается
- Крупные тезисы, сильные акценты
- Минимальное количество текста
- Агрессивная визуальная подача, цепляющие формулировки
Главная задача
- Выглядеть как часть интернет-культуры, не как «банковский баннер»
10
UI-компоненты
Кнопки, поля ввода, карточки курсов, навигация, бейджи
Кнопки
Primary
Secondary
Accent
Disabled
Ghost / Outline
Поля ввода
В фокусе
Focus
По умолчанию
Default
Ошибка
Error
Заполнено
Filled
Карточки курсов валют
US
USD
Доллар США
ПродажаПокупка
32.93 THB31.91
+0.4%
EU
EUR
Евро
ПродажаПокупка
38.84 THB37.49
+0.2%
RU
RUB
Российский рубль
ПродажаПокупка
2.18 THB2.94
−1.2%
TH
THB
Тайский бат
ПродажаПокупка
— THB—
базовая
Навигация — Desktop navbar
RU / EN
Бейджи и статусы
Новое
Акция
Популярно
Выполнено
Ошибка
Ожидание
11
Примеры применения
Мобильное приложение · Десктоп · Планшет · Push-уведомления · Веб-виджет
Мобильное приложение — 5 экранов
9:41●●●
🔔 ⚙Обменять сейчас
EUR38.84+0.2%
RUB2.18−1.2%
JPY0.21+0.1%
CNY4.53+0.3%
Курсы
⇄
История
Профиль
Главный экран
9:41●●●
Отдаю
10 000
RUB ▾
⇄
Получаю
218.50
THB ▾
Курс: 1 RUB = 0.02185 THB · Без комиссии
Обменять
Курсы
⇄
История
Профиль
Калькулятор
9:41●●●
Все
Покупка
Продажа
СЕГОДНЯ, 11 МАЯ
USD → THB
15:17 · Патонг
+329.30 THB
Выполнено
EUR → THB
11:42 · Доставка
+778.00 THB
Выполнено
10 МАЯ
RUB → THB
18:05 · Патонг
+218.50 THB
Выполнено
JPY → THB
09:30 · Патонг
+420.00 THB
В процессе
Курсы
⇄
История
Профиль
История операций
9:41●●●
218.50
тайских батов
Вы отдали10 000 RUB
Курс0.02185
Комиссия0 THB
Дата11.05.2026
СтатусВыдано
Поделиться чеком
На главную
Подтверждение
9:41●●●
АП
Алексей Петров
+7 900 123 4567
24
Обменов
142 400
THB итого
Курсы
⇄
История
Профиль
Профиль
Push-уведомления — алерты курсов
iOS
THE ONE Exchange
сейчас
📈 USD вырос до 33.15 THB
Выгодный момент для обмена! Курс выше среднего на 0.7%.
THE ONE Exchange
2 мин
✅ Ваш обмен выполнен
10 000 RUB → 218.50 THB. Деньги выданы.
Android
THE ONE Exchange
сейчас
📈 USD вырос до 33.15 THB
Выгодный момент для обмена. Курс выше среднего на 0.7%.
Обменять
Закрыть
THE ONE Exchange
2 мин
✅ Обмен выполнен
10 000 RUB → 218.50 THB. Деньги выданы.
Алерты курсов отправляются пользователю при достижении целевого значения.
Транзакционные — подтверждение выдачи, статус обмена.
Акционные — специальные курсы дня, праздничные предложения.
Тон: краткий, информативный, без восклицательных знаков в деловых сообщениях.
Иконка приложения: тёмно-синяя, символ «1» в cyan.
Транзакционные — подтверждение выдачи, статус обмена.
Акционные — специальные курсы дня, праздничные предложения.
Тон: краткий, информативный, без восклицательных знаков в деловых сообщениях.
Иконка приложения: тёмно-синяя, символ «1» в cyan.
Десктоп — главная страница
Курсы
Калькулятор
Доставка
Контакты
Обменять
Лучший курс в Таиланде · Без комиссий
ОБМЕН ВАЛЮТЫ
НА ПХУКЕТЕ
НА ПХУКЕТЕ
Офис в Патонге · Доставка на дом · 7 дней в неделю
Рассчитать обмен →
USD / THB · сегодня
32.93
↑ +0.4% за 24 ч
USD / THB
32.93
↑ +0.4%
EUR / THB
38.84
↑ +0.2%
RUB / THB
2.18
↓ −1.2%
JPY / THB
0.212
↑ +0.1%
ПараПродажаПокупкаИзм.
USD / THB32.9331.91+0.4%
EUR / THB38.8437.49+0.2%
RUB / THB2.182.14−1.2%
JPY / THB0.2120.200+0.1%
CNY / THB4.534.40+0.3%
Десктоп — страница калькулятора
Курсы
Калькулятор
Доставка
Контакты
Обменять
КАЛЬКУЛЯТОР ОБМЕНА
Отдаю
10 000
RUB ▾
⇄
Валюта получения
—
THB ▾
Вы получите
218.50
THB
Курс: 1 RUB = 0.02185 THB · Обновлено 15:17
Обменять →
✓ Без комиссий
Доставка от 30 мин
Планшет — дашборд курсов
Курсы
Калькулятор
Контакты
Обменять
ТЕКУЩИЕ КУРСЫ
Обновлено: 15:17 UTC+7
USD / THB
32.93
Покупка: 31.91
↑ +0.4%
EUR / THB
38.84
Покупка: 37.49
↑ +0.2%
RUB / THB
2.18
Покупка: 2.14
↓ −1.2%
JPY / THB
0.212
Покупка: 0.200
↑ +0.1%
CNY / THB
4.53
Покупка: 4.40
↑ +0.3%
GBP / THB
44.20
Покупка: 43.10
— 0.0%
Веб-виджет — плавающий калькулятор на сайте партнёра
12
Цифровые носители
Сайт, форматы соцсетей, принципы дизайна
Сайт — принципы дизайна
Тёмная тема первичнаNavy-фон основной. Светлая тема — опциональная.
Контраст > декораВысококонтрастный текст на тёмном, минимум декоративных элементов.
Данные на первом экранеКурсы и калькулятор всегда видны выше fold.
Mobile-first320–1920 px. Мобайл — приоритет для RU/TH аудитории.
Скорость загрузки< 3 сек. Lazy-изображения. Минимальный вес анимаций.
Форматы соцсетей
14
Печать и офлайн
Визитки, вывески и наружная реклама
Визитная карточка — 90×50 мм
1 THE ONE
EXCHANGE
Иван Петров
Менеджер по обмену
+66 90 399 9228
the-one.exchange
1
THE ONE
EXCHANGE
← Лицевая сторона← Оборотная сторона
Наружная реклама — Билборд 3×6 м
Обмен валюты на Пхукете
Без комиссий · Лучший курс · Доставка на дом
+66 90 399 9228 · @theoneexchange · the-one.exchange
1 USD = 32,93
THB · Сегодня
Технические требования к печати
Цветовая модель: CMYK. Профиль ICC: ISO Coated v2.
Разрешение: 300 DPI для полиграфии. 150 DPI для широкого формата.
Вылеты (Bleed): 3 мм по всем краям. 5 мм безопасная зона для текста.
Navy-фон: C100 M80 Y30 K80 — избегать регистрационного чёрного
Cyan-акцент: C75 M0 Y10 K0 — Pantone 3105C
15
Мерч и носители
Одежда, упаковка и физические носители бренда
Фирменный мерч усиливает присутствие бренда офлайн. Все носители используют утверждённую палитру и логотип.
Футболка сотрудника
- Чёрная / тёмно-синяя база
- Логотип на груди: белый
- Spine: EXCHANGE вертикально, cyan
- Размеры: XS–3XL
Кепка
- Чёрная с тёмно-синим козырьком
- Вышивка: «1» на фронте, cyan нить
- Атласная окантовка: magenta
- Один размер, регулируемая
Наклейка-стикер
- Прозрачная основа или белая
- Логотип горизонтальный
- Размер: 80×40 мм
- Материал: виниловая ламинация
Кружка
- Чёрная керамика, 330 мл
- Логотип: белый деколь сбоку
- Донышко: «1» большое, gray
- Посудомоечная устойчивость
Упаковочный пакет
- Матовый чёрный крафт-пакет
- Логотип: фольга серебро / cyan
- Ручки: тёмно-синяя лента
- Размеры: S / M / L
Конверт / папка
- Тёмно-синяя плотная бумага
- Логотип тиснение на крышке
- Внутри: фирменный паттерн
- Формат A4 и A5
Общие правила для всех носителей
Цвета: Только из утверждённой палитры. Navy, cyan, magenta, белый, чёрный.
Логотип: Минимальный размер: 15 мм в ширину. Только официальные версии файлов.
Материалы: Предпочтительны матовые покрытия. Глянец — только для акцентных элементов.
Запрещено: Самодельные вариации логотипа, нестандартные цвета, отсутствие охранного поля.
16
Сезонные вариации
Акции, праздники и специальные кампании
Бренд должен иметь гибкую визуальную систему, позволяющую адаптировать коммуникацию под сезонные события, праздники, инфоповоды и маркетинговые кампании без потери узнаваемости. Логотип не меняется.
ДОПУСКАЕТСЯ АДАПТАЦИЯ
— цветовых акцентов и паттернов
— графических элементов и иллюстраций
— motion-эффектов
— рекламных носителей и social media шаблонов
НЕ ДОПУСКАЕТСЯ
— перегруженный «праздничный» дизайн
— шаблонные клипарты
— потеря минимализма и визуальной чистоты
— разрушение фирменной типографики и композиции
Новый год / Рождество
Лучший курс в новом году
Обменять →
- Акцент: холодный золотой #FFD700
- Паттерн: снежинки
- Сообщение: «Лучший курс в новом году»
Сонгкран (Тайский Новый год)
สวัสดีปีใหม่ · Быстрый обмен
Обменять →
- Акцент: бирюзовый #00F0CC
- Паттерн: волны
- Сообщение: «Быстрый обмен к празднику»
Чёрная пятница / Акция
Лучший курс дня
Обменять →
- Акцент: magenta усиленная
- Паттерн: полосы скорости ×2
- Сообщение: «Лучший курс дня»
День рождения компании
X лет — X% скидки
Обменять →
- Акцент: золотой + cyan
- Паттерн: конфетти
- Сообщение: «X лет — X% скидки»
17
Анимация и движение
Принципы, тайминги и фирменные анимации
Принципы анимации
ЦЕЛЬКаждая анимация оправдана: привлекает внимание, подтверждает действие или добавляет удовольствие.
СКОРОСТЬБыстро и чётко: 150–300 мс для микро-анимаций. Медленнее для переходов: 400–600 мс.
EASINGease-out для появляющихся элементов. ease-in для исчезающих. Избегать linear.
ТОНКОСТЬАнимации дополняют, но не отвлекают. Учитывать prefers-reduced-motion.
Таблица таймингов
ДействиеДлительностьФункцияВизуально
Hover-состояние150 мсease-out
Нажатие кнопки100 мсease-in
Иконка / микро-анимация200 мсease-in-out
Открытие/закрытие модала250 мсease-out
Переход между страницами400 мсease-in-out
Скелетон-загрузка1000 мсlinear
Счётчик/прокрутка курса800 мсease-out
18
Запрещённые приёмы
Визуальные примеры неправильного использования бренда
Каждый пример показывает конкретную ошибку. Красный крест = нарушение гайдлайнов.
✓ Правильно: оригинальный логотип
1 THE ONE
✗ Нельзя: логотип растянут
1 THE ONE EXCHANGE
✗ Нельзя: неутверждённые цвета
1 THE ONE EXCHANGE
✗ Нельзя: пёстрый фон
1 THE ONE EXCHANGE
✗ Нельзя: тень и свечение
1 THE ONE EXCHANGE
✗ Нельзя: наклон логотипа
1 THE ONE EXCHANGE
✗ Нельзя: замена шрифта
1 THE ONE
EXCHANGE
EXCHANGE
✗ Нельзя: нет охранного поля
1 THE ONE EXCHANGE
✗ Нельзя: слишком маленький размер
19
CSS-токены и код
Переменные для разработчиков, готовые к внедрению
CSS Custom Properties
/* ── The One Exchange — Design Tokens ─────────────── */
:root {
/* Backgrounds */
--color-bg-primary: #070D1A;
--color-bg-secondary: #0B1422;
--color-bg-card: #0F1D30;
--color-bg-card-2: #152236;
--color-border: #1E304A;
/* Brand Accents */
--color-accent-cyan: #00D4FF;
--color-accent-cyan-2: #33DDFF;
--color-accent-mag: #FF1F8F;
--color-accent-mag-2: #FF5AB0;
/* Utility */
--color-gold: #F0B429;
--color-success: #00E5A0;
--color-warning: #FF8C00;
--color-error: #FF4D6D;
--color-focus: #7B61FF;
/* Text */
--color-text-primary: #FFFFFF;
--color-text-secondary: #E4EBF5;
--color-text-muted: #8A9BB5;
--color-text-disabled: #4A5A72;
/* Typography */
--font-display: 'Oswald', sans-serif;
--font-body: 'Manrope', sans-serif;
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 40px;
--space-2xl: 64px;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
/* Transitions */
--transition-fast: 150ms ease-out;
--transition-base: 200ms ease-in-out;
--transition-slow: 400ms ease-in-out;
}
Подключение шрифтов
/* Google Fonts — добавить в <head> */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
Figma-токены (JSON)
{
"color": {
"accent": {
"cyan": { "value": "#00D4FF", "type": "color" },
"magenta": { "value": "#FF1F8F", "type": "color" }
},
"bg": {
"primary": { "value": "#070D1A", "type": "color" },
"secondary": { "value": "#0B1422", "type": "color" },
"card": { "value": "#0F1D30", "type": "color" }
}
},
"typography": {
"display": { "value": "Oswald", "type": "fontFamilies" },
"body": { "value": "Manrope", "type": "fontFamilies" }
}
}
20
Форматы файлов
Форматы экспорта, структура папок, чеклист сдачи
Матрица форматов логотипа
Структура папок
📁 the-one-exchange-brand/
📁 01-логотип/ → svg · png · pdf · ai
📁 02-цвета/ → ASE + CLR свотчи
📁 03-типографика/ → шрифты + лицензии
📁 04-иконки/ → все SVG-иконки + спрайт
📁 05-паттерны/ → SVG + PNG тайлы
📁 06-шаблоны/
📁 соцсети/ → все форматы платформ
📁 печать/ → визитки, флаер
📁 digital/ → баннер, email, OG
📁 07-гайдлайны/ → этот брендбук PDF + HTML
Чеклист сдачи
✓Логотип во всех 6 цветовых версиях × все форматы
✓CSS-токены и Figma-переменные
✓Палитра с HEX, RGB, CMYK, HSL
✓Полный набор иконок SVG + спрайт
✓Шаблоны соцсетей (Figma + экспорты)
✓Файлы для печати, проверенные типографией
✓Брендбук PDF + HTML (этот документ)
✓Figma-дизайн-система со всеми токенами
21
Глоссарий
Термины, правила написания, справочник команды
Правильное написание
НаписаниеПравило
The One ExchangeИменно так — не «TheOneExchange», не «THE ONE EXCHANGE» в тексте✓
The OneСокращение бренда в разговорной речи и рекламе✓
THBВсегда заглавными. Не «baht», не «тайский бат» без расшифровки✓
USD, EUR, RUBКоды валют — заглавными. В тексте: «доллар», «евро», «рубль»✓
ПхукетПо-русски: «Пхукет». По-английски: «Phuket». Не «Пукет»✓
обмен валютВ строчку. Не «Обмен Валют», не «ОБМЕН ВАЛЮТ» в тексте✓
без комиссийСтрочными. В заголовках: «Без комиссий» (первая заглавная)✓
Словарь терминов
Брендбук
Документ с правилами использования фирменного стиля.
Охранное поле
Зона вокруг логотипа, в которую нельзя помещать другие элементы.
Primary color
Основной цвет бренда. Для нас — Electric Cyan #00D4FF.
UI-состояния
Визуальные варианты элемента: default, hover, pressed, disabled, error, success.
Duotone
Фотография в двухцветном режиме. Используем cyan + тёмный.
Easing
Функция плавности анимации: ease-in, ease-out, ease-in-out, linear.
Safe zone
Безопасная зона — область, где текст не обрезается при печати.
Mockup
Визуализация дизайна в реальном контексте: телефон, билборд.
CTA
Call to Action — призыв к действию. Пример: «Обменять сейчас →».
Design Token
Переменная с именем для цвета, отступа, шрифта в Figma и коде.
Контакт
По вопросам использования бренда:
Бренд-менеджер The One Exchange
brand@the-one.exchange · +66 90 399 9228
Без согласования с бренд-менеджером изменения в гайдлайны не вносятся.
22
Целевая аудитория
Сегменты, потребности и роль бренда
Проект ориентирован на международную аудиторию в Таиланде, преимущественно на Пхукете, а также на людей, регулярно взаимодействующих с Таиландом финансово. Перспектива — на всю Азию.
Высокий сезон: с сентября по апрель — период максимального туристического потока и роста международных транзакций на Пхукете.
9 сегментов аудитории
ТУ
Туристы
Отдых, зимовка, long-stay путешествия
Временные пользователи
ПотребностиБыстрый обмен, удобство, хороший курс, простота, доверие к сервису
ЭУ
Экспаты с удалённым доходом
Digital nomads, фрилансеры, IT-специалисты
Постоянные · выбирают раз и навсегда
ПотребностиРегулярный обмен, выгода, скорость, стабильность, без бюрократии
ЭБ
Экспаты с бизнесом на Пхукете
Недвижимость, туризм, beauty, рестораны
Постоянные · выбирают раз и навсегда
ПотребностиОперационные переводы, обмен крупных сумм, надёжный постоянный партнёр
ЭМ
Экспаты с международным бизнесом
Живут в Таиланде, бизнес в других странах
Думающая аудитория · большие обороты
ПотребностиМеждународные переводы, гибкость, стабильность, индивидуальный подход
DN
Digital Nomads
Молодое поколение, mobile-first, крипта
Modern audience
ПотребностиТехнологичность, скорость, современный интерфейс, подходящий TOV
КР
Крипто-аудитория
USDT, TON, BTC, P2P-сервисы
Digital-first
ПотребностиБыстрые сделки, доверие, понятные условия, современный digital-бренд
ЗМ
Long-stay / зимовщики
Регулярно живут в Таиланде 3–6 мес.
Высокий LTV · возвращаются
ПотребностиСтабильный сервис, постоянный курс, долгосрочное доверие, удобство повтора
PR
Premium-аудитория
Предприниматели, инвесторы, high-income
Максимальная ценность · редкие визиты
ПотребностиПриватность, premium-сервис, стабильность, индивидуальные условия
EN
Иностранные туристы и экспаты
Европа, США, Азия — в Таиланде
Масштабирование
ПотребностиАнглийский язык, прозрачность, clean fintech aesthetics, digital-first сервис
Общий портрет аудитории
Объединяет всех: Привыкли к digital-сервисам, ценят скорость и удобство, не любят бюрократию, используют Telegram и онлайн-банкинг, хотят человеческую коммуникацию.
Ключевые ценности: Доверие, скорость, удобство и ощущение современного lifestyle-сервиса.
Маркетинговый принцип: Каждый сегмент имеет свои взгляды на мир и бизнес. Маркетинг подстраивается под площадку, TOV адаптируется под аудиторию.
23
Фотостиль
Настроение, цветовая обработка, запрещённые образы
Настроение съёмки — референсы
ДОВЕРИЕ
Тёмный фон, cyan-акцент
Минимализм
Минимализм
Технологичность
🌴
Тайланд, море, солнце
Тёмная обработка
Тёмная обработка
Локальность
🤝
Люди, контакт
Живые ситуации
Живые ситуации
Человечность
СКОРОСТЬ
Движение, динамика
Размытые огни
Размытые огни
Динамика
Цветовая обработка фотографий
Правила
✓ Разрешено
✓Тёмная или тонированная обработка в цветах бренда
✓Реальные локации Пхукета: пляжи, улицы, офис
✓Живые люди в естественных ситуациях обмена
✓Крупный план банкнот, монет, рук с деньгами
✓Чистая, незагромождённая композиция
✕ Запрещено
✕Светлые/белые фоны — нарушают фирменный тёмный стиль
✕Стоковые фото с фальшивыми улыбками
✕Яркие несистемные цвета без тонирования
✕Фото с логотипами конкурентов или банков
✕Клише: горы монет, символы $€¥ на белом фоне
24
Доступность (a11y)
WCAG AA, контраст, размеры, фокус, Screen Reader
Для финансового сервиса доступность — не опция, а требование. Стандарт: WCAG 2.1 уровень AA.
Контрастность — проверка пар
Основной текст
14.7:1
Cyan-акцент
6.2:1
Карточка / текст
9.8:1
CTA кнопка
6.8:1
Вторичный текст
4.5:1
Плейсхолдер
3.1:1
Минимальные размеры tap-целей
OK
44×44 px
Минимум iOS
Минимум iOS
OK
48×48 dp
Минимум Android
Минимум Android
✕
32×32 px
Слишком мало
Слишком мало
Все интерактивные элементы — кнопки, ссылки, иконки — должны иметь тап-зону не менее 44×44 px. Визуальный размер может быть меньше, но невидимая область нажатия — нет.
Состояния фокуса (Focus States)
Обменять
→ по Tab →
Обменять
Фокус: outline 2px cyan, offset 3px
Disabled
Без outline, не интерактивен
Дополнительные требования
Размер шрифта: Минимум 12px для любого видимого текста. Основной контент — от 14px.
alt-тексты: Все изображения с данными имеют описательный alt. Декоративные — alt="".
ARIA-метки: Иконки без текста подписаны через aria-label. Числа курсов — через aria-live="polite".
Анимации: Поддержка prefers-reduced-motion. Все анимации отключаются при системном флаге.
Цвет не единственный индикатор: Рост/падение курса обозначается и цветом, и иконкой (↑ ↓), и текстом.
25
Состояния UI
Loading · Skeleton · Empty · Error · Success
Каждый экран должен обрабатывать все состояния. Без этого разработчики создают «серые пустоты» вместо фирменного опыта.
Состояния карточки курса
Skeleton (загрузка)
Pulse-анимация, --g30 цвет
Empty (нет данных)
Нет курсов
Данные обновятся
в 09:00 UTC+7
в 09:00 UTC+7
Error (ошибка)
Ошибка загрузки
Проверьте соединение
Повторить
Success (успех)
Обмен выполнен
Деньги выданы
Состояния кнопки
Обменять
Default
Обменять
Hover
Обменять
Pressed
Обменять
Disabled
Загрузка
Loading
Состояния поля ввода
Default
Введите сумму
Focus
10 000
Error
-100
Сумма должна быть > 0
Success
10 000
26
Дата-визуализация
Графики курсов, спарклайны, тултипы, цветовая карта
Цветовая карта валют
USD#F0B429
EUR#00D4FF
RUB#FF1F8F
JPY#8A9BB5
CNY#7B61FF
GBP#FF8C00
График курса — 7 дней
USD / THB
7 дней · Обновлено 15:17 UTC+7
32.93
↑ +0.4% за 24 ч
33.5
33.0
32.5
32.0
USD/THB — продажа
Пн · Вт · Ср · Чт · Пт · Сб · Вс
Дизайн тултипа
10 мая 2026 · 15:00
USD/THB32.81
Фон: --bg2 с cyan-бордером
Дата: --g50, 9px
Цветная точка: цвет валюты
Значение: белый, font-weight 700
Позиция: выше точки данных, не обрезается
Дата: --g50, 9px
Цветная точка: цвет валюты
Значение: белый, font-weight 700
Позиция: выше точки данных, не обрезается
Спарклайны (компактные графики)
USD/THB
32.93
↑ +0.4%
EUR/THB
38.84
↑ +0.2%
RUB/THB
2.18
↓ −1.2%
JPY/THB
0.212
↑ +0.1%
Правила дата-визуализации
Оси и сетка
Горизонтальные линии — --g30, пунктирные. Подписи оси Y — --g50, 8–9px, справа или слева. Ось X — даты или время, --g50. Никаких вертикальных линий сетки.
Линии данных
Толщина 2px. Закруглённые концы (stroke-linecap: round). Точка активного значения — круг 4px, залитый цветом. Без маркеров на каждой точке.
Градиент под линией
Вертикальный градиент: цвет линии 30% → прозрачный 0%. Усиливает читаемость направления. Используется только для линейных графиков.
Рост / падение
Рост: --grn (#00E5A0). Падение: --red (#FF4D6D). Нейтрально: --g70. Всегда дублируется иконкой (↑ ↓) — не только цветом.
27
Локализация
RU · EN · TH — шрифты, типографика, строки
Правила по языкам
🇷🇺
Русский
ru-RU · Основной
Приоритет1 — основной язык
ШрифтOswald + Manrope
КириллицаManrope поддерживает
Числа32 930 (пробел = тысяча)
Дата11.05.2026 · 15:17
Телефон+66 90 399 9228
🇬🇧
English
en-US · Второй
Приоритет2 — туристы, экспаты
ШрифтOswald + Manrope
ЛатиницаПолная поддержка
Числа32,930 (запятая = тысяча)
ДатаMay 11, 2026 · 3:17 PM
CTA"Exchange Now →"
🇹🇭
ภาษาไทย
th-TH · Третий
Приоритет3 — местная аудитория
Шрифт телаNoto Sans Thai
ОсвальТолько для цифр и лого
Числа32,930 ฿ (бат-символ)
Дата11 พ.ค. 2569 (буддийский год)
CTA"แลกเงินเลย →"
Двуязычные layout-ы логотипа
Только EN (цифровые носители)
1 THE ONE
EXCHANGE
EN + RU (печатные носители для туристов)
1 THE ONE
EXCHANGE · Обмен валют
EN + TH (локальная реклама)
1 THE ONE
EXCHANGE · แลกเปลี่ยนเงินตรา
Длина строк — компенсация при переводе
English (база)Русский (~130%)ไทย (~110%)
Exchange NowОбменять сейчасแลกเงินเลย
No CommissionБез комиссийไม่มีค่าธรรมเนียม
Best Rate TodayЛучший курс сегодняอัตราแลกเปลี่ยนที่ดีที่สุด
Transaction HistoryИстория операцийประวัติการทำรายการ
Кнопки рассчитаны на тайский язык как самый длинный. Минимальная ширина CTA — 160px.
28
Email-шаблоны
Транзакционные, алерты, маркетинговые рассылки
Три типа писем
Транзакционное
1 THE ONE
EXCHANGE
✅ Ваш обмен выполнен
10 000 RUB → 218.50 THB · 11.05.2026 15:17
218.50 THB
Получено
Отдали10 000 RUB
Курс0.02185
Комиссия0 THB
Дата11.05.2026
Алерт курса
1 THE ONE
EXCHANGE
📈 USD вырос до 33.15 THB
Ваш целевой курс достигнут
33.15 THB
Текущий курс USD/THB
Ваш алерт≥ 33.00
Изменение↑ +0.7%
Обменять сейчас →
Маркетинговое
1 THE ONE
EXCHANGE
Курсы недели · 5–11 мая 2026
USD укрепился, RUB под давлением
ЛУЧШИЕ КУРСЫ НЕДЕЛИ
USD/THB32.93
EUR/THB38.84
RUB/THB2.18
Смотреть все курсы →
Технические требования к письмам
Ширина и фон
Макс. ширина контента: 600px. Фон email-клиента: #070D1A или чёрный. Внутренний блок: #0B1422. Тест в Litmus/Email on Acid обязателен.
Шрифты
Для заголовков — Oswald (Google Fonts web-font). Fallback: Arial Black, sans-serif. Тело письма: Manrope или system sans-serif. Минимум 13px.
Тёмная тема
Использовать prefers-color-scheme: dark. Все блоки с явным background-color. Избегать инверсии белых текстур в тёмном режиме Outlook.
CTA-кнопка
Фон: #00D4FF. Текст: #070D1A, font-weight 700. Верстать как <a> с display:block. Минимальная высота 44px. Отступ от края — 24px.
29
Co-branding
Соседство с партнёрами, платёжными системами, банками
Правила соседства логотипов
1 THE ONE
VISA
Равная высота логотипов. Разделитель — вертикальная линия --g50. Отступ от разделителя ≥ охранному полю (=высота лого).
1 THE ONE
Agoda
Партнёрский туристический бренд. Логотип The One — всегда первым слева. Наш бренд доминирует по размеру не менее 1:1.
POWERED BY
1 THE ONE
Виджет на стороннем сайте. Версия «Powered by The One Exchange» — всегда внизу виджета с ссылкой на сайт.
Запрещённые варианты
✕ Слияние
Нельзя объединять логотип с чужим в единый знак
✕ Наш бренд меньше
Логотип партнёра не может быть крупнее нашего
✕ Чужие цвета на нашем лого
Нельзя перекрашивать наш логотип под стиль партнёра
✕ Без согласования
Любое совместное размещение требует одобрения бренд-менеджера
Платёжные системы — минимальные требования
Visa / Mastercard: Использовать только официальные файлы с сайтов партнёров. Минимальный размер: 16px высота.
Фон для чужих лого: Если партнёр требует светлый фон — размещать в белом чипе #FFFFFF на тёмной подложке.
Расстояние: Между логотипами всегда ≥ 16px. Охранная зона нашего лого неприкосновенна.
30
QR-код
Фирменный стиль, цвета, минимальный размер, применение
Варианты фирменного QR
Тёмный (основной)
Точки: Cyan #00D4FF
Фон: #070D1A
Лого «1» в центре
Фон: #070D1A
Лого «1» в центре
Светлый (для белой бумаги)
Точки: #0B1422
Фон: #FFFFFF
Лого «1» в центре
Фон: #FFFFFF
Лого «1» в центре
Правила
Минимальный размер
25×25 мм для печати. 80×80 px для экрана. Меньше — сканер не считает.
Коррекция ошибок
Уровень H (30%) — обязателен при размещении лого в центре. Логотип не должен занимать более 20% площади.
Охранная зона
Поле вокруг QR ≥ 4 модуля. Без текста и элементов в этой зоне.
Цвет
Тёмный QR (cyan) — на тёмных носителях. Светлый (navy) — на белых. Запрещено инвертировать (светлые точки на белом).
Случаи применения
📱Ссылка на сайт / калькулятор
📞Быстрый звонок в WhatsApp
✈️Визитная карточка → контакты
🏪Меню / прайс курсов в офисе
📋Чек → история обмена онлайн
📢Рекламный флаер → Telegram
31
Управление брендом
Процессы, хранение, версионирование, контакты
Владелец бренда
БМ
Бренд-менеджер The One Exchange
Единственный источник правды. Утверждает все материалы перед публикацией.
brand@the-one.exchange · +66 90 399 9228
Процесс согласования
01
Запрос
Дизайнер или маркетолог создаёт макет и отправляет на ревью в Figma-ссылке
→
02
Проверка
Бренд-менеджер проверяет соответствие гайдлайну в течение 24 ч
→
03
Правки
Замечания фиксируются в Figma-комментариях. Срок устранения — 48 ч
→
04
Утверждение
Финальный апрув тегом «Approved» в Figma или письмом на email
→
05
Публикация
Материал размещается. Финальный файл архивируется в Google Drive
Хранение файлов
Google Drive
drive.google.com/theone-brand
Основное хранилище. Все финальные файлы: логотипы, шаблоны, брендбук PDF. Доступ — только по запросу.
Figma
figma.com/theone-design-system
Дизайн-система, все UI-компоненты, токены. Доступ: дизайнеры и разработчики. Только чтение для подрядчиков.
GitHub
github.com/theone-exchange/brand
CSS-токены, SVG-иконки, HTML-брендбук. Ветка main — только продакшен. Правки — через pull request.
Telegram (внутренний)
@theone_brand_team
Оперативные вопросы, быстрое согласование мелких правок. Официальных решений здесь не принимается.
Правило «одного источника правды»
Актуальный брендбук: Всегда на Google Drive и на GitHub. Любая распечатанная версия считается архивной.
Обновление токенов: Изменение CSS-переменных — только через PR с описанием причины и апрувом бренд-менеджера.
Подрядчики: Получают read-only доступ к Figma. Брендбук PDF обязателен к прочтению до начала работы.
При конфликте: HTML-брендбук v2.0 приоритетнее любого другого документа. Финальное слово — за бренд-менеджером.
Шаблоны соцсетей
Готовые макеты: пост, сторис, Telegram-баннер
Пост публикуется ежедневно в 9:00 (UTC+7)
Шрифт: Oswald Bold для цифр, Manrope для текста
Сетка: тёмная подложка + cyan свечение
Логотип: левый верхний угол, белый + cyan
Сторис: формат 9:16, magenta акцент на числе курса