## Design System — sui_blog

水墨纸质杂志风格。暖色纸张底色、近黑墨色文字、赭石色点缀，整体营造宋式文人审美。

### 色彩

| Token | Hex | 用途 |
|---|---|---|
| `parchment` | `#FDFCFA` | 页面背景 |
| `parchment-deep` | `#F5F2EE` | 深底（代码块、时间轴圆点、标签底色） |
| `ink` | `#050404` | 主文字、标题 |
| `ink-light` | `#121010` | 略浅的墨色（about 正文） |
| `ink-muted` | `#2A2624` | 辅助文字、meta、标签 |
| `terracotta` | `#A63D2F` | 强调色（链接、CTA、active 状态） |
| `terracotta-light` | `#C46B5E` | 链接下划线装饰 |
| `sage` | `#6E8264` | 语义色——已发布/成功状态 |
| `sage-light` | `#A3B59B` | 预留 |
| `warm-gray` | `#C5BDB4` | 边框、分隔线、meta 点 |
| `cream` | `#FAF9F7` | 卡片背景、侧栏、深色按钮文字 |

辅助色：`red-600`（删除/错误）、`red-50`（删除 hover 背景）、`white`（内联编辑输入框）。

透明度层级：`/80`、`/50`、`/30`、`/20`、`/15`、`/10`、`/5`，用于边框和文字色微调。

选中文字：`bg-terracotta` + `text-cream`。

### 字体

| Class | 字体栈 | 场景 |
|---|---|---|
| `font-display` | Noto Serif SC → Cormorant Garamond → Source Han Serif SC → Songti SC, serif | 标题、logo、页面名、时间轴年份、分类名 |
| `font-body` | Noto Serif SC → Source Serif 4 → Source Han Serif SC → Songti SC, serif | 正文段落、摘要、prose 内容 |
| `font-sans` | Noto Sans SC → DM Sans → system-ui, sans-serif | 标签、meta、导航、按钮、表单、badge |
| `font-mono` | JetBrains Mono → Fira Code, monospace | prose 中的代码、admin HTML textarea |

正文基础样式：`line-height: 1.9`、`letter-spacing: 0.02em`、开启 antialiased。

### 圆角

| Class | 用途 |
|---|---|
| `rounded-full` | 标签 pill、status badge、CTA 按钮、导航圆点、时间轴圆点 |
| `rounded-2xl` | 精选卡片、分类卡片、about 信息框 |
| `rounded-xl` | 标准卡片、表单输入框、admin 列表项、登录框 |
| `rounded-lg` | 侧栏导航项、操作按钮（保存/取消）、hover 背景 |

不使用 `rounded-sm`、`rounded-md`、`rounded-3xl`。层级关系：full（pill）> 2xl（大卡片）> xl（标准卡片/输入框）> lg（小元素）。

### 间距

页面水平内边距：`px-page`（`clamp(1.5rem, 5vw, 6rem)`）。

内容宽度层级：`max-w-5xl`（页面）→ `max-w-3xl`（标签云）→ `max-w-2xl`（文章正文）→ `max-w-lg`（描述文字）→ `max-w-xs`（页脚/短输入）。

页面垂直间距：`pt-16 pb-24`（标准区块）、`pt-20 pb-24`（hero 区）、`mt-20`（大段落分隔）。

常用 gap：`gap-2`（标签 pill）、`gap-4`（网格卡片）、`gap-5`（精选/分类网格）。

卡片内边距：`p-7 md:p-10`（精选大卡片）、`p-7`（分类卡片）、`p-5`（列表项）、`p-4`（统计卡片）。

### 卡片

所有卡片共享基础样式：

```
bg-cream border border-warm-gray/10
```

Hover 提升：

```
hover:border-terracotta/20
```

大卡片额外加阴影：

```
hover:shadow-lg hover:shadow-terracotta/5
```

精选卡片 / 分类卡片完整样式：

```
relative p-7 md:p-10 rounded-2xl bg-cream border border-warm-gray/10
hover:border-terracotta/20 hover:shadow-lg hover:shadow-terracotta/5
transition-all duration-500
```

不使用静态阴影。阴影仅出现在 hover 状态，且仅用于最大的两种卡片。

### 按钮

**主要 CTA（圆角胶囊）：**

