Руководство по бренду · 1.0
Как выглядит
и звучит «три».
Знак, цвет, типографика, продукт и голос — всё, что делает бренд узнаваемым в приложении, на печати и в любом другом носителе.
01 Бренд
Спокойная уверенность,
инженерная точность.
«три» — российский браслет здоровья, который измеряет сон, восстановление, нагрузку и работу сердца круглосуточно. Без экрана и без отвлечений: данные живут в приложении, а не на запястье.
Обещание
Показать состояние тела так, чтобы решение было очевидным. Не пугать цифрой — объяснять её.
Модель
Браслет достаётся бесплатно, вы платите годовую подписку 33 000 ₽. Новые поколения устройства — тоже без доплат.
Оплата в рублях
Подписка работает в России без сбоев — там, где зарубежные сервисы отваливаются на оплате.
✓ Кто мы
- Точный прибор для здоровья, а не украшение.
- Взрослый, сдержанный тон — без шумихи и восклицаний.
- В одном ряду с лучшими браслетами и умными кольцами такого класса.
- Данные и понятное объяснение вместо голых цифр.
✕ Кем мы не являемся
- Не дешёвый счётчик шагов с распродажи.
- Мы не ставим диагнозы — наша задача помочь наблюдать за собой.
- Не пёстрый, не «спортивно-агрессивный», не кричащий.
- Не устройство с экраном — данные вы смотрите в приложении, а не на руке.
02 Логотип
Знак вместо имени.
Основа айдентики — монограмма «3». Она читается как цифра, как виток ремешка и как само имя бренда. Знак самодостаточен: его не нужно подписывать словом.
Цветовые версии · только две
Белый знак — на тёмном фоне.
Чёрный знак — на светлом фоне.
Правило. Не ставьте знак и слово «три» рядом как «логотип + подпись» — это дублирование. Знак заменяет имя. Если рядом нужна опора, добавляйте не имя бренда, а контекст раздела: «Брендбук», «Консоль», «Админ».
03 Построение и охранное поле
Воздух вокруг знака.
Знаку нужно пространство. Свободное поле строится от его собственной высоты — обозначим её как X. Ниже минимальных размеров знак не используем: он теряет форму.
Правила
- Охранное поле≥ ½X со всех сторон
- Мин. размер знака · экран24 px
- Мин. размер знака · печать8 мм
- Мин. размер связки · экран96 px по ширине
- Мин. размер связки · печать24 мм по ширине
- Мин. размер знака · соцсети48 px
- Толщина штриха≈ 0.2X, равномерно
- Собственное поле холста≈ 0.3X сверху и снизу
- Пропорциине менять · масштаб единый
04 Ошибки использования
Так со знаком не поступают.
Одна форма, один цвет, один масштаб. Всё остальное разрушает узнаваемость.
Не растягивать. Пропорции знака фиксированы.
Не перекрашивать. Знак — чёрный или белый.
Не поворачивать. Знак всегда вертикален.
Без теней и эффектов. Никакого объёма и свечения.
Не на пёстром фоне. Нужен ровный контрастный фон.
Держать контраст. Не топить знак в тон фона.
Не дублировать. Знак и слово рядом — лишнее.
Без контура. Только сплошная заливка.
05 Цвет
Цвет — это сигнал,
а не украшение.
База — чистый холодный чёрный и белый. Единственный акцент — синий, и только для активного состояния. Показатели говорят цветом лишь там, где он несёт смысл: зелёный — тело в норме, красный — тревога. Более широкая палитра появляется в одном месте — в кодировании данных (зоны, фазы сна, графики), см. ниже. В интерфейсе — никаких градиентов и свечения.
Ядро · чёрное и белое
Чернила
Основной фон, глубина, обложки
- HEX
- #050507
- RGB
- 5 · 5 · 7
- CMYK
- 60·50·40·100
- Pantone
- Black 6 C
Бумага
Текст на тёмном, инверсный фон, печать
- HEX
- #FFFFFF
- RGB
- 255·255·255
- CMYK
- 0·0·0·0
- Pantone
- —
Серый текст
Вводки, вторичный текст
- HEX
- #B8B8C2
- RGB
- 184·184·194
- CMYK
- 5·5·0·24
- Pantone
- Cool Gray 4 C
Приглушённый
Подписи, метки, служебный текст
- HEX
- #8A8D97
- RGB
- 138·141·151
- CMYK
- 9·7·0·41
- Pantone
- Cool Gray 7 C
Акцент · синий
Синий
Активное состояние и главное действие
- HEX
- #0A6CFF
- RGB
- 10·108·255
- CMYK
- 96·58·0·0
- Pantone
- 2727 C
Единственный акцент
Синий появляется только на активном элементе и главной кнопке — один раз на экран. Не для декора, не для заливок, не для иконок навигации. Всё остальное — чёрно-белое.
Сигналы показателей · только со смыслом
Тело · норма
Восстановление, сон, HRV, движение — тело в норме
- HEX
- #34C759
- RGB
- 52·199·89
- CMYK
- 74·0·55·22
- Pantone
- 354 C
Пульс · тревога
Пульс, стресс, зона риска, тревога
- HEX
- #FF3B30
- RGB
- 255·59·48
- CMYK
- 0·77·81·0
- Pantone
- 179 C
Нагрузка
Нагрузка, калории, температура
- HEX
- #FF9F0A
- RGB
- 255·159·10
- CMYK
- 0·38·96·0
- Pantone
- 1375 C
Дыхание · SpO₂
Насыщение кислородом, частота дыхания
- HEX
- #5AC8FA
- RGB
- 90·200·250
- CMYK
- 64·20·0·2
- Pantone
- 298 C
Служебные состояния — без цвета. Подключение, батарея, синхронизация — всегда нейтральный белый или серый. Сигнальные цвета им не полагаются: цвет означает состояние тела, а не техники.
Цвет данных · единственное исключение
Тренировочные зоны · интенсивность
Интенсивность пульса читается спектром синий→красный. Те же цвета — в виджете тренировки.
Фазы сна · гипнограмма
Линии графиков · какая метрика
Правило исключения. Интерфейс — монохром плюс сигнал. Цвет разрешён ТОЛЬКО там, где он сам является данными: какая фаза сна, какая тренировочная зона, какая линия на графике. Это семантическое кодирование, а не декор — единственное место, где палитра шире чёрно-белой (включая индиго и маджента фаз сна). В остальном UI этих цветов нет.
Цвет в интерфейсе · как в приложении
Кольца сводки нейтрально-белые; зелёными становятся при хорошем скоре, красными — в зоне риска. Цвет = сигнал, а не постоянная окраска.
Белый — основное действие и хорошая динамика (её незачем «подсвечивать»). Красный — единственный тревожный сигнал: ухудшение, зона риска. Синий — только выбор и фокус: выбранный день, активный ввод. Статус подключения — нейтральный, не цветной.
Экран — источник истины. Для приложения и сайта сверяйтесь только по HEX и RGB. CMYK и Pantone даны как приближения для типографии: тёмные чернила и насыщенный синий на бумаге почти всегда уходят от экранного оттенка. Перед тиражом делайте контрольную выкраску и сверяйте по вееру Pantone. Минимальный контраст текста к фону — 4.5:1.
Печать · рекомендации
Составной чёрный
Плашки и фон — только составной чёрный C60 M50 Y40 K100. Одна краска K100 даёт блёклый серо-чёрный. Текст мелким кеглем — наоборот, чистый K100, чтобы не двоил.
Знак на упаковке
На матовом чёрном коробе знак «3» — тиснение без краски (блинт) или чёрная фольга по чёрному. Работает фактура и свет, а не контраст цвета.
Материал и финиш
Матовая мелованная бумага плотностью от 300 г, матовая ламинация. Глянец не берём — он спорит с монохромом и даёт «рекламный» блик.
06 Типографика
Крупно, плотно,
без жирности.
Две гарнитуры с чёткими ролями. Заголовки — характерные и крупные, но не утяжелённые: начертание 500–600, плотный кернинг. Числа набираем той же дисплейной гарнитурой, табличными цифрами. Всё с полной кириллицей.
Технические настройки
- Bricolage Grotesquewdth 90–92 · opsz под кегль
- Заголовки · трекинг−0.035em … −0.05em
- Заголовки · интерлиньяж0.94
- Inter · текстopsz 14 · интерлиньяж 1.7
- Надзаголовок · Interкапс · трекинг 0.1em
- ЧислаBricolage · табличные цифры
- Веса по ролямдисплей 500 · метки и числа 600
- Сетка по вертикаликратно 4pt
Замены, если шрифтов нет
- Вместо BricolageSF Pro / Segoe UI
- Вместо InterSF Pro / Segoe UI
- Начертание заголовковдержим 500–600
- Числатабличные цифры системного
Для офисных документов и презентаций, где нельзя подключить шрифт. Роли и начертания сохраняем — характер важнее конкретного файла. В приложении числа набраны системным шрифтом в 600 — это норма.
✓ Как надо
- Начертание заголовков 500–600, плотный минус-трекинг.
- Числа — дисплейной гарнитурой, табличными цифрами (ровные колонки).
- Если фирменных шрифтов нет — системный гротеск, роли сохраняем.
✕ Как нельзя
- Самое жирное начертание (700 и выше) в заголовках — теряется характер.
- Разрядка и «воздушный» трекинг в дисплейных заголовках.
- Моноширинные шрифты — они дают «технический» неживой вид.
- Третья гарнитура на макете или случайные подмены шрифта.
07 Движение
Спокойно и по делу.
Анимация помогает понять, а не развлекает. Одна плавность на всё — мягкий выход ease-out, короткие длительности, ноль пружин-перескоков в контенте. Наведите на примеры ниже или нажмите «Повторить».
Заставка · фирменный момент
Знак прорисовывается.
При запуске приложения «3» вычерчивается сверху вниз тонкой светящейся кромкой, замирает на мгновение и мягко улетает вверх — с коротким тактильным «вжух». Прорисовка ~0.5 с, уход ~0.6 с. Это единственное место, где знак «оживает».
Появление
Блок всплывает снизу с затуханием. 600 мс, ease-out.
Счёт числа
Показатель набегает от нуля к значению. 900 мс.
Отрисовка линии
Графики и знак вычерчиваются по мере прокрутки. 1.6 с.
Отклик на касание
Кнопка чуть подрастает и проседает при нажатии. 250 мс.
Длительности
- Микро-отклик (hover, tap)150–250 мс
- Появление, переходы400–600 мс
- Отрисовка линий1.2–1.6 с
Плавности
- Появление / выходcubic-bezier(.16,1,.3,1)
- Отклик управления · только тут пружинаcubic-bezier(.34,1.56,.64,1)
- Уважать «меньше движения»prefers-reduced-motion
- Исходникиsrc/app.js · tokens.css · заставка приложения
08 Иконки и знак устройства
Тонкая линия, монохром.
В приложении — только системные иконки одного веса. Отдельно живёт знак устройства: силуэт браслета. Это не логотип — им показывают сам прибор.
Знак устройства
Силуэт браслета — для инструкций, коробки, экрана подключения, там где нужно показать физический прибор. Держите его отдельно от монограммы «3»: у них разные задачи.
✓ Стиль иконок
- Один вес линии
- Монохром, без цветных заливок
- Скруглённые, спокойные формы
✕ Не делать
- Разные толщины в наборе
- Цветные и объёмные иконки
- Знак «3» как иконку в списке
Системные иконки под показатели
- Пульс · HRVheart.fill · waveform.path.ecg
- Сонmoon.zzz.fill
- Дыхание · SpO₂lungs.fill
- Нагрузка · калорииflame.fill
- Тренировкиfigure.run.circle
Берём набор iOS (SF Symbols) — пользователь уже знает эти формы. На Android — Material Symbols, вес 300 (под тонкие SF Symbols). Свой набор иконок почти всегда выглядит кустарно.
Размеры · кратно 4
- В строке текста20 пт
- В кнопке24 пт
- В пустом состоянии32 пт
Граница жёсткая. Монограмма «3» — имя бренда, силуэт браслета — предмет. Их нельзя менять местами и не ставят вплотную друг к другу.
09 Продукт и съёмка
Прибор, а не аксессуар.
Оптический датчик снизу круглосуточно снимает пульс, HRV, дыхание и температуру, а данные уходят в приложение — на самом браслете смотреть нечего, экрана нет. Поэтому снимаем его как инженерный прибор: чистый фон, направленный свет, макро на застёжку «3» и датчик. Есть два цвета — чёрный и белый.
Макро · фактура ремешка и застёжки · один источник света
Четыре обязательных кадра
Свет вдоль пластины — видна шлифовка и грань.
Диагональ плетения, зерно нити, микротень.
Окно с оптикой, кольцо контактов, геометрия.
Гладкая грань там, где у часов циферблат.
Каждый кадр самостоятелен — для лендинга, поста или сторис берите один. Все четыре вместе — только в этом руководстве.
✓ Съёмка
- Ровный однотонный фон: чистый чёрный или чистый белый.
- Один направленный источник, выразительная тень.
- Макро на «3» и датчик — деталь продаёт качество.
- Показывать, что браслет без экрана — это преимущество.
✕ Не снимать
- Бытовой мусор в кадре: столики, кофе, случайные руки.
- Пёстрые фоны и цветные подсветки.
- Пересвет, глянцевые блики «как в рекламе».
- Дорисовывать браслету экран или циферблат.
10 Иллюстрации и нейросети
Сигнал тела,
а не картинки из стока.
Иллюстрации можно генерировать нейросетью — но только в одном языке: монохром, тонкая инженерная линия, биосигналы и приборная графика на глубоком чёрном. Ниже — примеры, сгенерированные для этого руководства, и готовые рецепты.
Так — можно
Пульс переходит в знак
Линия пульса ведёт к «3». Чисто, графично, ноль цвета.
Тело из данных
Кисть, собранная из линий пульса и изолиний. Анатомия через сигнал.
Гипнограмма сна
Ступенчатая линия фаз с осью и метками — приборный график.
Разнесённая схема
Браслет и датчик тонкой линией — как инженерный чертёж.
Контурная топография
Изолинии и гипнограмма как абстрактная «карта тела».
Брутальная предметка
Студийное макро на чёрном, жёсткий контровый свет.
✓ Наш стиль
- Строго чёрно-белое, глубокий холодный фон.
- Биосигналы: ЭКГ, гипнограмма сна, кольца, изолинии.
- Тонкая инженерная линия, чертёж, приборная эстетика.
- Много пустого пространства, спокойствие, точность.
✕ Чужой стиль
- Цветные 3D-капли, глянцевые «пузыри», градиентные шары.
- Мультяшность, эмодзи, стикеры, милые персонажи.
- Постановочные сцены с улыбками и «здоровым образом жизни».
- Неон-киберпанк, свечение, «медицина из рекламы».
Так — нельзя
Цветные 3D-капли
Глянцевые градиентные шары — язык дешёвого веб-сервиса.
Мультяшность
Маскоты, глазастые персонажи, стикеры — не наш взрослый тон.
Постановочный сток
Улыбки на закате и «здоровый образ жизни» из фотобанка.
Неон-киберпанк
Свечение, голограммы, «медицина из будущего» — кричит вместо того, чтобы работать.
Рецепты промптов
P1 Знак из сигнала
monochrome technical line illustration, pure near-black background, single ultra-thin white ECG hairline forming a stylized numeral, huge negative space, engineering data-viz, calm, premium, film grain
— no color, no gradient, no glow, no 3D, no text
P2 Паттерн-карта
seamless monochrome pattern, deep black, ultra-thin white topographic contour rings and stepped hypnogram, faint dot grid, blueprint minimalism, generous spacing
— no color, no glow, no text, no clutter
P3 Брутальная предметка
editorial industrial-design macro, matte-black woven strap and brushed dark-metal clasp, single hard rim light, pure black seamless background, deep shadows, monochrome, Rams aesthetic
— no logo, no color cast, no reflections
Постобработка. Любую генерацию приводим к общему языку: обесцвечиваем в монохром, размещаем на едином холодном чёрном фоне (#050507), добавляем едва заметное зерно. Рекомендуемые модели — те, что дают чистую графику и текст (например, nano banana pro). Перед публикацией проверяйте права на использование сгенерированного и отсутствие чужих логотипов в кадре.
11 Паттерны и графика
Данные как текстура.
Фирменные паттерны выросли из интерфейса: кольца сводки, волна сна, изолинии, пульс. Монохром, тонкая линия, много воздуха — фон не спорит с текстом.
Пульс и кольца
Изолинии
Кардиосетка
✓ Где применять
- Фоны обложек, слайдов и шапок соцсетей.
- Упаковка, тиснение, разделители между блоками.
- Под текстом — приглушённо (не громче 15% яркости), чтобы читалось.
✕ Чего не делать
- Два разных паттерна на одном макете.
- Мелкий плотный узор — линии должны дышать.
- Цветной или яркий паттерн под основным текстом.
12 Тон и голос
Говорим как человек.
Просто, по делу, на русском. Объясняем, что значит показатель и что с ним делать — не сыплем баллами и не гадаем вслух. Английских слов в тексте нет.
Восстановился частично — тело ещё не отдохнуло. Сегодня лучше без тяжёлой тренировки.
Ваш Recovery 46. Сон поддержал восстановление, но HRV его сдержал.
Пульс покоя 58 — на 4 удара ниже вашей нормы. Это хороший знак.
Пульс покоя: 58 уд/мин.
На этой неделе вы тренировались больше обычного.
Недельный Strain: 14.2 балла, вклад тренировок +6.
Ночью дышали ровно, кислород в норме.
Sleep SpO₂ tracking: показатели в пределах нормы.
Заряда хватит ещё на 6 дней.
Battery level: 43%. Low power soon.
Принцип
Живой язык вместо канцелярита.
Принцип
Состояние тела вместо «баллов».
Принцип
Число всегда с ориентиром: норма, выше или ниже.
Принцип
Русские слова. Из английского — только HRV, SpO₂ и единицы.
13 Применение
Один знак, много носителей.
Как бренд живёт в приложении, соцсетях, на упаковке и в презентации.
Иконка приложения
Знак «3» на чистом чёрном либо инверсия. Никаких надписей на иконке.
Соцсети
Аватар — знак в круге. Обложка — паттерн или предметка, знак в углу.
слайда
Презентация
Тёмный слайд, крупный дисплейный заголовок, знак и нумерация страниц тонким Inter. Уровень — как у лучших мировых презентаций.
Упаковка
Матовый чёрный короб, тиснёный знак, минимум текста. Прибор внутри — герой.
Подпись и визитка
Знак, тонкая линия-разделитель, имя и роль. Ничего лишнего.
Мерч и баннеры
Фирменная иллюстрация во весь кадр, знак маленьким штампом в углу.
Соцсети · размеры и поля
14 Со-брендинг и интеграции
Рядом с чужим — на равных.
Когда «три» стоит рядом с другим брендом или отдаёт данные в чужое приложение, знак сохраняет своё поле, свой размер и свою чёрно-белую форму. Данные всегда подписаны.
Совместная связка: знак «три», тонкий разделитель, логотип партнёра одной высоты. Между ними — поле не меньше высоты знака.
Данные «три» в чужом приложении («Здоровье» на iPhone, партнёрская панель) подписываются знаком и строкой «Источник: три».
✓ Как надо
- Знак и логотип партнёра — одной оптической высоты.
- Поле между брендами ≥ высоты знака.
- Данные «три» подписаны: «Источник: три», знак ≥ 16 px.
✕ Как нельзя
- Сливать знак с чужим логотипом в один значок.
- Уменьшать знак «три» относительно партнёрского.
- Показывать наши показатели без подписи источника.
15 Доступность
Читаемо для всех.
Монохром — не повод жертвовать читаемостью. Текст держит контраст не ниже 4.5:1, элементы управления — крупные, цвет-сигнал дублируется словом или значком, а не остаётся единственным различием.
Контраст на чернилах
- Белый — основной текст≈ 20:1 ✓
- Серый текст — вводки≈ 10:1 ✓
- Приглушённый — подписи≈ 6:1 ✓ мин.
- Тёмно-серый — линии и точки≈ 2.4:1 · не текст
Размеры и цель
- Мин. размер текста13 px
- Мин. контроль / кнопка44 × 44 px
- Контраст текста≥ 4.5:1
- Контраст крупного текста≥ 3:1
✓ Как надо
- Основной текст — только белый на чернилах.
- Сигнал цветом дублировать словом или значком (не только красным).
- Проверять контраст в чёрной и в светлой среде до сдачи.
✕ Как нельзя
- Тёмно-серый (#4A4D56) под читаемый текст — он для линий.
- Белый текст на функциональном цвете без проверки читаемости.
- Различать состояния только цветом, без подписи.
16 Ресурсы
Всё, что нужно для работы.
Файлы бренда, шрифты и палитра. Возникнут вопросы — пишите команде бренда.
