YunLeFun Design 设计体系

YunLeFun Design 是云乐坊的设计系统：共同的设计原则、品牌语言、交互规范，以及落实这些规范的组件、样式和文档。

Design 与 UI

概念	回答的问题	在本项目中的落点
Design	产品应呈现怎样的品牌、信息层级和使用体验？	YunLeFun/design 仓库与设计规范
UI	用户看见和操作的界面如何实现？	样式、按钮、表单、导航、弹窗和页面组合
@yunlefun/ui	Web 项目如何复用设计基础？	与 Vue 无关的 SCSS 样式和 --ylf-* 变量
@yunlefun/vue	Vue 项目如何复用交互控件？	Ylf* 组件与 Nuxt 接入

UI 是 Design 在界面上的实现。仓库名表达整个体系，包名表达安装后的具体用途。@yunlefun/design-monorepo 是私有工作区根包，不是供业务安装的 SDK。

统一的层次

YunLeFun Design
├── 设计规范：品牌、信息层级、交互、文案、可访问性
├── 设计基础：@yunlefun/ui 的颜色、字体、间距、动效、圆角、阴影和主题
├── 界面组件：@yunlefun/vue 的 Ylf* 组件
├── 页面组合：通过 Registry 分发的可定制源码
└── 维护工具：metadata、工具函数与文档预览

业务应用 → 使用设计基础、组件和页面组合 → 负责业务数据和流程

目录与分发状态见子包职责，组件实现边界见设计体系架构。页面组合是扩展方向，当前 Registry 只有 tokens、Button 和 Dialog 三个条目。

品牌方向：晴空蓝为主，高饱和纯色点缀

云乐坊面向寻找实用工具、体验应用和发布作品的人。界面应清晰、轻盈、有趣，让人容易找到内容、理解状态并完成操作。

• 晴空蓝承担日常交互：主按钮、链接、选中状态与焦点。
• 纯色强调默认晴空蓝，辅助色用于局部品牌表达：明黄用于精选，青、珊瑚橙、桃粉用于有明确用途的内容分类；accent 变体共用 tone 接口。
• 中性表面承载正文与表单：浅色用晴空白与灰蓝，深色用深蓝夜空。
• 语义色表达成功、提醒和错误；同一种状态在不同应用里保持同一种含义。

云景是可选的品牌模块。首页可以突出作品与氛围，设置页需要突出分组、字段和保存反馈；共同的控件和层级让它们属于同一套产品。

按用途使用字体和装饰

场景	字体角色	视觉强度
品牌字、首页展示标题	wordmark / display	可使用展示字体与少量纯色强调
页面、区块、卡片标题	heading	系统无衬线，靠字号与间距组织内容
正文、按钮、表单、数据	body	优先可读性和稳定布局

圆角表达控件与容器的层次；阴影表达浮层关系；动效回应用户操作。静态信息块无需通过上浮、发光或持续动画暗示可点击。

规范和代码的权威来源

内容	维护位置
原则、视觉角色与使用规则	本页与视觉基础
可执行的主题数值	packages/ui/styles/css-vars.scss
组件的公开接口和行为	packages/vue/components/Ylf*.vue 与对应组件文档
Registry 分发关系	根目录 registry.json
组件索引	从组件文档生成的 metadata
产品业务规则	各业务应用仓库

更改共享样式时同步示例、文档和 Registry 生成物。应用中的旧变量通过适配层逐步映射到共享变量，避免再独立维护一套基础主题。

当前统一到哪里

共享库统一颜色、字体、间距、阅读宽度、圆角、阴影、动效与可选背景。品牌标志与主站对齐，文档站使用同一份 token 与真实组件，并提供主题交互预览。色彩接口见色彩与组件，页面布局和使用边界见品牌与界面。

主站目前仍使用本地 --ui-*、部分 --ylf-* 和 App* 封装。主站与其他应用的依赖升级、变量映射和页面迁移按应用迁移执行，不能把设计库更新等同于所有线上应用已完成改版。