monday.com 网站预览
monday.com 网站预览

monday.com

近白色基底、渐变展示与宽松留白。

页面以近白色为基底,搭配深灰色文字。字体采用 Poppins。视觉特点包括渐变展示、宽松留白、居中构图、单栏阅读排版。适合参考的场景:SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • 所有按钮和行动号召(CTA)使用160px的圆角半径——胶囊形状不可更改,是品牌亲和力的标志
  • 将#6161ff保留用于主要操作和品牌面板;它必须承载每屏最重要的决策
  • 为特色卡片应用柔和的辅助背景色(薄荷绿、天空蓝、杏仁黄、薰衣草紫),不应用于按钮或文本
  • 标题显示文字设定为48–64px Poppins 字重300,字间距为负值(-0.04em 至 -0.02em)——细线条几何风格标题区别于常规700字重的SaaS首屏
  • 卡片使用24px圆角,标签/输入框使用6px圆角——保持这两个层级的一致性
  • 仅将锥形渐变棱镜(#8181ff → 青 → 绿 → 黄 → 粉 → 返回紫色)应用于品牌分隔线、标志和加载状态
  • 仅在首屏标题上使用渐变文字(粉→橙或青→紫)以在白底上注入温暖感

建议避免

  • 不要使用方形或4px圆角按钮——胶囊形状是标志性特征
  • 不要将柔和辅助色应用于正文、边框或图标——这些仅是表面装饰
  • 不要将正文或UI标签的字重设低于400,或低于500——字重300仅用于展示标题
  • 不要使用纯黑色(#000000)用于大段文字——#333333更温暖,是系统真正的黑色
  • 不要在相邻卡片中堆叠超过3-4种柔和色彩——每个区块选择2-3种辅助色组合
  • 不要在卡片上使用厚重的阴影——系统仅使用单层柔和48px模糊、带有薰衣草色调的阴影,不透明度为40%
  • 不要引入新的色彩行动号召——#6161ff是唯一的行动色;饱和度较高的按钮变体仅存在于产品界面,不用于营销