Microsoft 网站预览
Microsoft 网站预览

Microsoft

白色基底、产品图像展示与大幅摄影展示。

页面以白色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 Segoe UI。视觉特点包括产品图像展示、大幅摄影展示、网格布局、满幅色块。适合参考的场景:摄影作品集、视觉内容展示页。

查看原始网站

使用规范

建议采用

  • 所有交互文本链接、按钮背景和图标强调色必须使用 #0067b8,禁止将其用于非交互元素的装饰性场景。
  • 所有按钮和表单输入控件的 borderRadius 设置为 2px;所有卡片容器、徽章和分隔线的圆角设置为 0px。
  • 所有提升的白色卡片(boxShadow rgba(0,0,0,0.13) 0px 3px 7px + rgba(0,0,0,0.11) 0px 1px 2px)应用 48px 内边距;透明容器卡片的内边距为 0px 且无阴影。
  • Segoe UI 600字重只用于标题字号(29px+),所有正文、导航、图注和按钮标签都采用400字重。
  • 产品摄影应置于首屏区域和轮播带的全 满幅 区域;所有文字内容必须置于独立的白色叠加面板中,禁止直接在图像上叠加文本。
  • 将琥珀色徽章(#ffb900 / #000000 文字)限制在促销或通知类场景中使用——它是唯一的暖色元素,若广泛使用将失去意义。
  • 保持 #f2f2f2 作为页脚背景和任何次要区块带的背景色;禁止使用第三个灰度值作为背景。

建议避免

  • 除 0px 或 2px 外,禁止使用任何其他圆角值——圆角卡片、胶囊形按钮或圆形徽章均不在本系统范围内。
  • 禁止引入第二种字体——Segoe UI 是唯一字体。禁止使用衬线字体、几何无衬线字体,以及可变字重的标题文本。
  • 禁止为 UI 区域添加彩色背景(除 #f2f2f2 和全 满幅 图片带外)——白色是卡片和内容区域唯一的中性表面。
  • 禁止使用 #0066ff 或任何偏紫的蓝色作为链接或按钮颜色——品牌蓝色仅为 #0067b8。
  • 禁止在导航、页眉、页脚、首屏面板或图标行中添加 box-shadow——阴影仅属于提升的白色产品卡片。
  • 禁止在任何尺寸下调整字间距——Segoe UI 在所有 11px–37px 尺寸下均以正常字间距渲染。
  • 禁止为摄影添加渐变叠加、色彩晕染或双色调处理——图像应保持原始拍摄状态,不使用任何 CSS 过滤或色彩混合层。