O-00
Overall Design Objectives
OCTAVE Design System
- 这是一个以设计系统说明和组件对照为核心的规范型页面，不是单一业务页面。
- 整体目标偏向清晰、克制、可比较，优先保证规则展示效率，而不是情绪化表达。
- 设计重心是文档化、组件状态对比、规范复用和跨中英文字体体系的一致性。
- 风格上更偏专业、理性、编辑式，而不是营销化或装饰化。
ST-001
System Snapshot
O-01
Tokens
Color, Type, Space
C-001
Color Roles
Primary1
#FFFFFF 基础表面Primary2
#000000 主对比色Primary3
#5E82AB 品牌蓝Secondary2
#CECECE 边框 / 分隔Secondary3
#ECECED 浅灰底板Tertiary
#F08E3D 强调信息
C-002
Typography
Display 36 / 44
章节开场H1 32 / 40
一级标题H2 24 / 30
二级标题Body 1 16 / 24
正文说明Caption 12 / 16
辅助信息
英文字体以 `Graphik` 为准，中文使用 `Noto Sans S Chinese`。网页展示稿采用接近的 editorial 组合来强化文档感。
C-003
Space + Radius
8
12
16
24
32
48
4px
8px
12px
`4px` 继续作为控件层主圆角；`8px / 12px` 只作为 pad / web 容器扩展建议。
O-02
Components
Buttons, Forms, States, Layers, Navigation
C-010
Interactive State Lab
Rectangle Buttons
已确认 `Default / Disabled / Pressed`。`M` 高度抽样为 `42px`，`Secondary` 为 `1px` 深色描边。
Input Field
输入框目前以简洁轻描边为主，大屏扩展时建议控制单列宽度在 `320-480px`。
Pill + Tag
Selected Fill
Selected Stroke
Disabled
`Pill` 已确认存在 `Unselected / Selected / Disabled`，整体保持克制的小圆角表达。
Dialog Preview
Confirm archive?
Rich Dialog 在当前系统里强调信息结构和 CTA 编排，而不是重装饰。
C-020
Input System
对应 `DESIGN.md 6.2`：已覆盖 `Text + form / form / Button + form / Content + form / Click` 的表单语义，整体保持轻描边、业务表单优先。
C-021
Cards
Demo Surface
Soft Comparison Board
卡片更多承担展示底板，而不是强装饰业务卡片。背景浅、边框轻、阴影弱。
对应 `DESIGN.md 6.3`：当前系统里的卡片更像演示容器，方便对照组件状态，而不是高装饰信息卡。
C-022
Tag + Status
对应 `DESIGN.md 6.4`：已把 `Tag` 的单值/多值形态和 `Pill` 的选中填充、选中描边、可关闭、禁用状态补到网页里。
C-023
Dialogs + Floating Layers
Rich Dialog / 2 CTA
强调内容结构和 CTA 编排，适合确认、解释和二次操作。
Bottom Sheet / 1 Button
移动端语义更强，适合轻决策和补充信息。
对应 `DESIGN.md 6.5`：网页现在明确展示了 `Rich Dialog` 和 `Bottom Sheet` 两类浮层，并区分 `1 CTA / 2 CTA` 的操作布局。
C-024
Navigation
对应 `DESIGN.md 6.6`：导航部分已把 `Tab Selector / Primary` 的 `Left`、`Left & Right`、`Equally Divided` 三种布局补进网页，并保留 `2px` 下划线选中态。
O-03
Responsive Proposal
Mobile to Pad to Web
VP-375
Mobile
- 视口：`375-430px`
- 栅格：`4` 列
- 页面边距：`24px`
- 结构：单列堆叠
VP-768
Pad
- 视口：`768-1024px`
- 栅格：`8` 列
- 内容容器：`720-864px`
- 结构：说明 + 组件双栏
VP-1280
Web
- 视口：`1280-1440px+`
- 栅格：`12` 列
- 内容容器：`1200-1280px`
- 结构：目录 / 正文 / 预览
RS-001
Expansion Rules
Scale layout first
先扩容器、栏位、留白和并排关系，不急着放大控件本身。
Control height stays stable
按钮和输入框仍以 `42px / 48px` 为主，高度不因大屏显著增加。
Desktop avoids mobile full-width CTA
Web 主按钮改为内容驱动宽度，建议最小宽度 `160px`，不继续默认满宽。
Bottom sheet becomes dialog or drawer
在 pad / web 中，底部抽屉语义建议转译成浮层卡片、中心弹窗或右侧抽屉。
O-04
Web Page Anatomy
How This Site Is Structured
LY-001
Wide-Screen Structure
目录
编号
这是参考长页式设计文档的阅读方式所做的 OCTAVE 化改写：固定顶栏、左侧章节索引、中央规范正文、可横向比较的组件画板。
LY-002
What Carries the Brand
- 黑白主对比仍是页面骨架
- 品牌蓝用于章节标签、边界高光和柔和渐变晕染
- 暖橙只承担强调，不参与大面积铺底
- 标题采用更具编辑感的衬线展示，正文仍回到 UI 字体系
- 组件演示区统一用浅底板承接，保证“比较”优先于“装饰”
O-05
Pending
Still Needs Figma Confirmation
PD-001
Unresolved Tokens
- `Gradient01-03` 的具体渐变色值
- 是否存在原始独立的大圆角体系
- 成功、警告、错误等业务状态色
PD-002
Interactive Details
- 按钮、输入框、弹窗的 `Hover / Focus / Loading` 细节
- `Archived` 按钮变体是否仍属于正式规范
- `M` 按钮 `14/20` 与 `15/22` 的最终口径
PD-003
Responsive Calibration
当前 pad / web 部分是基于 mobile 风格的推演版规范。你后续只要给我对应 Figma 页面链接，我就可以把这一版“提案”升级成“正式规范”。