# Tanka Design Reference

> **目标读者**:设计师 & PM。**目的**:demo / 新功能草稿 / 临时页面用,可以快速对齐到产品现有视觉语言,不引入额外的"风格"。
>
> **来源**:从 web.tanka.ai 实时 DOM + CSS 变量蒸馏(2026-05-14)。所有色值、字号、间距、圆角都是从产品里实际读到的值,不是猜的。

---

## 0. 一页速查 (Cheat Sheet)

| 维度 | 默认值 | 备选 |
|---|---|---|
| 主品牌色 | `#006dff` (蓝) | hover `#3289fe` / pressed `#035fdb` |
| 文字主色 | `#020617` (近黑) | 次级 `#8794a6` / 三级 `rgba(15,41,77,.302)` |
| 页面底色 | `#f9fafb` (work-page) | 卡片表面 `#fdfefe` |
| 字体 | Helvetica Neue / PingFang SC | body 16px / 1.4 |
| 圆角默认 | 12px | 小 6 / pill 999 |
| 间距单位 | 6 / 12 / 18 / 24 | 大间隙 24,卡内 16 |
| 主 CTA 形状 | **黑色 pill**(36h × 999r) | 不要用纯蓝按钮做主 CTA |
| 阴影 | `0 1.5–7px ?? rgba(0,0,0,.1–.2)` | 不要硬阴影 |

**5 条"不要破坏一致性"的硬规则**
1. **主 CTA 默认黑色 pill**(36–38h × 999r)。蓝色 pill 是次要变体(产品里 `Edit Name` modal 用蓝,但 `Rename` modal、所有顶栏 `+ Create` 都是黑)。Demo 时**默认选黑**,见 §3.1。
2. 蓝色 `#006dff` 一支用到底,**不要新增蓝色变体**;hover `#3289fe`、pressed `#035fdb`。
3. **左导轨 65px,二级面板 342px,右抽屉 460px**。新增侧栏继续沿用。
4. 卡片用 **白底 `#fdfefe` + radius 12 或 16 + 无可见 border(或 1px `#efefef`)**。不要画粗边。
5. **空状态** = 线稿插画 + 一行灰字说明(`#8794a6`)。不要写大段引导文案。

---

## 1. Foundations

### 1.1 Color

#### 1.1.1 Brand
| Token | Value | 用途 |
|---|---|---|
| `--Color-Brand-Primary-01` | `#006dff` | 默认 CTA / 链接 / active icon |
| `--Color-Brand-Primary-02` | `#3289fe` | hover |
| `--Color-Brand-Primary-03` | `#035fdb` | pressed |
| `--color-Brand-secondary` | `#25d8be` (mint) | 装饰 / 成功状态备选 |
| `--Brand-Deep` | `#0f294d` (navy) | 标题强调 / Pro 徽章底 |
| `--color-Other-logo` | `#455873` | logo 色 |

#### 1.1.2 Text
| Token | Value | 用途 |
|---|---|---|
| Text/Primary | `#020617` | 正文 / 标题 |
| Text/Secondary | `#8794a6` | 次级文本 / 时间戳 / 元数据 |
| Text/Tertiary | `rgba(15,41,77,.302)` | 三级,如 logged-in 邮箱小字 |
| Text/Placeholder | `#b7bfca` | 输入占位 |
| Text/Disable | `#cfd4db` | 禁用文字 |
| Text/Brand | `#005eff` | 链接(注意比 Brand-Primary-01 略深) |
| Text/Inverse | `#ffffff` | 深底白字 |

#### 1.1.3 Surface / Background
| Token | Value | 用途 |
|---|---|---|
| Surface/Primary | `#fdfefe` | 卡片 / Modal 内底 |
| Background/Primary | `#f3f4f6` | 输入框灰底 / 大区域底 |
| Background/Secondary | `#f2f4fa` | 二级面板底(偏蓝灰) |
| Background/Hover | `#eff4ff` | hover 浅蓝 |
| Background/Active (subtle) | `rgba(0,94,255,.05)` | 选中行 |
| Background/Active (medium) | `rgba(0,94,255,.10)` | 选中卡 |
| Background/Page | `#deebff` | 全局浅蓝画布(登录后底色) |
| Background/Work-page | `#f9fafb` | 主工作区底 |
| Background/Gap | `#f5f6f8` | 区块分隔条 |

