色彩系统

双层架构 · 梯度色板（原始）→ 语义色板（应用）

21 个色彩家族 亮色 / 暗色双模式 50+ 语义变量
架构层级
Layer 1 · palette.css
梯度色板 · 21 色系 × 10 阶
→
Layer 2 · semantic.css
语义色板 · 亮色 / 暗色
→
组件 / 页面
使用 --color-* 变量
语义色板 Layer 2 各分组内为「亮色 / 暗色」语境；浅色 / 深色 App 背景上对照同一 token · 与 Figma 导出对应 · 每行右侧为读取 tokens/semantic.css 得到的引用链，直至 --palette-*
Brand 品牌
Text 文字色
Button 按钮
Bg 背景
Card 卡片
中性色
分割线 Divider
功能色 · 进度 Progress
功能色 · 状态
遮罩 Overlay
透明色 Black
透明色 White
专项 · 阅读
专项 · 听力
专项 · 写作
专项 · 口语
专项 · 综合
热力值
专项色 五大学习模块标识
阅读
听力
写作
口语
综合
热力值色阶 学习数据热力图
热力-1
热力-2
热力-3
热力-4
热力-5
热力-6
热力-7
梯度色板 Layer 1 来源 梯度色板.tokens.json · 21 色系 × 10 阶（light/dark）
Alpha · 透明色（light 白底 / dark 黑底）
00
0%
50
8%
100
12%
200
18%
300
26%
400
36%
500
48%
600
60%
700
70%
900
100%
Gray · 灰色
50
#FCFCFC
100
#F4F4F5
200
#E1E1E2
300
#D0D0D4
400
#A1A1AA
500
#7A7A83
600
#52525B
700
#3F3F46
800
#27272A
900
#1D1D20
Bronze · 暖棕色（主色调基底）
50
#FAFAF9
100
#F5F5F4
200
#E7E5E4
300
#D6D3D1
400
#A8A29F
500
#78726D
600
#56524E
700
#44403C
800
#292524
900
#1C1A17
Orange · 橙色（品牌色系）
50
#FFF6EB
100
#FFEDD6
200
#FED6A9
300
#FDBA72
400
#FB923C
Brand
#FF6E39
600
#E4570C
700
#B63C0B
800
#80310F
900
#471A0A
Blue · 蓝色
50
#F2F7FF
100
#DCEBFE
200
#BEDBFE
300
#91C3FD
400
#61A6FA
500
#3479E9
600
#1559EA
700
#173FAB
800
#162F82
900
#0C1736
Blue Gray · 蓝灰色
50
#F8FAFC
100
#F1F5F9
200
#E1E7EF
300
#C8D6E5
400
#9EACC0
500
#65758B
600
#48566A
700
#344256
800
#1D283A
900
#0F1729
Red · 红色
50
#FEF1F1
100
#FFDCDC
200
#FFC9C9
300
#FFA0A0
400
#FF6565
500
#EF4343
600
#DC2828
700
#B11B1B
800
#821717
900
#531313
Green · 绿色
50
#F2FDF5
100
#DEFCE9
200
#BBF7D0
300
#61EA94
400
#30D96E
500
#18B451
600
#149041
700
#137236
800
#196636
900
#0E3F22
Yellow · 黄色
50
#FEFCE7
100
#FEF9C3
200
#FEF08B
300
#FFE561
400
#FAC905
500
#D9A508
600
#BC7C10
700
#935806
800
#73430C
900
#4F2B0C
Purple · 紫色
50
#FAF5FF
100
#F2E5FF
200
#EAD6FF
300
#D3A9FE
400
#B774FC
500
#A046F6
600
#8318E7
700
#7620C1
800
#5F1E95
900
#381254
Pink · 粉色
50
#FDF2F8
100
#FCE8F4
200
#FBD0E8
300
#F9A9D5
400
#F471B5
500
#EC4B9C
600
#DA2576
700
#9F144D
800
#660F32
900
#520F2A
Cyan · 青色
50
#EBFEFF
100
#A5F6FD
200
#6BEBFA
300
#2CDFF7
400
#10B7D1
500
#058EA3
600
#066B84
700
#094F62
800
#0C3845
900
#0B2832
Teal · 蓝绿色
50
#E7FFF8
100
#CBFBF0
200
#A0FBE8
300
#5DEAD5
400
#2BD4BD
500
#14B8A5
600
#0C887E
700
#0E6C65
800
#0C4542
900
#0C312F
Lime · 黄绿色
50
#F7FEE7
100
#E9FCC5
200
#D5F895
300
#BAF15B
400
#91D624
500
#74B710
600
#5B930B
700
#365908
800
#24380A
900
#182509
Sky · 天蓝色
50
#F0F9FF
100
#DCF1FE
200
#ABDFFD
300
#6ECFFC
400
#2BBAF7
500
#0F9EE1
600
#027AB6
700
#02527D
800
#053A57
900
#062537
Emerald · 翠绿色
50
#F0FDF7
100
#C8F9E0
200
#A2FBD2
300
#6EE7B7
400
#36D399
500
#10B77F
600
#047B56
700
#036348
800
#054835
900
#042F24
Fuchsia · 紫红色
50
#FDF5FF
100
#F9E5FF
200
#F3C8FE
300
#ED9DFB
400
#E66DF8
500
#D73FEE
600
#B725CA
700
#8B1995
800
#611268
900
#400F43
Indigo · 靛蓝色
50
#F3F6FF
100
#E0E8FF
200
#C8D3FE
300
#AAB8FF
400
#8C96FC
500
#6B6EF8
600
#5048E5
700
#3A2FB2
800
#26206F
900
#17163C
Violet · 紫罗兰色
50
#F7F6FF
100
#E2DDFE
200
#DAD2FE
300
#B7A6FD
400
#9876F9
500
#8E4DFF
600
#7127F1
700
#6022C3
800
#36146C
900
#230D44
Rose · 玫瑰色
50
#FFF0F1
100
#FFE5E7
200
#FEC3CA
300
#FD9BA6
400
#FB657C
500
#F33454
600
#CB1A41
700
#950E30
800
#650B24
900
#500B20
Metal · 金属灰
50
#F4F9FA
100
#F0F2F4
200
#DFE2E7
300
#C6CBD2
400
#929AAA
500
#696F7D
600
#3D444D
700
#2B3340
800
#202A36
900
#151B28

