Flim 网站预览
Flim 网站预览

Flim

近白色基底、等宽文字标注与圆角卡片。

页面以近白色为基底,搭配近黑色文字。字体采用 Swizzy、PP Neue Montreal Mono。视觉特点包括等宽文字标注、圆角卡片、大字排版、网格布局。适合参考的场景:AI 工具官网、产品能力介绍页。

查看原始网站

使用规范

建议采用

  • 首屏文字标志使用 125px 的 Swizzy,字间距为 -2.5px,行高为 0.86。绝不以更重字重来补偿字号。
  • 所有 PP Neue Montreal Mono 标签都设置 0.06em 字间距。宽字间距本身就是导航、眉题和搜索占位符的视觉身份。
  • 所有图像卡片和缩略图采用 16px 圆角,所有胶囊搜索栏和长圆形输入框采用 160px,按钮采用 8px。这三种圆角定义系统。
  • 页面背景设为 #f5f5f5 Canvas,并配 #d9d9d9 的 1px 网格线图案。纸张纹理就是表面,而不是一张背景图片。
  • Signal Green #30a81d 只用于状态指示圆点和小型强调边框,绝不用作按钮填充或大面积表面。
  • 布局保持松散、不对称。让图像卡片以不同尺寸和位置散落在网格上,不强制建立严整卡片网格。
  • 默认文字颜色为 #141414,正文或标题绝不使用纯 #000000。近黑更温暖,也更适合放在 #f5f5f5 上。

建议避免

  • 任何组件都不要添加投影。悬浮层次来自边框分量与表面颜色对比,绝不来自 box-shadow。
  • 不要将 #000000 作为设计色。它只留给 SVG 填充和输入框边框,系统近黑色为 #141414。
  • 首屏文字标志只用 Swizzy,标签和导航只用 PP Neue Montreal Mono。正文可以使用 Arial,不采用其他字体。
  • 不要创建彩色实心按钮。唯一实心按钮是 #141414 的 SIGN-UP 注册操作;其他 CTA 应为幽灵样式或文字链接。
  • Highlight Yellow #fecc33 不要用于表面填充。它是文字高亮标记,不是背景;应放在特定单词背后,而不是填满容器。
  • 正文不要居中。标题和正文左对齐,或在首屏区块中右对齐;只有眉题和区块标签居中。
  • 不要强制图像卡片进入统一网格。散落拍立得布局是视觉标志,等宽、等间距网格会破坏比喻。