Page Positioning
规范页，不是业务页页面以规则说明、状态对照、规范复用和查阅效率为优先目标。
O-00
Design Objectives
OCTAVE Design System
这是一个以设计系统说明和组件对照为核心的规范页面，重点放在清晰、克制、可比较，以及跨中英文字体体系的一致性。
文档型
克制
可比较
Visual Character
克制、理性、编辑式以黑白对比为骨架，辅以低饱和品牌蓝、暖橙强调和轻层级表达。
Core Principle
比较效率优先先章节，再说明，再组件状态展示，保证不同形态和层级可以直接对照。
ST-001
Source Snapshot
Figma
All / 75:6739
Updated
2026-04-03
EN Typeface
Graphik
CN Typeface
Noto Sans S Chinese
ST-002
Core Principles
- Typography 章节标题与正文说明分层明确，中英文字体体系保持统一节奏。
- Components 组件示例优先服务状态对照，而不是强调装饰感和视觉表演。
- Layout 区块边界依赖留白、浅色底板和细边框，而不是厚重装饰。
O-01
Tokens
Color, Type, Space
当前已确认的基础 token 包括颜色、字体、间距、圆角，以及大屏扩展时建议延续的节奏规则。
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`。这里重点展示层级、字号和行高关系。
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
State Reference Board
已确认状态以并排方式展示，便于横向比较不同组件在 `Default / Pressed / Disabled` 下的表现。
Default
baseline appearanceRectangle Button
Input Field
Pill + Tag
Selected Fill
Selected Stroke
Disabled
Pressed
interaction confirmationRectangle Button
Input Field
Pill + Tag
Selected Fill
Selected Stroke
Closable ×
Disabled
non-interactive appearanceRectangle Button
Input Field
Pill + Tag
Disabled
Unavailable
Archived
已确认状态仍是 `Default / Pressed / Disabled`。`Hover / Focus / Loading` 继续留在待确认区，后续补充。
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
这一章是从 mobile 语言向 pad / 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
Layout Principles
Wide-Screen Documentation Layout
Web 端规范页建议采用目录、正文、预览相结合的阅读方式，以提升检索效率和组件比较效率。
LY-001
Wide-Screen Structure
目录
编号
Web 端规范页建议采用固定顶栏、左侧章节索引、中央规范正文，以及可横向比较的组件画板。
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 页面继续校准。