Elektron 网站预览
Elektron 网站预览

Elektron

近黑色基底、摄影展示与大字排版。

页面以近黑色为基底，搭配近白色文字。字体采用 Neue Haas Grotesk Text Pro、Neue Haas Grotesk Display Pro。视觉特点包括摄影展示、大字排版、产品图像展示。适合参考的场景：品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • 整个UI保持单色调：文字为#eeeef2，表面为#222222/#151515/#000000，边框为#eeeef2。颜色用于产品摄影和一两个编辑式强调块，绝不用于界面装饰。
  • 默认使用Neue Haas Grotesk Text Pro、字重400；Display款（400/450/500）仅用于24px及以上标题。
  • 所有正文和辅助文字采用正字间距：11–14px时为0.04em，逐渐收至28–35px时的0.013em；-0.01em仅用于64px展示标题。
  • 每个组件都使用0px圆角，输入框（7px）除外；方正角落是标志性特征，界面应像丝网印刷的硬件。
  • 间距基于4px网格，元素间隔4–7px，卡片内边距21px，区块间隔56–80px；保持紧凑，密度就是核心。
  • 每个屏幕最多使用digi one v2处理2–3个标签，例如版本号、呼应LCD的技术文字；它是点缀，而非正文字体。
  • 将产品摄影作为唯一颜色来源，让图片铺满画面，不添加边框、说明文字或内边距。

建议避免

  • 不要添加彩色按钮、悬停填充或渐变；系统拒绝柔和的现代信号，按钮只能是描边或黑色填充。
  • 不要使用投影或高度效果；表面层级（#000000 → #151515 → #222222 → #333337）通过明度对比处理深度，而非阴影。
  • 卡片、按钮、标签或图片不要使用圆角；7px圆角仅用于输入框。
  • 不要引入第二种正文字体；Neue Haas Grotesk Text Pro承担主要工作，digi one v2是装饰性强调，而非替代字体。
  • 任何地方都不要使用600或更高字重；系统最粗的是展示标题的500，更粗会破坏轻薄如低语的硬件感。
  • 不要添加彩色图标；图标继承文字颜色#eeeef2，多彩或强调色图标会破坏单色约束。
  • 除非采用大写辅助样式（24-31px时为0.04em），否则不要为展示标题增加字间距；64px首屏文字需要紧凑的-0.01em字间距，而非宽松感。

相似设计语言