#### 1.1.4 Border / Divider
| Token | Value | 用途 |
|---|---|---|
| Border/Primary | `#f3f4f6` | 默认 hairline |
| Border/Secondary | `#8794a6` | 强调 border |
| Border/Subtle | `rgba(15,41,77,.05)` | 不可见 divider |
| Border/Hover | `hsla(0,0%,55%,.3)` | hover 边 |
| Border/Pressed | `#005eff` | 选中态边 |

#### 1.1.5 Alert / Semantic
| Token | Value |
|---|---|
| Danger | `#ef4444`(新)/ `#ff606a`(老) |
| Warning | `#ffbb20` |
| Success | `#0ec46c`(新)/ `#25d8be`(老 mint) |

> ⚠️ 产品里 alert 颜色存在新老两套。新规范优先用新值(`#ef4444 / #ffbb20 / #0ec46c`)。

#### 1.1.6 Tag (5 套语义色)
| 套色 | Surface | Text |
|---|---|---|
| 01 Green | `#e1f8e0` | `#279227` |
| 02 Mint | `#ddfbea` | `#1ba158` |
| 03 Cyan | `#ddfbea` | `#2191b0` |
| 04 Blue | `#e0f4ff` | `#006dff` |
| 05 Blue-Grey | `#e1eefa` | `#3e6bb7` |

**用法**:状态标签(`Linked`/`Open`/`Completed`)、分类标签。不要随机配色,从 5 套里选一套。

#### 1.1.7 Highlight (强调底色)
用于引用块、pin、临时强调:
- `#e4efff` (default highlight)
- `#c6deff` (highlight blue / my-bubble)
- `#d6f5ff` (aqua)
- `#fffae5` (orange)
- `#ffe5e5` (red)
- `#f3ff1e` (yellow — 慎用,过亮)

---

### 1.2 Typography

```
字体栈: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
       "Microsoft YaHei", 微软雅黑, Arial, sans-serif
```

#### 字号阶梯
| Token | Size | 典型用法 |
|---|---|---|
| H1 | 64px | 营销/落地大标题(产品内罕用) |
| LargeTitle | 32px | 模块大标题(`Your Task Today?`) |
| Title | 24px | 页面标题 |
| Headline | 18px | 卡片大标题 / Section header |
| **Body** | **16px** | **正文默认。所有 markdown、列表、段落都用这个** |
| Callout | 15px | Setting card 标题(Pro banner)|
| Detail | 12px | 时间戳 / metadata / 日期分组(`MAY`)|
| Tiny | 11px | Badge 数字 / 极小说明 |

#### 行高规则
**所有字号统一 1.4 倍行高**(body 16 → 22.4)。Markdown 长文本里 ol/li/p 用 **26px** 行高(可读性优化)。

#### 字重
| Token | Weight |
|---|---|
| Light | 300 |
| Regular | 400 |
| **Medium** | **500**(tab inactive)|
| Semibold | 600(tab active / 强调) |
| Bold | 700(标题、`<strong>`、Pro 标题) |

#### Heading in markdown content
```
h2: 700 / 20px / lh 26 / mt 24 mb 20
h3: 700 / 16px / lh 26 / mt 16 mb 16
```
> 注意:正文里的 `<strong>` 在产品 markdown 渲染里**改成 400 weight + 灰色** (`#8794a6`)。如果你要做"加粗"语义,直接用 h2/h3 或单独写一行小标题。

---

### 1.3 Spacing

#### Gap (flex/grid 间距)
| Token | Value |
|---|---|
| Tiny | 2px |
| Small | 6px |
| Normal | 9px |
| Medium | 18px |
| **Large** | **24px** ← 卡片之间 / 区块之间默认 |

#### Padding (内边距)
| Token | Value |
|---|---|
| Tiny | 3px |
| Small | 6px |
| Small-alt | 12px |
| Normal | 14px |
| Medium | 18px |
| **Large** | **24px** ← 容器内边距默认 |

