HEY

近白色基底、手写字体点缀与产品图像展示。
页面以近白色为基底,搭配深蓝色文字。字体采用 Really Sans Large、Moniker。视觉特点包括手写字体点缀、产品图像展示、圆角卡片、渐变图像。适合参考的场景:工作流工具首页、产品功能说明页。
查看原始网站使用规范
建议采用
- 使用 Paper #f9f7f5 作为页面画布,使用 White Sheet #ffffff 作为浮层面板的底色。
- 主要展示标题使用 Really Sans Large,83px/900/1.10 分别表示字号/字重/行高;区块标题使用 48px/850/1.10。
- 使用 Moniker 字体,字间距在 -0.012em 到 -0.019em 之间,用于导航、正文、按钮和链接。
- 使用 Mint Note #b3f4e0 与 Blurple #5522fa 文字搭配,为重复出现的填充转化控件设置 43.68px 的半径。
- 仅在高可见度的促销胶囊、表达性展示文本和产品媒体背景中使用 135deg 从 #5522fa 到 #ec8580 的渐变。
- 为主白卡片设置 25.6px 的圆角,使用分层的 Ink 阴影而非细的中性边框。
- 导航和控件组使用 10–12px 间距,局部组件间距使用 19px,主要内容区块之间使用 45px 间距。
建议避免
- 不要使用纯黑色作为界面文本颜色;使用 Ink #231c33。
- 不要用冷灰或明亮的白色替代温暖的 Paper #f9f7f5 画布。
- 不要在导航、首屏媒体、证言卡片或公共按钮上使用锐角;使用 38.4px、25.6px 和 43.68px 的圆角。
- 不要将 Blurple #5522fa 作为通用的填充按钮颜色;重复的填充操作应使用 Mint Note #b3f4e0。
- 不要将 Shantell Sans 用于段落、导航或按钮标签;仅限于短的手写中断。
- 不要用 1px 的灰色边框扁平化主要面板;应在 White Sheet 表面使用多层 Ink 阴影。
- 不要让长篇编辑类卡片像产品面板一样圆角;使用 2.4px 的字母卡圆角和 90px 乘 96px 的内边距。