```
px-6 py-3 rounded-full bg-ink text-cream font-sans text-sm tracking-wide
hover:bg-terracotta transition-colors duration-300
```

**次要 CTA（描边胶囊）：**

```
px-6 py-3 rounded-full border border-warm-gray/30 text-ink-muted font-sans text-sm tracking-wide
hover:border-terracotta/40 hover:text-terracotta transition-colors duration-300
```

**Admin 主按钮（直角）：**

```
px-4 py-2 rounded-lg bg-ink text-cream font-sans text-sm hover:bg-terracotta transition-colors
```

**Admin 次要按钮：**

```
px-6 py-2.5 rounded-lg border border-warm-gray/20 font-sans text-sm text-ink-muted
hover:text-ink transition-colors
```

**联系链接（描边胶囊）：**

```
inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-warm-gray/20
font-sans text-sm text-ink-muted
hover:border-terracotta hover:text-terracotta transition-all duration-300
```

### 过渡与动画

**CSS 过渡（微交互）：**
- `transition-colors duration-300` — 最常用，所有链接和按钮
- `transition-all duration-300` — 标签、联系按钮、列表项
- `transition-all duration-500` — 精选/分类大卡片（更缓的动效）
- `transition-opacity duration-300` — 箭头 hover 渐显

**自定义缓动：** `--ease-literary: cubic-bezier(0.25, 0.1, 0.25, 1)`

**CSS 关键帧动画：**
- `animate-fade-up` — translateY(20px) → 0，0.7s
- `animate-fade-in` — opacity 0 → 1，0.5s

**GSAP（主要动画引擎）：**
- 缓动函数：`power3.out`（标准）、`power2.inOut`（分隔线）、`back.out(2)`（弹跳缩放）
- 逐字动画：拆分 `<span>` + stagger `y`/`opacity`/`blur`，stagger 0.035s
- ScrollTrigger：`start: "top 85%"` ~ `"top 92%"`
- GsapReveal 组件变体：`fade-up`(y:40)、`fade-in`(opacity:0)、`slide-left`(x:-40)、`slide-right`(x:40)、`scale`(0.92)
- Stagger 值：0.035（逐字）、0.04~0.15（卡片）、0.08~0.12（列表）

### 悬停效果

**文字：** `hover:text-terracotta`（主要）、`hover:text-ink`（次要）、`hover:text-red-600`（删除）

**背景：** `hover:bg-terracotta`（按钮）、`hover:bg-cream`（列表行高亮）、`hover:bg-warm-gray/10`（侧栏导航）

**边框：** `hover:border-terracotta/20`（卡片）、`hover:border-terracotta`（联系按钮）、`hover:border-terracotta/40`（次要 CTA）

**Group hover：** `group-hover:text-terracotta`（卡片标题）、`group-hover:opacity-100`（箭头/删除按钮渐显）、`group-hover:translate-x-0`（箭头滑入）

**表单聚焦：** `focus:border-terracotta/40 focus:outline-none`，复选框/单选框 `accent-terracotta`

### 布局

**根布局：** `min-h-full flex flex-col` + `<main className="flex-1">`（sticky footer）

**页面容器：** `px-page max-w-5xl mx-auto`

**Admin 布局：** `min-h-screen bg-parchment flex` → `aside w-56 shrink-0` + `flex-1 overflow-auto p-8 max-w-5xl`

**网格：**
- `grid md:grid-cols-2 gap-5` — 精选文章
- `grid sm:grid-cols-2 lg:grid-cols-3 gap-5` — 分类
- `grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4` — Admin 统计
- `grid grid-cols-2 gap-4` — Admin 表单双列行

### Prose 排版

文章正文使用 `.prose-literary` 类：字号 1.0625rem、行高 2、字距 0.04em。段落首行缩进 2em（首段不缩进），段间距 1.5em。h2 使用 `font-display` 1.75rem，h3 为 1.35rem。引用块左侧 3px terracotta 色竖线。代码使用 `font-mono` + `bg-parchment-deep`。链接使用 terracotta 色 + 下划线，hover 时下划线加深。

### 全局细节

- 滚动条：6px 宽，track 为 `parchment-deep`，thumb 为 `warm-gray`，hover 变 `ink-muted`
- 纸质纹理：`body::before` 叠加 SVG fractalNoise，opacity 0.03
- 分隔线装饰：`.divider-ornament` 使用两端渐变线 + 中间符号