灵感源自 Figma 的设计系统

Category: 设计与创意 协作设计工具。色彩鲜活多元，活泼而不失专业。

1. 视觉主题与氛围

Figma 的界面是那个设计了自身的设计工具——一堂排版精妙的大师课，自定义可变字体（figmaSans）在极细（字重 320）与粗体（字重 700）之间无缝切换，并在大多数字体系统从不涉足的中间值（330、340、450、480、540）处设有停驻点。这种细粒度的字重控制为每个文字元素赋予了精确校准的视觉分量，通过微小差异构建层级，而非”常规与粗体”这种粗放手段。

页面呈现出一种迷人的二元性：界面外壳严格遵循黑白配色（字面上仅能检测到 #000000 和 #ffffff 两种颜色），而英雄区和产品展示区则爆发出鲜活的多色渐变——电光绿、亮黄、深紫、热粉。这种分隔意味着设计系统本身是无色的，将产品的多彩输出作为核心内容。Figma 的营销页面本质上是一面陈列彩色艺术作品的白色画廊墙。

让 Figma 与众不同的，除了可变字体之外，还有它的圆形与胶囊几何造型。按钮使用 50px 圆角（胶囊）或 50%（图标按钮的完美圆形），营造出一种有机的、工具调色板式的感觉。虚线轮廓聚焦指示器（dashed 2px）是一种刻意为之的设计选择，与 Figma 编辑器中的选择手柄相呼应——网站的 UI 语言引用了产品的 UI 语言。

核心特征：

• 自定义可变字体（figmaSans），具有非寻常的字重停驻点：320、330、340、450、480、540、700
• 严格黑白的界面外壳——颜色仅存在于产品内容中
• figmaMono 用于大写技术标签，配以宽字母间距
• 胶囊形（50px）与圆形（50%）按钮几何造型
• 虚线聚焦轮廓，呼应 Figma 编辑器的选择手柄
• 鲜活的多色英雄渐变（绿、黄、紫、粉）
• OpenType "kern" 特性全局启用
• 全局负字母间距——即便正文文本也使用 -0.14px 至 -0.26px

2. 色彩方案与用途

主色