阴影 Elevation

E100–E500 五档层级 · 随主题亮/暗自动切换 · 用于卡片、浮层、弹窗

Foundation Figma Elevation 亮/暗双模式
Aboat Elevation（E100–E500） 当前主题下的阴影效果（切换顶栏亮/暗可对比）
E 100 E 200 E 300 E 400 E 500
Aboat 软阴影（1–6） Figma 取出的 6 档软阴影，L4 为根据 L3/L6 插值
1 2 3 4 5 6

与仓库内 tokens/shadows.css 中 Aboat 软阴影段落一致；可整块粘贴到你的样式表（例如包在 :root 中或按需调整选择器）。

Token 与用法
E 100
--shadow-elevation-100
卡片、轻浮层
E 200
--shadow-elevation-200
悬停、下拉
E 300
--shadow-elevation-300
Tooltip
E 400
--shadow-elevation-400
菜单、浮层面板
E 500
--shadow-elevation-500
Modal、弹窗

引入 tokens/index.css（已含 tokens/shadows.css）后，使用 box-shadow: var(--shadow-elevation-100) 至 --shadow-elevation-500。

Aboat 软阴影：--shadow-aboat-soft-1 … --shadow-aboat-soft-6（L4 为插值）

字体样式

默认字体 MiSans VF · 来源 Figma Text Styles（Large Title → Caption2）

紧凑视口（max-width ≤1512px，或高度 ≤900px 且宽度 ≥640px）下，typography-responsive.css 将各级 --text-* 字号与行高等效降一档；Caption 维持 10px / 13px。

Foundation MiSans Figma Text Styles
展示 与 Figma 字体样式库一致，含各粗细变体（Regular / Medium / Semibold / Bold / Heavy / Demibold）
Large Title
Regular
小船设计系统 Large Title
Semibold
小船设计系统 Large Title
--text-large-title-* · 26px / 32px · Regular | Semibold
Title 1
Regular
标题一 Title1
Semibold
标题一 Title1
--text-title1-* · 22px / 26px · Regular | Semibold
Title 2
Regular
标题二 Title2
Medium
标题二 Title2
Semibold
标题二 Title2
--text-title2-* · 17px / 26px · Regular | Medium | Semibold
Title 3
Regular
标题三 Title3
Semibold
标题三 Title3
Bold
标题三 Title3
--text-title3-* · 15px / 26px · Regular | Semibold | Bold
Headline
Regular
Headline 小标题
Semibold
Headline 小标题
Heavy
Headline 小标题
--text-headline-* · 13px / 16px · Regular | Semibold | Heavy
Body
Regular
正文 Body 用于段落与列表。
Semibold
正文 Body 用于段落与列表。
--text-body-* · 13px / 20px · Regular | Semibold
Callout
Regular
Callout 说明性短文案
Medium
Callout 说明性短文案
Semibold
Callout 说明性短文案
--text-callout-* · 12px / 18px · Regular | Medium | Semibold
Subheadline
Regular
Subheadline 副标题
Semibold
Subheadline 副标题
--text-subheadline-* · 11px / 16px · Regular | Semibold
Footnote
Regular
Footnote 脚注
Semibold
Footnote 脚注
--text-footnote-* · 10px / 15px · Regular | Semibold
Caption 1 / 2
Regular
Caption1 与 Caption2 小字说明
Demibold
Caption1 与 Caption2 小字说明
--text-caption1-* · 10px / 13px · Regular | Demibold
字重规范

