Moonli 网站预览
Moonli 网站预览

Moonli

白色基底、紧密字距与分屏构图。

页面以白色为基底,搭配近黑色文字。字体采用 DM Sans。视觉特点包括紧密字距、分屏构图、居中构图、圆角卡片。适合参考的场景:区块链项目介绍页、生态网站首页。

查看原始网站

使用规范

建议采用

  • #b8ff65只作为完整分区或完整卡片背景,绝不作为按钮填充、文字颜色或图标着色。
  • 所有卡片采用30px border-radius,所有导航胶囊元素采用40px。
  • 任何48px及以上文字都采用DM Sans 700和-0.05em letter-spacing。
  • 所有图标、边框和文字保持#000000;系统在黑白之间二元运作,青柠是唯一的第三种语气。
  • 青柠表面上以单一线宽黑色描边、无填充的线描插画增添个性。
  • 分区以相邻圆角块配对,而非通过分隔线分开;30px圆角和颜色对比建立结构。
  • 页面以约1200px max-width居中,让白色边距呼吸。

建议避免

  • #b8ff65绝不要作为CTA按钮背景或链接色;青柠营造氛围,而非交互。
  • 避免引入额外彩色,不使用蓝、紫或状态色相;系统是双色加青柠。
  • 不要添加阴影或渐变;设计严格平面,由边框定义层次。
  • 卡片或容器避免30px以下的锐利圆角;小圆角会破坏系统柔软感。
  • 正文字号的letter-spacing不要宽于-0.01em,展示字号不要紧于-0.05em。
  • 小字号中,绝不要在白色上放青柠文字,或在青柠上放白色文字;保持大尺度,以保留17.5:1对比度。
  • 避免摄影、渐变或填充插画;黑色线描是唯一视觉语言。