Signal Messenger 网站预览
Signal Messenger 网站预览

Signal Messenger

近白色基底、磨砂表面与宽松留白。

页面以近白色为基底。字体采用 Inter。视觉特点包括磨砂表面、宽松留白、网格布局、摄影展示。适合参考的场景:产品介绍页、品牌展示页。

查看原始网站

使用规范

建议采用

  • 所有标题用 Inter 字重 800,与 400 正文的极端字重对比是排版标志。
  • 60px 展示文字行高 1.07,40px 区块标题行高 1.14,紧密行高使标题有建筑感。
  • 默认行动按钮为轮廓式:1.5px Signal Blue 边框、白填充,只有放在彩色面板上才用填充按钮。
  • 所有按钮用 8px 圆角,所有图片或面板容器用 16px,交互与视觉元素的圆角差距是刻意的。
  • 首屏色层用 Signal Sky #9dbbf8,次级面板用 Signal Mist #a5cad5,两种蓝调交替形成页面节奏。
  • 正文行高设为 1.50,充足行高让 16px 正文在页面舒适密度下可读。
  • 品牌蓝限制于交互元素、链接和半色调插画,除规定的面板色层外,绝不用在大装饰填充或背景中。

建议避免

  • 白背景上不要用蓝色填充按钮,轮廓按钮是主要行动模式,不应覆盖。
  • 不要添加渐变、超出既定浮起 Token 的投影或装饰边框,设计以平面色带建立结构。
  • 不要使用既定色板外的颜色,无额外彩度、暖强调或蓝色家族外的状态色。
  • 标题行高不要超过 1.20,疏松行高会破坏密实自信的字体性格。
  • 不要用 9999px 圆角胶囊按钮,8px 是刻意选择,使 Signal 区别于普通消费应用。
  • 不要添加摄影、抽象图形或半色调圆点之外的插画风格,视觉个性只有一种。
  • Inter 只用 400、600、800 字重,500 和 700 有意缺席,三种字重的间隔就是尺度。