与 Figma 映射一致，使用 --font-weight-* 或各样式的 --text-*-weight-*。

Regular
--font-weight-regular
400
Medium
--font-weight-medium
500
Semibold / Demibold
--font-weight-semibold
600
Bold
--font-weight-bold
700
Heavy
--font-weight-heavy
800
默认字体与用法
默认字体栈
--font-family-sans
MiSans, PingFang SC, sans-serif
字体文件
assets/fonts/MiSans-VF.ttf
Variable Font
Token 文件
tokens/typography.css
@font-face + --text-* + 字重变体
紧凑视口
tokens/typography-responsive.css
由 index.css 引入；断点内整档降一级

引入 tokens/index.css 后，页面默认使用 font-family: var(--font-family-sans)。标题/正文使用 font-size: var(--text-body-size); line-height: var(--text-body-line-height) 等 Token；粗细使用 font-weight: var(--text-title3-weight-semibold) 等。

Logo 品牌标识

小船品牌 Logo · 随主题亮/暗色自动适配文字色

Brand SVG 内联 --color-text-2
展示 亮色 / 暗色下文字使用 --color-text-2
亮色底 · 默认
小船 Logo 图标
Logo 图标 · 仅图形
小船 Logo 横版
Frame 18 · 横版
小船 Logo 横版带副标
Frame 26 · 横版带副标
小船 Logo 竖版
Frame 17 · 竖版
规格与用法
默认高度
26px
viewBox
0 0 210 32
图标色
#FF6E39
文字色
var(--color-text-2)
类名
.brand-logo
尺寸变体
--lg 32px / --sm 20px

引入 components/brand/logo.css 后，使用 class brand-logo，内层文字用 brand-logo__text 即可随主题切换颜色。

Button 按钮

7 种变体 · 4 种交互状态 · 支持图标 · 亮色/暗色自适应

7 种变体 Hover / Click / Disabled 暗色模式
规格参数
高度
44px
内边距
8px 24px
圆角
8px
字体样式
Title3 / Regular
与「字体」面板 .type-sample.type-title3 同源 · --text-title3-*
字号 / 行高
15px / 26px
--text-title3-size · --text-title3-line-height
图标间距
gap 4px
图标 20×20px
可交互演示 真实 hover / click 效果
<button class="btn btn-primary">主按钮</button> <button class="btn btn-brand">品牌橙</button> <button class="btn btn-secondary">辅按钮</button> <button class="btn btn-cancel">取消</button> <button class="btn btn-outline">描边</button> <!-- 描边+图标（Figma 14987:13842）--> <button class="btn btn-outline"><span class="btn-icon">✓</span>文字</button> <button class="btn btn-ghost">轻量</button> <!-- 仅图标 44×44：btn-ghost btn-square --> <button class="btn btn-ghost btn-square" aria-label="上一月"><span class="btn-icon">←</span></button> <button class="btn btn-danger">警告</button> <button class="btn btn-loading"><span class="btn-spinner"></span></button> <!-- disabled --> <button class="btn btn-primary" disabled>不可点</button>
主按钮 · btn-primary
Default
Hover
Click / Active
Disabled
默认
默认
Hover
Click
Disabled
带图标
主按钮（橙）· btn-brand
Default
Hover
Click / Active
Disabled
品牌橙
默认
Hover
Click
Disabled
辅按钮 · btn-secondary
Default
Hover
Click / Active
Disabled
辅按钮
默认
Hover
Click
Disabled
轻量按钮 · btn-ghost

浅底灰字，hover/click 叠加深色遮罩，按压 scale(0.96)。用于日历「上一月/今天/下一月」、编辑任务等。

Default
Hover
Click / Active
Disabled
文案
默认
Hover
Click
Disabled
仅图标 44×44
默认
Hover
Click
Disabled
纯图标按钮 · btn-icon-ghost

32×32、圆角 8px；默认透明底，hover/active 在圆角方形内用 ::after 叠层，颜色见 --color-icon-button-hover-bg / --color-icon-button-pressed-bg。与 .btn 勿混用（高度冲突）。弹窗关闭加 modal-standard-header__close。

Default
Hover
Click / Active
Focus
关闭 ×
默认
Hover
Click
Focus
次按钮 · btn-cancel    描边按钮 · btn-outline
Default
Hover
Click / Active
Disabled
次按钮
默认
Hover
Click
Disabled
描边按钮
默认
Hover
Click
Disabled
警告按钮 · btn-danger    加载 · btn-loading
Default
Hover
Click / Active
Disabled
警告按钮
默认
Hover
Click
Disabled
加载中
Loading 态自动 disabled，spinner 持续转动
色彩变量映射
主按钮背景--color-btn-base#27272A
品牌橙--color-brand#FF6E39
辅按钮背景--color-btn-secondary#A8A29F
次按钮背景--color-btn-cancel#FFFFFF
描边按钮背景--color-btn-outline#FAFAF9
描边颜色--color-btn-outline-border#E7E5E4
警告背景--color-btn-danger#FEF1F1
警告文字--color-btn-danger-text#FF6565
Disabled 背景--color-btn-disabledrgba(26,26,26,.12)
纯图标按钮 hover 底--color-icon-button-hover-bg→neutral-2
纯图标按钮按下底--color-icon-button-pressed-bg→neutral-3

