紫罗兰色创作者工作台设计系统
一套浅色桌面型工作台的视觉规范：薰衣草紫画布 + 白色 28px 大圆角应用壳 + 深紫主操作，粉/橙/薄荷青只用于表达业务状态。高密度、紧凑、数字醒目。
什么时候用
- 用户要做一个创作者工作台 / 内容运营后台 / 个人业务 dashboard / 数据看板
- 用户指定要用「薰衣草紫」「浅紫」「violet」这类配色做后台或仪表盘
- 用户拿了一份现有页面，要求「保持这个风格改」
- 用户要求在这个风格下新增模块、卡片或图表
不要用在：营销落地页、C 端活动页、移动端 App 界面。这套规范是桌面优先的高密度仪表盘，不是响应式落地页。
资产清单
| 文件 | 什么时候动它 |
|---|---|
assets/starter.html |
默认起点。 完整可运行的骨架页（画布→应用壳→80px 侧栏→顶栏→双列主体），单文件自包含，复制后改文案和数据即可 |
assets/tokens.css |
给已有项目接入时用。全部设计令牌落成 CSS 变量 + 按钮/卡片/输入/徽章/导航的工具类 |
references/design-system.md |
需要精确数值、要新增组件、或要核对「原设计到底怎么定的」时读。这是完整规范原文 |
两份 CSS 资产数值同源（都来自 references/design-system.md），为的是各自能独立使用——starter.html 里内联了一套同样的变量，不要试图让它们互相引用。
执行流程
- 先确定形态。桌面工作台还是已有页面改造？
- 新做 → 复制assets/starter.html
- 改造 → 引入assets/tokens.css，把现有类名往工具类上靠 - 保住骨架：80px 图标侧栏、44px 胶囊搜索、28px 应用壳、右侧固定 320px 日程列。这四处是识别特征，动了就不像这套设计了。
- 只换内容：文案、指标、模块数量可以随便改。
- 拿不准就查：要加表格、图表、弹层、Toast 这类原文没细写的组件时，读
references/design-system.md第 4、6 节再动手。
硬性规则
违反任何一条，出来的就不是这个设计：
- 画布
#D7C8F9，应用壳/卡片#FFFFFF，主操作深紫#201934——三个底色不能换 - 圆角：应用壳 28px，标准卡 16px，模块卡/列表行 12px，按钮和徽章一律 999px 胶囊
- 阴影必须是紫调（
rgba(86,61,143, …)），不许出现纯黑硬阴影 - 数字统一
font-variant-numeric: tabular-nums - 层级靠字重、尺寸、颜色，不许靠放大字号。标题 20px 封顶，卡标题 14px，正文 12–14px，元信息 9–11px
- 间距走 4px 基础单位；卡片之间 12px，左右主列之间 14px，顶栏操作之间 16px
- hover 只做
translateY(-1px / -2px)，箭头做translateX(2px)；时长 150–500ms，缓动cubic-bezier(.16, 1, .3, 1) - 每张卡最多一个高饱和强调色（粉/橙/薄荷青三选一），选中态必须「深紫实底 + 白色前景」，不能只靠颜色微差
- 侧栏只放图标，名称走
title/ tooltip - 必须支持
prefers-reduced-motion
反过来，这些绝对不能做：改成深色模式、霓虹赛博、高对比蓝企业后台；尖锐直角、厚重黑边、强玻璃模糊（玻璃感只允许出现在 Hero 内的白色半透明胶囊）；把所有卡片染成高饱和色；混用多套图标风格（统一细线 + 圆角端点 + 16–20px）。
响应式怎么处理
原设计的真实状况是「桌面优先 + 窄屏横向溢出」——它在 390px 下保留桌面列宽并产生横向滚动，并非响应式堆叠。
所以做新的页面时：
- 用户没提移动端 → 如实保留桌面布局，不要宣称「已适配移动端」
- 用户明确要移动端 → 用 assets/starter.html 末尾那段被注释的 @media (max-width: 767px) 规则（单列堆叠、侧栏抽屉化、Hero 状态区下置、固定宽度改 minmax(0, 1fr)、触控目标 ≥ 44×44px）
字体
字体栈首位写了 Inter，但仓库里没有 @font-face 也没有外链——装了就用 Inter，没装自动回退 Noto Sans SC / PingFang SC / 微软雅黑。这是刻意的零外部依赖。要真正加载 Inter，由使用方自行接入字体服务。
安全边界
纯静态资产：一个 HTML、一个 CSS、一份 Markdown 文档。不发起网络请求、不读取路径外文件、不执行远程脚本。starter.html 里那段 JS 只做复选框状态切换和侧栏选中态，不做别的。
