Electronic Materials Office® 网站预览
Electronic Materials Office® 网站预览

Electronic Materials Office®

炭灰画廊中的白炽余烬。

Electronic Materials Office 像夜间工作室：哑光炭灰画布、唯一白炽橙余烬，以及轻声而非宣告式的文字。每个画面像昏暗工作室，键盘产品摄影是唯一真正的光源，界面为其退让。GT-Flexa 200 字重标题漂浮于巨大负空间，正文刻意小巧并采用人文感的 Times。彩色严格限量：纯白文字、低饱和紫色（#9e9eff）链接，以及每页一个带自身 30px 光晕的橙色（#f45500）CTA。组件统一采用 20px 圆角，#9d9d9d 边框轻微可见，体系唯一的阴影是主要操作周围的两种彩色光晕。

查看原始网站

使用规范

建议采用

  • 42px 及以上每个展示标题都使用 GT-Flexa 200 字重；轻盈字重是标志性特征。
  • 每个视口恰好使用一次带 30px rgba(245,86,0,0.6) 发光的 Ember Orange（#f45500）填充按钮。
  • 卡片圆角保持 20px，按钮圆角也保持 20px，不改成 4px 或 8px。
  • 所有行内链接与描边导航操作采用 #9e9eff；它是体系唯一的冷彩色。
  • 页面画布保持 #202020，而非 #000000；轻微提亮给产品摄影留出呼吸空间。
  • 分区标签由 32–42px Tobias-light 承担，字间距为 -2.6px，提供建筑式语气。
  • 表面边缘用 1px #9d9d9d 或 #ffffff 边框定义，而非阴影或背景切换。

建议避免

  • Times 或任何衬线不用于标题、标签或界面框架，只用于正文。
  • Ember Orange 发光不用于主要 CTA 以外的元素。
  • 不引入更多饱和品牌色；体系是炭灰上的橙与紫。
  • 超过 42px 的展示标题不使用 400 或更高字重；200 必须遵循。
  • 卡片、图像或导航不加 box-shadows；阴影仅留给两种按钮变体。
  • 正文或段落不居中，只采用与首屏标题一致的左对齐。
  • 任何圆角不低于 16px；体系坚持柔和大圆角。

相似设计语言