Modal 弹窗标题

小船标准弹窗顶栏 · 与弹窗容器圆角衔接 · Figma 23193:48757 · 关闭图标 23190:42269

Title1 / Semibold text-3 标题色 16px 关闭图标
规格参数
栏最小高度
64px
内边距
18px 24px
与稿一致 py / px
底部分割
1px
--color-neutral-3
标题样式
Title1
--text-title1-* · --color-text-3
关闭热区
32×32
btn-icon-ghost + 圆角 8px · hover 用 --color-icon-button-*
背景
--color-bg-app
与弹窗底色一致
演示 置于圆角容器顶部，模拟真实弹窗

学习统计

弹窗正文区域占位（实际页面使用 .stats-modal__body 等）
<!-- 引入 components/modal-header.css --> <header class="modal-standard-header"> <h1 class="modal-standard-header__title" id="…">学习统计</h1> <button type="button" class="btn-icon-ghost modal-standard-header__close" aria-label="关闭"> <svg class="modal-standard-header__close-icon" viewBox="0 0 24 24" …>…</svg> </button> </header>

Range segment 时间范围

互斥分段 Tab · 用于统计/筛选等「近两周 / 近一个月 / … / 自定义」场景；未选中约 36px 高 · Headline（--text-headline-*）· 默认 1px --color-btn-outline-border（若写成 transparent 会看不见）；hover 加深为 --color-neutral-3；选中 .is-active 为 2px --color-progress-alpha-2 · 学习页见 learn.html

Headline 字号 8px 圆角 未选中 1px
规格参数
容器类名
.range-segment
可选 .range-segment--grid-5 固定 5 列等宽
选项按钮
.range-segment__btn
选中加 .is-active
带箭头「自定义」
.range-segment__btn--picker
与 .range-segment__btn 同用；内嵌 chevron SVG
弹窗窄槽
.stats-modal__range-slot
父级包一层即可 5 列铺满，无需 --grid-5
样式文件
components/range-segment.css
字体样式
Headline / Regular
与「字体」面板 .type-sample.type-headline 同源 · --text-headline-size · --text-headline-line-height · --text-headline-weight
演示 通栏 flex 换行；下方为 5 列网格（与统计弹窗槽位一致）

通栏（默认 .range-segment）

5 列等宽（.range-segment.range-segment--grid-5）

<!-- 引入 components/range-segment.css --> <div class="range-segment" role="tablist" aria-label="统计时间范围"> <button type="button" class="range-segment__btn is-active" …>近两周</button> … <button type="button" class="range-segment__btn range-segment__btn--picker" …>自定义<svg>…</svg></button> </div>

表单 · Input / Radio

单行文本输入 .aboat-input 与单选图标 .aboat-radio；学习页设置弹窗、用户名编辑等已复用。

44px 高 Title3 20×20 单选
Input 规格
类名
.aboat-input
用于 type="text" 等单行输入
高度 / 圆角
44px · 8px
边框 --color-neutral-5；聚焦 --color-progress-3 + 环 --color-progress-alpha-2
样式文件
components/input.css
Input 演示 占位符与聚焦环与设置页一致
<!-- 引入 components/input.css --> <input type="text" class="aboat-input" placeholder="请输入新用户名" maxlength="30" autocomplete="off" spellcheck="false" />
Radio 规格
容器
.aboat-radio
内叠两张 img.aboat-radio__state，选中态由父级 .is-selected 控制透明度过渡
资源
radio-*.svg
路径 assets/components/
样式文件
components/radio.css
与 .settings-radio-card / .settings-time-card 联用
Radio 演示 点击切换选中；图标交叉淡入淡出
<!-- 引入 components/radio.css --> <span class="aboat-radio" aria-hidden="true"> <img class="aboat-radio__state aboat-radio__state--unchecked" src="./assets/components/radio-unchecked.svg" … /> <img class="aboat-radio__state aboat-radio__state--checked" src="./assets/components/radio-checked.svg" … /> </span>

动效 Motion

当前产品内已落地的过渡与动画汇总 · Token 见 tokens/motion.css（由 tokens/index.css 引入）

Foundation prefers-reduced-motion
无障碍 凡有明显动效处，应对 prefers-reduced-motion: reduce 降级（缩短时长、去掉位移动画或改为淡入）

学习页统计弹窗、图表、老虎机等已在 learn.html 内做降级处理。

