Framer

近黑色基底、磨砂表面与紧密字距。

页面以近黑色为基底，搭配白色文字。字体采用 GT Walsheim、Inter Variable。视觉特点包括磨砂表面、紧密字距、细线分隔、产品图像展示。适合参考的场景：设计作品集、创意服务介绍页。

查看原始网站

使用规范

建议采用

所有展示标题使用 GT Walsheim Medium 字重 500，字号范围 44–68px — 严禁用其他无衬线几何字体替代展示文字
展示标题的行高设定为 0.8–1.1，字间距为 -0.04em 至 -0.05em — 这种压缩是标志性特征
仅将电蓝色（#0099ff）用于 1px 边框、光晕和链接强调 — 严禁在首屏区域作为填充表面使用
仅将炽烈紫（#0066ff）用于主要行动号召按钮背景 — 它是系统中唯一的有色彩填充按钮
所有按钮和标签的圆角设定为 9999px — 完全胶囊形控件是强制要求
卡片圆角使用 15px → 20px → 25px 的梯度 — 圆角应根据卡片重要性调整，而非统一全局值
区块间距保持 80px，元素间距保持 10px — 高密度与充足的区块呼吸感是刻意设计

建议避免

除电蓝色（#0099ff）和炽烈紫（#0066ff）外，不得引入其他强调色 — 系统刻意保持单色，仅有一个强调色
卡片背景不得使用 #ffffff — 白色仅用于文字和主要行动号召，卡片保持在 #111 至 #242424 范围内
标准卡片不得添加盒阴影 — 深度通过亮度阶梯（#000 → #111 → #171 → #242）传达，而非通过堆叠高度
正文文字不得小于 12px — 最小字号保障了在纯黑背景下的可读性
不得使用暖灰或彩色中性色 — 色调严格限定为冷调/无彩色灰度，仅以蓝色为色彩方向
单个文本块内不得混合字体家族 — 展示文字使用 GT Walsheim，其余使用 Inter，代码部分仅使用等宽字体
圆角值不得超出定义范围（8、15、20、25、9999） — 系统中每个圆角值均对应特定组件类型

正在读取模板权限…

使用指南

# Framer — Style Reference
> neon gallery in the void
 
**Theme:** dark
 
Source measurements are normalized; roles and recommendations are interpreted. Font summary lists are independent, not paired by position. HTML examples are reconstructions, not source components.
 
Framer operates as a near-total darkness — a black canvas where content floats like neon signage in a gallery opening. Headlines set in GT Walsheim Medium with tight 0.8–1.1 line-height and aggressive negative tracking (-0.04em at 54px) create compressed display type that pushes forward instead of sitting politely on the page. A single electric blue (#0099ff) provides all functional accent — borders, glows, badges, active states — while the rest of the interface stays achromatic, relying on subtle gray steppings (#111, #171717, #242424) to carve depth out of pure black. Components feel engineered rather than decorated: rounded 8–25px radii, 1px hairline borders, minimal shadows, and ghost/translucent surfaces that let the void show through.

Framer

使用规范

建议采用

建议避免

相似设计语言

Lottielab

Framer

Ameba

Raycast

Stripe

Figma