tether-uilisted

# Tether UI 浅色纸面 + 墨色字。桌面工作台和营销站共用这一套，不要做成 IDE、深色终端或 Discord。 先读 [tokens.md](tokens.md) 里的色板和组件，再动最少 CSS。新界面必须看起来像同一张纸上多了一块。 ## 配色（先抄这里） 产品与网站的**纸和墨必须一致**。强调色就是墨，不要另起蓝/紫。 | 角色 | 色 | 用在 | | --- | --- | --- | | 纸底 | `#f6f4f0` | 页面、侧栏、页脚底 | | 卡片 | `#fffcf8` | 浮卡、气泡、面板 | | 凹槽 | `#f3f0eb` / `#efece7` | 代码块、输入、内嵌 | | 墨 | `#1c1917` | 正文、主按钮、焦点 | | 次墨 | `#5c574f` / `#9a948b` | 说明、时间戳 | | 线 | `#e8e4dc` / `#ddd8ce` | 发丝边 | | 绿 / 红 | `#2f7d4a` / `#c4473a` | 成功、危险、diff | 营销站可以把 Logo / 链接做成皮革棕 `#8a6f5a`（`--brand`）。**桌面壳不要用它当按钮色**，桌面强调仍是墨。 桌面 CSS 变量：`--page` `--surface` `--ink` `--accent`（= ink）。站点现用 `--bg-page` `--bg-card` `--ink-primary`，语义对齐上表，新代码优先用桌面这套名字，或加一层 alias，不要第三套 hex。 阴影只用发丝和一层轻抬：`--shadow-hairline` 卡片/输入，`--shadow-overlay` 弹层。不要大投影、彩条顶栏、霓虹边。 ## 字 - Inter Variable + 中文系统黑体。等宽只用 `--mono`。 - 工作台正文 `14px / 1.5`，tracking `-0.011em`。站点长文可以 `15px / 1.6`。 - Markdown / 预览标题压到 16 / 15 / 14，不要浏览器默认大标题。 - Hero 产品名可以更大（站点、空态）。 - 用户可见文案走 i18n，简体中文 + English；代码、路径、命令、模型名保持原文。 ## 组件 圆角：控件 7–10px，卡片 12–16px，用户气泡 16px。 **全圆可以用在**：发送键、建议胶囊、权限 tag、计数徽章。不要把普通 `.ghost` / `.primary` 做成胶囊。 | 组件 | 做法 | | --- | --- | | 页面 | `--page` 底，无深色 mode（除非明确要求） | | 卡片 | `--surface` + `--shadow-hairline` | | 主按钮 `.primary` | 墨底、纸色字 | | 次按钮 `.ghost` | 纸底 + 发丝 | | 发送键 | 30px 墨色圆钮 | | 链接 chip | 插在光标处，和文字同一顺序；发送时还原完整 URL | | Composer | 底部浮卡，不要贴底通栏 IDE 输入条 | | 审批 | 人话标题；命令收到「查看命令」；不要 `window.confirm` | | 弹层 | 墨 40% 罩 + `.panel` 纸卡 | | 图标 | 24 视口描边 SVG，`strokeWidth 1.75`，`currentColor` | | Logo | 开口绳子 pa