全局 Token（motion.css）
主缓动
--motion-ease-out-soft
cubic-bezier(0.22, 1, 0.36, 1)
折线绘制
--motion-ease-line-draw
cubic-bezier(0.33, 1, 0.68, 1)
入场位移（小）
--motion-distance-entrance-sm
14px · 与统计弹窗图表/卡片一致
时长阶梯
--motion-duration-xs … 3xl
0.12s～0.85s 及图表专用 1.08s / 1.18s
悬停预览 指针移入整张卡片即可重播动效；离开卡片后恢复初始帧，便于反复对比

Hero 上移淡入

首页主标题/按钮同款：opacity + translateY，约 0.75～0.85s，缓动 --motion-ease-out-soft。

home.html · heroFadeUp

滚动 Reveal

进入视区后自下浮入：较大位移 + 淡入，约 0.75s，用于区块/大卡片。

home.html · .reveal

图片加载淡入

仅透明度 0→1，约 --motion-duration-lg（0.45s），避免抢内容动效。

home.html · img.img-loaded

按钮 Hover

微上浮 + 阴影略增强，模拟主按钮可点反馈（时长约 0.35s）。

components/button.css

加载旋转

悬停时无限旋转，周期 0.8s linear，用于 Loading 状态。

components/button.css · btn-spin

浮层弹入

缩小 + 下移 + 淡入，约 0.34s，接近统计弹窗内日期 Popover。

learn.html · stats-range-custom-popover-in

图表区入场

与产品一致：上移 --motion-distance-entrance-sm + 0.52s 淡入。

learn.html · stats-total-chart--entered

柱图错开

多根柱依次 opacity 拉起，每根约 0.05s 阶梯延迟。

learn.html · 柱图入场

折线描边

stroke-dashoffset 拉线，缓动 --motion-ease-line-draw，时长接近图表折线。

learn.html · playStatsChartEnterAnimation

图表 Tooltip

相对圆点固定在上方或下方，仅透明度 0→1（约 0.2s），无位移动画。

learn.html · stats-chart-tooltip

按场景归纳（实现位置）
场景 效果摘要 参考
首页 Hero标题/按钮 heroFadeUp 约 0.85s；截图区 slideUpCenter 1s；功能卡 screenshotSlideUp 约 0.95s；均用 cubic-bezier(0.22, 1, 0.36, 1)home.html
滚动出场.reveal / .reveal-card：opacity + translateY，0.75s / 0.55shome.html
图片加载img 默认 opacity 0 → .img-loaded 淡入 0.45shome.html
弹性滚动WebKit 惯性 + overscroll-behavior，非 CSS 关键帧components/scroll-elastic.css
按钮Hover 微位移 / 阴影 0.1～0.15s；加载圈 btn-spin 0.8s linear infinitecomponents/button.css
全屏加载整屏 --color-bg-app；小船 logo-icon 形 + currentColor/--color-brand；胶囊条轨道 --color-neutral-3、填充 --color-brand，宽约 360px、高 4px，aboat-full-page-loading-bar 呼吸动效（可减少动效静态约 48%）。Figma 19655-12494components/full-page-loading.css · full-page-loading.js · learn.html「开始学习」
弹窗遮罩.modal-overlay + 面板（如 .stats-modal / .message-modal）打开时可有过渡；关闭时透明度淡出（--modal-fade-duration），见 components/modal-instant-close.js · aboatModalLayer.applyCloselearn.html
自定义日期浮层stats-range-custom-popover-in 0.34s；降级为纯淡入 0.2slearn.html
学习总时长老虎机每位数字窗 stats-user-metric-reel-window-in 0.32s，错位 delay；条带 JS 滚动至目标值learn.html
总体摘要数值跳动stats-overall-heading-tick 0.42s；切换时间范围时平均分钟数可缓动learn.html
图表卡片入场--stats-entrance-duration 0.52s、--stats-entrance-y 14px；类 stats-total-chart--entered 与专项卡 stats-skill-cards--inview 联动learn.html
图表内 SVG折线：clip 面积展开 ~1.08s、描边 dashoffset ~1.18s、数据点层 0.55s 淡入；柱图：各柱 opacity 错开 ~0.48s；hover 圆点放大learn.html JS playStatsChartEnterAnimation
图表 Tooltip仅透明度显隐（约 0.2s）；相对数据点置于上/下方，无入场位移learn.html
设计系统文档页侧栏/代码块等以 0.15～0.2s 过渡为主docs.css
组件化时可复用的「模式」
  • 软减速出场：--motion-ease-out-soft，用于区块入场、弹层、Reveal。
  • 自下淡入 + 上移：opacity + translateY（约 14～44px），时长 0.52～0.75s。
  • 描线 / 填色：SVG stroke-dashoffset 或 clip 高度，配 --motion-ease-line-draw 与较长时长。
  • 错开子项：transition-delay 或 animation-delay 按序号递增（如 0.05s 步进）。

交互音效 Sound