**常见组合**
- 卡片内边距:`24px`(`link-stat-card`、`tool-card`)
- 卡片间间距:`24px`
- 列表行高:`62px`(setting-item)/ `76px`(chat-a-item)
- 按钮内边距(pill):`8px 14px` 或 `0 12px`(高 36)

### 1.4 Radius

| Token | Value | 用途 |
|---|---|---|
| Tiny | 3px | 极小元素 |
| Small | 6px | tag / 小芯片 / message-toast |
| **Normal** | **12px** | **默认。卡片、popover、bubble** |
| **Large** | **24px** | 大卡片、Pro banner、container |
| Pill | 999px | 按钮 / chip / 头像 |

**特殊**
- Chat bubble:`0px 12px 12px 12px`(左上平,体现"指向发送者")
- AI entry banner:`20px`
- 卡片大圆角(stat / tool card):`16px`
- Avatar 正方头像:`12px`(small)、`16px`(center)
- 输入框:`8px`(search)、`20px`(composer)

### 1.5 Border Width

| Token | Value |
|---|---|
| Hair | 0.5px |
| Normal | 1px |
| Large | 2px(tab 下划线 active)|

**习惯**:大部分卡片**不画 border**,靠 background 区分;真要分隔用 hairline `0.5px`,颜色 `rgba(15,41,77,.05)`(几乎不可见,只为像素吸附)。

### 1.6 Shadow

| 用途 | 值 |
|---|---|
| 浮卡轻 | `rgba(0,0,0,0.1) 0 1.8px 9.2px` |
| 浮卡中 | `rgba(0,0,0,0.15) 0 1.5px 17.6px` |
| 浮卡强 | `rgba(0,0,0,0.2) 0 6.8px 29.3px` |
| 面板/dropdown | `rgba(0,0,0,0.2) 0 1px 6px` |
| 全局 sidebar | `rgba(0,0,0,0.06) 0 1px 1px, rgba(0,0,0,0.2) 0 2px 5px` |

**原则**:阴影**柔且模糊大**,不要用 `0 2px 4px` 这种硬阴影。

---

### 1.7 Layout

```
┌──────────┬──────────────┬──────────────────────────┐
│ 65px     │ 342px        │ 自适应 (max 1792)        │
│ Left     │ Left content │ Main canvas              │
│ rail     │ panel        │                          │
└──────────┴──────────────┴──────────────────────────┘
```

| 维度 | 值 |
|---|---|
| 页面 max-width | **1792px** |
| 左导轨宽度 | **65px** |
| 左内容面板宽度 | **342px** |
| 顶部 header 高度 | **60px** |
| Search bar 高度 | **40px** |
| 主内容左右内边距 | **24px** |

> **Memos 是 3 列变种**:65 (rail) + 342 (flow list) + ~270 (memo categories) + 自适应。新页面如果需要 3 列,沿用这个比例。

#### Dialog 标准尺寸
| 名称 | W | H |
|---|---|---|
| Small | 680 | 627 |
| Normal | 680 | 740 |
| Medium | — | 670 |
| Large | 900 | 920 |
| Larger | 980 | 800 |
| Huge | 1400 | — |

---

## 2. Layout Templates

### 2.1 App Shell(主框架)
所有页面共享:
- **Left rail (65w)**:logo + workspace 切换(头像方块 52, radius 8)+ 主导航 icon (Flow/Chat/Link, icon 24, label 12)
- **Left content panel (342w)**:页面标题(60h header, 24 padding-left)+ Search 区(56h, padding 24)+ 内容
- **Main canvas**:剩余宽度,内容居中(典型内容宽 800–1040)

### 2.2 Page Header(顶栏)
```
[← back]  [Page Title]                  [Action btn] [Action btn] [...]
60h, padding 0 24, border-bottom 1px #f3f4f6
```
- Title:Headline 18 / 600 weight
- Action button:文字按钮,icon + 文字组合,无背景,hover 浅灰

