# TOKEN-SPEC-reit-asia · 真 17 token + DESIGN.md template

> **出处**:`https://reit.asia` 首页 `<style>` `:root{}`(2026-07-06 采集)  
> **server 真 webroot**:`/var/www/reits-platform/`(nginx `root` 真值;`/opt/reits-platform/` 是另一独立 inode,**不同步**)  
> **cert**:独立 `/etc/letsencrypt/live/reit.asia/`(与 moodmox.com 互不影响)

## Part 1 · 真 17 token 全量快照

| # | Token | 值 | 类别 |
|---|---|---|---|
| 1 | `--bg` | `#ffffff` | 主背景(纯白) |
| 2 | `--bg2` | `#f6f8fb` | 二级背景(冷调浅灰) |
| 3 | `--bg3` | `#eef2f7` | 三级背景(略深冷灰) |
| 4 | `--ink` | `#111827` | 主文字(近黑) |
| 5 | `--muted` | `#6b7280` | 辅助文字(中性灰) |
| 6 | `--rule` | `#e5e7eb` | 分割线 |
| 7 | `--accent` | `#002f6c` | 主强调色(深蓝,机构感) |
| 8 | `--accent-soft` | `#e8edf5` | 强调色淡背景(用于 hover/active) |
| 9 | `--accent2` | `#007a8a` | 次强调(青) |
| 10 | `--highlight` | `#c8102e` | 高亮红(危险/重要提示) |
| 11 | `--up` | `#047857` | 上涨(金融语义,绿) |
| 12 | `--down` | `#b91c1c` | 下跌(金融语义,红) |
| 13 | `--radius` | `4px` | 主圆角(很小,严肃) |
| 14 | `--radius-lg` | `6px` | 略大圆角(表格/卡片) |
| 15 | `--shadow` | `0 1px 2px rgba(17,24,39,0.04)` | 平面阴影 |
| 16 | `--shadow-hover` | `0 4px 14px rgba(0,47,108,0.10)` | hover 阴影(带蓝调) |
| 17 | `--ease` | `cubic-bezier(0.4, 0, 0.2, 1)` | 缓动函数(中性) |

## Part 2 · 给 reit.asia 写 DESIGN.md 的 template

> 部署位置建议(server 端):`/opt/reit.asia/DESIGN.md`(Google spec 通用格式)  
> 本机临时位置(本 skill 自带):`~/.hermes/skills/devops/moodmox-deploy/references/TOKEN-SPEC-reit-asia.md`(已存在)

下方给出**完整 DESIGN.md 内容**(可直接 `scp` 到 server):

```markdown
---
title: reit.asia Design Token Spec
version: 0.1
date: 2026-07-06
generator: Hermes moodmox-deploy skill v1 (references/TOKEN-SPEC-reit-asia.md)
---

# reit.asia Design Token Spec

## 1. Color · 颜色(12)

| Token | Value | Role | WCAG |
|---|---|---|---|
| \`--bg\` | #ffffff | Main background | — |
| \`--bg2\` | #f6f8fb | Secondary background | — |
| \`--bg3\` | #eef2f7 | Tertiary background | — |
| \`--ink\` | #111827 | Primary text | AA on bg ✓ |
| \`--muted\` | #6b7280 | Secondary text | AA on bg ✓ |
| \`--rule\` | #e5e7eb | Divider/border | — |
| \`--accent\` | #002f6c | Primary brand (deep blue) | AA on white ✓ |
| \`--accent-soft\` | #e8edf5 | Brand hover/active bg | — |
| \`--accent2\` | #007a8a | Secondary brand (cyan) | — |
| \`--highlight\` | #c8102e | Critical highlight (red) | — |
| \`--up\` | #047857 | Finance-up (green) | — |
| \`--down\` | #b91c1c | Finance-down (red) | — |

## 2. Geometry · 几何(2)

| Token | Value | Usage |
|---|---|---|
| \`--radius\` | 4px | Buttons, inputs (small / institutional) |
| \`--radius-lg\` | 6px | Cards, tables (slightly larger) |

> ⚠️ 不要把 `--radius` 调到 >10px。机构感设计语言要求"小圆角 + 严肃",见 references/跨站-design-language-对比.md。

## 3. Shadow · 阴影(2)

| Token | Value | Usage |
|---|---|---|
| \`--shadow\` | 0 1px 2px rgba(17,24,39,0.04) | Default elevation |
| \`--shadow-hover\` | 0 4px 14px rgba(0,47,108,0.10) | Hover state (brand-tinted) |

## 4. Motion · 动效(1)

| Token | Value | Usage |
|---|---|---|
| \`--ease\` | cubic-bezier(0.4, 0, 0.2, 1) | All transitions |

## 5. Naming Convention

- `--accent` = primary brand;`--accent2` = secondary brand
- `--up` / `--down` 保留给金融语义,**不要**用作普通状态色
- 不使用 `--primary/--secondary/--tertiary` 抽象命名(避免歧义)

## 6. Change Log

| Date | Token | Change | Author |
|---|---|---|---|
| 2026-07-06 | (init) | Capture from reit.asia live CSS | Hermes moodmox-deploy skill |
```

---

## Part 3 · 如何把这份 DESIGN.md 推到 server

```bash
# 本机临时位置
LOCAL=~/.hermes/skills/devops/moodmox-deploy/references/TOKEN-SPEC-reit-asia.md

# 提取 Part 2 的 markdown(到 server 才是 DESIGN.md 主体)
# 或者直接把 Part 2 复制到新文件(整个 spec)
scp $LOCAL root@reit.asia:/opt/reit.asia/DESIGN.md

# 验证
ssh root@reit.asia 'cat /opt/reit.asia/DESIGN.md | head -20'
```

> ⚠️ **不要再写 sync 脚本** — reit.asia 与 moodmox 一样只有一处 source(在线 HTML 的 `:root{}`),差异 review 用 `git diff` 即可。

## Part 4 · Why DESIGN.md **不是 moodmox 28 token 复用

详见 `references/跨站-design-language-对比.md`。简版:

| 维度 | moodmox.com | reit.asia |
|---|---|---|
| **风格** | 暖奶油 + 萌系 | 冷蓝 + 机构 |
| **圆角** | 24px | 4px |
| **强调** | 5 色马卡龙 | 单一深蓝 + 金融语义 |
| **字体** | SmoochSans/EricaOne 装饰 | 系统字 |
| **shadow** | 拟物多层 | 平面一层 |
| **target 用户** | 情绪盲盒(年轻/收藏) | REITs 投资者(机构/严肃) |

**结论**:**两站 design language 完全独立**,DESIGN.md 必须分两份。强行套一份会双重失败 — 既不萌系也不严肃。