Web Audio API 程序化合成 · 事件 ID 与 components/sfx.js 一致；主音量 --sfx-master-gain（tokens/sfx.css）。品牌向仪式感音效见 aboat.sfx.brand.*（奥德赛隐喻 · 非配乐短音），规则见 设计规则.md §1.1。

prefers-reduced-motion data-sfx="off"
使用原则
原则 说明
与动效一致触发时机与 tokens/motion.css 语义对齐；系统「减少动态效果」开启时不播放。
可关闭<html data-sfx="off"> 全局静音；局部用 data-sfx="none"。
克制高频操作（如每次按键）宜极轻或默认不绑音效，避免疲劳。
气质偏清晰、温暖、不刺耳；可与品牌「进度」系情绪呼应（轻快确认感）。
品牌向仪式感 / 背景气质用 aboat.sfx.brand.*；非旋律配乐，短音为主；长垫音仅草案、不宜默认自动播（见设计规则 §1.1）。
命名约定
  • 事件 ID（代码）：aboat.sfx.<类别>.<动作>，全小写，段间用 .。
  • 若导出为文件（可选）：sfx-<类别>-<动作>.webm 或 .mp3，与资源目录约定一致即可。
Token
主增益
--sfx-master-gain
0～1，默认 0.52；全站以此 Token 为准（tokens/sfx.css）
引入与自动绑定
<!-- tokens/index.css 已含 sfx.css -->
<script src="./components/sfx.js"></script>
<script src="./components/sfx-behavior.js"></script>
<script src="./components/toast.js"></script>

sfx-behavior：按钮/链接 .btn、.range-segment__btn、.aboat-radio / .ds-radio-chip；类名含 modal-overlay 的遮罩在 is-open 切换时播放开/关。Toast 入场由 toast.js 调用 feedback.toast.in。

事件清单（3.1 基础触控与按钮）
事件 ID 触发场景 听感方向 建议时长 优先级
aboat.sfx.ui.tap.primary主按钮、主要确认短促、略饱满确认感～50–120 msP0
aboat.sfx.ui.tap.secondary次要、描边按钮比主按钮更轻、更短～40–80 msP1
aboat.sfx.ui.tap.ghost图标 / 幽灵按钮极轻、几乎无尾音～30–60 msP1
aboat.sfx.ui.tap.disabled不可点区域闷、短否定感或触觉～40–80 msP2
aboat.sfx.ui.scroll.snap横向滚动吸附、滚轮刻度（如月历换月）轻短刻度；页面侧通常 每卡一声，用 playScrollSnapVelocity(px/s) 随速变调～18–30 msP2
事件清单（3.2 选择与开关）
事件 ID 触发场景 听感方向 建议时长 优先级
aboat.sfx.ui.toggle.onSwitch / 复选开上行感～80–150 msP1
aboat.sfx.ui.toggle.offSwitch / 复选关温和落下，与 on 成对～80–150 msP1
aboat.sfx.ui.radio.select单选（.aboat-radio）轻点 + 极短共鸣～60–100 msP1
aboat.sfx.ui.segment.change时间范围分段、Tab轻滑咔嗒或软切换～50–100 msP1
事件清单（3.3 表单与输入）
事件 ID 触发场景 听感方向 建议时长 优先级
aboat.sfx.form.focus输入框获焦（可选）极轻，或默认关闭～30–60 msP2
aboat.sfx.form.error校验失败柔和警示～150–300 msP1
aboat.sfx.form.success字段级成功短促正向叮～80–150 msP2
事件清单（3.4 容器与导航）
事件 ID 触发场景 听感方向 建议时长 优先级
aboat.sfx.overlay.open模态打开轻气声垫～100–200 msP1
aboat.sfx.overlay.close模态关闭与 open 配对，略短更轻～80–180 msP1
aboat.sfx.nav.sheet.down底部表 / 抽屉拉出低频轻滑入～120–250 msP2
aboat.sfx.nav.sheet.up抽屉收起与 down 对称～120–250 msP2
aboat.sfx.nav.pop返回 / 出栈轻退感～80–150 msP2
事件清单（3.5 反馈与状态）
事件 ID 触发场景 听感方向 建议时长 优先级
aboat.sfx.feedback.success操作成功温暖短音、略上升～150–350 msP0
aboat.sfx.feedback.warning警告 Toast中性偏暖～150–300 msP1
aboat.sfx.feedback.error严重错误可与 form.error 区分轻重～150–350 msP1
aboat.sfx.feedback.toast.inToast 入场极轻垫音～60–120 msP2
aboat.sfx.feedback.toast.outToast 消失通常静音—P3
事件清单（3.6 时间与等待）
事件 ID 触发场景 听感方向 建议时长 优先级
aboat.sfx.time.wait.loop加载中循环play 仅单次脉冲（试听）；真实循环用 startWaitLoop() / stopWaitLoop()单次～22 ms；循环间隔约 1.4 sP3
aboat.sfx.time.wait.end加载结束轻落定或与 success 合并～80–150 msP2
事件清单（3.7 学习 / 业务向 · 可选）
事件 ID 触发场景 听感方向 建议时长 优先级
aboat.sfx.learning.progress.tick进度条前进一格极轻 tick～20–50 msP3
aboat.sfx.learning.complete单课 / 单任务完成F 大三和弦分解（正弦 + 低通、慢步进），与阶段完成同系气质，非街机式爬音～0.6–0.9 sP2
aboat.sfx.learning.streak连续打卡等里程碑可分档可变P3
事件清单（3.8 品牌叙事 · 仪式感 / 草案）

