hikerpig zupulse Design Skill
使用这个主题资料库辅助设计 Zupulse Digital Music Practice Workspace。先读项目根
DESIGN.md 确认当前产品契约；只有修改主题、token 或基础组件时，再用 css.json
理解品牌原语。应用运行时只消费 packages/web-viewer/src/styles/tokens.css，不得直接导入
本目录的 colors_and_type.css。
Quick map
css.json— 结构化 token 理解源。colors_and_type.css— 主题 CSS 投影，不是产品运行时入口。runtime-token-map.json— 已正式采用的主题原语到运行时语义 token 映射。specs/reference-braun.png— Braun-like order 参考。specs/reference-teenage-engineering.png— Teenage Engineering color rhythm 参考。library-consumption.json— 推荐读取顺序。
Essentials at a glance
- 主色是
#f26b4f，珊瑚色动作信号；保持 future-facing、restrained、precise，不要改成冷蓝或渐变主视觉。 - 基础中性色从
#f0ede8到#181818；默认背景#f0ede8，前景#181818，表面#f5f2ed，形成 warm-industrial 的灰暖白哑光与炭灰结构块。 - 字体以
Space Grotesk为 display、heading、body；IBM Plex Mono只给 mono、数字、节拍与参数读数。 - 字号层级固定为
56/40/32/24/20/18/16/12/11/14px，对应 display、h1、h2、h3、h4、lead、body、caption、eyebrow、mono。 - 间距以
4px为基准，token 仅用4/8/12/16/24/32/48/64px；默认导航高72px，侧栏宽88px，内容最大宽1440px。 - 控件高度优先
36/40/44/48px；默认中号按钮高44px，输入框高40px，适合精确、数据化操作。 - 圆角使用
6/10/14/20/9999px；小控件偏硬朗，卡片与面板更柔和，但仍保持 restrained，而不是圆润消费感。 - 阴影是低金属、低对比的 5 层体系：从
0 1px 2px rgba(24,24,24,0.06)到0 30px 72px -24px rgba(24,24,24,0.28)，静态轻、浮层重。 - 深色模式把主色切到
--zupulse-primary-400，背景切到#1a1a1a，表面#272727，保留珊瑚色节奏与精密软件气质。 - 语气与文案参考
播放 / 循环 / 轨道 / 速度 / 打开乐谱：简短、功能导向、无修饰、无 emoji。