MSN Studio
Speak any language

Один экран.
Любой язык.
Живой голос.

Переводчик, который говорит за вас, и ассистент, который звонит вместо вас. Один сервер, один аккаунт, любой язык.

Переводит·Звонит·Договаривается
01 · Логотип

Знак и написание

Знак — сфера с волной: голос, проходящий через границу. Верхняя половина светлая (тот, кто говорит), нижняя тёмная (тот, кто слышит), волна цвета «Secondary» соединяет обе. Написание — Inter Bold для «MSN» и Inter Light для «Studio».

MSN Studio
MSN Studio
MSN Studio

Правила

Охранное поле — высота знака со всех сторон.
Минимум — знак 24 px, полный логотип 120 px; печать — знак 8 мм, логотип 30 мм.
Иконка приложения — знак на тёмной (#111827) или белой подложке, радиус 26 % от стороны.
Монохром — только когда нет цвета: белый на тёмном, «Dark» на светлом.

Нельзя

✕ менять угол волны, наклонять или растягивать знак
✕ добавлять тени, обводки, свечение, текст внутри сферы
✕ ставить знак на пёстрое фото без подложки
✕ перекрашивать в цвета вне палитры, менять шрифт написания
02 · Цветовая палитра

Пять основных цветов

Primary
#6366F1
Технологии. Надёжность. Кнопки, ссылки, активные состояния.
Secondary
#06B6D4
Интеллект. Коммуникация. Волна, голос, живые индикаторы.
Accent
#A855F7
Энергия. Развитие. Только в градиентах и премиум-метках.
Light
#F8FAFC
Чистота. Простота. Светлые поверхности, текст на тёмном.
Dark
#0B0F1A
Глубина. Фокус. Фон приложения, текст на светлом.

Дополнительные цвета

Success
#22C55E
Warning
#F59E0B
Error
#EF4444
Muted
#64748B

Поверхности тёмной темы: фон #0B0F1A, карточка #131A2B, приподнятая #182135, линии белый 8 % / 16 %. Светлой: фон #F8FAFC, карточка #FFFFFF, приподнятая #F1F5F9, линии Dark 10 % / 18 %.

Градиенты

Primary → Accent · 135° · главная кнопка, иконка, обложки

Secondary → Primary · 135° · волна, индикаторы голоса, прогресс

Пропорции и контраст

Тёмный/светлый фон — 60 %, Primary — 25 %, Secondary и Accent вместе — не больше 10 %, семантические — по назначению. Проверено по WCAG 2.1:

СочетаниеКонтрастКак использовать
Белый на Primary #6366F14.5 : 1кнопки и текст от 15 px Medium; мелкий текст — нет
Dark на Secondary #06B6D48.2 : 1любой текст; белый на Secondary — нельзя (2.4 : 1)
Белый на Accent #A855F74.0 : 1только заголовки и метки от 18 px
Light на Dark17.8 : 1основной текст тёмной темы
Muted #64748B на Dark4.6 : 1подписи, вторичный текст
Primary на Light4.5 : 1ссылки и кнопки светлой темы
03 · Типографика

Inter — один шрифт на всё

Aa
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Аа Бб Вв Гг Дд Ее Ёё Жж Зз Ии Йй Кк Лл Мм Нн Оо Пп Рр Сс Тт Уу Фф Хх Цц Чч Шш Щщ Ъъ Ыы Ьь Ээ Юю Яя
0 1 2 3 4 5 6 7 8 9 · ₽ ¥ $ €
Light — подписи в написании логотипа, крупные цифры
Regular — основной текст
Medium — кнопки, навигация, подписи
Semibold — заголовки разделов
Bold — «MSN» в логотипе, крупные заголовки

Шкала

Заголовок40 / 1.1 / 700 · моб. 30
Раздел28 / 1.2 / 600 · моб. 24
Подраздел20 / 1.3 / 600
Основной текст крупный17 / 1.6 / 400
Основной текст15 / 1.6 / 400
Подпись и вторичный текст13 / 1.5 / 400
Метка11 / 1.4 / 600 / +16 %

Китайский текст

你好，我是亚历山大的语音助手。
Noto Sans SC — те же начертания, что у Inter: 400 / 500 / 700. Кегль на 1 пункт меньше латиницы в той же строке.

Код и токены

JetBrains Mono · $0,05 / мин · #6366F1 · ws://

Шрифты хранятся на своём сервере (в Китае Google Fonts недоступен): Inter cyrillic + latin, Noto Sans SC subset, JetBrains Mono.

04 · Иконки

Контурные, 1,5 px, скруглённые

Сетка 24 px, штрих 1,5 px, скругление углов 2 px, концы линий круглые.
Цвет — Primary на подложке карточки; Secondary — только для голоса и ИИ.
Подложка — квадрат с радиусом 16 px (26 % стороны), как у иконки приложения.
Не заливать, не смешивать с эмодзи, не брать иконки из разных наборов в одном экране.
05 · Элементы интерфейса

Кнопки, поля, голос

Куда позвонить и что узнать
Русский中文English
Одна главная кнопка на экран — с градиентом. Остальные — контурные или текстовые.
Радиусы: кнопки и поля — капсула; карточки — 18 px; иконки — 16 px.
Фокус — обводка Secondary 2 px с отступом 3 px.
MSN Translator21:42
你好，请问用护照回执可以买票吗？Здравствуйте, можно ли купить билет по справке о приёме паспорта?
Да, если в справке указан номер паспорта.可以，只要回执上写有护照号码。
MSN Studio
ПереводчикАссистентКейсыКонтакты

Светлая тема сайта: Light-фон, Dark-текст, Primary для ссылок, градиент только на главной кнопке и знаке.

06 · Визуальный стиль

Объём, волна, сеть

Объём и глубина — сферы с радиальным градиентом
Динамика — волны голоса, тонкие линии
Глобальность — точечная сеть, карта

Приёмы

✓ один крупный объект на композицию: сфера, волна или сеть, не всё сразу
✓ свет всегда слева-сверху, тени мягкие, без чёрных пятен
✓ фото людей — реальные ситуации: касса, звонок, переговоры; без стоковых улыбок

Стоп-лист

✕ «нейросетевой мозг», роботы, бинарный код, матричный дождь
✕ неоновое свечение и глитч-эффекты
✕ градиент на тексте, больше одного градиента в кадре
07 · Голос бренда

Спокойно, точно, по-человечески

ТехнологичныйНадёжныйГлобальныйУмныйПростойДружелюбныйСовременныйПремиальный
Мир становится ближе, когда за вас говорит интеллект.

Как мы говорим

Коротко. Одна мысль на фразу. Заголовок — до пяти слов.
Конкретно. Цифры, языки, секунды вместо «мощно» и «умно».
На языке пользователя. «Перевод прозвучал», а не «синтез завершён».
Без хайпа. Не обещаем «революцию»; показываем, что сделано.
Уважительно. Обращение на «вы» в интерфейсе; в рекламе допустимо «ты» для молодой аудитории.

Примеры

Так
Зажмите кнопку и говорите. Перевод прозвучит, когда отпустите.
Не так
Революционная нейросетевая технология мгновенного перевода!
Так
Не удалось подключиться. Проверьте интернет и попробуйте снова.
Не так
Ошибка сети (код 502). Приносим извинения.
Так
Мира позвонила на вокзал: справку примут, номер паспорта возьмут из неё.
Не так
ИИ-агент успешно выполнил задачу!
08 · Продукты

Как называем

MSN Translator

Приложение. Название всегда с «MSN», второе слово — Light. В тексте: «MSN Translator», без кавычек и склонения. Кнопка красная — «я говорю», синяя — «говорит собеседник»: это единственное место, где допустим красный вне ошибок; оттенки — #EF4444 и #06B6D4.

MSN Call

Устройство и ассистент. Рабочее имя «MSN Call», ассистента зовут Мира. Индикатор на корпусе — Secondary (#06B6D4): горит ровно — на связи, дышит — идёт звонок, Warning — ждёт ответа владельца.

09 · Токены

Для сайта и приложения

:root {
  --msn-primary:   #6366F1;  --msn-primary-hover: #4F52D9;
  --msn-secondary: #06B6D4;  --msn-accent:        #A855F7;
  --msn-light:     #F8FAFC;  --msn-dark:          #0B0F1A;
  --msn-success:   #22C55E;  --msn-warning:       #F59E0B;
  --msn-error:     #EF4444;  --msn-muted:         #64748B;

  --msn-grad-primary:   linear-gradient(135deg, #6366F1, #A855F7);
  --msn-grad-secondary: linear-gradient(135deg, #06B6D4, #6366F1);

  /* тёмная тема */
  --msn-bg: #0B0F1A;  --msn-surface: #131A2B;  --msn-surface-2: #182135;
  --msn-fg: #F8FAFC;  --msn-fg-2: #B6BFD0;      --msn-line: rgba(255,255,255,.08);

  --msn-font: Inter, "Noto Sans SC", system-ui, sans-serif;
  --msn-mono: "JetBrains Mono", ui-monospace, monospace;
  --msn-radius-card: 18px;  --msn-radius-icon: 16px;  --msn-radius-control: 999px;
}
/* светлая тема */
[data-theme="light"] {
  --msn-bg: #F8FAFC;  --msn-surface: #FFFFFF;  --msn-surface-2: #F1F5F9;
  --msn-fg: #0B0F1A;  --msn-fg-2: #3D4659;      --msn-line: rgba(11,15,26,.10);
}

Android: colorPrimary = #6366F1, colorSecondary = #06B6D4, colorTertiary = #A855F7, фон #0B0F1A; статусбар в цвет фона; кнопки Material 3 «filled» только для главного действия.