### 2.3 Three-Column(Memos / 复杂页面)
适用于"目录 + 列表 + 详情"的场景。第二级目录 270w 左右,使用相同的 hover/active 风格(浅蓝底)。

### 2.4 Hero Composer(空状态主区域)
当主区域无内容时:
- 居中显示一个 H1 提问(32px / 22.4 实测,实际语义 = LargeTitle)
- 下方一个圆角 `20px` 的输入卡(白底/无明显 border)
- 卡内左下两个 icon (`+`, ✨),右下圆形 send 按钮(32 × 999r,disabled = `#ced2d9`)

---

## 3. Components

### 3.1 Buttons

#### Primary CTA — 页面顶部(黑 pill,36h)
```
bg #000  color #fff  h 36  padding 0 12  radius 999  font 400/16
class: t-btn t-white-black t-semi t-full-radius
```
图标 + 文字:`+ Create`、`+ Create Votes`、`+ New Memo`、`+ New Flow`。
**用于**:页面顶栏右侧的"创建/新建"动作。

#### Primary CTA — Modal/弹层内(蓝 pill,38h)
```
bg #006dff  color #fff  h 38  padding 8 16  radius 999  font 400/16
hover bg #3289fe  pressed bg #035fdb  disabled bg #e7e9ed (color #fff)
class: t-btn ivu-btn t-primary  or  t-white-blue
```
**用于**:Modal 的 Confirm/Save、表单提交、弹层内确认。
> **不要混用**:同一个屏幕里黑 pill 给"创建新对象",蓝 pill 给"确认当前操作"。

#### Secondary CTA(浅按钮 + icon)
```
bg transparent  color #020617  h 36  border none
icon + text,hover bg rgba(140,140,140,.1)
```
用于次级动作:`Export`、`Reactivate`、`Progress`、`Save as SOP`。

#### Icon Button (round)
```
40 × 40  radius 999  bg rgba(140,140,140,.1)
hover bg rgba(15,41,77,.1)
```

#### Disabled Send Button(composer 内圆形)
```
32 × 32  radius 50%  bg #ced2d9  color #fff
启用态:bg #006dff
```

#### Destructive Text Button
```
color #ef4444 / "#ff606a"(老)  无背景
e.g. "Log Out"
```

### 3.2 Inputs

#### Search Input
```
h 40  bg #f3f4f6  radius 8  padding 8 10 8 40 (左侧给 icon 留 40)
font 16/24  no border
icon 颜色 #8794a6
```

#### Composer Input(任务输入)
```
卡片 radius 20  bg #fdfefe  shadow 无 / 极轻
内部 textarea bg 透明  font 16/24  placeholder "Describe the task…"
卡内下方一行工具 (icon 32,gap 8) + 右下 send circle
```

#### Chat Footer Input
```
卡片 radius 12  padding 24 0  border 0.5px #fdfefe
内部底部:左侧 tool icons(✨ 😀 📁 ✂ ✓ 📊 🎤,gap 8,size 32)+ 右侧 send circle 32
```

### 3.3 Tabs

#### Underline Tabs(`g-tabs`,主要内容切换)
```
container: border-bottom 0.5px rgba(15,41,77,.05),padding 0 24
item h 48  padding 12 4  font-size 16
active: weight 600 / color #020617 / border-bottom 2px #020617
inactive: weight 500 / color #6f7f94
```
例:Follow-ups 的 `To Me / To Other`、Votes 的 `Ongoing / Verified / Expired`。

#### Pill Tabs(`detail-pill-tabs`,二级筛选)
```
chip h 34  padding 8 14  radius 9999  font 14/?
active: bg #ffffff / color #060606
inactive: bg #ececec / color #060606
```
例:`Open / Completed / Priority ▾`。

### 3.4 List Items

#### Flow Card(左侧 flow 列表项)
```
w 336 / h ~76  radius 8(无 border)
default: bg transparent  hover/selected: bg #eff4ff or rgba(0,94,255,.05)
内部: 标题 16/?  + 副标题 12/secondary  + 选中时右上"..."(hover-only)
```

