Framer 网站预览
Framer 网站预览

Framer

电影感的黑色画廊。纯黑色画布承载白色编辑性文字和一个电蓝色点缀,该点缀仅描边而非填充空间。

Framer 在绝对黑暗中运作:一片纯黑色画布(#000000),其中白色文字和一个电蓝色(#0099ff)点缀承担全部表达。设计语言具有电影感和自信——超大尺寸的压缩显示字体(GT Walsheim 85–110px)锚定每个板块,其余界面则溶解为近乎黑色的表面层。标志性的节奏是极简首屏区域文字与极简网格化客户站点截图交替呈现,均以细线分隔,搭配紧凑的10px字间距。蓝色点缀从不填满按钮;它仅用于描边、卡片轮廓,以及文本选择、链接悬停等微交互中——克制,从不装饰。组件轻盈:胶囊形控件、细边框,以及几乎可忽略的抬升,让摄影与编辑性文字承担主要表现力。

查看原始网站

使用规范

建议采用

  • 将页面背景设为 #000000,所有文字默认为 #ffffff——虚空即品牌
  • 首屏区域标题使用 GT Walsheim 字体,字号 85–110px,字间距 -0.05em,行高 0.85
  • 所有按钮和标签使用 100px 的胶囊半径——绝不使用方形按钮
  • 元素间距标准为 10px;仅在卡片内边距使用 20–24px,区块间距使用 60–80px
  • 仅将电蓝色(#0099ff)用于边缘:边框、下划线、聚焦环和激活状态——绝不作为填充使用
  • 正文文字使用 Inter 字体,字号 14px,字重 400,字间距 -0.01em
  • 通过表面色彩渐变(Carbon → Obsidian → Graphite)表达抬升,而非厚重阴影

建议避免

  • 不要引入除黑到灰黑色表面堆叠之外的任何背景色——不使用灰色,不使用 带淡色的 背景,不使用暖色调
  • 不要将电蓝色(#0099ff)作为填充按钮背景——它仅作为边缘点缀
  • 不要在常规卡片上使用偏移大于 10px 的盒阴影——设计默认为扁平
  • 不要在任何容器上设置圆角小于 8px——最小视觉柔和度为 8px
  • 不要在显示字体中使用高于 500 的字重——GT Walsheim 500 已具权威感;更重的字重会破坏整体语气
  • 不要为板块添加装饰性渐变、光晕或彩色背景——板块通过纯黑色过渡
  • 正文文字不使用颜色——所有文字仅限于 #ffffff、#999999 或 #666666