品牌与界面
从云乐坊主站的晴空与云景、云游君博客的留白与细网格出发，用一致的颜色、排版和交互连接不同产品。文档站本身也是这套规范的使用者。
参考与取舍
| 参考 | 采用的语言 | 在 Design 中的落点 |
|---|---|---|
| 云乐坊主站 | 晴空蓝、云景、现有品牌标志 | 共享主色、天空与云形 token、YlfLogo |
| 云游君的小站 | 留白、轻导航、细网格与个人气质 | 首页的低对比网格、安静的阅读区域 |
| Valaxy Theme Yun | 可配置的颜色变量、明暗主题和页面分工 | 语义 token、可选背景样式、文档内容与外壳分离 |
这些参考帮助确定设计方向。Design 不依赖 Valaxy 的运行时，不引入博客的头像、社交入口、烟花或全屏开场动画。文档首先需要快速定位、稳定阅读与可操作的示例。
品牌标志
YlfLogo 使用主站已有的 100:70 标志比例。标志使用晴空蓝，文字使用正文主色；暗色下读取同名 token。不要用通用云图标替代正式标志，也不要拉伸、持续变色或在标志后叠加大面积发光。
云朵承担品牌氛围和插图的角色，与标志分工。没有文字的标志放在链接中时，由链接提供可访问名称，例如“云乐坊首页”。
<template>
<a href="/" aria-label="云乐坊首页">
<YlfLogo layout="horizontal" size="sm" />
</a>
</template>标志四周至少留出其高度约四分之一的空白。首次出现优先与品牌名称组合，小尺寸导航可仅显示标志。YlfLogo 保留 size、layout、wordmark 接口，图形已统一到主站版本。
表达的强弱
| 界面 | 可以强调 | 保持安静 |
|---|---|---|
| 品牌首页 | 一处云景、展示标题、主要入口 | 次要入口、正文背景 |
| 文档首页 | 可操作组件、颜色样本、接入入口 | 阅读说明和底部导航 |
| 文档正文 | 当前章节、代码、演示、重要提示 | 正文与表单背景保持中性 |
| 设置与管理 | 分组、字段状态、保存反馈 | 品牌插图与装饰动效 |
| 作品展示 | 内容封面、一处精选强调 | 筛选、列表密度、状态含义 |
晴空蓝用于主操作和选中状态。明黄 #facc15、青色 #06b6d4、珊瑚橙 #ff6b4a、桃粉 #ec4899 与鲜绿 #22c55e 提供高饱和纯色强调。一个内容区域优先选择一到两种强调色；错误和提醒仍由语义色表达。纯色与前景成组使用，见色彩与组件。
首页构图
文案左对齐，组件预览承担品牌展示。文字不压在云朵或强调色块上；背景只在预览区域出现。相比重复的功能卡片，可操作的控件更能解释这套设计语言。
桌面
┌───────────────────────────────────────────┐
│ 标志 / 搜索 导航 / 主题 │
├────────────────────┬──────────────────────┤
│ 品牌、标题、简介 │ 晴空与云 │
│ 主要入口 │ 可操作的组件预览 │
├────────────────────┴──────────────────────┤
│ 视觉基础入口 色彩样本 字体样本 │
├───────────────────────────────────────────┤
│ 理解设计 开始构建 逐步统一 │
└───────────────────────────────────────────┘
手机：介绍 → 组件预览 → 视觉样本 → 文档入口首页由 DesignHome 编排内容，DesignPlayground 管理局部主题与强调色选择，DesignSpecimens 展示基础样本。预览直接使用 @yunlefun/vue 的 Button、Card、Switch、Badge；外观来自 @yunlefun/ui，不复制一套模拟控件。
文档阅读与导航
- 顶部保留品牌、搜索、主要入口与主题切换。导航使用文本，图标补充含义。
- 左侧按“设计语言 / 开发与接入 / 样式与实验”组织；当前项以背景和字重共同强调。
- 阅读列最大 720px，标题上下留白体现层级；正文不使用装饰字体。
- 右侧目录定位本页章节，移动端收起为目录控件；长表格和代码在容器内部滚动。
- 文档预览与站点主题独立。宽度按钮表示可用空间内的上限，窄屏不会强制拉开 768px 画布。
- 源码默认收起，主题、视口和源码按钮都有明确名称与键盘焦点。
状态与交互
| 状态 | 视觉与文案 |
|---|---|
| 默认 / 悬停 | 先通过颜色和边框反馈，保留控件尺寸 |
| 键盘聚焦 | 使用可见蓝色焦点，不能只依靠 hover |
| 选中 | 同时提供形状、标记或文字，不能只换颜色 |
| 加载 | 保留操作名称与位置，提供忙碌状态，防止重复触发 |
| 成功 | 确认已经完成的动作，使用成功语义色 |
| 错误 | 说明原因和恢复动作，与相关字段相邻 |
| 空状态 | 解释这里会显示什么，提供一个实际可执行的下一步 |
高频界面默认不循环漂浮或发光。动画回应用户的操作；关闭装饰不应改变信息结构。文档首页“夜空模式”和“强调色”只修改本地预览，不覆盖阅读主题。
交付检查
检查浅色与深色、390px 手机与桌面、长中文文案、键盘顺序、可见焦点、搜索及弹层。使用系统字体回退时布局仍需成立；降低动态效果后仍能理解交互结果。