颜色Color

使用我们为背景、通知、文本和按钮提供的已批准中性调色板,可帮助你的应用程序在团队家庭中更好地感觉。Using our approved neutral palette for backgrounds, notifications, text, and buttons will help your app feel more at home in 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-黑色(#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%-标签、subheads、归属和图标按钮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

对于某些 UI $app-black元素,我们还在其他 opacities 中使用: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

有关 CodePen,请参阅Microsoft 团队设计指南-默认主题颜色渐变See the Pen Microsoft Teams design guidelines - default theme color ramp on CodePen.

其他默认主题颜色Other default theme colors

有关 CodePen 的其他默认主题颜色,请参阅 Microsoft 团队的 Microsoft 团队设计指南See the Pen Microsoft Teams design guidelines - other default theme colors on CodePen.

深色主题颜色渐变Dark theme color ramp

请参阅 CodePen 上的Microsoft 团队设计指南-深色的主题颜色滑道See the Pen Microsoft Teams design guidelines - dark theme color ramp on CodePen.

其他深色主题颜色Other dark theme colors

有关 CodePen,请参阅Microsoft 团队的 Microsoft 团队设计指南-其他深色主题颜色See the Pen Microsoft Teams design guidelines - other dark theme colors on CodePen.