/* ============================================================================= StepAudio-3-Music · Design Tokens v0.1 · research draft · 2026-08-22 ----------------------------------------------------------------------------- 设计主题：Paper & Ink & One Bronze Note 界面自身几乎不带颜色；颜色几乎全部来自作品封面。 这份文件可以直接 lift 成 assets/css/tokens.css，不需要改动。 详细论证见 01-design-direction.md ============================================================================= */ :root { /* =========================================================================== 1 · 色彩 COLOR =========================================================================== */ /* -- 1.1 中性：纸与墨 -------------------------------------------------------- Apple 浅色界面的核心不是"纯白"，而是「灰色场 + 白色卡片」的两层关系。 卡片比底色更亮，靠亮度而非描边浮起来。 */ --paper: #FFFFFF; /* 卡片 / 浮层 / 输入框：比底色更亮 */ --field: #F2F2F0; /* 页面底色，"画廊墙"中性灰（带一丝暖） */ --field-sunk: #EAEAE7; /* 内凹面：进度槽 / textarea well / 未填充轨道 */ --field-hover: #ECECE9; /* 中性面 hover */ --ink: #14161A; /* 主文字；同时是主 CTA 的底色 16.2:1 */ --ink-2: #5B6068; /* 次级文字 / 正文说明 5.7:1 */ --ink-3: #676C74; /* 元信息 / 风格标签 / 时间码 4.7:1 ✓AA */ --ink-soft: #8E939B; /* 仅装饰：非文字的浅色描边、水印 2.8:1 ✗ */ --ink-4: #9AA0A7; /* placeholder / 禁用（AA 豁免） 2.4:1 */ --ink-on-dark: #FAFAF9; /* 深色底上的文字（黑 CTA 内、封面遮罩上） */ --rule: #E3E3E0; /* 1px 分隔线（默认） */ --rule-strong: #D2D2CE; /* 1px 分隔线（需要更明确时） */ /* -- 1.2 品牌单色调 Bronze -------------------------------------------------- 全站唯一的"固有"彩色。选它不是因为好看，而是因为它是这个题材的材质： 唱臂、镲片、铜管、缠弦、拾音器底座都是青铜/黄铜色。 --bronze 已压暗到可以承载小字（on --field ≈ 4.8:1，过 WCAG AA）。 --bronze-lift 只用于装饰性高光，绝不用于文字。 */ --bronze: #8A6428; --bronze-lift: #C9A468; --bronze-wash: rgba(138, 100, 40, .10); --bronze-line: rgba(138, 100, 40, .28); /* -- 1.3 作品取色 Artwork-derived ------------------------------------------- 运行时从"当前播放"封面提取主色后注入，驱动进度条填充、播放指示、 播放器周围的环境光晕。未播放时退回中性灰 —— 界面静默，音乐才上色。 取色必须做合法性钳制（L 40–62%，C ≤ .15），见 03-player-spec.md §6。 */ --art: #6B6F76; --art-wash: rgba(107, 111, 118, .14); --art-glow: rgba(107, 111, 118, .22); /* -- 1.4 语义色（均已压到 on --field ≥ 4.5:1） ---------------------------- */ --ok: #1A7351; --ok-wash: rgba(26, 115, 81, .10); --warn: #8A5F0F; --warn-wash: rgba(138, 95, 15, .10); --err: #B3261E; --err-wash: rgba(179, 38, 30, .09); /* -- 1.5 玻璃与遮罩（浮动播放器、展开面板背后的虚化） ---------------------- */ /* .72 在彩色封面网格上方不够遮 —— 波形和歌名会被封面透上来的颜色干扰。 .88 仍然明显是玻璃（能看出背后有内容在动），但文字重新变清楚。 */ --glass-bg: rgba(255, 255, 255, .88); --glass-blur: blur(28px) saturate(1.7); --glass-border: rgba(20, 22, 26, .07); --scrim: rgba(28, 28, 30, .28); /* 展开播放面板背后的压暗层 */ --scrim-blur: blur(20px) saturate(1.1); /* -- 1.6 波形条 ------------------------------------------------------------ 未播放部分**不能**用 --field-sunk：播放胶囊是半透明玻璃 + 白底， #EAEAE7 在上面几乎不可见（实测踩过）。用带 alpha 的墨色。 */ --pk-off: rgba(20, 22, 26, .22); --pk-on: var(--art); /* -- 1.7 黑胶材质（唱片本体，见 03-player-spec.md §2） --------------------- */ --vinyl-base: #14151A; --vinyl-groove: #1E2027; --vinyl-edge: #0B0C0F; /* =========================================================================== 2 · 阴影 / 层次 ELEVATION Apple 的阴影特征：大半径、极低不透明度、几乎无位移，并叠一条 1px 内描边。 永远不要用深色重投影 —— 那是"廉价感"最主要的来源之一。 =========================================================================== */ --sh-1: 0 1px 2px rgba(20,22,26,.04), 0 0 0 1px rgba(20,22,26,.05); --sh-2: 0 4px 12px rgba(20,22,26,.06), 0 0 0 1px rgba(20,22,26,.05); --sh-3: 0 12px 32px rgba(20,22,26,.09), 0 2px 6px rgba(20,22,26,.05); --sh-4: 0 28px 70px rgba(20,22,26,.14), 0 4px 12px rgba(20,22,26,.06); /* 封面图专用：图片本身已有内容，只需要一条极轻的坐落感 */ --sh-art: 0 6px 18px rgba(20,22,26,.10), 0 1px 3px rgba(20,22,26,.06); /* =========================================================================== 3 · 圆角 RADIUS 成体系而不是随手取值：小元件 8，封面 12，输入 16，面板 20/24，大浮层 28。 =========================================================================== */ --r-xs: 6px; /* 标签内的小色块 */ --r-sm: 8px; /* chip / tag / 小按钮 */ --r-md: 12px; /* 封面图 / 卡片 */ --r-lg: 16px; /* 输入框 / dropzone */ --r-xl: 20px; /* 面板 / 侧栏卡片 */ --r-2xl: 24px; /* 首页 prompt 框 */ --r-3xl: 28px; /* 展开播放面板 */ --r-pill: 999px; /* =========================================================================== 4 · 间距 SPACING — 4px 基准网格 =========================================================================== */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 56px; --s14: 72px; --s16: 96px; /* =========================================================================== 5 · 版式 TYPOGRAPHY ------------------------------------------------------------------------- 拉丁：Instrument Sans（OFL）—— 不是 Inter。开口更紧、切角更利， 在小字号下比 Inter 更有性格，又不牺牲可读性。 花体：Instrument Serif Italic —— 同一设计师的配套家族。 全站规则：每个页面最多出现一次，只用于一个词。这是唯一的"放纵"。 中文：走系统栈（PingFang SC 就是 Apple 观感本身），不下发 CJK Webfont。 如需 Windows/Android 观感对齐，再补 MiSans VF 子集，见 05-tech-plan。 数字：不用等宽字体做时间码 —— 用 tabular-nums，视觉上高级得多。 等宽：仅用于技术表面（task_id、JSON、curl 片段）。 =========================================================================== */ --font-en: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-cn: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --font-sans: var(--font-en), var(--font-cn); --font-flourish: "Instrument Serif", "Songti SC", Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* 字号阶梯：相邻级差 ≈ 1.2–1.25，display 用 clamp 做流式 */ --fs-display: clamp(40px, 5.2vw, 68px); --fs-h1: 32px; --fs-h2: 22px; --fs-h3: 17px; --fs-lead: 17px; --fs-body: 15px; --fs-ui: 14px; --fs-meta: 13px; --fs-micro: 12px; --fs-eyebrow: 11px; --lh-tight: 1.05; /* display */ --lh-snug: 1.25; /* 标题 */ --lh-normal: 1.55; /* 正文 */ --lh-loose: 1.85; /* 歌词 */ /* 字距：字号越大收得越紧，这是"高级感"最省力的一招 */ --tr-display: -.032em; --tr-h1: -.022em; --tr-h2: -.015em; --tr-body: -.006em; --tr-eyebrow: .14em; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* =========================================================================== 6 · 动效 MOTION ------------------------------------------------------------------------- 一条 ease 曲线贯穿全站（--ease）。它是"快出慢入"的减速曲线， Apple 观感的一半来自这条曲线，另一半来自"不要动太多东西"。 =========================================================================== */ --ease: cubic-bezier(.22, 1, .36, 1); /* 默认：入场 / 展开 */ --ease-inout: cubic-bezier(.65, 0, .35, 1); /* 双向：折叠 / 切页 */ --ease-exit: cubic-bezier(.4, 0, 1, 1); /* 退场 */ --d-micro: 120ms; /* hover / 按下 */ --d-fast: 180ms; --d-base: 240ms; /* 淡入淡出 / 位移 */ --d-panel: 420ms; /* 播放条 → 展开面板 的形变 */ --d-cue: 700ms; /* 唱臂落针 */ --d-hero: 900ms; /* 首屏入场编排 */ /* 真实 33⅓ 转/分 是 1.8s/圈，但在屏幕上这个速度偏急躁 —— 放慢到 4.5s/圈，观感更稳，也不会和沟槽产生明显的频闪。 */ --spin-period: 4.5s; /* =========================================================================== 7 · 布局尺寸 LAYOUT =========================================================================== */ --nav-w: 210px; /* 侧栏展开 */ --nav-w-mini: 68px; /* 侧栏收起 */ --content-max: 1240px; --gutter: 40px; --player-h: 76px; /* 浮动播放条高度 */ --player-inset: 20px; /* 浮动播放条与视口边缘的距离 */ /* =========================================================================== 8 · 层级 Z-INDEX — 集中声明，避免后期出现 z-index: 9999 =========================================================================== */ --z-content: 1; --z-sticky: 10; /* 分区吸顶标题 */ --z-nav: 20; --z-player: 30; /* 浮动播放条 */ --z-scrim: 40; /* 展开面板的虚化背景 */ --z-panel: 50; /* 展开播放面板 */ --z-notes: 60; /* 音符粒子画布（pointer-events:none） */ --z-toast: 70; --z-modal: 80; } /* ============================================================================= 9 · 无障碍与降级 —— 质量地板，不声张但必须有 ============================================================================= */ /* 键盘焦点：用墨色而不是品牌色，2px 实线 + 2px 偏移，任何底色上都清楚 */ :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-sm); } /* 尊重"减少动态效果"：停掉转盘、粒子、入场编排；保留状态变化的即时反馈 */ @media (prefers-reduced-motion: reduce) { :root { --d-micro: 1ms; --d-fast: 1ms; --d-base: 1ms; --d-panel: 1ms; --d-cue: 1ms; --d-hero: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* 高对比度偏好：加深次级文字与分隔线 */ @media (prefers-contrast: more) { :root { --ink-2: #3C4046; --ink-3: #4E535A; --rule: #C9C9C5; } } /* ============================================================================= 10 · 附录：对比度实测（WCAG 2.1 相对亮度公式，2026-08-22 实算） ----------------------------------------------------------------------------- token hex on #F2F2F0 on #FFF 正文 AA(4.5:1) ink #14161A 16.16 18.11 PASS ink-2 #5B6068 5.65 6.33 PASS ink-3 #676C74 4.71 5.28 PASS ink-soft #8E939B 2.76 3.09 仅装饰，不承载文字 ink-4 #9AA0A7 2.35 2.64 placeholder/禁用（豁免） bronze #8A6428 4.76 5.34 PASS bronze-lift #C9A468 2.08 2.33 仅装饰，不承载文字 ok #1A7351 5.18 5.81 PASS warn #8A5F0F 5.03 5.64 PASS err #B3261E 5.83 6.54 PASS ink-on-dark #FAFAF9 on ink #14161A = 17.34 PASS 提示：--art（封面取色）是运行时值，无法静态校验 —— 因此取色算法必须做亮度钳制，见 03-player-spec.md §6。 --art 只用于填充/光晕等非文字用途，任何时候都不要拿它写字。 ============================================================================= */