与《奥德赛》漂泊—归乡隐喻一致：**自然向**（海水、港湾、海风、鸥鸣等程序化声景）与 **功能向短动机**（公有领域经典之极短片段 + 原创调式动机）并列；整体仍是 **西方史诗抽象 × AI 干净合成**，非完整配乐。下列为可试听草案，迭代时以产品为准。

事件 ID 触发场景 听感方向 建议时长 优先级
aboat.sfx.brand.session.arrive登录成功 / 进入学习会话极轻风噪垫 + 低音区纯五度（正弦、慢起音）— 偏沉静入港，非「升级」高光～500–700 msP2
aboat.sfx.brand.phase.complete完成一阶段训练 / 大里程碑大三和弦慢速分解（正弦、低动态）— 沉淀感，非街机式通关铃～650–900 msP2
aboat.sfx.brand.beacon.ping关键节点提示 / 「灯塔」式轻指引中音区下行滑音、较长尾音 — 远处信号、柔化～150–260 msP3
aboat.sfx.brand.chapter.turn章节切换 / 叙事转折中低音下行扫频 + 极轻中频点（非明亮叮声）～170–260 msP3
aboat.sfx.brand.ambient.sea.draft海面 / 远海气质垫（草案）极低 + 风噪垫 — 非循环、约 2.2s～2.2 sP3
aboat.sfx.brand.ambient.waves.draft海浪拍岸（草案）多段浪涌 + 低频涌动～1.7 sP3
aboat.sfx.brand.ambient.harbor.draft港湾 / 系泊（草案）中频空间 + 码头低频脉冲～2.1 sP3
aboat.sfx.brand.ambient.breeze.draft轻海风垫（草案）偏高、薄风噪～1.5 sP3
aboat.sfx.brand.ambient.gull.draft海鸥啼（草案）两声短啼～0.5 sP3
aboat.sfx.brand.motif.ode.draft正向反馈 / 大里程碑（可选）贝多芬《欢乐颂》首句前四音 — 公有领域；正弦 + 低通、慢步进（弱化街机感）～0.75–0.85 sP3
aboat.sfx.brand.motif.furelise.draft轻量正向 / 发现（可选）贝多芬《致爱丽丝》：第一小节止（交替 + B–D–C–A），不进入第二句 — 公有领域；柔化步进～1.0–1.1 sP3
aboat.sfx.brand.motif.twinkle.draft温和提示 / 儿童向（可选）传统儿歌《小星星》首句前四音 — 公有领域；柔化～0.7–0.8 sP3
aboat.sfx.brand.motif.fate.draft强调 / 转折（慎用）贝多芬《第五交响曲》「命运」动机前四音 — 公有领域；略放慢～0.65–0.75 sP3
aboat.sfx.brand.motif.amazing.draft沉静 / 回顾（可选）《奇异恩典》首句前四音 — 公有领域；慢步进～0.8–0.95 sP3
aboat.sfx.brand.motif.voyage.draft旅途 / 小节完成（可选）原创多利亚四音上行 — 品牌独有；柔化、慢于旧版～0.55–0.65 sP3
维护与标注

迭代时可在内部文档为每条补充：保留 / 删除 / 合并；是否与动效 Token 对齐（如 --motion-duration-*）；默认是否开启（P0 主路径建议默认开，P3 默认关）。

试听（全部事件 ID）

试听区已 data-sfx="none"，避免与全局点击音叠加。全产品默认音量由 tokens/sfx.css 的 --sfx-master-gain 决定；下方滑块与 sfx.js 每次播放前读取同一变量（试听满意后请把数值写回该 Token）。月历等横向滑动请用 aboatSfx.playScrollSnapVelocity(速度px/s)：学习页月历为每换一张卡片（月份索引变化）响一声，音色仍随当时速度变化；设计系统内试听 scroll.snap 为中等速度示例。

