# 灵感源自 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 | 86px (5.38rem) | 400 | 1.00（紧凑） | -1.72px | 最大冲击力，极端字距 |
| 区块标题 | figmaSans | 64px (4rem) | 400 | 1.10（紧凑） | -0.96px | 功能区块标题 |
| 副标题 | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | 强调区块文字 |
| 轻量副标题 | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | 轻字重区块文字 |
| 功能标题 | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | 粗体卡片标题 |
| 大号正文 | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px 至 -0.14px | 描述、引言 |
| 正文 / 按钮 | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px 至 normal | 标准正文、导航、按钮 |
| 轻量正文 | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px 至 normal | 轻字重正文 |
| 等宽标签 | figmaMono | 18px (1.13rem) | 400 | 1.30（紧凑） | 0.54px | 大写区块标签 |
| 等宽小号 | figmaMono | 12px (0.75rem) | 400 | 1.00（紧凑） | 0.6px | 大写微型标签 |

### 原则
- **可变字体精准性**：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. 深度与层次

| 层级 | 处理方式 | 用途 |
|-------|-----------|-----|
| 平坦（层级 0） | 无阴影 | 页面背景、大多数文字 |
| 表面（层级 1） | 渐变/深色区块上的白色卡片 | 卡片、产品展示 |
| 抬升（层级 2） | 微妙阴影 | 悬浮卡片、悬停状态 |

**阴影哲学**：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. 响应式行为

### 断点
| 名称 | 宽度 | 主要变化 |
|------|-------|-------------|
| 小屏手机 | <560px | 紧凑布局，堆叠排列 |
| 平板 | 560–768px | 微调 |
| 小桌面 | 768–960px | 两列布局 |
| 桌面 | 960–1280px | 标准布局 |
| 大桌面 | 1280–1440px | 扩展 |
| 超宽屏 | 1440–1920px | 最大宽度 |

### 折叠策略
- 英雄文字：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%）