/* ═══════════════════════════════════════════════════════════════ MuseFlow · Clay & Ink Design Tokens · v1 ═══════════════════════════════════════════════════════════════ 单一真相源 — 所有 Clay & Ink 体系页面通过 引用本文件。 决策依据：2026-04-25 创始人审阅 extraction 报告全过。 样品来源：archive/2026-04-25-clay-references/{home-v8, xuanti-v2}.html 并列说明：本文件与 shared-tokens.css（amber 老体系）并存。 - 新页面（首页 + 即将迁移的所有页面）→ 用本文件 - 老页面（迁移前的 workflow / 选题 / 大纲...）→ 暂留 amber 老体系 - 阶段 2 渐进迁移完成后，amber 老体系归档退役 ═══════════════════════════════════════════════════════════════ */ :root { /* ─── 1. PAPER · 纸色 3 阶 ────────────────────────────────── 从画布底（最暗）→ 主卡片 → 焦点高光卡 */ --paper: #F4F1EA; /* 画布底 · 整页背景 */ --paper-soft: #EDE9E0; /* 画布次级 · agent 背板等 */ --paper-deep: #E7E1D2; /* 画布深 · Muse v2 临时区分隔 · v3.31 起 */ --card: #FBF9F3; /* 主卡片 · 90% 容器 */ --card-hi: #FFFEFA; /* 焦点卡 · ws-card / 文稿区 */ --card-soft: #F4F0E6; /* 次级背景 · 嵌入区分隔 */ /* ─── 2. INK · 文字 4 阶 ──────────────────────────────────── 全部偏暖墨调，禁用纯黑 */ --ink-1: #231D14; /* 主标题 · 重要数字 */ --ink-2: #44392C; /* 正文 */ --ink-3: #7C6F5A; /* 辅助 · 元数据 */ --ink-4: #B0A58C; /* 禁用 · 占位 · 上下月格 */ /* ─── 3. LINE · 描边 ─────────────────────────────────────── 极轻纸感，绝不重墨 */ --line: rgba(35,29,20,.08); --line-strong: rgba(35,29,20,.16); /* ─── 4. OCHRE · 主强调色 · 工作中态 ─────────────────────── */ --ochre: #B68137; --ochre-d: #965F1E; /* hover · 深态 */ --ochre-lo: rgba(182,129,55,.10); /* 低饱和底 */ --ochre-bd: rgba(182,129,55,.28); /* 边框 */ --ochre-ink: #FFF7E8; /* ochre 上的反白文字 */ /* ─── 5. TERRACOTTA · 情感色 · 引文 / 关键词 ─────────────── */ --terracotta: #B25232; --terracotta-d: #9E3621; /* hover · 深态 · v3.31 起 */ --terracotta-lo: rgba(178,82,50,.10); --terracotta-bd: rgba(178,82,50,.22); /* 边框 · v3.31 起 */ /* ─── 6. SAGE · 已完成 / 在线 / 钩子分类 ─────────────────── */ --sage: #6F876F; --sage-d: #566B56; /* hover · 深态 · v3.32 知识库 v2 起 */ --sage-lo: rgba(111,135,111,.10); --sage-bd: rgba(111,135,111,.26); /* 边框 · v3.32 知识库 v2 起 */ /* ─── 7. SLATE · 冷色平衡 / 闪念分类 / 中性图标 ──────────── */ --slate: #5E6B73; --slate-lo: rgba(94,107,115,.10); --slate-bd: rgba(94,107,115,.24); /* 边框 · v3.32 知识库 v2 起 */ /* ─── 7.1 LAVENDER / SKY · workflow 候选分类补充色 ───────── */ --lavender: #8B74A8; --lavender-lo: rgba(139,116,168,.10); --sky: #5D86A4; --sky-lo: rgba(93,134,164,.10); /* ─── 8. RADIUS · 圆角 3 档 + pill ───────────────────────── */ --r-lg: 20px; /* 外层主卡片 */ --r-md: 14px; /* 输入框 · 用户卡 · 内嵌区块 */ --r-sm: 10px; /* 按钮 · 消息气泡 · 进度槽 · chip */ --pill: 999px; /* 胶囊 · 搜索 · Muse · brand · chip */ /* ─── 9. TYPOGRAPHY · 三字族分工 ─────────────────────────── */ --ff-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'PingFang SC', sans-serif; --ff-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; --ff-serif: 'Noto Serif SC', 'Songti SC', serif; /* ─── 10. SHADOW · 暖色阴影叠层（绝不冷灰阴影） ──────────── */ --sh-card-soft: 0 1px 0 rgba(255,252,240,.9) inset, 0 1px 2px rgba(35,29,20,.04); --sh-card-warm: 0 1px 0 rgba(255,252,240,.9) inset, 0 1px 2px rgba(35,29,20,.04), 0 20px 44px -30px rgba(178,82,50,.12); --sh-card-focus: 0 1px 0 rgba(255,252,240,1) inset, 0 1px 2px rgba(35,29,20,.04), 0 24px 56px -36px rgba(182,129,55,.18), 0 10px 28px -16px rgba(35,29,20,.06); --sh-cta-ink: 0 3px 10px -2px rgba(31,26,18,.5); /* ink-1 主 CTA 用 */ --sh-cta-lift: 0 6px 16px -3px rgba(31,26,18,.6); /* hover 上浮 */ --sh-card-lift: 0 16px 32px -22px rgba(35,29,20,.28); /* 卡片 hover 上浮 (引导意图卡等) */ /* ─── 11. BACKGROUND ATMOSPHERE · 仅页面级使用 ───────────── */ --bg-glow-tr: radial-gradient(1100px 700px at 88% -8%, rgba(182,129,55,.09), transparent 55%); --bg-glow-bl: radial-gradient(900px 600px at -5% 108%, rgba(178,82,50,.05), transparent 55%); --bg-grain: radial-gradient(rgba(35,29,20,.035) 1px, transparent 1px); /* size 3px 3px · opacity .35 · multiply */ /* ─── 12. SPACING · 间距阶梯 ───────────────────────────────── 频次依据：2026-04-25 扫描 v8 + xuanti-v2 真实使用值。 11 档全覆盖（含极小 2 px 用于 hairline 调和）。 使用规则：嵌套从外到内递降 — 主面板 22 → 主卡 16 → 内 padding 14 → gap 10/12 → 子项 6/8 → 元素 gap 4 */ --sp-2: 2px; /* hairline 调和 · 内点位置 */ --sp-4: 4px; /* 元素 gap · icon 内距 */ --sp-6: 6px; /* 小 gap · pill 上下 padding */ --sp-8: 8px; /* 小卡 padding · 子项 gap */ --sp-10: 10px; /* 🔒 主消息 gap · pill 左右 padding · 卡间 gap 基线 */ --sp-12: 12px; /* 🔒 栏间 gap · 卡片次级 padding */ --sp-14: 14px; /* 🔒 主卡 padding 基线（hd / body）*/ --sp-16: 16px; /* L1 内壁 · 主面板内 padding */ --sp-18: 18px; /* 大卡 padding · today-card / quote-card */ --sp-20: 20px; /* AI 桌外 padding · 用户卡内边 */ --sp-22: 22px; /* 🔒 主卡左右 padding · ws-card / ai-card 横向基线 */ /* ─── 13. MOTION · 动效时长（频次扫描定档）────────────────── 频次依据：v8 / xuanti-v2 用 .12s 22 处 / .14s 5 处 / .15s 2 处。 收敛为三档，覆盖所有交互节奏。 */ --mo-fast: .12s; /* 🔒 hover 颜色 / 边色变化（最高频）*/ --mo-base: .14s; /* CTA hover 上浮 · transform · 复合属性 */ --mo-slow: .25s; /* 主题切换 · 大区域过渡（页面级 fade）*/ /* 缓动（cubic-bezier）只用一档：默认 ease 已够用，特殊场景用 cubic */ --mo-ease: cubic-bezier(.22, .68, 0, 1); /* 主进出动画 */ --mo-ease-spring: cubic-bezier(.4, 1.4, .5, 1); /* 极少用 · 弹性微动 */ /* ─── 14. Z-INDEX · 层级 ───────────────────────────────────── 约定层级 · 不允许写裸数字（如 z-index: 999） */ --z-base: 1; /* 普通内容层 */ --z-card: 2; /* 卡片 hover 浮起 */ --z-sticky: 10; /* 顶栏 sticky · workflow step pill */ --z-overlay: 100; /* 抽屉 / 半屏遮罩 */ --z-modal: 200; /* 模态对话框 */ --z-toast: 300; /* toast 通知 */ --z-tooltip: 400; /* 最高 · tooltip / 实时光标提示 */ } /* ═══════════════════════════════════════════════════════════════ 12. RESET · 全局基础 ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--ff-sans); background: var(--paper); color: var(--ink-2); font-size: 13.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button { font-family: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; } svg { display: block; } ::selection { background: rgba(182,129,55,.22); color: var(--ink-1); } /* ═══════════════════════════════════════════════════════════════ 13. PAGE ATMOSPHERE · 暖色光晕 + 极轻纸纹（页面级 · 可选用） ═══════════════════════════════════════════════════════════════ */ .clay-atmosphere::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--bg-glow-tr), var(--bg-glow-bl); } .clay-atmosphere::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35; background-image: var(--bg-grain); background-size: 3px 3px; mix-blend-mode: multiply; } /* ═══════════════════════════════════════════════════════════════ 14. FOCUS RING ═══════════════════════════════════════════════════════════════ */ :focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; border-radius: 4px; } /* ═══════════════════════════════════════════════════════════════ 15. KEYFRAMES · 动画 ═══════════════════════════════════════════════════════════════ */ @keyframes pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }