---
name: bento-grid
description: 便当盒网格风格（Bento Grid）：圆角网格卡片布局、大小不一但严格对齐、卡片内图标+标题+描述组合、整体现代克制的 Apple 式审美。适合产品官网、功能展示、SaaS 首页、个人主页。Use when the user asks for a bento grid, bento-style, modular grid card layout, or Apple-style feature grid.
whenToUse: 用户想要便当盒布局、模块化网格卡片、功能总览墙、或"Apple 功能页"那种网格时
---

# 便当盒网格风格（Bento Grid）

> 本风格为本仓库原创规范，无第三方来源引用。

## 设计总原则

1. **网格是骨架**：整个页面（尤其特性区）由统一间距的网格组成，卡片大小不一（1×1、2×1、2×2、1×2）但**必须严格对齐到网格线**。
2. **圆角与留白**：卡片圆角 16-24px，卡片间距 12-20px，页面留白充裕（区块间距 ≥ 80px）。
3. **浅色为主**：默认白/浅灰底（`#ffffff` / `#f5f5f7`），深色模式可选但同一套网格逻辑。
4. **克制配色**：每张卡片一个柔和底色（近白/浅灰/浅蓝/浅紫等低饱和色），全站强调色 1 个。
5. **卡片内容组合**：每张卡片 = 图标（圆角方块或圆形）+ 大标题 + 一句描述；大卡片可放截图/图表/列表。
6. **层次靠大小与底色**：最重要的内容用最大卡片（2×2 或 3×2），次要的用小卡。

## 必用 Token

```css
:root {
  --canvas:     #ffffff;
  --canvas-alt: #f5f5f7;
  --ink:        #1d1d1f;
  --ink-muted:  #6e6e73;
  --accent:     #0071e3;      /* 唯一强调色 */

  --card-radius: 20px;
  --gap: 16px;                /* 卡片间距 */
  --card-pad: 24px;

  /* 卡片底色池（低饱和） */
  --tile-1: #eef2ff;  /* 浅蓝 */
  --tile-2: #f5f0ff;  /* 浅紫 */
  --tile-3: #e8f5ee;  /* 浅绿 */
  --tile-4: #fff7e6;  /* 浅黄 */
  --tile-5: #fdf0ef;  /* 浅橙 */
  --tile-6: #f0f4f8;  /* 浅青 */
}
```

## 排版规范

- 标题：`font-weight 600-700`，36-48px（hero）、22-28px（卡片标题）。
- 卡片描述：`14-15px / 400 / 1.5`，`ink-muted`。
- 图标：放在圆角方块（`10-12px` 圆角）里，图标本身 22-28px。
- 字体：`-apple-system / Inter`，全站统一。

## 组件落地清单

| 组件 | 规则 |
|---|---|
| Hero | 居中大标题 + 副标题 + 双 CTA，下方直接进入 bento 网格 |
| Bento 网格 | `display: grid` + `grid-auto-rows` 固定行高（如 120px）+ `grid-auto-flow: dense`，卡片用 `grid-column/row: span n` 控制大小 |
| 大特性卡（2×2） | 放主截图/图表 + 标题 + 描述，底色 `tile-1` 或最深 |
| 小特性卡（1×1） | 图标 + 标题 + 一行描述 |
| 中等卡（2×1） | 左右布局：文字 + 右图/图表 |
| 指标卡 | 大数字 + 小标签，数字用 600 字重 32px+ |
| 图标方块 | 28-40px 圆角方块 + 24px 图标，`background: rgba(255,255,255,.6)` 或强调色 10% 透明度 |
| 卡片 hover | 轻微上浮 + 阴影加深（`transform: translateY(-2px)` + `box-shadow` 增强） |

## 禁用清单

- ❌ 卡片大小随意不齐——必须对齐网格线
- ❌ 卡片间距 < 12px 或 > 24px（失去"便当盒"的整齐感）
- ❌ 高饱和彩色卡片墙（每卡一个彩虹色 = 灾难）
- ❌ 圆角 < 12px（便当盒要有圆润感）
- ❌ 复杂渐变卡片（可用极淡的纯色）
- ❌ 玻璃拟态、粗野主义元素混入

## 验收检查

- [ ] 卡片严格对齐网格（用 `grid-auto-rows` + span 控制）
- [ ] 卡片有 2-3 种尺寸（1×1、2×1、2×2）
- [ ] 全站圆角 ≥ 16px，卡片间距 12-20px
- [ ] 卡片底色低饱和，强调色 ≤ 1 个
- [ ] 每张卡片内容 = 图标/图 + 标题 + 描述
- [ ] 页面留白充裕（区块间距 ≥ 80px）