Relate dot App 网站预览
Relate dot App 网站预览

Relate dot App

白色基底、大字排版与错落拼贴。

页面以白色为基底,搭配深灰色文字。局部操作控件以蓝色强调。字体采用 roboto、proximacapsbold。视觉特点包括大字排版、错落拼贴、网格布局、大幅摄影展示。适合参考的场景:专题展示页、项目介绍页。

查看原始网站

使用规范

建议采用

  • 主域名标识组合使用 Proxima Nova Caps,字号 46px、字重 800,以全大写呈现;它就是产品本身,而非标题。
  • 保持价格标签与“立即购买!”芯片成对出现:左侧为填充的信号蓝 #2484f2 价格,右侧为描边的信号蓝“立即购买!”芯片,两者均采用2px圆角。
  • 将Lime Pulse #7bd428 专用于‘可用!’状态胶囊和‘了解更多’辅助链接——绝不可用于购买操作。
  • 让照片拼图承载色彩;所有金属色元素均保持在白色纸张 #ffffff 上,不添加阴影,也不使用圆角。
  • 正文使用Proxima 17–20px 字重400 Graphite #444444,行高1.41倍,用于漂浮卡片段落。
  • 根据链接意图映射色彩:信号蓝用于购买操作,Lime Pulse用于‘了解更多’,绝不反向使用。
  • 使用Roboto 14px 用于页脚、细小说明和GoDaddy风格的信任文本——作为Proxima下方的辅助声音保持。

建议避免

  • 不要引入一个填充的宽版信号蓝按钮——唯一的填充蓝色表面是紧凑的价格芯片,唯一的操作是其旁边的一个描边芯片。
  • 卡片、面板或照片网格的圆角均不添加——卡片的0px圆角和拼图中瓷砖边缘的锐利感是标志性特征。
  • 不要为漂浮卡片添加阴影;照片网格已通过分层提供深度,阴影会破坏拼图的清晰度。
  • 不要将Lime Pulse用于‘立即购买’或任何购买操作——此处绿色表示可用/了解更多,绝非结算。
  • 不要在编辑引语或斜体感段落之外使用Georgia;将其混入导航或标签会破坏系统一致性。
  • 不要将#000000用于正文——纯黑色仅保留用于边框、下划线和图标填充;正文保持在Graphite #444444 或 Carbon #222222。
  • 域名锁面只允许放置在白色漂浮卡片的正中央,该卡片位于照片网格之上——从拼图到卡片到锁面的堆叠是页面的核心构成。