Wrike 网站预览
Wrike 网站预览

Wrike

白色基底、圆角卡片与分屏构图。

页面以白色为基底,搭配深蓝色文字。字体采用 TT Norms Pro、Arial。视觉特点包括圆角卡片、分屏构图、网格布局、几何图形。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 在整个界面中仅使用Signal Green #00e05c作为唯一的色彩强调——禁止使用其他品牌色,错误状态不得使用染色红色(错误情况应使用海军蓝或中性灰)
  • 所有独立按钮均采用40px的胶囊半径;仅在输入框嵌套的邮件收集按钮上使用8px半径
  • 为产品原型和固定导航栏使用单一阴影配方 rgba(24,31,56,0.25) 0px 25px 45px -45px ——禁止叠加多个阴影
  • 高亮任意首屏或区块标题中的一个词(例如‘一个平台’、‘Wrike AI’)——绿色关键词是视觉锚点
  • 所有标题副标题(标题前的小标签)设置为大写,12-13px字号,字间距0.125em,使用钢蓝灰 #657694 以形成区块节奏感
  • 使用Frost Surface #f2f5fa作为功能卡片背景及细微区块背景——禁止将其用作页面背景
  • 最终的行动号召(CTA)区块保持深海军蓝 #162136,搭配Signal Green的几何装饰作为页面的能量释放点

建议避免

  • 禁止引入第二类强调色(不得使用紫色、橙色、青绿色)——系统为单色加一绿
  • 禁止使用方形或尖角按钮——胶囊形半径是标志性设计
  • 禁止叠加多个阴影配方或添加内阴影——仅使用单一阴影配方
  • 禁止将深色CTA区块渲染为除#162136以外的任何颜色——浅灰或中灰会破坏最终区块的对比度
  • 禁止使用暖灰色或米色中性色——整个中性色系均为冷色调蓝灰色
  • 禁止使用满幅摄影作为首屏——产品UI原型始终是视觉焦点
  • 禁止将Signal Green CTA渲染为除完全填充的胶囊外的任何变体——不得使用空心绿、透明描边绿、纯文字绿