Empower 网站预览
Empower 网站预览

Empower

暖白色基底、摄影展示与分屏构图。

页面以暖白色为基底,搭配近黑色文字。局部操作控件以黄色强调。字体采用 Gravity、EmpowerSerif。视觉特点包括摄影展示、分屏构图、居中构图、细线分隔。适合参考的场景:支付服务首页、金融科技产品介绍页。

查看原始网站

使用规范

建议采用

  • 每页唯一首屏标题用 Gravity 900,96–205px,不要把 205px 场景拆成小于 96px 的多行。
  • 黄绿色 #e4e24 专用于主要行动胶囊和产品高亮卡片,绝不用正文或大背景区域。
  • 每个按钮、标签和标签页圆角设为 9999px,胶囊在系统中不可妥协。
  • 所有眉题、导航和按钮标签用 GTAmericaExpandedMedium,11–13px,全大写,字间距 +0.10em。
  • 深舞台 #171616 与浅舞台 #fffdf6 作为交替全宽条带叠放,绝不用渐变混合。
  • 在摄影上直接添加浮动黄绿或白色金额胶囊 +$200、+$900,将人物锚定到金额。
  • 区块垂直节奏为主要条带间 64px,子区块间 32px,内容元素间 16–24px。

建议避免

  • 不要使用 #e4e24 及其浅色层 #faf9b6 之外的彩色,系统单色加黄绿。
  • Gravity 不要低于 96px,会失去冲击并与标题字重竞争。
  • 不要用方形或小圆角按钮,每个交互元素是 9999px 胶囊或 24–40px 卡片。
  • 页面背景不要用 #ffffff,画布必须奶油 #fffdf6,白只留给浮起卡片。
  • 卡片或按钮不要用投影,深度来自 #fffdf6 → #ffffff → #faf9b6 表面色彩变化,绝不阴影。
  • 同一文字块不要混用 extended 与 expanded 无衬线,extended 用正文和副标题,expanded 用界面外框和标签。
  • 正文段落不要居中,所有字号都左对齐,居中只留给首屏标题和短眉题。