#### Chat List Row(`chat-a-item`)
```
h 76  padding 14 0 14 24  bg transparent
selected: bg rgba(0,94,255,.05)
sticky/pinned: bg rgba(239,242,245,.8)
内部:Avatar 38 + 标题 + 最后消息预览 + 时间(右上 12px secondary)+ mute icon + unread badge
```

#### Memo Row
```
高度自适应  上下边距 ~16  border-bottom hairline
标题(16 / 600 active,400 default)+ 2 行预览 + 右上日期 + 右上 "..."
```

#### Settings Row(`setting-item`)
```
h 62  padding 0 24  bg transparent
icon 20 + 文字 16(left)+ 右值/chevron(right)
hover: bg rgba(140,140,140,.05) 近似
```

### 3.5 Cards

#### Stat Card(`link-stat-card`)
```
h 122  padding 24  radius 16  bg #ffffff  border 1px #efefef
内部 gap 16:标题(secondary,callout)+ 大数字(LargeTitle 32+) + 右侧 mini chart
```

#### Tool / Connector Card(`tool-card`)
```
h 88  padding 16 24  radius 16  bg rgba(15,41,77,.03) (off-white pearl)
内部:左 icon 32 + 标题 16/600 + 右下绿色状态点 + "Linked" 文字
```

#### Highlight Card(`pro-banner`)
```
radius 12  bg rgba(0,94,255,.05)  padding ~14
两行:标题(700/15,navy)+ 右上 badge "Pro"(bg navy 0.8 / fg white / 12 medium / radius 4)
```

### 3.6 Tags & Chips

#### Status Tag
```
radius 6  padding 0 5  font 11 medium
用 1.1.6 的 5 套语义色
```

#### Filter Chip
- 见 3.3 pill tabs。

#### Badge / Counter
```
unread:  bg #8794a6 / fg white / 11 medium / padding 0 5 / radius 8
counter inline:  text "(549)" 跟在 tab 名后
```

#### Verified Checkmark
蓝色圆形 ✓ icon (`#006dff`),用于官方账号 / 已验证。

### 3.7 Avatars

| 类型 | 尺寸 | 圆角 | 阴影 |
|---|---|---|---|
| Workspace tile | 40 | 50% (org) / radius 12(personal)| 1px border #f3f4f6 |
| Chat header(in stacked) | 32 / 40 / 31(left/center/right) | 12 / 16 / 12 | floating soft / strong / med |
| Chat list | 38 | 50% (group) | 无 |
| 单字 fallback | 38 | 50% | bg 见下 |

**单字头像背景色池**(产品里实际出现):
`#7235ff` (purple)、`#556d8d` (slate)、`#0bb866` (green)、`#0bbc67` (green)、`#af45f5` (violet)、`#08097f` (deep blue)。

### 3.8 Chat Bubble

#### Other's bubble(`is-text` / `is-photo`)
```
bg #fdfefe  border 1px #f3f4f6
radius "0px 12px 12px 12px" (左上 0,其余 12)
padding 8  max-width ~412
内部:发送人(weight 500 / 14)+ 内容(16/24)+ 右下时间戳(12 secondary)
```

#### My bubble(自己发的)
```
bg #c6deff  border 1px #b8d9ff  radius 类似 (镜像:右上 0)
text #020617
```

#### Reply / Quote(`re3e`)
```
embedded in bubble  border-left 1px #8794a6  padding 0 8
内部:被引用人(weight 500 / 12)+ 引用内容(灰)
```

#### Reaction Chip(`comment-message-show`)
```
h 32  bg #fdfefe  border 0.5px #f3f4f6  radius 8  padding 4 8 gap 8
emoji + 数字 + 反应者头像(26 / 50%)
```

