OfferHub · 设计规范 (OfferHub Blue)
定位
这是一套已确定、可复用的固定设计规范，命名为「OfferHub 风格 / OfferHub Blue」，是 OfferHub 自己的浅蓝 SaaS 视觉语言，用于 OfferHub 个人招聘管理站（投递记录 / 简历优化 / 岗位匹配）。
主色 blue-600 #2878F8 与深色文字 text-strong #182848 提取自品牌 logo https://offerhub.work/assets/logo.png。
如何使用本技能
- 先读取 references 下的三个源文件 —— 它们是规范的唯一真实源：
-tokens.css：色彩 / 字体 / 间距 / 圆角 / 阴影 + 基础组件（按钮、输入框、Pill、卡片、列表行、侧栏）
-dark-tokens.css：暗色模式 token（含prefers-color-scheme自动适配）
-components-extra.css：动效、布局栅格、表格、Toast、Modal、空状态、骨架屏、Tab、分页、表单校验、图表色板、图标 - 新生成任何 UI 时，优先
@import或粘贴对应文件的:root变量；组件直接复用类名，不重写样式。 - 颜色一律引用变量（
var(--blue-600)等），禁止写死色值、禁止引入新主色。 - 字体用系统 sans 栈（已在
--font定义），不得使用 Inter / Space Grotesk 等联网几何字体。 - 背景浅色（
--bg #F5FAFF），圆角默认 10px，阴影极轻，留白充足，体现"舒服的 SaaS 工具感"。
核心 Token（速览，详情见 tokens.css）
- 主色 blue-600
#2878F8（来自 logo），hover blue-700#1B61D5 - 背景
--bg #F5FAFF，卡片--surface #FFFFFF，细边框--border #D7E5F7 - 文字
--text-strong #182848（logo 深蓝）/--text #1F2F4D/--text-muted #5E6F8C - 语义色：成功绿
#15A86B/ 警告琥珀#E08A1E/ 危险红#E0445C/ 信息紫#7C5CFC - 圆角
--r:10px；阴影--sh-md极轻（禁止廉价重阴影）
状态语义固定映射（投递场景，不可混用）
已投递 = blue · 面试中 = violet · Offer = green · 未通过 = red · 待处理 = amber
换肤
只改 --blue-* / --bg / --border 即可整体切到 紫(#7C5CFC) / 青(#0D9488) / 橙(#EA580C) 版本，其余变量不变。
隐私规范（强制）
UI 示例数据一律使用虚构占位：用户用「林小白」、组织用「星航科技 / 云启集团 / 示例科技」等虚构名。禁止混入真实业务名、真实人物姓名、真实用户名（如 Chirs）等私人信息；仅产品名 OfferHub 保留。
覆盖范围（v2 · 17 章）
0 设计原则 · 1 色彩 · 2 排版 · 3 间距 · 4 圆角 · 5 阴影 · 6 基础组件 · 7 状态语义 · 8 无障碍 · 9 接入代码 · 10 布局栅格 · 11 图标 · 12 动效 · 13 暗色模式 · 14 扩展组件 · 15 图表色板 · 16 Logo 规范 · 17 文案语气
关键补充约定：
- 动效：三档时长 120 / 180 / 240ms，缓动 cubic-bezier(.2,0,0,1)，只动 transform/opacity，必须支持 prefers-reduced-motion 降级。
- 布局：容器 1200px，侧栏 220px，12 列栅格，断点 640/768/1024/1280。
- 图标：线性 stroke 1.5，尺寸 16/20/24/32，图标按钮热区 ≥ 44px。
- 图表：分类色板 8 色按序取用（--chart-1 ~ --chart-8），禁用彩虹渐变，网格线用 --border。
- 文案：按钮用「动词 + 名词」，错误文案说明原因并给下一步动作，同一概念全站用词统一。
完整可视化文档
如需查看全部色卡、组件样例、暗色对照与 WCAG 对比度，参考 workspace 内的 offerhub-design-system-v2.html（17 章完整版）。
