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

Electronic Materials Office®

近黑色基底、视频展示与圆角卡片。

页面以近黑色为基底，搭配白色文字。局部操作控件以橙色强调。字体采用 GT-Flexa、Tobias-light。视觉特点包括视频展示、圆角卡片、网格布局、摄影展示。适合参考的场景：商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 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；体系坚持柔和大圆角。

相似设计语言