• 纯黑 (#000000)：所有文字、所有实色按钮、所有边框。界面唯一的”颜色”。
• 纯白 (#ffffff)：所有背景、白色按钮、深色表面上的文字。二元体系的另一半。

注：Figma 营销站点的界面层仅使用这两种颜色。所有鲜亮色彩仅出现在产品截图、英雄渐变和嵌入内容中。

表面与背景

• 纯白 (#ffffff)：主要页面背景和卡片表面。
• 玻璃黑 (rgba(0, 0, 0, 0.08))：用于次要圆形按钮和玻璃效果的微妙深色叠加。
• 玻璃白 (rgba(255, 255, 255, 0.16))：深色/彩色表面上按钮的磨砂玻璃叠加。

渐变系统

• 英雄渐变：由电光绿、亮黄、深紫和热粉构成的鲜活多停驻点渐变。这个渐变是英雄区的视觉标志——它代表着工具的无限创意可能。
• 产品区域渐变：各产品区域（Design、Dev Mode、Prototyping）在其展示中可能使用独特的色彩主题。

3. 排版规则

字体族

• 主字体：figmaSans，备选字体：figmaSans Fallback, SF Pro Display, system-ui, helvetica
• 等宽体 / 标签：figmaMono，备选字体：figmaMono Fallback, SF Mono, menlo

层级

原则

• 可变字体精准性：figmaSans 使用大多数系统从不触及的字重——320、330、340、450、480、540。这通过微妙的字重差异而非大幅跳跃来构建层级。330 与 340 之间的差异几乎无法察觉，却在结构上意义重大。
• 轻体为基础：大多数正文使用 320–340（比典型的 400”常规”更轻），营造出空灵、通透的阅读体验，与设计工具的美学相契合。
• 处处字距微调：每个文字元素都启用 OpenType "kern" 特性——字距微调不是可选项，而是结构性的。
• 默认负字距：即便正文也使用 -0.1px 至 -0.26px 的字母间距，营造出全局紧凑的文字效果。展示文字进一步压缩至 -0.96px 和 -1.72px。
• 等宽字体用于结构：figmaMono 以大写形式配合正字母间距（0.54px–0.6px），创造出技术指示牌标签。

4. 组件样式

按钮

黑色实色（胶囊）

• 背景：纯黑（#000000）
• 文字：纯白（#ffffff）
• 圆角：圆形（50%），用于图标按钮
• 聚焦：虚线 2px 轮廓
• 最强调

白色胶囊

• 背景：纯白（#ffffff）
• 文字：纯黑（#000000）
• 内边距：8px 18px 10px（不对称垂直）
• 圆角：胶囊（50px）
• 聚焦：虚线 2px 轮廓
• 深色/彩色表面上的标准 CTA

玻璃深色

• 背景：rgba(0, 0, 0, 0.08)（微妙深色叠加）
• 文字：纯黑
• 圆角：圆形（50%）
• 聚焦：虚线 2px 轮廓
• 浅色表面上的次要操作

玻璃浅色

• 背景：rgba(255, 255, 255, 0.16)（磨砂玻璃）
• 文字：纯白
• 圆角：圆形（50%）
• 聚焦：虚线 2px 轮廓
• 深色/彩色表面上的次要操作

卡片与容器

• 背景：纯白
• 边框：无或极简
• 圆角：6px（小型容器）、8px（图片、卡片、对话框）
• 阴影：微妙至中等的层次感效果
• 产品截图作为卡片内容

导航

• 白色背景上的简洁水平导航
• Logo：黑色 Figma 字标
• 产品标签：胶囊形（50px）标签导航
• 链接：黑色文字，1px 下划线装饰
• CTA：黑色胶囊按钮
• 悬停：通过 CSS 变量控制文字颜色

特色组件

产品标签栏

• 水平胶囊形标签（50px 圆角）
• 每个标签代表 Figma 的一个产品区域（Design、Dev Mode、Prototyping 等）
• 激活标签高亮显示

英雄渐变区块

• 全宽鲜活多色渐变背景
• 带 86px 展示标题的白色文字叠加
• 产品截图悬浮在渐变中

虚线聚焦指示器

• 所有交互元素在聚焦时使用 dashed 2px 轮廓
• 引用 Figma 编辑器中的选择手柄
• 一种将网站与产品相连接的元设计选择

5. 布局原则

间距系统

• 基础单位：8px
• 刻度：1px、2px、4px、4.5px、8px、10px、12px、16px、18px、24px、32px、40px、46px、48px、50px

网格与容器

• 最大容器宽度：最高 1920px
• 英雄区：全宽渐变，内容居中
• 产品区：交替展示
• 页脚：深色全宽区块
• 响应式范围：559px 至 1920px

留白哲学

• 画廊式节奏：充裕的间距让每个产品区块如同独立展品般自由呼吸。
• 色彩区块作为视觉喘息：渐变英雄区和产品展示区在单色界面区块之间提供色彩上的缓冲。

圆角比例

• 极小（2px）：小型链接元素
• 微妙（6px）：小型容器、分隔线
• 舒适（8px）：卡片、图片、对话框
• 胶囊（50px）：标签按钮、CTA
• 圆形（50%）：图标按钮、圆形元素

6. 深度与层次

阴影哲学：Figma 节制地使用阴影。主要的深度机制是背景对比（彩色/深色区块上的白色内容）以及产品截图本身固有的立体感。

7. 应为与不为

应为

• 使用 figmaSans 配合精准的可变字重（320–540）——细粒度字重控制即是设计本身
• 保持界面严格的黑白配色——颜色仅来自产品内容
• 对所有交互元素使用胶囊（50px）和圆形（50%）几何造型
• 应用虚线 2px 聚焦轮廓——标志性的无障碍模式
• 在所有文字上启用 "kern" 特性
• 将 figmaMono 以大写形式配合正字母间距用于标签
• 全局应用负字母间距（-0.1px 至 -1.72px）

不为

• 不要添加界面颜色——单色调色板是绝对的
• 不要使用标准字重（400、500、600、700）——使用可变字体的独特停驻点（320、330、340、450、480、540）
• 不要在按钮上使用尖锐角落——仅使用胶囊和圆形几何造型
• 不要使用实线聚焦轮廓——虚线才是标志
• 不要将正文字重提高至 450 以上——轻字重美学是核心
• 不要在正文使用正字母间距——它始终为负值

8. 响应式行为

断点

折叠策略

• 英雄文字：86px → 64px → 48px
• 产品标签：移动端水平滚动
• 功能区块：堆叠单列
• 页脚：多列 → 堆叠

9. 智能体提示指南

快速颜色参考

• 全部：「纯黑（#000000）」与「纯白（#ffffff）」
• 玻璃深色：「rgba(0, 0, 0, 0.08)」
• 玻璃浅色：「rgba(255, 255, 255, 0.16)」

示例组件提示

• “在鲜活的多色渐变（绿、黄、紫、粉）上创建一个英雄区。标题为 86px figmaSans 字重 400，行高 1.0，字母间距 -1.72px。白色文字。白色胶囊 CTA 按钮（50px 圆角，8px 18px 内边距）。”
• “设计一个带胶囊形按钮的产品标签栏（50px 圆角）。激活态：黑色背景，白色文字。非激活态：透明，黑色文字。figmaSans 20px 字重 480。”
• “构建一个区块标签：figmaMono 18px，大写，字母间距 0.54px，黑色文字。启用字距微调。”
• “创建 20px figmaSans 字重 330 的正文，行高 1.40，字母间距 -0.14px。白底纯黑文字。“

迭代指南

1. 精确使用可变字体字重停驻点：320、330、340、450、480、540、700
2. 界面始终黑白——绝不为外壳添加颜色
3. 虚线聚焦轮廓，不用实线
4. 正文字母间距始终为负，等宽标签始终为正
5. 按钮/标签用胶囊（50px），图标按钮用圆形（50%）