Patterns
Sidebar Navigation
结构即设计。侧栏的质感来自精确的尺寸和信息层级，不来自圆角容器和彩色 badge。每一个视觉决策都从功能需求推导，不是美学偏好。
Interactive preview
点击切换导航项，选择不同 accent 变体。
Accent
设计决策
左轨不是气泡
2px inset 实线是导航系统的语言。圆角气泡是通知的语言。混用让用户认知系统产生冲突。
Count badge 用中性色
蓝色实心圆在视觉权重上超过导航项本身。数字传达信息量，不需要颜色强调优先级。
Icon 跟随文字颜色
Icon 和 label 同步变化。不允许 icon 保持灰色而 label 变蓝——状态必须整体切换。
一个 surface 一种 accent
切换 accent 等于切换产品上下文。同一侧栏混用多种 accent 会破坏语义一致性。
导航项状态
四种状态，每种只改变必要属性——不过度设计，不引入多余视觉元素。
Agents
Default
text #4e4e4e · icon rgba(10,11,13,0.45)
Agents
Hover
bg #fbfaf8 · text #0a0b0d
Agents12
Active
bg #eef0f3 · text #2A6FDB · 2px left rail
Agents3
With count
neutral #eef0f3 badge · not blue circle
Specifications
Sidebar width
220px (range 196–280px)Nav item height
36px standard · 32px compactNav item radius
4pxNav item padding
0 10pxIcon size
15px · stroke-width 1.5Label
13px · weight 500Group label
10px · weight 600 · uppercase · tracking 0.12emActive fill
#eef0f3Active text
#2A6FDBActive left rail
2px × 16px · vertically centered · roundedHover fill
#fbfaf8Count badge
11px · weight 600 · #eef0f3 bg · radius 4pxBorder right
1px solid rgba(10,11,13,0.08)Rules
- Active 指示器用 2px 左轨（inset），不用圆角气泡、底线、或背景色单独使用。三者组合才完整：fill + text color + rail。
- Count badge 始终用中性色（#eef0f3 / #777169）。Active 状态下 badge 跟随 accent 色但用极低透明度背景（accent + 10% opacity）。
- Icon 和 label 颜色同步变化。不允许 icon 保持灰色而 label 变蓝，或反之。
- Group label 是结构标记，不是可点击元素。10px uppercase，不加任何交互状态。
- Workspace switcher 无独立容器。hover 时 #fbfaf8 填充，圆角 4px，和普通 nav item 行为一致。
- 每个 console surface 只允许一种 accent。不允许在同一侧栏里混用多种 accent 色。
- Collapse 按钮放在底部，用分割线与导航区隔离。它改变布局，属于破坏性操作，视觉上不应与导航竞争。