文档站设计系统

本站采用内容优先、低装饰、高可读性的技术知识库视觉语言。

设计原则

• 搜索和核心任务入口优先于品牌展示。
• 使用中性色建立层级，以蓝色表示链接和主要交互，不用颜色单独传达状态。
• 正文在桌面端保持约 65–75 个字符的阅读宽度；移动端优先展示内容，次要筛选可折叠。
• 组件使用 4/8 像素间距系统、统一圆角和轻量边框，不混用视觉风格。
• 系统字体优先，避免文档站依赖外部字体服务。

语义 Token

Token	用途
--kb-accent	链接、焦点和主要操作
--kb-surface	卡片和筛选器表面
--kb-border	分隔与控件边界
--kb-muted	次要文字和辅助背景
--kb-success/warning/danger	带文本标签的质量状态

交互

• 所有可交互元素必须可通过键盘抵达，并具有 2–4px 可见焦点环。
• 最小触控区域 44×44px；过滤器和链接不能只依赖 hover。
• 状态切换使用 150–250ms 的颜色、边框或透明度过渡，不移动内容布局。
• prefers-reduced-motion 下关闭非必要过渡。

响应式基线

必须覆盖 375、768、1024、1440 像素宽度。表格和代码块在窄屏内局部滚动，不得造成页面级横向滚动。