Render 网站预览
Render 网站预览

Render

白色基底、网格布局与渐变展示。

页面以白色为基底。字体采用 Neue Montreal、Roobert。视觉特点包括网格布局、渐变展示、紧密字距、细线分隔。适合参考的场景:技术产品首页、开发工具说明页。

查看原始网站

使用规范

建议采用

  • 所有主要填充按钮使用 #0d0d0d——绝不引入彩色的行动号召色;深色对白色背景的对比是系统的核心强调模式。
  • 将显示标题(64-80px)设置为 Roobert 300 字重,字间距 -0.025em 至 -0.03em——轻盈的字重搭配紧密字间距是其标志性语气。
  • 每个区块最多使用一次紫色到橙色的渐变文本处理——通常为首屏标题末尾 1-3 个词,承载价值主张。
  • 任何代码、命令或技术字符串使用 PPNeueMontrealMono 12-14px,字间距 0.02em——等宽字体直接传达面向开发者的语境。
  • 将 #8a05ff Plasma Violet 保留用于步骤指示器、强调图标以及强调句首单词——绝不用于主要按钮或大区域背景填充。
  • 所有矩形元素(卡片、输入框、按钮)的圆角半径设为 2px,仅对胶囊形徽章和导航行动号召设为 937px——锐利的边角是工程文档风格的关键。
  • 所有结构边框和分隔线保持 1px 的 #e3e3e3——这是系统中使用频率最高的颜色,定义了网格结构。

建议避免

  • 绝不使用纯 #000000 作为正文或主要按钮的文字——使用 #0d0d0d;轻微的暖调避免了纯黑在白底上的刺眼对比。
  • 绝不将品牌紫色 (#8a05ff) 用作大面积填充或背景——仅限于小于 40px 的强调元素和步骤指示器;过度使用会削弱其信号力。
  • 绝不将彩色强调色(珊瑚、洋红、天空蓝)作为功能性 UI 颜色——它们是装饰性插画色调,而非状态或类别指示。
  • 绝不引入第二套标题字体——Roobert 负责所有展示类排版;混合字体破坏了「显示字体+UI字体+等宽字体」的二字体原则。
  • 绝不为卡片或面板添加阴影或层级——系统依赖细线边框和表面色调,而非阴影深度来建立层级关系。
  • 任何矩形组件的圆角半径不得超过 4px——2px 是标准,也是系统的核心特征;圆角会推系统走向通用的 SaaS 软萌风格。
  • 绝不将正文或功能描述居中对齐——默认为左对齐;居中仅用于首屏标题和通知栏。