#### Pinned Message
```
左侧 1px 蓝色细条(`Border-Pressed #005eff`)
"Pinned Message #N" 链接(Brand)+ icon-prefixed 内容预览
```

#### Date toast(`message-toast`)
```
h 32  bg #fdfefe  radius 6  padding 7 12.5  font 12  text #020617
内容: "Today" / "Yesterday" / "5/11"
```

### 3.9 Calendar

```
月视图 7 列  日期单元 56h
今天:圆形 bg #006dff / fg white  (整圆位于日期文字外)
事件:日期下方 1–3 个 8px 彩色 dot
头部: All ▾   « < {Month YYYY} > »   Today
```

### 3.10 Popover / Dropdown

```
bg #fdfefe  radius 8  padding 5 0
shadow: rgba(0,0,0,0.2) 0 1px 6px
item h 45  font 14/normal  padding ~16 水平  icon-prefixed
hover: bg #f2f4f7 (--dropdown-hover-color)
```

### 3.11 Modal / Dialog

#### 小确认 Modal(`g-confirm-modal`,实测样式)
```
容器:  w 400  h 自适应(实例 194)  bg #fdfefe  radius 12  padding 24
阴影:  rgba(15,41,77,0.1) 0 0 16px 0   ← 极柔,几乎只起轮廓作用
遮罩:  无明显暗化层(实测 mask bg = rgba(0,0,0,0)),但有 backdrop blur(从截图可见背景模糊)
```
内部布局:
```
[Title (14–18px,左对齐,无 close icon)]
[Input  h 41  bg #fff  border 1px rgba(15,41,77,.05)  radius 8  padding 8 12  font 15]
[Cancel] [Primary]    ← 右下对齐,gap ~12
Cancel: 38h padding 8 16 radius 999 bg #fff color #020617 (text-look)
Primary: 38h padding 8 16 radius 999 color #fff  bg = 黑 或 蓝(看变体)
```
**产品里发现两个变体**(实测,标题与按钮色相互绑定):

| 变体 | 标题 | Input 特征 | Primary 按钮 |
|---|---|---|---|
| **A. Edit Name**(`...` 菜单触发) | `Edit Name` | 无 clear icon | **蓝** `#006dff` |
| **B. Rename**(其他入口) | `Rename` | 输入框内带 `×` clear icon | **黑** `#020617` |

**Demo 取舍**:画新 modal 优先用 **B 变体(黑 Save + 清除 icon)**——它和顶部 CTA 统一,且交互更完整。A 变体应被视为遗留。

#### 大尺寸 Modal
6 档标准尺寸见 1.7 Dialog 表。**直接选一档**,不自定义尺寸。大 modal 顶部通常带标题 + close X,底部 footer 右对齐按钮。

### 3.12 AI Sparkle Banner(`arena-entry-banner`)
```
h 80  radius 20  bg 渐变(浅蓝→白)
左侧 3 个 stacked avatar(各带不同阴影:left soft / center strong / right med)
中间文案 "Let your assistants discuss first" + 副文 "But... What if?"
右侧 chevron ›
```

### 3.13 AI Sparkle Chip(单独 entry)
小尺寸入口图标 — 蓝绿渐变圆角方块(出现在 search bar 右侧、Memos 头部)。色谱接近 `linear-gradient(135deg, #00D68F, #00C9DB, #4A8AF4)`。

### 3.14 Drawer / Side Panel(右侧抽屉)
触发:点击 chat 标题 / "info" icon 等。结构:
```
容器: w 460  h 100%  bg #f2f4fa (Background-Secondary)
左边: border-left 0.5px rgba(15,41,77,.05) (与主区域分隔)
无阴影(贴边停靠,非浮起)
```
内部:
- **Tabs (g-tab-item)**:顶部 60h,active 用**蓝色** 1px 下划线 `#005eff`(注意和主内容区 g-tabs 的 2px 黑底色不同)
- **大头像 + 名称**:可编辑(尾部铅笔 icon,触发 Edit Name modal)
- **设置行**:h 60,无 padding 容器自带,左标签 + 右值(`Last 1,000 Messages`)或 chevron 或 toggle
- **底部 destructive**:`Clear Chat History` —— 渲染为红色文字(无 chrome),清晰区隔
- **右上 close X**:24×24 SVG,color `#8794a6`

### 3.15 Toggle Switch(iOS 风)
```
容器 32 × 14  radius 7  (扁长 pill)
on:  bg #006dff  border 1px transparent
off: bg #ced2d9  border 1px #cccccc
class: ivu-switch ivu-switch-small
点击区域(switch-btn)放大到 32 × 34 便于点击
```
**仅用于 binary 立即生效**(Mute Notifications / Sticky on Top / Enable Translation)。需要"确认才生效"的设置请用其他控件。

### 3.16 Tooltip(沿用 OS 原生)
Tanka **没有自定义 Tooltip 组件**——hover icon 时弹出的是浏览器/操作系统级 tooltip(走 `title` 属性)。macOS 表现:
```
bg #e4e0de (暖灰)  color #454443  font 11  padding 1 3  radius 1
shadow rgba(0,0,0,.25) 0 0 4px
```
**Demo 建议**:不要画自定义 tooltip(会与产品不一致);需要解释时优先 inline 说明或 popover。

### 3.17 Toast / Message Notice
触发:保存 / 重命名 / 复制等"短反馈"操作。
```
位置: 视口左下,距离左 12px、距离底 ~15px (fixed,z-index 900)
class: ivu-message-notice
形态: 单行 pill,深底白字
size:  约 220 × 53 (随文案宽度变)  radius ~12
bg:    深近黑(Surface-Inverse #171717 / 接近 Text-Primary #020617)
color: #ffffff
font:  500/14  (Body 弱化版)
padding: ~12 16
shadow: 柔阴影(深底 toast 通常 `rgba(0,0,0,.25) 0 4px 12px`)
prefix: 单色白 ✓ icon — 白色圆环边 + 内嵌白色 ✓,**不用语义色**,纯单色与文字同色,~18 × 18
```
**用法**
- 文案模式:`{动词过去式} Successfully`(`Update Successfully` / `Saved Successfully` / `Link Copied`)
- 持续时间约 1.5–2 秒,自动消失
- **不带关闭 X**(短反馈,不需要用户操作)
- **不用语义色填充图标**(成功 / 失败的语义靠"出现"本身和文案传达,图标是单色装饰)。错误态预计沿用同模板把 ✓ 换 ✕,仍单色

> **关键 1**:Toast 不要放右上(会跟 Drawer/Modal 重叠)、不要放居中(打扰阅读)。Tanka 固定**左下角**——产品惯例,demo 时沿用。
> **关键 2**:Toast 内**不要用绿/红填色 icon**(Tanka 用单色 ✓,简洁度优先于"成功 = 绿"的本能联想)。

### 3.18 Badge 变体(汇总)
| 类型 | 形态 | 颜色 |
|---|---|---|
| 系统通知红点 | 圆形(顶 logo / 左导轨 icon 角标) | 红底 `#ef4444` / 白字 11px |
| Chat 未读数 | 圆角胶囊(inline 在列表行)| 蓝底 `#006dff` / 白字 11/medium |
| 静音未读数 | 同上但灰底 | `#8794a6` / 白字 |
| 验证勾 | 圆形 + ✓ | 蓝 `#006dff` |
| Plan badge | 矩形小芯片(`Pro`)| navy 0.8 底 / 白字 12/medium / radius 4 |
| 计数后缀 | 文字 `(549)` | 同行文字色 |

---

## 4. Interaction Patterns

### 4.1 状态色映射(语义层)
| 状态 | 表面 |
|---|---|
| Default | transparent or `#fdfefe` |
| Hover | `hsla(0,0%,55%,.1)` (gray hover) 或 `#eff4ff` (blue hover) |
| Active / Selected | `rgba(0,94,255,.05)` (subtle)/ `rgba(0,94,255,.10)` (medium) |
| Pressed | `rgba(0,94,255,.10)` + border `#005eff` 在表单字段 |
| Disabled | `#e7e9ed` (button) / `#cfd4db` (text) |

### 4.2 Loading — Skeleton
Tanka 用 **线条 skeleton**(`#e7e9ed` 灰条,等宽,3–6 行错落)而非旋转 spinner。Loading 时用这个模式而非 spinner。

### 4.3 Empty States
固定模式:
1. 中部线稿插画(纯线、淡蓝、不带颜色填充)
2. 一行说明文案:Secondary `#8794a6`,16/24
3. **不**配 CTA 按钮(CTA 由页面顶部 `+ Create` 承担)

例:Votes 空态 = "All ongoing votes will show up here"。

### 4.4 Overflow Menu(`...`)
- 触发器:仅在 hover 时显示(列表行内)
- 弹出位置:顶部对齐触发器右侧,向下展开
- 见 3.10 popover 样式

### 4.5 Tab 切换
切换 tab 时**内容区淡入**(无明显动画时长,< 200ms)。Tab 下划线 2px 动画跟随。

### 4.6 Hover 提升
卡片 hover:**不要加阴影**,仅改 bg(浅化或更浅蓝)。阴影留给"浮起"的元素(modal / popover / floating avatar)。

---

## 5. Content & Voice

### 5.1 标题文案模式
- **页面标题**:单数英文名词 — `Flow` / `Chat` / `Link` / `Votes` / `Memos` / `Calendar` / `Settings`
- **Hero 提问体**:句末问号 — `Your Task Today?`、`But... What if?`
- **Section header**:全大写 + 中等灰 — `MAY` / `UNREAD MESSAGE` / `Pinned Message`

### 5.2 CTA 措辞
- 创建类:`+ Create` / `+ Create Votes` / `+ New Memo` / `+ New Flow`(动词 + 名词)
- 状态类:`Reactivate` / `Save as SOP` / `Export` — 单动词或动词短语
- 不用 "Submit / OK / Done" 等模糊词

### 5.3 Metadata
- 时间:`7:18 PM`(12h)/ `5月13日 (周三)` / `Just now` / `Yesterday`
- Count:`(549)` 用括号跟在 tab/section 名后
- 状态:用 tag 而非纯文字,如绿色 `Linked` / `Open`

### 5.4 国际化(中英混排)
产品内中英文混合是常态。混排时:
- 数字和 ASCII 字母两侧 **不加空格**(实际产品有时加有时不加,Memo 标题倾向不加)
- 但 `*` `_` `—` 等符号两侧加空格
- Markdown 内 `**加粗**` 渲染会**反语义**——见 1.2 提示

---

## 6. Demo 时怎么用这份文档

**新建一屏页面 / mockup 时的 checklist:**

- [ ] 字号只用 `11 / 12 / 15 / 16 / 18 / 24 / 32 / 64`,没有别的
- [ ] 圆角只用 `6 / 8 / 12 / 16 / 20 / 24 / 999`,没有别的
- [ ] 间距只用 `2 / 6 / 9 / 12 / 14 / 18 / 24`,没有别的
- [ ] 主 CTA 是**黑 pill**,不是蓝按钮
- [ ] 阴影不超过 3 档(轻/中/强,见 1.6)
- [ ] 灰色文字一律 `#8794a6`(secondary),不要自己调灰度
- [ ] 蓝色只用 `#006dff` 一支,不要新增蓝色变体
- [ ] 卡片**不要画粗边**(0.5px 或干脆无)
- [ ] 空态用线稿 + 灰字 + 无 CTA
- [ ] 列表行高 62 / 76,符合现有节奏

---

## 7. 已知缺口(TBD)

下面这些这次没抓到,补全前先按经验来,后续可以再追加:

- ~~真实 Modal 的 chrome~~ ✅ 已补(3.11,含两个变体)
- ~~Tooltip~~ ✅ 已补(3.16,沿用 OS 原生)
- ~~Drawer / Side Panel~~ ✅ 已补(3.14)
- ~~Toggle 开关~~ ✅ 已补(3.15)
- ~~Toast~~ ✅ 已补(3.17,左下角深 pill)
- 表单错误态(text input invalid)
- Dropdown / Select 展开态(单选/多选)
- Tab 切换的过渡动效曲线 / 时长
- 文件附件 / 图片预览(气泡内已部分覆盖)
- Dark mode(若有)
- 大尺寸 Modal(只抓到了小确认 modal,大 modal 的 header / footer 节奏未实测)

---

## 附录:Token JSON

完整 token 已导出到 [`_samples/tokens.json`](_samples/tokens.json),可直接复用到 Figma variables / CSS variables。