design(linear): add complete design handoff package

- Add www/design/ directory with full Linear.app style design system
- Tokens: W3C JSON + CSS + Markdown documentation
- Components: Button, Card, Input, Nav, Badge, Icon specs
- Icons: 6 Lucide-style SVG feature icons
- Mockups: 4 PNG + 3 SVG (Figma-importable) page mockups
- Specs: Homepage, docs landing, design system page specs
- Handoff: Migration guide (5-phase) + QA checklist
- Reference: linear.app design philosophy

This design package follows standard design-dev handoff workflow:
- W3C Design Tokens format for cross-platform consistency
- Atomic Design component specs
- Figma-compatible SVG mockups
- Complete migration and QA documentation

Closes #design-handoff-linear

Author: Kimi Design Agent

www/design/README.md

@@ -0,0 +1,177 @@
+# openElement × Linear.app Design System
+
+> **Version**: 1.0.0
+> **Date**: 2025-06-16
+> **Designer**: AI Design Agent
+> **Reference**: linear.app
+> **Platform**: openElement Web Components (DSD-first)
+> **Font**: Inter (Google Fonts) / JetBrains Mono (Google Fonts)
+
+---
+
+## Quick Navigation
+
+| Section | Path | Description |
+|---------|------|-------------|
+| Design Tokens | [`tokens/`](./tokens/) | Colors, typography, spacing, radii — W3C + CSS formats |
+| Components | [`components/`](./components/) | Button, Card, Input, Nav, Badge, Icon specs |
+| Icons | [`icons/`](./icons/) | 6 feature icons (SVG, 24×24 viewBox) |
+| Mockups | [`mockups/`](./mockups/) | High-fidelity page mockups (PNG + SVG) |
+| Layout Specs | [`specs/`](./specs/) | Homepage, docs, design-system page specs |
+| Handoff | [`handoff/`](./handoff/) | Migration guide & QA checklist |
+
+---
+
+## Design Philosophy
+
+1. **Canvas 即留白** — 深色背景本身就是留白，不用白色间隙
+2. **Surface 阶梯** — 4 层表面（canvas → surface-1 → surface-2 → surface-3）构建层级
+3. **Hairline 分隔** — 极细边框（1px, rgba(255,255,255,0.06)）替代阴影
+4. **顶部边缘高光** — 卡片顶部 1px 微弱白边，制造"像素渲染"感
+5. **无渐变、无阴影、无氛围光** — 零装饰性渐变，零 drop-shadow
+6. **产品截图即主角** — 每个 section 以产品 UI 截图为核心视觉元素
+7. **Typography 即品牌** — 激进的负字间距 + 精确的 weight 阶梯
+8. **单色强调** — 只用 Indigo/Lavender 一个强调色
+9. **紧凑按钮** — 8px 圆角，8px 14px padding，不是 pill
+
+---
+
+## Color Palette
+
+### Dark Mode（唯一营销主题）
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| `--bg-canvas` | `#08080a` | Page background |
+| `--surface-1` | `#0d0f12` | Nav, secondary panels |
+| `--surface-2` | `#16191d` | Cards, code blocks |
+| `--surface-3` | `#212529` | Elevated elements, dropdowns |
+| `--brand` | `#5c7cfa` | Primary CTA, links, accent |
+| `--brand-hover` | `#4c6ef5` | Button hover |
+| `--brand-light` | `#748ffc` | Focus ring |
+| `--text-primary` | `#e9ecef` | Headlines, body |
+| `--text-secondary` | `#adb5bd` | Subtitles, descriptions |
+| `--text-muted` | `#868e96` | Captions, meta |
+| `--border` | `rgba(255,255,255,0.06)` | Hairline borders |
+| `--border-hover` | `rgba(255,255,255,0.10)` | Hover borders |
+| `--edge-highlight` | `rgba(255,255,255,0.08)` | Card top edge |
+
+### Light Mode（仅产品 UI 预览）
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| `--bg-canvas` | `#f8f9fa` | Page background |
+| `--surface-1` | `#ffffff` | Panels |
+| `--surface-2` | `#f1f3f5` | Cards |
+| `--text-primary` | `#12131a` | Headlines |
+| `--text-secondary` | `#626676` | Subtitles |
+| `--border` | `rgba(18,19,26,0.08)` | Hairline borders |
+
+---
+
+## Typography Scale
+
+| Token | Size | Weight | Line-Height | Letter-Spacing | Usage |
+|-------|------|--------|-------------|----------------|-------|
+| Display XL | 80px | 600 | 0.95 | -0.04em | Hero headline |
+| Display LG | 56px | 600 | 1.05 | -0.03em | Section opener |
+| Display MD | 40px | 600 | 1.05 | -0.02em | Sub-section headline |
+| Headline | 28px | 600 | 1.20 | -0.01em | Pricing, CTA banner |
+| Card Title | 22px | 500 | 1.25 | -0.005em | Feature card title |
+| Subhead | 20px | 400 | 1.40 | -0.01em | Lead paragraphs |
+| Body LG | 18px | 400 | 1.50 | 0 | Hero subhead |
+| Body | 16px | 400 | 1.50 | 0 | Default body |
+| Body SM | 14px | 400 | 1.50 | 0 | Card body, footer |
+| Caption | 12px | 400 | 1.40 | 0 | Captions, meta |
+| Button | 14px | 500 | 1.20 | 0 | Button labels |
+| Eyebrow | 13px | 500 | 1.30 | +0.04em | Section labels |
+| Mono | 13px | 400 | 1.50 | 0 | Code snippets |
+
+> **Note**: Linear 在 Display 上只用 600，从不用 700+。这是其"克制的力量"的关键。
+
+---
+
+## Spacing Scale
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `xxs` | 4px | Micro gaps |
+| `xs` | 8px | Button padding-y, icon gaps |
+| `sm` | 12px | Button gap, card gap |
+| `md` | 16px | Standard gap, card gap |
+| `lg` | 24px | Card padding, section gap |
+| `xl` | 32px | Page padding-x |
+| `xxl` | 48px | Large spacing |
+| `section` | 96px | Section separation |
+
+---
+
+## Border Radius Scale
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `xs` | 4px | Small chips, badges |
+| `sm` | 6px | Inline tags |
+| `md` | 8px | Buttons, inputs, tabs |
+| `lg` | 12px | Cards, feature cards |
+| `xl` | 16px | Product panels, code blocks |
+| `pill` | 9999px | Status badges, tabs |
+
+---
+
+## Breakpoints
+
+| Name | Width | Layout Changes |
+|------|-------|----------------|
+| Desktop | ≥ 1024px | 3-column feature grid, hero side-by-side |
+| Tablet | 768–1023px | 2-column feature grid, hero stacked |
+| Mobile | < 768px | 1-column, simplified nav, code panel hidden |
+
+---
+
+## Files & Deliverables
+
+### Mockups
+- `01-homepage-hero.png` — Hero section (1440×900)
+- `02-homepage-features.png` — Feature grid (1440×900)
+- `03-design-system.png` — Design system page (1440×900)
+- `04-fullpage-concept.png` — Full homepage scroll (1440×2400)
+- `05-homepage-hero.svg` — Hero SVG (Figma-importable)
+- `06-homepage-features.svg` — Features SVG (Figma-importable)
+- `07-fullpage.svg` — Full page SVG (Figma-importable)
+
+### Tokens
+- `tokens/tokens.json` — W3C Design Tokens format
+- `tokens/tokens.css` — CSS Custom Properties
+- `tokens/tokens.md` — Token documentation
+
+### Components
+- `components/button.md` — 4 variants (primary, secondary, tertiary, inverse)
+- `components/card.md` — Top edge highlight, hover states
+- `components/input.md` — Focus ring, hairline border
+- `components/nav.md` — Sticky nav, backdrop blur, 56px height
+- `components/badge.md` — Pill status badge
+- `components/icon.md` — 16×16 / 24×24 / 32×32 sizes
+
+### Icons
+- `icons/elements-first.svg` — Layers icon
+- `icons/one-renderer.svg` — Git-branch icon
+- `icons/app-lifecycle.svg` — Workflow icon
+- `icons/trusted-boundary.svg` — Shield icon
+- `icons/gate-proven.svg` — Check-circle icon
+- `icons/web-standards.svg` — Globe icon
+
+---
+
+## Version History
+
+| Version | Date | Changes |
+|---------|------|---------|
+| 1.0.0 | 2025-06-16 | Initial Linear.app style redesign |
+
+---
+
+## Contact
+
+- **Framework**: [openelement.org](https://openelement.org)
+- **GitHub**: [github.com/open-element/openelement](https://github.com/open-element/openelement)

www/design/components/badge.md

@@ -0,0 +1,57 @@
+# Badge 组件规格
+
+## 概述
+
+Pill 形状的状态标签。小尺寸、低对比度、用于分类和状态标识。
+
+## 样式规格
+
+| 属性 | 值 |
+|------|-----|
+| 背景 | `--surface-1` (#0d0f12) |
+| 文字 | `--color-text-muted` (#868e96) |
+| 圆角 | `--radius-pill` (9999px) |
+| 内边距 | 2px 8px |
+| 字号 | 12px |
+| 字重 | 400 |
+
+## 状态
+
+| 状态 | 视觉表现 |
+|------|----------|
+| Default | 标准样式 |
+| Hover | 无变化（徽章通常不可交互） |
+
+## 变体
+
+### 默认徽章
+- 用于分类标签（Entry, Concepts, Integrate, Contribute）
+
+### 状态徽章
+- 用于系统状态
+- 颜色根据状态变化：
+  - Success: 背景 `--color-success-subtle`，文字 `--color-success`
+  - Error: 背景 `--color-error-subtle`，文字 `--color-error`
+  - Warning: 背景 `--color-warning-subtle`，文字 `--color-warning`
+  - Info: 背景 `--color-info-subtle`，文字 `--color-info`
+
+### "New" 徽章
+- 背景：`--color-text-primary` (#e9ecef)
+- 文字：`--bg-canvas` (#08080a)
+- 字号：10px
+- 用于 Blog 列表最新文章标记
+
+## 使用场景
+
+| 场景 | 变体 |
+|------|------|
+| 文档入口标签 | 默认徽章 |
+| 系统状态 | 状态徽章 |
+| 新文章标记 | "New" 徽章 |
+| 版本标签 | 默认徽章 |
+
+## 注意事项
+
+- **徽章是只读组件** — 通常不交互
+- **保持低对比度** — 不抢夺主内容注意力
+- **不要在同一页面使用过多徽章** — 最多 3-4 个颜色变体

www/design/components/button.md

@@ -0,0 +1,88 @@
+# Button 组件规格
+
+## 概述
+
+Linear 风格的按钮系统。紧凑、无边框阴影、无悬浮上浮效果。
+
+## 变体
+
+### Primary（主按钮）
+
+| 属性 | 值 |
+|------|-----|
+| 背景 | `--color-brand` (#5c7cfa) |
+| 文字 | `#ffffff` |
+| 圆角 | `--radius-md` (8px) |
+| 内边距 | 8px 14px |
+| 字号 | 14px |
+| 字重 | 500 |
+| 过渡 | all 150ms ease |
+| Hover | 背景变为 `--color-brand-hover` (#4c6ef5) |
+| Focus | 2px outline, `--color-brand-light` at 50% opacity, outline-offset 2px |
+| Active | 背景变为 `--color-brand-hover` |
+
+### Secondary（次按钮）
+
+| 属性 | 值 |
+|------|-----|
+| 背景 | `--surface-1` (#0d0f12) |
+| 文字 | `--color-text-primary` (#e9ecef) |
+| 边框 | 1px solid `--color-border` |
+| 圆角 | 8px |
+| 内边距 | 8px 14px |
+| Hover | 背景变为 `--color-border-hover` 透明度，边框变为 `--color-border-hover` |
+| Focus | 同上 |
+
+### Tertiary（文字按钮）
+
+| 属性 | 值 |
+|------|-----|
+| 背景 | transparent |
+| 文字 | `--color-text-primary` |
+| 圆角 | 8px |
+| 内边距 | 8px 14px |
+| Hover | 背景变为 `rgba(255,255,255,0.04)` |
+
+### Inverse（反色按钮）
+
+| 属性 | 值 |
+|------|-----|
+| 背景 | `#ffffff` |
+| 文字 | `--bg-canvas` (#08080a) |
+| 圆角 | 8px |
+| 内边距 | 8px 14px |
+| Hover | 背景变为 `#f1f3f5` |
+| 使用场景 | 深色背景上的 CTA |
+
+## 状态
+
+| 状态 | 视觉表现 |
+|------|----------|
+| Default | 标准颜色 |
+| Hover | 背景微变，边框微亮（无 transform/translateY） |
+| Focus | 2px 品牌色 outline，outline-offset 2px |
+| Active/Pressed | 背景进一步变暗 |
+| Disabled | opacity 0.5, cursor not-allowed |
+
+## 尺寸
+
+| 尺寸 | 内边距 | 字号 |
+|------|--------|------|
+| Default | 8px 14px | 14px |
+| Small | 4px 12px | 12px |
+| Large | 12px 24px | 16px |
+
+## 使用场景
+
+| 场景 | 推荐变体 |
+|------|----------|
+| Hero CTA | Primary |
+| 次要操作 | Secondary |
+| 文字链接式按钮 | Tertiary |
+| 深色背景 CTA | Inverse |
+
+## 注意事项
+
+- **不做 pill 形状** — Linear 的按钮圆角为 8px，不是 pill
+- **不做悬浮上浮** — hover 时只改变颜色和边框，不做 translateY 位移
+- **不做 box-shadow** — 无阴影效果