UI · 交互与控件 aboat.sfx.ui.*
aboat.sfx.ui.tap.primary P0
主按钮
aboat.sfx.ui.tap.secondary P1
次要 / 描边
aboat.sfx.ui.tap.ghost P1
图标 / 幽灵
aboat.sfx.ui.tap.disabled P2
不可点
aboat.sfx.ui.scroll.snap P2
滚动吸附 / 月历
aboat.sfx.ui.toggle.on P1
开关开
aboat.sfx.ui.toggle.off P1
开关关
aboat.sfx.ui.radio.select P1
单选
aboat.sfx.ui.segment.change P1
分段 Tab
表单 aboat.sfx.form.*
aboat.sfx.form.focus P2
输入获焦
aboat.sfx.form.error P1
校验错误
aboat.sfx.form.success P2
字段成功
遮罩与浮层 aboat.sfx.overlay.*
aboat.sfx.overlay.open P1
模态开
aboat.sfx.overlay.close P1
模态关
导航与容器 aboat.sfx.nav.*
aboat.sfx.nav.sheet.down P2
抽屉下
aboat.sfx.nav.sheet.up P2
抽屉上
aboat.sfx.nav.pop P2
返回
反馈与状态 aboat.sfx.feedback.*
aboat.sfx.feedback.success P0
操作成功
aboat.sfx.feedback.warning P1
警告
aboat.sfx.feedback.error P1
严重错误
aboat.sfx.feedback.toast.in P2
Toast 入（showToast）
aboat.sfx.feedback.toast.out P3
Toast 出
时间与等待 aboat.sfx.time.*
aboat.sfx.time.wait.loop P3
加载循环
aboat.sfx.time.wait.end P2
加载结束
学习 / 业务向 aboat.sfx.learning.*
aboat.sfx.learning.progress.tick P3
进度 tick
aboat.sfx.learning.complete P2
单课完成
aboat.sfx.learning.streak P3
连续打卡
品牌 · 仪式感（草案） aboat.sfx.brand.*
aboat.sfx.brand.session.arrive P2
登录 / 入港
aboat.sfx.brand.phase.complete P2
阶段训练完成
aboat.sfx.brand.beacon.ping P3
灯塔 / 指引
aboat.sfx.brand.chapter.turn P3
章节转折
品牌 · 荷马式自然声景（草案） 海水 · 港 · 风 · 鸥
aboat.sfx.brand.ambient.sea.draft P3
远海 / 海面垫
aboat.sfx.brand.ambient.waves.draft P3
海浪拍岸
aboat.sfx.brand.ambient.harbor.draft P3
港湾系泊
aboat.sfx.brand.ambient.breeze.draft P3
轻海风
aboat.sfx.brand.ambient.gull.draft P3
海鸥
品牌 · 旋律动机（草案） 功能向短句 · 公有领域 / 原创
aboat.sfx.brand.motif.ode.draft P3
欢乐颂（四音）
aboat.sfx.brand.motif.furelise.draft P3
致爱丽丝（第一小节止）
aboat.sfx.brand.motif.twinkle.draft P3
小星星（首句四音）
aboat.sfx.brand.motif.fate.draft P3
命运（四音）
aboat.sfx.brand.motif.amazing.draft P3
奇异恩典（首句四音）
aboat.sfx.brand.motif.voyage.draft P3
归航动机（原创）

Toast 浮层提示

顶部居中弹出 · 4 种状态 · 自动消失 · 来源 Figma 17015:15431 / 17015:14609

组件预览
复制成功
已同步到云端
网络连接不稳定
操作失败，请重试
交互演示
规格
属性 值
背景var(--color-card-4) 纯白
圆角24px（胶囊型）
内边距8px 16px 8px 9px
图标间距8px
图标尺寸24 × 24px
文字var(--text-title3-size) · Regular · var(--color-text-2)
阴影var(--shadow-elevation-500)
位置fixed · top: 20px · left: 50% · translateX(-50%)
默认时长1600ms 自动消失
4 种状态 · 对应 Figma 图标
type 图标 Figma 对应 使用场景
success check_circle 复制、保存、操作成功
info info 中性信息、状态同步
warning report_problem 网络不稳定、注意提示
error dangerous 复制失败、操作出错
用法
/* 1. 引入 CSS + JS */
<link rel="stylesheet" href="./components/toast.css">
<script src="./components/toast.js"></script>

/* 2. 调用 */
window.showToast('复制成功');                          // success，1600ms
window.showToast('已同步到云端', 'info');
window.showToast('网络连接不稳定', 'warning', 4000);
window.showToast('操作失败，请重试', 'error');

专项任务图标

32px 圆底 · 18×18 线型 · 与 Figma 14933:4904 规格一致；矢量命名与资源总表 11:490 对齐。

组件预览
样式文件
components/task-skill-icon.css
矢量：assets/icons/skills/*.svg（阅读 book-02、写作 pencil-02、口语 message-text-01、听力 headphones、综合 atom）
阅读
写作
口语
听力
综合
用法
<!-- 引入样式 -->
<link rel="stylesheet" href="./components/task-skill-icon.css">

<!-- 容器类名：reading | writing | speaking | listening | comprehensive -->
<span class="task-card-icon reading" aria-hidden="true">
  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">…</svg>
</span>
/* 路径与 assets/icons/skills/book-02.svg 等同；内联 svg 才能使 currentColor 吃到专项 token */