ЦветColor

Использование нашей утвержденной нейтральной палитры для фоновых рисунков, уведомлений, текста и кнопок поможет вам в работе над приложением в Teams.Using our approved neutral palette for backgrounds, notifications, text, and buttons will help your app feel more at home in Teams. Так как в Teams есть две цветные темы (светло-и темная), рекомендуется убедиться, что ваше приложение отлично выглядит в обеих темах.Since Teams has two color themes (light and dark), it’s a good idea to make sure your app looks great in both themes.

$app-Black (#252423)$app-black (#252423)

Мы наиболее часто используем цвет текста.Our most commonly-used text color. Мы используем его на пяти уровнях непрозрачности для текста.We use it at five levels of opacity for text. Текст в основном должен использоваться на уровне 100%, 74%, 64%, так как он доступен.Text should mainly be used at 100%, 74%, 64% opacity since it is accessible. Текст на 52% и 36% следует использовать экономно, так как он недоступен.Text at 52% and 36% should be used sparingly since it is not accessible.

  1. 100% — заголовки и базовый текст100% - Headers and base text
  2. 74% — метки, подзаголовки, атрибуты и кнопки значков74% - Labels, subheads, attributions, and icon buttons
  3. 64%-просмотров сообщений, текст справки (не отображается)64% - Message previews, help text (not shown)
  4. 52% (метки времени)52% - Timestamps
  5. 36% — отключенный текст36% - Disabled text

Кроме того, $app-black для некоторых элементов пользовательского интерфейса используются другие опаЦитиес:We also use $app-black at other opacities for some UI elements:

  1. 14% фона баннера14% - Banner backgrounds
  2. 5% — отключена кнопка и границы карточек5% - Disabled button and card borders

Цветовая шкала темы по умолчаниюDefault theme color ramp

Ознакомьтесь с разделом "перо по разработке Microsoft Teams" — Цветовая шкала темы по умолчанию на кодепен.See the Pen Microsoft Teams design guidelines - default theme color ramp on CodePen.

Другие цвета темы по умолчаниюOther default theme colors

Ознакомьтесь с разделом "перо по проектированию Microsoft Teams" — другие цвета темы по умолчанию на кодепен.See the Pen Microsoft Teams design guidelines - other default theme colors on CodePen.

Темная цветовая шкала темыDark theme color ramp

Ознакомьтесь с разделом "перо по проектированию Microsoft Teams — Темная цветовая шкала темы на кодепен".See the Pen Microsoft Teams design guidelines - dark theme color ramp on CodePen.

Примечание: В библиотеке мстеамс – UI – Styles — Core имеются фактические значения, закодированные как переменные.Note: The msteams-ui-styles-core library has the actual values coded as variables. Эти переменные будут полезны, если цвета когда-либо обновляются.These variables will be helpful if the colors are ever updated.

Другие темные цвета темыOther dark theme colors

Ознакомьтесь с разделом "перо по проектированию Microsoft Teams" — другие темные цвета темы в кодепен.See the Pen Microsoft Teams design guidelines - other dark theme colors on CodePen.